Cómo crear patrones de texto sorprendentes usando divas de secciones en la división

Crear modelos de texto únicos para su sitio web puede ser un desafío, especialmente si no desea utilizar un montón de CSS o recurrir para complementar el texto amigable para las imágenes que diseña en Photoshop. Con Div (y algunos pensamientos de “fuera de la caja”), puede crear modelos de texto únicos, sin CSS externos o imágenes personalizadas. El truco es usar los separadores de división para superponer su texto para agregar descansos y textura de varias maneras diferentes. En este tutorial, exploraré el poder de los divisores de las secciones Divi para crear algunos modelos de texto únicos que llevarán la sede de la página al siguiente nivel.
Vamos a empezar. Tire con el ojo aquí hay solo algunos ejemplos de posibles patrones de texto utilizando esta técnica:




Nociones básicas para este diseño, deberá crear una nueva página utilizando el Visual Builder. Desde el tablero de WordPress, navegue por las páginas> Agregar un nuevo. Luego, dé el título de su página e implementa el Visual Builder. Seleccione la opción “Construir desde cero”. ¡Ahora estás listo para comenzar! Proyecto No. 1: texto roto con un gradiente de aspectos destacados

En este primer diseño de texto, usaré separadores de secciones para romper el texto y agregar un elemento de resaltar en forma único utilizando un fondo de gradiente. Agregue una nueva sección con un aspecto de columna. No es necesario agregar un módulo en este momento. Comenzaremos primero con la personalización de la sección.
Secciones de sección Abra la configuración de la sección y actualice lo siguiente: Color izquierdo del gradiente de fondo: RGBA (124,218,36,0,66) Color derecho del gradiente de fondo: RGBA (0.106,193,61)

Ancho: 80% de alineación de sección: Centro para el divisor superior: ver captura de pantalla del divisor superior: #fffff Altura de separador alto: 1.8VW Distribuidor horizontal superior: 3x Disposición de divisor superior: en la parte superior del contenido del estilo del divisor inferior: ver Captura de pantalla Divisor de color: #ffffffff Altura del divisor inferior: 1.8VW Repetición horizontal del compartimento inferior: 3x Disposición del divisor inferior: en la parte superior del contenido de la sección personalizada: 5VW arriba, 5VW Down Lining personalizado: 0 px hacia arriba, 0 px hacia abajo hacia abajo
Debido a que el diseño de su texto tendrá lugar utilizando los separadores de secciones, es importante mantener la sección compacta sin ningún relleno, de modo que los separadores se superpongan con la altura mínima del separador. La configuración de la altura del separador con una unidad de longitud de VW asegurará que el estilo del divisor sea hermoso para un diseño consistente en todas las dimensiones de la pantalla. Darle a la sección un margen personalizado es opcional, pero también es útil para el espacio, ya que usaremos bordes 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, todo lo que tenemos que hacer es ajustar el ancho y el revestimiento. Actualizar la siguiente configuración de línea: Ancho personalizado: 100% de revestimiento personalizado: 0 px arriba, 0 px hacia abajo porque nuestro texto se agregará a la columna de fila, debemos deshacernos del relleno para que nuestros separadores adopten la parte superior e inferior de nuestro texto.
El modo de texto de configuración ahora finalmente puede agregar el módulo de texto a una sola fila de 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 Texto: Oswald Estilo de texto: TT Texto Color: # 0C71C3 Texto de texto: 10 VW Altura: 1EM Orientación Texto: Margen personalizado: -5VW Up, -4VW Down Fining personalizado: 2VW Up, 2VW abajo

La clave aquí es usar el margen negativo personalizado para expandir el texto arriba y debajo de la sección. Esto permite que los separadores de secciones se superpongan dentro del texto para crear el efecto de diseño defectuoso. Y el gradiente de fondo brilla para darle una nota de diseño agradable. El resultado es probablemente uno de mis dibujos de texto favoritos, que abre la puerta a muchas variaciones creativas.
Aquí está el diseño final.

