Uso del módulo de texto de Divi para crear elementos de bloque en el diseño de su página Divi

Los módulos de texto son una parte vital de cualquier diseño de página que cree con Divi, estoy seguro de que es algo en lo que todos podemos estar de acuerdo. Normalmente, se utilizan para mostrar texto de forma sencilla. Pero también puede usar módulos de texto para crear elementos de diseño impresionantes. En publicaciones de blog anteriores, ya le mostramos cómo usar el texto para mejorar su diseño web.

En este tutorial, continuaremos agregando opciones para que elijas al diseñar una página y usar módulos de texto. Como puede que sepa o no, existen varios tipos de texto diferentes que puede combinar dentro del mismo módulo de texto. Además, un módulo puede contener varios títulos, párrafos, enlaces y más. En esta publicación, usaremos todos estos tipos de texto a nuestro favor para crear elementos de bloque impresionantes en el diseño de nuestra página.

¡Hagámoslo!

Avance

Antes de sumergirnos en el tutorial, echemos un vistazo al resultado final en diferentes tamaños de pantalla.

¡Empecemos!

Agregar nueva sección regular

Color de fondo

Comience agregando una nueva sección regular a la página en la que está trabajando actualmente. Luego, abra la configuración de la sección y cambie el color de fondo.

• Color de fondo: # 000000

Espaciado

Vaya a la configuración de Espaciado de su sección a continuación y agregue algunos valores de relleno personalizados.

• Relleno superior: 280 px (escritorio), 150 px (tableta y teléfono)
• Acolchado inferior: 280 px (escritorio), 150 px (tableta y teléfono)

Agregar nueva fila

Estructura de la columna

Una vez que haya terminado de modificar la configuración de la sección, agregue una nueva fila usando la siguiente estructura de columnas:

Dimensionamiento

Sin agregar ningún módulo, abra la configuración de la fila y haga que la fila ocupe todo el ancho de la pantalla en la configuración de Tamaño.

• Hacer esta fila de ancho completo: Sí
• Usar ancho de canalón personalizado: Sí
• Ancho de la canaleta: 1

Espaciado

Por último, agregue un relleno personalizado en la configuración de Espaciado.

• Columna 1 Relleno izquierdo: 100 px (escritorio y tableta), 50 px (teléfono)
• Relleno personalizado de la columna 2: 50px
• Relleno personalizado de la columna 3: 50px

Agregar módulo de texto de título a la columna 1

Cuadro de contenido

¡Es hora de comenzar a agregar los diferentes módulos! El primer módulo que necesitaremos en la primera columna es un módulo de texto. Agregue algo de contenido H2 al cuadro de contenido.

Configuración de texto H2

Luego, vaya a la configuración de texto H2 y realice algunos cambios:

• Fuente del título 2: Código fuente Pro
• Estilo de fuente del título 2: mayúsculas
• Color del texto del encabezado 2: #ffffff
• Tamaño del texto del encabezado 2: 100 px
• Encabezado 2 espaciado de letras: 24px

Espaciado

Reduzca el espacio en la parte superior usando un margen superior negativo.

• Margen superior: -50px

Agregar módulo de texto descriptivo a la columna 1

Configuración de texto

El segundo módulo necesario en la primera columna es un módulo de texto de descripción. Después de agregar su contenido, vaya a la configuración de texto y realice algunos cambios:

• Fuente de texto: código fuente Pro
• Color del texto: #ffffff
• Orientación del texto: justificar

Dimensionamiento

Reduzca también el ancho del módulo de texto.

• Ancho: 68%

Espaciado

Y por último, pero no menos importante, cree algo de espacio entre este Módulo de texto y el anterior en la configuración de Espaciado.

• Margen superior: 200 px (escritorio), 100 px (tableta y teléfono)
• Margen inferior: 100 px (tableta y teléfono)

Agregar módulo de texto de bloque a la columna 2

Cuadro de contenido

¡Es hora de pasar a la segunda columna! Aquí, usaremos módulos de texto para crear elementos de bloque. Una parte vital para que esto funcione es estructurar correctamente el cuadro de contenido. En la pantalla de impresión a continuación, puede ver que estamos usando un título H3, un título H4, un párrafo y un enlace. Entre el título de H4 y el párrafo, nos aseguramos de que también quede algo de espacio adicional.

Color de fondo

