Cómo crear títulos de sección vibrantes para su próximo proyecto Divi

Sabemos que la mayoría de ustedes siempre está buscando nuevas formas de hacer que los sitios web que crean sean únicos. Con Divi, hay muchas formas de hacer que su sitio web se destaque de los demás. Hoy, le mostraremos cómo puede crear títulos de sección impresionantes utilizando solo las opciones integradas de Divi. Este enfoque es excelente si desea crear un diseño impresionante, mantener la estructura general de la página y mantener la navegación sin problemas.

¡Hagámoslo!

Avance

Antes de sumergirnos en el tutorial, echemos un vistazo al resultado que pretendemos lograr en diferentes tamaños de pantalla:

¡Empecemos a crear!

Agregar nueva sección regular

Espaciado

Comience abriendo una nueva página, cambie a Visual Builder y agregue su primera sección. Sin agregar filas o módulos todavía, abra la configuración de la sección y agregue algo de relleno:

• Relleno superior: 0px
• Acolchado inferior: 0px

Agregar nueva fila

Estructura de la columna

Continúe agregando una fila usando la siguiente estructura de columnas:

Color de fondo

Abra la configuración de la fila a continuación y agregue un color de fondo a toda su fila:

• Color de fondo: # f9f9f9

Columna 1 Fondo degradado

Luego, agregue un fondo degradado sutil a su primera columna. Esto ayudará a crear la superposición de títulos de sección entre columnas.

• Color 1: # 0031c4
• Color 2: # 00aeff
• Columna 1 Dirección de gradiente: 125 grados

Dimensionamiento

Cambie también el espaciado de su fila para asegurarse de que ocupa todo el ancho de la pantalla.

• Hacer esta fila de ancho completo: Sí
• Usar ancho de canaleta personalizado: Sí
• Ancho de la canaleta: 1
• Ecualizar alturas de columna: Sí

Espaciado

Por último, cambie la configuración de Espaciado de acuerdo con los diferentes tamaños de pantalla:

• Relleno superior: 0px
• Acolchado inferior: 0px
• Relleno superior de la columna 2: 200 px
• Relleno inferior de la columna 2: 200px
• Columna 2 Relleno izquierdo: 350 px (escritorio), 50 px (tableta y teléfono)
• Columna 2 Relleno derecho: 50px

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

Configuración de texto H2

Ahora que todas las configuraciones de fila están en su lugar, podemos comenzar a agregar módulos. Empezaremos por la primera columna. Aquí, el único módulo que necesitaremos es un módulo de texto. Después de agregar el contenido H2 en el cuadro Contenido, continúe y cambie la configuración del texto H2:

• Peso de fuente del encabezado 2: Ultra Bold
• Estilo de fuente del título 2: mayúsculas
• Alineación del texto del encabezado 2: centro
• Color del texto del encabezado 2: #ffffff
• Tamaño del texto del encabezado 2: 150 px
• Altura de la línea del rumbo 2: 1.25em
• Longitud vertical de la sombra del texto del encabezado 2: -0,55 em
• Color de la sombra del texto del encabezado 2: rgba (0,255,255,0.25)

Espaciado

La superposición entre las columnas es diferente en el escritorio, la tableta y el teléfono. Para crear la superposición, haremos algunos cambios en la configuración de espaciado de nuestro módulo de texto:

• Margen superior: 325px (escritorio), 150px (tableta y teléfono)
• Margen inferior: 325px, -120px (tableta), -110px (teléfono)
• Margen derecho: -100% (escritorio), 0px (tableta y teléfono)

Filtrar

Por último, pero no menos importante, usaremos un modo de fusión para crear la diferencia de color para el texto que aparece.

• Modo de fusión: superposición

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

Configuración de texto H3

Pasemos a la segunda columna. Allí, el primer módulo que necesitaremos es un título Módulo de texto. Después de agregar su contenido H3, cambie la configuración de texto H3:

• Peso de fuente del encabezado 3: Semi negrita
• Título 3 Color del texto: # 00aeff
• Tamaño del texto del encabezado 3: 60 px
• Encabezado 3 espaciado de letras: -3px

