Sabemos que la mayoría de ustedes siempre está buscando nuevas formas de hacer que los sitios web que crea sean únicos. Con Divi , hay muchas maneras de hacer que su sitio web se destaque de los demás. Hoy, le mostraremos cómo puede crear impresionantes títulos de sección usando 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 fluida.
¡Hagámoslo!
Antes de sumergirnos en el tutorial, echemos un vistazo al resultado que pretendemos lograr en diferentes tamaños de pantalla:
¡Comencemos 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
- Relleno 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
Fondo degradado de la columna 1
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
- Dirección del gradiente de la columna 1: 125 grados
Dimensionamiento
Cambie también el espaciado de su fila para asegurarse de que ocupe todo el ancho de la pantalla.
- Hacer esta fila de ancho completo: Sí
- Usar ancho de canalón personalizado: Sí
- Ancho del canalón: 1
- Igualar 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
- Relleno inferior: 0px
- Relleno superior de la columna 2: 200px
- Relleno inferior de la columna 2: 200px
- Relleno izquierdo de la columna 2: 350 px (escritorio), 50 px (tableta y teléfono)
- Columna 2 Relleno derecho: 50px
Agregue el módulo de texto del título de la 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. Comenzaremos con 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:
- Encabezado 2 Peso de fuente: Ultra negrita
- Título 2 Estilo de fuente: Mayúsculas
- Encabezado 2 Alineación de texto: Centro
- Título 2 Color del texto: #ffffff
- Encabezado 2 Tamaño del texto: 150px
- Encabezado 2 Altura de línea: 1,25 em
- Encabezado 2 Sombra de texto Longitud vertical: -0,55 em
- Título 2 Color de sombra de texto: rgba(0,255,255,0.25)
Espaciado
La superposición entre columnas es diferente en computadoras de escritorio, tabletas y teléfonos. Para crear la superposición, haremos algunos cambios en la configuración de Espaciado de nuestro Módulo de texto:
- Margen superior: 325 px (escritorio), 150 px (tableta y teléfono)
- Margen inferior: 325 px, -120 px (tableta), -110 px (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 módulo de texto de título. Después de agregar su contenido H3, cambie la configuración de texto H3:
- Encabezado 3 Peso de fuente: semi negrita
- Título 3 Color del texto: #00aeff
- Título 3 Tamaño del texto: 60px
- Encabezado 3 Espaciado entre letras: -3px
Espaciado
Cree algo de espacio agregando el margen inferior a continuación:
- Margen inferior: 50px
Agregue el 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:
- Altura: 56px
- Ancho: 75%
Agregue el módulo de texto de descripción a la columna 2
Configuración de texto
Continúe agregando una descripción Módulo de texto usando la siguiente configuración de texto:
- Tamaño del texto: 17px
- Altura de línea de texto: 1,3 em
- 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 también un margen inferior:
- Margen inferior: 50px
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: 100px
- Espaciado entre letras de botones: -1 px
- Peso de fuente: ultra negrita
- Estilo de fuente: Mayúsculas
Espaciado
Y para darle al botón una apariencia más limpia, también agregaremos algo de relleno:
- Relleno superior: 10px
- Relleno 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 cuadro: 54px
- Fuerza de propagación de la sombra del cuadro: -8px
- Color de sombra: rgba(0,0,0,0.3)
Sección de clonación
Cambiar todo Copiar
Para crear la segunda sección, simplemente vamos a clonar la que ya hemos creado y luego, cambiar toda la copia.
Cambiar el color de fondo de la fila
Para esta nueva sección, vamos a utilizar 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:
- Título 2 Color de sombra de texto: 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é utilizando, deberá 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.
- Título 3 Color del texto: #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 finalizar, 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 maneras 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 sorprendentes y secciones en general, utilizando solo las opciones integradas de Divi. Hemos combinado fondos degradados de columnas con superposiciones de módulos de texto, sombras de texto y modos de fusión para crear un resultado final asombroso. Si tiene alguna pregunta o sugerencia, ¡asegúrese de dejar un comentario en la sección de comentarios a continuación!