Cómo crear diseños de texto curvo en Divi

Si está buscando una forma única de mostrar texto en una página web, saber cómo crear diseños de texto curvo en Divi puede resultarle útil. Este tipo de diseño funcionaría para crear gráficos personalizados o diseños de encabezados creativos en Divi sin tener que usar un editor de fotos. Por lo general, esto implica html y css más completos para lograr, pero con Divi, el CSS personalizado es mínimo y tiene muchas más opciones integradas para diseñar fácilmente su texto de maneras únicas.

En este tutorial, le mostraremos cómo crear un par de diseños de letras curvas que puede usar como una plantilla útil para sus propios fines. En todo caso, puede agregar algo nuevo a su caja de herramientas de diseño para el futuro.

Empecemos.

Vistazo

Aquí hay un adelanto de los diseños de texto curvo que crearemos en este tutorial.

Descargue GRATIS el diseño de ejemplos de diseño de animación de letras

Para poner sus manos sobre los diseños de texto curvo de este tutorial, primero deberá descargarlo usando el botón a continuación. Para obtener acceso a la descarga, deberá suscribirse a nuestra lista de correo electrónico Divi Daily mediante el formulario a continuación. ¡Como nuevo suscriptor, recibirás aún más bondad Divi y un paquete Divi Layout gratis todos los lunes! Si ya está en la lista, simplemente ingrese su dirección de correo electrónico a continuación y haga clic en descargar. No se le “volverá a suscribir” ni recibirá correos electrónicos adicionales.

Descarga los archivos

Descárgalo gratis

Únase al boletín de Divi y le enviaremos por correo electrónico una copia del último paquete de diseño de página de destino de Divi, además de toneladas de otros recursos, consejos y trucos increíbles y gratuitos de Divi. Síguelo y serás un maestro de Divi en poco tiempo. Si ya está suscrito, simplemente escriba su dirección de correo electrónico a continuación y haga clic en descargar para acceder al paquete de diseño.

DESCARGAR

Te has suscripto satisfactoriamente. ¡Verifique su dirección de correo electrónico para confirmar su suscripción y obtenga acceso a paquetes de diseño Divi semanales gratuitos!

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

Vayamos al tutorial, ¿de acuerdo?

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

Para crear texto curvo con 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 determinada. Luego, debe dar a cada módulo de texto una posición absoluta centrada para que todos 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 (piense en usar una brújula en la clase de matemáticas para dibujar un círculo). Además, observe que la altura de cada módulo de texto determina el radio del círculo, lo que también aumentará la circunferencia del círculo y, como resultado, más espacio entre las letras.

Aquí hay 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 se rotan en incrementos de 20 grados.

Empezando

Suscríbete a nuestro canal de Youtube

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

Creación del diseño de texto curvo

Crear la sección y la fila

Primero cree 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:

• Color de degradado de fondo a la izquierda: # 1e003d
• Color de fondo degradado a la derecha: # 121212
• Tipo de degradado: radial

• Imagen de fondo: [inserte la imagen del logotipo alrededor de 100 px por 100 px]
• Tamaño de la imagen de fondo: tamaño real

Guarde la configuración y luego salte a la configuración de la fila y actualice lo siguiente:

• Ancho de la canaleta: 1
• Ancho: 100%
• Altura mínima: 400 px
• Altura: 40vw
• Altura máxima: 600 px
• Relleno personalizado: 0px arriba, 0px abajo

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

CSS del elemento principal de la columna:

display:flex;
justify-content:center;

Creación de 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 una letra)
• Fuente de texto: Ubuntu Mono (cualquier fuente monoespaciada servirá)
• Color del texto del texto: #ffffff
• Tamaño del texto del texto: 5vw (escritorio), 40px (teléfono)
• Orientación del texto: centro
• Altura mínima: 200px
• Altura: 20vw
• Altura máxima: 300 px

Luego actualice el origen de la transformación a la parte inferior. Esto será importante para determinar dónde ocurre la rotación del texto. Queremos que el módulo de texto gire en el punto inferior del módulo. Aunque no será necesario rotar este primer módulo de texto, es importante agregarlo aquí para que podamos continuar con esta opción siempre que dupliquemos el módulo de texto para las letras adicionales.

• Transformar el origen: 100% (o inferior)

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

position: absolute !important;

Creación y rotación de otros módulos de texto

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

Dado que los módulos de texto se apilarán encima de cada uno en la interfaz, es mejor usar el modo de vista de estructura alámbrica para realizar estas actualizaciones.

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