Diseño de texto # 2: texto con textura de línea vertical
Para el segundo diseño de texto, continúe y cree una nueva sección con una fila con una columna. Luego agregue un módulo de texto a la columna. En lugar de personalizar la sección primero, consideré que era mejor comenzar con el módulo de texto, por lo que puede ver mejor el proceso de diseño. Configuración de texto a su vez con 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 Texto: Poppins El peso de la fuente de texto: Ultra Bold Tamaño de la fuente de texto: 8VW Altura de la línea de texto: 1EM Orientación Texto: Centro de margen personalizado: 0 PX hacia arriba, 0 PX Down

Configuración de fila La configuración de la fila será la misma que el primer ejemplo de diseño, por lo que puede copiar los estilos ordinarios y pegarlos. O simplemente actualice la configuración de la fila de la siguiente manera: Ancho personalizado: 100% de revestimiento personalizado: 0 PX Up, 0 PX Josseari Sección Actualización de la sección Configuración de la Sección de la siguiente Altura del separador superior: Reparación horizontal de 8 VW del separador superior: 150x Disposición del divisor superior: en la parte superior 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 compartimento inferior: 150x Flip divisor inferior: Disposición vertical del divisor inferior: en la parte superior del contenido de la sección de revestimiento personalizado: 0 PX hacia arriba , 0 px abajo

La clave de este diseño es la opción de repetición horizontal. Establecer la repetición horizontal del separador a 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 establecer el divisor inferior para que se torciera verticalmente, de modo que las “líneas” se extiendan.

Aquí está el diseño final.
Diseño # 3: texto con texto parcial en la parte superior e inferior

Para acelerar el proceso para el siguiente diseño, continúe y copie la sección que acaba de crear en la segunda instancia del diseño anterior.
Actualizar la configuración de la sección Color de fondo: # E02B20 Estilo de soporte: consulte Captura de pantalla El color del Separador superior: # E02B20 Altura de separador alto: 3VW REPARACIÓN HORIZONTAL DEL SEPORADOR superior: 30x Estilo del divisor inferior: Ver color del divisor inferior: # E02B20 Altura del divisor más bajo : 3VW Repetición horizontal del compartimento inferior: 30xcheia Aquí es asegurarse de que el color del divisor coincida con el color de fondo de la sección, de modo que los separadores sean visibles solo donde superponen el texto. Actualizar la configuración del texto ahora solo sigue siendo el color del texto del texto: el color del texto del texto: #fffff Aquí es el diseño final.

Una alternativa de diseño divertida al diseño # 3 Antes de dejar este diseño, pensé en compartir cómo el divisor inferior en esta sección se puede transformar fácilmente en el césped, de modo que el texto se ve en un campo. Para esto, actualice la configuración de la siguiente manera: Color izquierdo del gradiente de fondo: # 68A4D8 (cielo) Color derecho del gradiente de fondo: # 1C7503 (hierba) Posición inicial: 82% Posición final: 0% Lineo personalizado: 5VW Superior Superior Superior Divisor: nubes (¿o burbujas?) Color del divisor inferior: # 1C7503 y luego actualiza el color de texto a # 000835 Aquí está el resultado.

¿Pero móvil?Debido a que la unidad de longitud VW se ha utilizado en todos estos modelos, el estilo de texto y divisor será hermoso en todos los navegadores sin tener que asignar dimensiones adicionales en la tableta y el teléfono inteligente.Sin embargo, si está experimentando una reducción de texto demasiado pequeña en el teléfono inteligente, es posible que deba aumentar el valor de la unidad de longitud VW. Espero que se divierta experimentando con secciones para modelos de texto únicos.Con todas las diferentes fuentes, colores y estilos de separación disponibles en la división, estoy seguro de que no tendrá problemas para crear modelos de texto increíbles para su próximo proyecto.Para obtener más inspiración sobre cómo usar los separadores de secciones de manera creativa, consulte estas texturas de fondo, marcos de menú de navegación y fondos de barras inferiores.Hasta la próxima, espero tener noticias de los comentarios.¡Suerte!