Cómo agregar una barra inferior de posición absoluta a tu sección Hero con Divi

Avance

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

Escritorio

Móvil

Descargue el diseño de la sección de héroe de la barra inferior en posición absoluta GRATIS

Para poner sus manos en el diseño de la sección de héroe gratis, primero deberá descargarlo usando el botón a continuación. Para obtener acceso a la descarga, deberá suscribirse a nuestro boletín utilizando el formulario a continuación. Como nuevo suscriptor, ¡recibirás aún más bondad Divi y un paquete Divi Layout gratis todos los lunes! Si ya está en la lista, simplemente ingrese su dirección de correo electrónico a continuación y haga clic en descargar. No será «resuscrito» ni recibirá correos electrónicos adicionales.

Suscríbete a nuestro canal de Youtube

¡Empecemos a Recrear!

Agregar nueva sección

Fondo degradado

Comience agregando una nueva sección a la página en la que está trabajando. Abra la configuración de la sección y aplique un fondo degradado.

• Color 1: rgba (0,0,0,0,62)
• Color 2: rgba (0,0,0,0,97)
• Coloque el degradado sobre la imagen de fondo: Sí

Imagen de fondo

Cargue una imagen de fondo de su elección a continuación.

Espaciado

Pase a la pestaña de diseño de la sección y elimine todo el relleno superior e inferior predeterminado.

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

desbordamientos

También ocultaremos los desbordamientos de la sección.

• Desbordamiento horizontal: oculto
• Desbordamiento vertical: oculto

Añadir Fila #1

Estructura de la columna

Continúe agregando una nueva fila a la sección utilizando la siguiente estructura de columnas:

Espaciado

Sin agregar ningún módulo todavía, abra la configuración de la fila y aplique un margen superior e inferior.

• Margen superior: 20%
• Margen inferior: 20%

Agregue el módulo de texto n. ° 1 a la columna

Agregar contenido H1

Es hora de agregar módulos, comenzando con un primer módulo de texto que contenga algún contenido H1 de su elección.

Configuración de texto H1

Pase a la pestaña de diseño del módulo y diseñe el texto H1 de la siguiente manera:

• Fuente del título: Work Sans
• Color del texto del título: #ffffff
• Tamaño del texto del encabezado:
  
  • Escritorio: 80px
  • Tableta: 50px
  • Teléfono: 40px
• Espaciado entre letras de encabezado:
  
  • Escritorio: -4px
  • Tableta y teléfono: -2px

Agregue el Módulo de Texto #2 a la Columna

Agregar contenido

Agregue otro módulo de texto justo debajo del anterior e incluya algún contenido descriptivo de su elección.

Configuración de texto

Modifique la configuración de texto del módulo en consecuencia:

• Fuente de texto: Open Sans
• Color del texto: #a0a0a0

Dimensionamiento

Modifique también la configuración de tamaño.

• Ancho:
  
  • Escritorio: 68%
  • Tableta y teléfono: 100%

Agregar módulo de botones a la columna

Agregar copia

El último módulo que necesitamos en esta fila es un módulo de botones. Incluya alguna copia de su elección.

Añadir enlace

Añadir un enlace de botón.

• URL del enlace del botón: #

Configuración de botones

Pase a la pestaña de diseño del módulo y diseñe el botón de la siguiente manera:

• Usar estilos personalizados para el botón: Sí
• Color del texto del botón: #ffffff
• Ancho del borde del botón: 0px

• Fuente del botón: Work Sans
• Mostrar icono de botón: Sí
• Ubicación del icono del botón: Izquierda

Añadir Fila #2

Estructura de la columna

¡Es hora de crear nuestra barra de sección de héroe inferior! Para hacer eso, agregaremos una nueva fila usando la siguiente estructura de columnas:

Dimensionamiento

Sin agregar módulos todavía, abra la configuración de fila y modifique la configuración de tamaño.

• Usar ancho de canalón personalizado: Sí
• Ancho del canalón: 1
• Igualar alturas de columna: Sí
• Ancho:
  
  • Escritorio: 100%
  • Tableta y teléfono: 80%