Espaciado

Cree algo de espacio agregando el margen inferior a continuación:

• Margen inferior: 50 px

Agregar módulo divisor a la columna 2

Color del divisor

El segundo módulo que necesitaremos es un módulo divisor. Abra la configuración de Color y cambie el color para que coincida con la paleta de colores del diseño:

• Color del divisor: # 00ffff

Dimensionamiento

Luego, modifique la configuración de Tamaño:

• Alto: 56px
• Ancho: 75%

Agregar módulo de texto descriptivo a la columna 2

Configuración de texto

Continúe agregando un módulo de texto descriptivo utilizando la siguiente configuración de texto:

• Tamaño del texto: 17px
• Altura de la línea de texto: 1.3em
• Orientación del texto: justificar

Dimensionamiento

Cambie la configuración de tamaño a continuación:

• Tamaño: 70% (escritorio), 100% (tableta y teléfono)

Espaciado

Agregue algo de espacio debajo de este módulo usando un margen inferior también:

• Margen inferior: 50 px

Agregar módulo de botones a la columna 2

Configuración de botones

El último módulo que necesitaremos en esta columna es un módulo de botones. Después de agregar el CTA, cambie la configuración del botón:

• Usar estilos personalizados para el botón: Sí
• Tamaño del texto del botón: 17px
• Color del texto del botón: #ffffff
• Color de fondo del botón: # 00aeff
• Ancho del borde del botón: 0px
• Radio del borde del botón: 100 px
• Espacio entre letras del botón: -1px
• Peso de fuente: Ultra Bold
• Estilo de fuente: mayúsculas

Espaciado

Y para darle al botón una apariencia más limpia, también agregaremos algo de relleno:

• Acolchado superior: 10px
• Acolchado inferior: 10px
• Relleno izquierdo: 30px
• Relleno derecho: 30px

Sombra de la caja

Por último, pero no menos importante, usaremos una sombra de cuadro sutil para agregar un poco de profundidad a nuestra sección:

• Fuerza de desenfoque de sombra de caja: 54px
• Fuerza de propagación de la sombra de caja: -8px
• Color de sombra: rgba (0,0,0,0.3)

Sección de clonación

Cambiar todas las copias

Para crear la segunda sección, simplemente vamos a clonar la que ya hemos creado y luego, cambiaremos toda la copia.

Cambiar el color de fondo de la fila

Para esta nueva sección, usaremos otra paleta de colores. Comience cambiando el color de fondo de su fila.

• Color de fondo: #efefef

Cambiar el fondo degradado de la columna 1

Luego, elija otro fondo degradado también.

• Color 1: # 5f00a8
• Color 2: # 9000ff

Cambiar el color de la sombra del título de la sección

También estamos haciendo coincidir el color de la sombra del texto con nuestra nueva paleta de colores:

• Color de la sombra del texto del encabezado 2: rgba (255,0,255,0.24)

Cambiar la configuración de espaciado del título de la sección

Dependiendo de la longitud de la copia que estés usando, tendrás que jugar con el margen derecho negativo.

• Margen derecho: -110% (escritorio)

Cambiar el color del texto del módulo de texto del título

Luego, cambie el Color del texto del título Módulo de texto en la columna 2.

• Color del texto del encabezado 3: # 9000ff

Cambiar el color del divisor

Del mismo modo, haga que el color del divisor coincida con el diseño.

• Color: # ff00ff

Cambiar el color de fondo del botón

Para terminar, deberá cambiar el color de fondo del Módulo de botones.

• Color de fondo del botón: # 9000ff

Avance

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

Pensamientos finales

Hay muchas formas en que puede hacer que su diseño web se destaque de los otros sitios web que existen. En esta publicación, le mostramos cómo crear títulos de sección impresionantes y secciones en general, utilizando solo las opciones integradas de Divi. Hemos combinado fondos de degradado de columna con superposiciones de módulos de texto, sombras de texto y modos de fusión para crear un resultado final impresionante. Si tiene alguna pregunta o sugerencia, ¡asegúrese de dejar un comentario en la sección de comentarios a continuación!