Cómo crear diseños de texto asombrosos usando divisores de sección en Divi

Crear diseños de texto únicos para su sitio web puede ser un desafío, especialmente si no desea usar una tonelada de CSS o recurrir a complementar texto compatible con SEO para las imágenes que diseña en Photoshop. Con Divi (y algunas ideas “listas para usar”), puede crear algunos diseños de texto únicos sin ningún CSS externo o imágenes personalizadas. El truco consiste en utilizar los divisores de sección de Divi para superponer el texto y agregar cortes y textura de diferentes maneras. En este tutorial, exploraré el poder de los divisores de sección de Divi para crear algunos diseños de texto únicos que llevarán los encabezados de su página al siguiente nivel.

Empecemos.

Vistazo

Aquí hay solo algunos ejemplos de los diseños de texto posibles usando esta técnica:

Empezando

Para este diseño, deberá crear una nueva página con el constructor visual. Desde su panel de WordPress, vaya a Páginas> Agregar nuevo. Luego, asigne un título a su página e implemente el constructor visual. Seleccione la opción "Construir desde cero". ¡Ahora estás listo para empezar!

Diseño n. ° 1: texto roto con un resaltado degradado

En este primer diseño de texto, usaré divisores de sección para dividir el texto y agregar un elemento de resaltado de forma única usando un fondo degradado. Agregue una nueva sección con un diseño de una columna. No es necesario agregar un módulo en este momento. Empezaremos por personalizar la sección primero.

Configuración de la sección

Abra la configuración de la sección y actualice lo siguiente:

Color de degradado de fondo a la izquierda: rgba (124,218,36,0.66)
Gradiente de fondo Color derecho: rgba (0,106,193,0.61)

Ancho: 80%
Alineación de la sección: centro

Estilo de divisor superior: ver captura de pantalla
Color del divisor superior: #ffffff
Altura del divisor superior: 1.8vw
Repetición horizontal del divisor superior: 3x
Disposición del divisor superior: encima del contenido de la sección

Estilo del divisor inferior: ver captura de pantalla
Color del divisor inferior: #ffffff
Altura del divisor inferior: 1.8vw
Repetición horizontal del divisor inferior: 3x
Disposición del divisor inferior: encima del contenido de la sección

Margen personalizado: 5vw superior, 5vw inferior
Relleno personalizado: 0px superior, 0px inferior

Dado que el diseño de su texto se llevará a cabo utilizando los divisores de sección, es importante mantener la sección compacta sin ningún tipo de relleno para que los divisores se superpongan al texto con una altura mínima del divisor. Establecer la altura del divisor con una unidad de longitud vw asegurará que el estilo del divisor se escale bien para un diseño consistente en todos los tamaños de pantalla. Darle a la sección un margen personalizado es opcional pero también útil para el espaciado, ya que usaremos márgenes negativos en nuestro módulo de texto para extenderlo por encima y por debajo de nuestra sección (esto debería tener más sentido más adelante).

Configuración de filas

Para la fila, todo lo que tenemos que hacer es ajustar el ancho y el relleno. Actualice la siguiente configuración de fila:

Ancho personalizado: 100%
Relleno personalizado: 0px superior, 0px inferior

Dado que nuestro texto se agregará a la columna de la fila, debemos deshacernos del relleno para que nuestros divisores abrazen la parte superior e inferior de nuestro texto.

Configuración del módulo de texto

Ahora finalmente podemos agregar el módulo de texto a la fila de una columna. Dentro de la fila, agregue un módulo de texto con el contenido "nuestro trabajo". Luego actualice la configuración de diseño de la siguiente manera:

Fuente de texto: Oswald
Estilo de fuente de texto: TT
Color del texto del texto: # 0c71c3
Tamaño del texto del texto: 10vw
Altura de la línea de texto: 1em
Orientación del texto: centro
Margen personalizado: -5vw superior, -4vw inferior
Acolchado personalizado: 2vw superior, 2vw inferior

La clave aquí es usar el margen negativo personalizado para extender el texto por encima y por debajo de la sección. Esto permite que los divisores de sección se superpongan al interior del texto para crear el efecto de diseño roto. Y el degradado de fondo también brilla para darle un toque de diseño agradable. El resultado es quizás uno de mis diseños de texto favoritos que abre la puerta a un montón de variaciones creativas.

Aquí está el diseño final.

Diseño de texto n. ° 2: texto con textura de línea vertical

Para el segundo diseño de texto, siga adelante y cree una nueva sección con una fila de una columna. Luego agregue un módulo de texto a la columna. En lugar de personalizar la sección primero, pensé que era mejor comenzar con el módulo de texto para que pueda ver mejor el proceso de diseño.

