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.

diseños de texto curvo divi

diseños de texto curvo divi

diseños de texto curvo divi

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.

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 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 determinada. Luego, debe dar a cada módulo de texto una posición absoluta centrada para que todos se apilen uno encima del otro.

diseños de texto curvo divi

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 que se rotan en incrementos de 45 grados para crear un diseño de círculo perfecto para el texto. Agregué un borde blanco alrededor de cada módulo para que pueda ver fácilmente la rotación.

diseños de texto curvo divi

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

diseños de texto curvo divi

Empezando

(incrustar) https://www.youtube.com/watch?v=21t5bCC1d8Y (/ incrustar)

Suscríbete a nuestro canal de Youtube

Para comenzar, cree una nueva página en Divi. Luego, asigne 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.

diseños de texto curvo divi

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
  • Gradiente de fondo Color derecho: # 121212
  • Tipo de degradado: radial

diseños de texto curvo divi

  • 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

diseños de texto curvo divi

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: 600px
  • 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;

diseños de texto curvo divi

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
  • Texto Tamaño del texto: 5vw (escritorio), 40px (teléfono)
  • Orientación del texto: centro
  • Altura mínima: 200px
  • Altura: 20vw
  • Altura máxima: 300px

diseños de texto curvo divi

Luego actualice el origen de la transformación al final. 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 mantener 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;

diseños de texto curvo divi

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 utilizar 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

diseños de texto curvo divi

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 el eje z de rotación: 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

diseños de texto curvo divi

¡Eso es! Ahora mira el resultado final.

Resultado final

diseños de texto curvo divi

diseños de texto curvo divi

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 elemento de configuración modal que actualizará todos los módulos seleccionados a la vez.

diseños de texto curvo divi

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

diseños de texto curvo divi

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 rotación eje z: 10 grados
  • Módulo de texto 3

    • contenido: e
    • Transformar la rotación del eje z: 20 grados
  • Módulo de texto 4

    • contenido: g
    • Transformar la rotación del eje z: 30 grados
  • Módulo de texto 5

    • contenido: un
    • Transformar la rotación del eje z: 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 la rotación del eje z: 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 el eje z de rotación: 90 grados
  • Módulo de texto 10

    • contenido: e
    • Transformar la rotación del eje z: 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 la rotación del eje z: 120 grados
  • Módulo de texto 13

    • contenido: s
    • Transformar la rotación del eje z: 130 grados

Aquí está el resultado hasta ahora.

diseños de texto curvo divi

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.

diseños de texto curvo divi

Aquí está el diseño final.

diseños de texto curvo divi

diseños de texto curvo divi

No dude en explorar la posibilidad de agregar 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 aumentar o disminuir el radio.

Pensamientos finales

Crear diseños de texto curvo en Divi es un proceso bastante simple una vez que comprendes 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 haya configurado correctamente, 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 como animar letras.

Espero tener noticias tuyas en los comentarios.

¡Salud!