Agregue un color de fondo negro al módulo de texto.

• Color de fondo: # 000000

Configuración de texto

Vamos a modificar cada uno de los tipos de texto de forma individual. Empiece por modificar la configuración del párrafo.

• Fuente de texto: código fuente Pro
• Orientación del texto: izquierda
• Color del texto: claro

Configuración del texto del enlace

Luego, realice algunos cambios adicionales en la configuración del enlace.

• Estilo de fuente de enlace: mayúsculas y subrayado
• Color del subrayado del enlace: #ffffff
• Color del texto del enlace: # edf000
• Tamaño del texto del enlace: 16px
• Espaciado de letras de enlace: 3px

Configuración de texto del encabezado 3

El título H3 en nuestro cuadro de contenido necesita la siguiente configuración:

• Estilo de fuente del título 3: mayúsculas
• Tamaño del texto del encabezado 3: 33px

Configuración de texto del encabezado 4

Continúe abriendo la configuración de texto H4 y realice algunos cambios allí también.

• Color del texto del encabezado 4: # 4f4f4f
• Tamaño del texto del encabezado 4: 19px
• Encabezado 4 espaciado de letras: -1px

Dimensionamiento

Para crear la forma exacta que queremos, vamos a reducir el ancho del Módulo de texto a continuación.

• Ancho: 88% (escritorio), 60% (tableta), 90% (teléfono)

Espaciado

También necesitaremos cambiar la configuración de Espaciado.

• Margen izquierdo: 200px (tableta)
• Relleno superior: 50px
• Acolchado inferior: 50px
• Relleno izquierdo: 50px
• Relleno derecho: 50px

Frontera

Luego, agregue un borde sutil al Módulo de texto.

• Ancho del borde: 2px
• Color del borde: # 424242

Sombra de la caja

Y para rematar, añade una colorida caja de sombra.

• Posición horizontal de la sombra del cuadro: 19px
• Posición vertical de la sombra del cuadro: 16px
• Fuerza de propagación de la sombra de caja: -4px
• Color de sombra: # f2ff00

Clonar el módulo de texto del bloque dos veces y colocarlo en la columna 3

Para ahorrar tiempo, clonaremos el módulo de texto del bloque que hemos creado dos veces y colocaremos ambos duplicados en la tercera columna de la fila.

Modificaciones del módulo de texto rojo

Cambiar el color del texto del enlace

Abra el primer módulo de texto en la tercera columna y cambie el color del enlace.

• Color del texto del enlace: # e02b20

Cambiar espaciado

Luego, vaya a la configuración de Espaciado y agregue un margen superior.

• Margen superior: -150 px (escritorio), -20 px (tableta), 50 px (teléfono)

Cambiar el color de la sombra del cuadro

Cambie el Color de la sombra del cuadro al mismo color que se utiliza para el texto del enlace.

• Color de sombra: # e02b20

Modificaciones del módulo de texto azul

Cambiar el color del texto del enlace

Cambie también el color del enlace del segundo módulo de texto en la tercera columna.

• Color del texto del enlace: # 0ff3ff

Cambiar talla

A continuación, cambie la configuración de tamaño.

• Dimensionamiento: 67% (escritorio), 60% (tableta), 90% (teléfono)

Cambiar espaciado

Y para crear algo de superposición entre este módulo y los otros dos módulos de texto, juegue con los valores de margen personalizados.

• Margen superior: -20px (escritorio), -30px (tableta), 50px (teléfono)
• Margen izquierdo: -160 px (escritorio), 200 px (tableta), 0 px (teléfono)

Cambiar el color de la sombra del cuadro

Para terminar, cambie el color de la sombra del cuadro al mismo color azul que se usó para el texto del enlace y ¡listo!

• Color de sombra: # 0ff3ff

Avance

Ahora que hemos seguido todos los pasos, echemos un vistazo final al resultado en diferentes tamaños de pantalla.

Pensamientos finales

Se sorprenderá de la cantidad de diseños únicos que puede lograr con los módulos de texto en combinación con las opciones integradas de Divi. No se requiere código CSS adicional. En esta publicación, le mostramos cómo usar diferentes tipos de texto para crear elementos de bloque impresionantes en el diseño de su página Divi. Si tiene alguna pregunta o sugerencia, ¡asegúrese de dejar un comentario en la sección de comentarios a continuación!