• Contenido: yo
• Transformar la rotación del eje z: 45 grados

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

Módulo de texto 3

• contenido: v
• Transformar rotación eje z: 90 grados

Módulo de texto 4

• contenido: yo
• Transformar el eje z de rotación: 135 grados

Módulo de texto 5

• contenido: d
• Transformar el eje Z de rotación: 180 grados

Módulo de texto 6

• contenido: yo
• Transformar el eje z de rotación: 225 grados

Módulo de texto 7

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

Módulo de texto 8

• contenido: yo
• Transformar el eje z de rotación: 315 grados

¡Eso es todo! Ahora mira el resultado final.

Resultado final

Ajustar el tamaño del texto y el grado de rotación para un texto más largo

Si desea ajustar el texto curvo para opciones de diseño de texto más grandes, puede cambiar el tamaño del texto y transformar la rotación de cada módulo de texto.

Implemente el modo de vista de estructura alámbrica y luego use la función de selección múltiple de Divi para seleccionar todos los módulos de texto que contienen las letras curvas. Luego haga clic para abrir la configuración de uno de los módulos de texto seleccionados para abrir el modal de configuración del elemento que actualizará todos los módulos seleccionados a la vez.

En la configuración del elemento, cambie el tamaño del texto del texto a 40 px en el escritorio.

Guarde la configuración y luego abra la configuración de cada uno de los módulos de texto y actualice las letras y la rotación de cada uno. Deje el primer módulo de texto con una rotación de 0 grados y luego aumente la rotación del eje z en 10 grados para cada módulo de texto que sigue. Luego, duplique el módulo de texto para obtener aún más letras según sea necesario. En este ejemplo, voy a deletrear "elegantes.temas".

Aquí está el desglose de la carta de contenido y la rotación necesaria para cada módulo de texto.

• Módulo de texto 1
  • contenido: e
  • Transformar rotación eje z: 0deg
• Módulo de texto 2
  • contenido: l
  • Transformar la rotación del eje z: 10 grados
• Módulo de texto 3
  • contenido: e
  • Transformar el eje z de rotación: 20 grados
• Módulo de texto 4
  • contenido: g
  • Transformar rotación eje z: 30 grados
• Módulo de texto 5
  • contenido: un
  • Transformar el eje z de rotación: 40 grados
• Módulo de texto 6
  • contenido: n
  • Transformar el eje z de rotación: 50 grados
• Módulo de texto 7
  • contenido: t
  • Transformar la rotación del eje z: 60 grados
• Módulo de texto 8
  • contenido: .
  • Transformar el eje z de rotación: 70 grados
• Módulo de texto 9
  • contenido: t
  • Transformar el eje z de rotación: 80 grados
• Módulo de texto 10
  • contenido: h
  • Transformar rotación eje z: 90 grados
• Módulo de texto 10
  • contenido: e
  • Transformar el eje z de rotación: 100 grados
• Módulo de texto 11
  • contenido: m
  • Transformar el eje z de rotación: 110 grados
• Módulo de texto 12
  • contenido: e
  • Transformar el eje z de rotación: 120 grados
• Módulo de texto 13
  • contenido: s
  • Transformar el eje z de rotación: 130 grados

Aquí está el resultado hasta ahora.

Una forma sencilla de ajustar la rotación de todo el texto es aplicar un giro de transformación a la fila. Abra la configuración de la fila y use el dial de control del índice Z para colocar el texto curvo donde lo desee.

Aquí está el diseño final.

Siéntase libre de explorar la adición de más texto y ajustar el grado de rotación para obtener el espacio correcto entre las letras. También puede ajustar la altura de los módulos de texto para disminuir o aumentar el radio.

Pensamientos finales

Crear diseños de texto curvo en Divi es un proceso bastante simple una vez que comprende cómo funciona. Este artículo debería ayudarlo a comprender la geometría involucrada en la configuración de los módulos de texto para que giren en una curva. Y una vez que obtenga la configuración correcta, además de algunos fragmentos de CSS personalizado, puede usar la configuración de diseño incorporada de Divi para ser bastante creativo. Con suerte, esto le dará un poco de inspiración para crear sus propios diseños de texto curvo únicos.

Y, si desea agregar algo de animación a sus letras curvas, consulte nuestro artículo sobre cómo animar letras.

Espero tener noticias tuyas en los comentarios.

¡Salud!