• Ancho máximo: 2560px

Espaciado

Elimine todo el relleno superior e inferior predeterminado a continuación.

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

Sombra de la caja

Incluye también una sombra de caja.

• Fuerza de desenfoque de sombra de cuadro: 80px
• Fuerza de propagación de la sombra del cuadro: 50px
• Color de sombra: rgba(135,135,135,0.08)

Posición

Luego, pase a la pestaña avanzada y cambie la posición de toda la fila en el escritorio. Regréselo a su configuración predeterminada en tamaños de pantalla más pequeños. La configuración de posición de esta fila asegurará que la fila se adhiera a la parte inferior del contenedor de la sección.

• Posición:
  
  • Escritorio: Absoluto
  • Tableta y teléfono: predeterminado
• Ubicación: centro inferior

Configuración de la columna 1

Espaciado

Continúe abriendo la configuración de la columna 1 y aplique algunos valores de relleno personalizados.

• Acolchado superior: 3%
• Acolchado inferior: 3%
• Relleno izquierdo: 3%
• Relleno derecho: 3%

Borde

También estamos usando algunas configuraciones de borde sensibles para esta columna.

• Borde superior:
  
  • Ancho del borde superior: 5px
  • Color del borde superior:
    
    • Predeterminado: rgba(255,255,255,0)
    • Pase el cursor: #ffffff
• Borde inferior:
  
  • Ancho del borde inferior:
    
    • Escritorio y tableta: 0px
    • Teléfono: 3px
  • Color del borde inferior: rgba(255,255,255,0.11)
• Borde izquierdo:
  
  • Ancho del borde izquierdo:
    
    • Escritorio: 0px
    • Tableta: 3px
    • Teléfono: 0px
  • Color del borde izquierdo: rgba(255,255,255,0.11)

Configuración de la columna 2

Espaciado

En la configuración de la segunda columna. Agregue algunos valores de relleno a la configuración de espaciado.

• Acolchado superior: 3%
• Acolchado inferior: 3%
• Relleno izquierdo: 3%
• Relleno derecho: 3%

Borde

E incluya los siguientes bordes sensibles:

• Borde superior:
  
  • Ancho del borde superior: 5px
  • Color del borde superior:
    
    • Predeterminado: rgba(255,255,255,0)
    • Pase el cursor: #ffffff
• Borde inferior:
  
  • Ancho del borde inferior:
    
    • Escritorio y tableta: 0px
    • Teléfono: 3px
  • Color del borde inferior: rgba(255,255,255,0.11)
• Borde izquierdo:
  
  • Ancho del borde izquierdo:
    
    • Escritorio: 3px
    • Tableta: 3px
    • Teléfono: 0px
  • Color del borde izquierdo: rgba(255,255,255,0.11)

Configuración de la columna 3

Espaciado

La tercera columna también necesita valores de relleno personalizados.

• Acolchado superior: 3%
• Acolchado inferior: 3%
• Relleno izquierdo: 3%
• Relleno derecho: 3%

Borde

Junto con las siguientes configuraciones de borde:

• Borde superior:
  
  • Ancho del borde superior: 5px
  • Color del borde superior:
    
    • Predeterminado: rgba(255,255,255,0)
    • Pase el cursor: #ffffff
• Borde izquierdo:
  
  • Ancho del borde izquierdo:
    
    • Escritorio: 3px
    • Tableta: 3px
    • Teléfono: 0px
  • Color del borde izquierdo: rgba(255,255,255,0.11)

Configuración de la columna 4

Color de fondo

En la última columna. Agregue un color de fondo blanco.

• Color de fondo: #ffffff

Espaciado

Aplique algunos valores de relleno de respuesta personalizados.

• Acolchado superior
  
  • Escritorio: 3%
  • Tableta: 3%
  • Teléfono: 10%
• Acolchado inferior:
  
  • Escritorio: 3%
  • Tableta: 3%
  • Teléfono: 10%
• Relleno izquierdo:
  
  • Escritorio: 3%
  • Tableta: 5%
  • Teléfono: 10%
