Cómo agregar texto curvo en Divi

A todos nos gusta sobresalir de la competencia, y eso se puede lograr mostrando nuestro sitio web diferentemente. Por eso, puede resultar útil saber cómo crear diseños de texto curvo en Divi. Este tipo de diseño funcionaría para crear gráficos personalizados o diseños de encabezado especiales en Divi sin tener que usar un editor de fotos. Por lo general, esto implica tareas html y css más extensas, pero con Divi, el dominio de CSS no es imprescindible, ya que tiene muchas más opciones integradas para diseñar fácilmente su texto de una manera única.

En este tutorial, le mostraremos cómo crear dos plantillas de letras curvas que puede usar como una plantilla útil para sus propios fines. En el mejor de los casos, puede agregar algo nuevo a su caja. outils diseño para el futuro.

Vamos a empezar.

vista

Aquí hay una descripción general de los diseños de texto curvo que diseñaremos en este tutorial.

Para importar el diseño a su página, simplemente extraiga el archivo zip y arrástrelo a Divi Builder.

La idea básica detrás de la creación de texto curvo en Divi

Para crear texto curvo usando el método de este tutorial, debe agregar cada letra de su texto en un módulo de texto separado (querrá usar una fuente monoespaciada para obtener mejores resultados). Dale al módulo de texto una altura definida. A continuación, debe otorgar a cada módulo de texto una posición absoluta centrada para que se apilen uno encima del otro.

Esto es importante porque queremos que cada letra gire desde el mismo punto central. Después de eso, puede usar las opciones de transformación de Divi para rotar cada letra a lo largo del eje z para crear el texto curvo (considere usar una brújula en la clase de matemáticas para dibujar un círculo). También tenga en cuenta que la altura de cada módulo de texto determina el radio del círculo, lo que también aumenta la circunferencia del círculo y, por lo tanto, aumenta el espacio entre letras.

A continuación se muestra un ejemplo de 8 módulos de texto rotados en incrementos de 45 grados para crear un diseño circular perfecto para el texto. Agregué un borde blanco alrededor de cada módulo para que pueda ver fácilmente la rotación.

Y, aquí hay un ejemplo de los mismos módulos de texto que giran en incrementos de grados 20.

Commencer

Para comenzar, cree una nueva página en Divi. Luego, asigne un título a su página e implemente el generador Divi en el front-end. Seleccione la opción "construir desde cero". ¡Ahora estás listo para ir!

Crear el diseño de texto en forma de curva

Creando la sección y la línea

Comience creando una sección regular con una fila de una columna.

Antes de agregar nuestros módulos, continúe y actualice la configuración de la sección de la siguiente manera:

• Gradiente de fondo izquierdo: #1e003d
• Fondo degradado a la derecha - color: # 121212
• Tipo de gradiente: radial

• Imagen de fondo: [inserte la imagen del logotipo de aproximadamente 100 píxeles por 100 píxeles]
• Tamaño de la imagen de fondo: tamaño real

Guarde la configuración, luego cambie a la configuración de la línea y actualice lo siguiente:

• Ancho de canal: 1
• Ancho: 100%
• Altura mínima: 400px
• Altura: 40vw
• Altura máxima: 600px
• Acolchado personalizado: 0px alto, 0px abajo

Luego agregue el siguiente código CSS personalizado al elemento principal de la columna para asegurarse de que todos los módulos de texto permanezcan centrados horizontalmente:

Columna principal del elemento CSS:

mostrar la flexión; justificar-feliz: center;

Crear módulos de texto para cada letra

Ahora estamos listos para agregar nuestro primer módulo de texto con nuestra primera letra. Para hacer esto, agregue un nuevo módulo de texto a la columna de la fila y actualice lo siguiente:

• Contenido:d (solo la letra)
• Fuente de texto: Ubuntu Mono (cualquier fuente monoespaciada servirá)
• Color del texto del texto: #ffffff
• Tamaño del texto: 5vw (escritorio), 40px (teléfono)
• Orientación del texto: centro.
• Altura mínima: 200px
• Altura: 20vw
• Altura máxima: 300px

Luego actualice el origen de la transformación hacia abajo. Esto será importante para determinar dónde se produce la rotación del texto. Queremos que el módulo de texto gire en la parte inferior. Si bien no es necesario rotar este primer módulo de texto, es importante agregarlo aquí para que podamos transferir esta opción siempre que dupliquemos el módulo de texto para letras adicionales.

• Origen de la transformación: 100% (o inferior)

Luego agregue el siguiente CSS personalizado al elemento principal para darle al módulo de texto una posición absoluta.

Crear y rotar otros módulos de texto

Para crear el resto de las letras, duplicaremos el módulo de texto. Una vez que duplicamos el módulo de texto, todo lo que necesitamos es actualizar la letra y luego aumentar la rotación 45 grados con cada nuevo módulo.

Dado que los módulos de texto se superpondrán al principio, es mejor usar el modo de visualización con cable para realizar estas actualizaciones.

Continúe y duplique el módulo de texto, y luego actualice lo siguiente:

• Contenido: I
• Transformar el eje de rotación: 45 grados

Continúe el proceso de duplicar el módulo de texto, luego actualice el módulo de texto con una nueva letra y aumente la rotación de transformación en 45 grados. Aquí hay una lista de las 6 actualizaciones restantes del módulo de texto:

Módulo de texto 3

• contenido: v
• Transformar el eje de rotación: 90 grados

Módulo de texto 4

• contenido: i
• Transformación de la rotación del eje z: 135deg

Módulo de texto 5

• contenido: d
• Transformar la rotación del eje z: 180deg

Módulo de texto 6

• contenido: i
• Transformación de la rotación del eje z: 225deg

Módulo de texto 7

• contenido: v
• Transformar la rotación del eje z: 270deg

Módulo de texto 8

• contenido: i
• Transformar la rotación del eje z: 315deg

¡Es todo! Ahora mira el resultado final.

Resultado final

Consideraciones finales

La creación de diseños de texto curvo en Divi es un proceso bastante sencillo una vez que comprende cómo funciona. Este artículo debería ayudarlo a comprender la geometría involucrada en la configuración de módulos de texto para rotar en una curva. Y una vez que se realiza la configuración, además de algunos fragmentos de archivos CSS personalizados, puede usar la configuración de diseño incorporada de Divi para obtener un poco de creatividad. Espero que esto te sirva de inspiración para crear tus propios diseños de texto curvo.