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 ser ú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.
Aquí hay un adelanto de los diseños de texto curvo que construiremos en este tutorial.
Descargue el diseño de ejemplos de diseño de animación de letras GRATIS
Para poner sus manos en 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 nuestro boletín utilizando 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 será «resuscrito» ni recibirá correos electrónicos adicionales.
@media only screen and ( max-width: 767px ) {.et_bloom .et_bloom_optin_1 .carrot_edge.et_bloom_form_right .et_bloom_form_content:before { border-top-color: #ffffff !important; border-left-color: transparent !important; }.et_bloom .et_bloom_optin_1 .carrot_edge.et_bloom_form_left .et_bloom_form_content:after { border-bottom-color: #ffffff !important; border-left-color: transparent !important; }
}.et_bloom .et_bloom_optin_1 .et_bloom_form_content button { background-color: #f92c8b !important; } .et_bloom .et_bloom_optin_1 .et_bloom_form_content .et_bloom_fields i { color: #f92c8b !important; } .et_bloom .et_bloom_optin_1 .et_bloom_form_content .et_bloom_custom_field_radio i:before { background: #f92c8b !important; } .et_bloom .et_bloom_optin_1 .et_bloom_border_solid { border-color: #f7f9fb !important } .et_bloom .et_bloom_optin_1 .et_bloom_form_content button { background-color: #f92c8b !important; } .et_bloom .et_bloom_optin_1 .et_bloom_form_container h2, .et_bloom .et_bloom_optin_1 .et_bloom_form_container h2 span, .et_bloom .et_bloom_optin_1 .et_bloom_form_container h2 strong { font-family: «Open Sans», Helvetica, Arial, Lucida, sans-serif; }.et_bloom .et_bloom_optin_1 .et_bloom_form_container p, .et_bloom .et_bloom_optin_1 .et_bloom_form_container p span, .et_bloom .et_bloom_optin_1 .et_bloom_form_container p strong, .et_bloom .et_bloom_optin_1 .et_bloom_form_container form input, .et_bloom .et_bloom_optin_1 .et_bloom_form_container form button span { font-family: «Open Sans», Helvetica, Arial, Lucida, sans-serif; } p.et_bloom_popup_input { padding-bottom: 0 !important;}
Descárgalo gratis
Únase al boletín informativo 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 muchos otros recursos, consejos y trucos increíbles y gratuitos de Divi. Síguenos y serás un maestro 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.
You have successfully subscribed. Please check your email address to confirm your subscription and get access to free weekly Divi layout packs!
Para importar el diseño a su página, simplemente extraiga el archivo zip y arrastre el archivo json a 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 establecida. Luego, debe otorgar 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 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.
Y, aquí hay un ejemplo de los mismos módulos de texto rotados en incrementos de 20 grados.
Empezando
Suscríbete a nuestro canal de Youtube
Para comenzar, crea una nueva página en Divi. Luego, asigne un título a su página e implemente el constructor Divi en la parte delantera. Seleccione la opción «construir desde cero». ¡Ahora estás listo para ir!
Crear el 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:
- Gradiente de fondo Color izquierdo: #1e003d
- Degradado de fondo Color derecho: #121212
- Tipo de gradiente: 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 del canalón: 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:
Columna Elemento principal CSS:
|
01
02
|
display:flex;justify-content:center; |
Crear los 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á)
- Texto Color del texto: #ffffff
- Texto Tamaño del texto: 5vw (escritorio), 40px (teléfono)
- Orientación del texto: centro
- Altura mínima: 200 px
- Altura: 20vw
- Altura máxima: 300 px
Luego actualice el origen de la transformación al final. Esto va a 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 transferir esta opción siempre que dupliquemos el módulo de texto para las letras adicionales.
- Transformar origen: 100% (o inferior)
Luego agregue el siguiente CSS personalizado al elemento principal para darle al módulo de texto una posición absoluta.
|
01
|
position: absolute !important; |
Crear y rotar los otros módulos de texto
Para crear el resto de las letras, duplicaremos el módulo de texto. Una vez que dupliquemos 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 módulo nuevo.
Dado que los módulos de texto se apilarán uno encima de otro en la parte frontal, 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 rotación eje z: 45 grados
Continúe el proceso de duplicación del 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 de módulos de texto restantes:
Módulo de texto 3
- contenido :v
- Transformar Rotación eje z: 90 grados
Módulo de texto 4
- contenido: yo
- Transformar Rotación eje z: 135 grados
Módulo de texto 5
- contenido: d
- Transformar rotación eje z: 180 grados
Módulo de texto 6
- contenido: yo
- Transformar rotación eje z: 225 grados
Módulo de texto 7
- contenido :v
- Transformar rotación eje z: 270 grados
Módulo de texto 8
- contenido: yo
- Transformar rotación eje z: 315 grados
¡Eso es todo! Ahora mira el resultado final.
Resultado final
Ajuste del tamaño del texto y el grado de rotación para texto más largo
Si desea ajustar el texto curvo para obtener 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 de elementos 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 para cada uno de los módulos de texto y actualice las letras y la rotación para 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 «temas.elegantes».
Aquí está el desglose de la letra de contenido y la rotación necesaria para cada módulo de texto.
- Módulo de texto 1
- contenido: mi
- 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: mi
- Transformar rotación eje z: 20 grados
- Módulo de texto 4
- contenido: g
- Transformar Rotación eje z: 30 grados
- Módulo de texto 5
- contenido: un
- Transformar rotación eje z: 40 grados
- Módulo de texto 6
- contenido: norte
- Transformar rotación eje z: 50 grados
- Módulo de texto 7
- contenido: t
- Transformar Rotación eje z: 60 grados
- Módulo de texto 8
- contenido: .
- Transformar rotación eje z: 70 grados
- Módulo de texto 9
- contenido: t
- Transformar Rotación eje z: 80 grados
- Módulo de texto 10
- contenido: h
- Transformar Rotación eje z: 90 grados
- Módulo de texto 10
- contenido: mi
- Transformar Rotación eje z: 100 grados
- Texto Módulo 11
- contenido: metro
- Transformar Rotación eje z: 110 grados
- Módulo de texto 12
- contenido: mi
- Transformar Rotación eje z: 120 grados
- Módulo de texto 13
- contenido: s
- Transformar Rotación eje z: 130 grados
Aquí está el resultado hasta ahora.
Una manera fácil de ajustar la rotación de todo el texto es aplicar una rotación 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 agregando más texto y ajustando 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 entiendes 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 tenga la configuración correcta, además de algunos fragmentos de CSS personalizado, puede usar la configuración de diseño integrada de Divi para ser bastante creativo. Con suerte, esto le dará un poco de inspiración para crear sus propios diseños únicos de texto curvo.
Y, si desea agregar algo de animación a sus letras curvas, consulte nuestro artículo sobre cómo animar letras .
Espero escuchar de usted en los comentarios.
¡Salud!
.divi_cta{background-color: #8f43ee; color: #fff; font-size: 20px; font-weight: bold; padding: 20px; text-align: center; display: block; text-decoration: none; border-radius: 4px;}.divi_cta:hover{text-decoration:none;background-color:#7d37d6;}.divi_cta_red{background-color:#db1c1c;}.divi_cta_red:hover{background-color:#c51a1a;}