• Relleno derecho:
  
  • Escritorio: 3%
  • Tableta: 5%
  • Teléfono: 10%

Posición

Y vuelva a colocar toda la columna en el escritorio. Esto hará que el tamaño de la columna sea absoluto y permitirá que se mantenga en la parte inferior de la fila.

• Posición:
  
  • Escritorio: Absoluto
  • Tableta y teléfono: predeterminado
• Ubicación: abajo a la derecha

Clonar módulo de botón en la fila anterior y colocar duplicado en la columna 1 de la nueva fila

Una vez que haya completado la configuración de filas y columnas, es hora de comenzar a agregar módulos. Estamos reutilizando el módulo de botones que forma parte de la fila anterior. Clone el módulo y coloque su duplicado en la primera columna de la nueva fila.

Cambiar la alineación de los botones

Abra el duplicado del módulo de botones y cambie la alineación.

• Alineación de botones: Centro

Cambiar copia y enlaces

Modifique la copia del módulo y enlace a continuación.

Botón Clonar en la columna 1 dos veces y colocar duplicados en las columnas 2 y 3

Una vez que haya modificado la configuración del Módulo de botones en la columna 1, puede clonar el módulo completo dos veces y colocar los duplicados en las columnas 2 y 3.

Cambiar copia y enlaces

Cambie la copia y los enlaces para cada duplicado.

Agregar módulo de texto a la columna 4

Agregar contenido H2

En la última columna de la fila. Allí, el primer módulo que necesitaremos es un módulo de texto con algo de contenido H2.

Configuración de texto H2

Pase a la pestaña de diseño del módulo y cambie la configuración de texto H2 en consecuencia:

• Título 2 Fuente: Work Sans
• Título 2 Color del texto: #000000
• Encabezado 2 Espaciado entre letras: -2px

Espaciado

Agregue un poco de margen inferior también.

• Margen inferior: 10%

Agregue el módulo de formulario de contacto a la columna 4

Hacer campos de ancho completo

A continuación, agregue un módulo de formulario de contacto justo debajo del módulo de texto. Abra los campos de nombre y dirección de correo electrónico individualmente y habilite la opción «Hacer ancho completo» para ambos.

• Hacer ancho completo: Sí

Configuración de campos

Pase a la pestaña de diseño del módulo y modifique la configuración de los campos de la siguiente manera:

• Color de fondo de los campos: #ffffff
• Color del texto de los campos: #000000
• Relleno superior de campos: 4%
• Acolchado inferior de campos: 4%
• Fuente de los campos: Work Sans
• Tamaño del texto de los campos: 13px

Configuración de texto captcha

Luego, realice algunos cambios en la configuración del texto captcha.

• Fuente Captcha: Work Sans
• Color del texto captcha: #000000

Configuración de botones

También estamos diseñando el 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: #000000
• Ancho del borde del botón: 0px

• Radio del borde del botón: 0px
• Espaciado entre letras de botones: -1 px
• Fuente del botón: Work Sans

Borde

Y por último, pero no menos importante, incluiremos un ancho de borde inferior. ¡Eso es todo!

• Ingresa el ancho del borde inferior: 1px
• Color del borde inferior de las entradas: #dddddd

Avance

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

Escritorio

Móvil

Pensamientos finales

En esta publicación, le mostramos cómo ser creativo con su sección de héroe dentro de Divi. Más específicamente, le mostramos cómo incluir y diseñar una barra inferior de posición absoluta. El uso de una barra inferior lo ayudará a compartir más contenido dentro de su sección principal, sin que se vuelva demasiado abrumador. ¡Usando esta técnica, puede crear cualquier tipo de diseño y tener múltiples CTA en marcha! Si tiene alguna pregunta o sugerencia, no dude en dejar un comentario en la sección de comentarios a continuación.

Si está ansioso por aprender más sobre Divi y obtener más regalos de Divi, asegúrese de suscribirse  a nuestro boletín de correo electrónico  y  al canal de YouTube  para que siempre sea una de las primeras personas en conocer y obtener los beneficios de este contenido gratuito.