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 el 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 CSS externo ni imágenes personalizadas. El truco consiste en usar los divisores de sección de Divi para superponer el texto y agregar saltos y textura de varias maneras diferentes. En este tutorial, voy a 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 página al siguiente nivel.
Empecemos.
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 utilizando el generador visual. Desde su Panel de WordPress, vaya a Páginas > Agregar nuevo. Luego, asigne un título a su página e implemente el generador visual. Seleccione la opción «Construir desde cero». ¡Ahora estás listo para comenzar!
Diseño n.° 1: texto interrumpido con un degradado resaltado
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 necesita agregar un módulo en este punto. Comenzaremos con la personalización de la sección primero.
Ajustes de sección
Abra la configuración de la sección y actualice lo siguiente:
Color izquierdo del degradado de fondo: rgba(124,218,36,0.66)
Color derecho del degradado de fondo: rgba(0,106,193,0.61)
Ancho: 80 %
Alineación de la sección: Centro
Estilo del divisor superior: vea la 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: En la parte superior del contenido de la sección
Estilo del divisor inferior: vea la 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: En la parte superior 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 relleno para que los divisores se superpongan al texto con una altura de división mínima. Establecer la altura del divisor con una unidad de longitud vw asegurará que el estilo del divisor se adapte bien para lograr un diseño uniforme 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 fila
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 arriba, 0px abajo
Dado que nuestro texto se agregará a la columna de la fila, debemos deshacernos del relleno para que nuestros divisores abarquen 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 del texto: Oswald
Estilo de fuente del texto: Texto TT
Color del texto: #0c71c3
Tamaño del texto del texto: 10vw
Altura de la línea del texto: 1em
Orientación del texto: Centro
Margen personalizado: -5vw superior, -4vw inferior
Relleno 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 bonito toque de diseño. 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 una textura de línea vertical
Para el segundo diseño de texto, continúe 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 fuente de texto: Ultra Negrita
Tamaño de fuente de texto: 8vw
Altura de línea de texto: 1em
Orientación de texto: Centro
Margen personalizado: 0px superior, 0px inferior
Configuración de fila
La configuración de 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 arriba, 0px abajo
Ajustes de sección
Actualice la configuración de la sección de la siguiente manera:
Ancho: 70%
Estilo del divisor superior: vea la 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: En la parte superior del contenido de la sección
Estilo del divisor inferior: vea la 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: En la parte superior del contenido de la sección
Relleno personalizado: 0px arriba, 0px abajo
La clave de este diseño es la opción 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 voltear 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 para este próximo diseño, continúe 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 del divisor superior: vea la captura de pantalla
Color del divisor superior: #e02b20
Altura del divisor superior: 3vw
Repetición horizontal del divisor superior: 30x
Estilo del divisor inferior: vea la 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 configuración de texto
Ahora todo lo que queda es actualizar el color del texto del texto:
Texto Color del texto: #ffffff
Aquí está el diseño final.
Una divertida alternativa de diseño al diseño #3
Antes de dejar este diseño, pensé en compartir cómo el divisor inferior en esta sección se puede convertir fácilmente en césped para que el texto parezca estar sentado en un campo. Para hacer esto, actualice la configuración de la siguiente manera:
Color izquierdo del degradado de fondo: #68a4d8 (el cielo)
Color derecho del degradado de fondo: #1c7503 (la hierba)
Posición inicial: 82 %
Posición final: 0 %
Relleno personalizado: 5vw Superior
Estilo del 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 el móvil?
Debido a que la unidad de longitud vw se ha utilizado en todos estos diseños, los estilos de texto y divisor se escalarán muy bien en todos los navegadores sin 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 demasiado 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 te hayas divertido experimentando con separadores 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 con un aspecto increíble para su próximo proyecto.
Para obtener más inspiración sobre cómo usar los separadores de sección de manera 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 saber de usted en los comentarios.
¡Salud!