Configuración de texto

En la fila de una columna, agregue un módulo de texto con el contenido "nuestro trabajo". Luego actualice la configuración de diseño de la siguiente manera:

Fuente de texto: Poppins
Peso de la fuente del texto: Ultra Bold
Tamaño de fuente de texto: 8vw
Altura de la línea de texto: 1em
Orientación del texto: centro
Margen personalizado: 0px superior, 0px inferior

Configuración de filas

La configuración de la fila será la misma que la del primer ejemplo de diseño, por lo que puede copiar los estilos de fila y pegarlos en esta fila. O simplemente actualice la configuración de la fila de la siguiente manera:

Ancho personalizado: 100%
Relleno personalizado: 0px superior, 0px inferior

Configuración de la sección

Actualice la configuración de la sección de la siguiente manera:

Ancho: 70%

Estilo de divisor superior: ver captura de pantalla
Color del divisor superior: #ffffff
Altura del divisor superior: 8vw
Repetición horizontal del divisor superior: 150x
Disposición del divisor superior: encima del contenido de la sección

Estilo del divisor inferior: ver captura de pantalla
Color del divisor inferior: #ffffff
Altura del divisor inferior: 8vw
Repetición horizontal del divisor inferior: 150x
Volteo del divisor inferior: vertical
Disposición del divisor inferior: encima del contenido de la sección

Relleno personalizado: 0px superior, 0px inferior

La clave de este diseño es la opción de repetición horizontal del divisor. Establecer la repetición horizontal del divisor en 150x con una altura igual a la altura del texto crea una serie de líneas verticales superpuestas que se extienden desde la parte superior e inferior de la sección. No olvide configurar el divisor inferior para que se mueva verticalmente de modo que las "líneas" se extiendan hacia arriba.

Aquí está el diseño final.

Diseño n. ° 3: texto con textura parcial en la parte superior e inferior

Para acelerar el proceso de este próximo diseño, siga adelante y duplique la sección que acaba de crear en el segundo ejemplo de diseño anterior.

Actualizar la configuración de la sección

Color de fondo: # e02b20

Estilo de divisor superior: ver captura de pantalla
Color del divisor superior: # e02b20
Altura del divisor superior: 3vw
Repetición horizontal del divisor superior: 30x

Estilo del divisor inferior: ver captura de pantalla
Color del divisor inferior: # e02b20
Altura del divisor inferior: 3vw
Repetición horizontal del divisor inferior: 30x

La clave aquí es asegurarse de que el color de su divisor coincida con el color de fondo de la sección para que los divisores solo sean visibles donde se superponen al texto.

Actualizar la configuración de texto

Ahora todo lo que queda es actualizar el color del texto del texto:

Color del texto del texto: #ffffff

Aquí está el diseño final.

Una alternativa de diseño divertido al diseño n. ° 3

Antes de dejar este diseño, pensé en compartir cómo el divisor inferior de esta sección se puede convertir fácilmente en césped para que el texto parezca estar en un campo. Para hacer esto, actualice la configuración de la siguiente manera:

Color de degradado de fondo a la izquierda: # 68a4d8 (el cielo)
Gradiente de fondo Color derecho: # 1c7503 (la hierba)
Posición inicial: 82%
Posición final: 0%
Acolchado personalizado: 5vw Top
Estilo de divisor superior: nubes (¿o burbujas?)
Color del divisor inferior: # 1c7503

Luego actualice el color del texto a # 000835

Aquí está el resultado.

¿Qué pasa con los dispositivos móviles?

Debido a que la unidad de longitud de vw se ha utilizado en todos estos diseños, los estilos de texto y divisor se escalarán bien en todos los navegadores sin la necesidad de asignar tamaños adicionales en tabletas y teléfonos inteligentes. Sin embargo, si se encuentra con el problema de que el texto se reduce muy poco en el teléfono inteligente, es posible que deba aumentar el valor de la unidad de longitud vw del tamaño del texto.

Pensamientos finales

Espero que se haya divertido un poco experimentando con divisores de sección para diseños de texto únicos. Con todas las diferentes fuentes, colores y estilos de divisores disponibles en Divi, estoy seguro de que no tendrá ningún problema para crear sus propios diseños de texto de aspecto impresionante para su próximo proyecto.

Para obtener más inspiración sobre cómo utilizar los divisores de sección de forma creativa, consulte estas texturas de fondo, los marcos del menú de navegación y los fondos de la barra de pie de página inferior.

Hasta la próxima, espero tener noticias tuyas en los comentarios.

¡Salud!