Cómo agregar una barra absolutamente posicionada a la sección Hero con div Div

La forma en que estructuras los elementos en la sección de héroes a veces puede ser difícil. Desea tener un buen equilibrio, sin tener que reducir drásticamente la cantidad de contenido que desea compartir. Afortunadamente, algunos enfoques simplificados han demostrado su valor en la web. Uno de estos enfoques es la adición de una barra inferior ubicada absolutamente a la sección de héroes. No solo se ve bien, en términos de diseño, sino que lo ayuda a agregar más llamadas a la acción sin un diseño desequilibrado. En este tutorial, le mostraremos cómo agregar una barra absolutamente posicionada a la sección Héroe del Div. La barra inferior que agregamos contendrá cuatro partes; tres botones y un formulario de contacto. ¡Podrá descargar el archivo JSON de forma gratuita!
Vamos a eso. Vista previa antes de arrojar nuestras cabezas en el tutorial, para echar un vistazo rápido al resultado en diferentes tamaños de pantalla. Escritorio

Móvil

Descargue la apariencia de la sección Hero de la posición de la barra inferior para un posicionamiento gratuito absolutamente para poner su mano en la apariencia gratuita de la sección Hero, primero la descargará usando el botón a continuación. Para tener acceso a la descarga, deberá suscribirse a nuestra lista diaria de correo electrónico utilizando el formulario a continuación. ¡Como nuevo suscriptor, recibirá más buenas divisiones y un paquete Divaut gratuito todos los lunes! Si ya está en la lista, simplemente ingrese la dirección de correo electrónico a continuación y haga clic en Descargar. No será “reubicado” y no recibirá correos electrónicos adicionales.
Descargar archivos

Descargue el registro gratuito para el Boletín Informativo Divic y le enviaremos una copia de la página de la página de la página final, además de muchos otros recursos, consejos y consejos para Div gratis. Sigue a ti mismo y serás una división maestra en el menor tiempo. Si ya está suscrito, simplemente ingrese el correo electrónico a continuación y haga clic en Descargar para acceder al paquete de apariencia. Se ha suscrito correctamente. ¡Consulte su correo electrónico para confirmar su suscripción y obtener acceso a paquetes de diseño semanales gratuitos!
¡Suscríbete a nuestro canal de YouTube para comenzar a recrear! Agregue una nueva sección de fondo de gradiente, inicie 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 de gradiente.
Color 1: RGBA (0.0,0,62)
Color 2: RGBA (0.0,0,97)
Coloque el gradiente sobre la imagen de fondo: sí
Imagen de fondo Cargue la siguiente imagen de fondo de su elección.

Espacio ir a la pestaña de diseño de la sección y eliminar todos los rellenos predeterminados e inferiores.

SUS Lingo: 0 PX
Finamiento inferior: 0 PX
También escondemos los derrames de la sección.

Desbordamiento horizontal: oculto
Desbordamiento verticalmente: oculto
Agregue la estructura de la columna de la fila # 1 Continuar agregando una nueva línea a la sección utilizando la siguiente estructura de columna:

Espacio sin agregar módulos, 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 no. 1 En la columna, agregar contenido H1 es el momento de agregar módulos, comenzando con un primer módulo de texto que contiene contenido H1.

Configuración de texto H1 Cambiar a la pestaña Diseño del módulo y estilizar el texto H1 de la siguiente manera: Header: Work Sans

Encabezado de texto en color: #ffffff
Encabezado de texto de tamaño:
Escritorio: 80 PX
Tableta: 50 PX
Teléfono: 40 PX
Distancia entre letras:
Escritorio: -4px
Tableta y teléfono: -2 px
Agregue el módulo de texto no. 2 En la columna Agregar contenido Agregue otro módulo de texto justo debajo del anterior e incluya un contenido de descripción.
Configuración de texto Cambie la configuración de texto del módulo en consecuencia:

Texto de fuente: Abrir sans

Color de texto: # A0A0A0
Dimensión Modifique la configuración de tamaño.
Ancho:

Escritorio: 68%
Tableta y teléfono: 100%
Agregue un módulo de botón a la columna Agregar una copia El último módulo que necesitamos en esta fila es un módulo de botón. Incluya una copia de su elección.
Agregue un enlace Agregar un enlace de botón.

URL del botón: #

Configuración del botón Pase a la pestaña Diseño del módulo y estilice el botón de la siguiente manera:
Use estilos personalizados para el botón: Sí

El color del texto del botón: #ffffff
El ancho del nudo del botón: 0 PX
Botón de fuente: trabajo sin
Muestra el icono del botón: Sí

Icono de botón de colocación: izquierda
Agregue la fila # 2 ¡La estructura de la columna es el momento de crear nuestra barra de héroes inferiores! Para esto, agregaremos una nueva fila usando la siguiente estructura de columna:
Dimensión sin agregar módulos, abra la configuración de la fila y modifique la configuración de tamaño.

Use el ancho personalizado de la canaleta: sí

El ancho de la canaleta: 1
Igualar las alturas de la columna: sí
Ancho:
Escritorio: 100%
Tableta y teléfono: 80%
Ancho máximo: 2560 PX
El espacio elimina todos los rellenos predeterminados e inferiores.
Finamiento inferior: 0 PX

La sombra de la caja también incluye un tono de caja.
Poder de poco claro de la sombra de la caja: 80 px
Poder de extender la sombra de la caja: 50 px

Color de la sombra: RGBA (135.135.135.0.08)
Posicione luego, pase a la pestaña avanzada y reposicione toda la fila en el escritorio. Lléelo a los valores predeterminados para dimensiones de pantalla más pequeñas. La configuración de posición de esta fila asegurará que la fila se adhiera a la parte inferior del contenedor de sección.
Posición:
Escritorio: Absoluto

Tableta y teléfono: predeterminado
Ubicación: el centro inferior
Configuración de la columna 1 Espacio Continúe abriendo la configuración de la columna 1 y aplique algunos valores de llenado personalizados.
Revestimiento superior: 3%
Finamiento inferior: 3%


ENLIZACIÓN IZQUIERDA: 3%
Revelaje derecho: 3%
Border también utilizamos algunas configuraciones de bordes adaptables para esta columna.
El borde superior:
El ancho del borde superior: 5 px

El color del borde superior:
Valor predeterminado: RGBA (255,255,255,0)
Coloque el cursor: #ffffff
Borde inferior:
El ancho del borde inferior:
Escritorio y tableta: 0 px
Teléfono: 3 PX
Color de borde inferior: RGBA (255.255.255.0.11)
Borde izquierdo:
El ancho del borde izquierdo:
Escritorio: 0 PX
Tableta: 3 PX
Teléfono: 0px
Color del borde izquierdo: RGBA (255.255.255.0.11)
Configuración Columna 2 Espacio Acceda a la configuración de la segunda columna. Agregue algunos valores de llenado a la configuración de espaciado.
Revestimiento superior: 3%
Finamiento inferior: 3%

ENLIZACIÓN IZQUIERDA: 3%
Revelaje derecho: 3%
Borde e incluya los siguientes bordes receptivos:
El borde superior:
El ancho del borde superior: 5 px

Color de marco más alto: Valor predeterminado: RGBA (255,255,255.0)
Coloque el cursor: #ffffff
Borde inferior:
El ancho del borde inferior:
Escritorio y tableta: 0 px
Teléfono: 3 PX
Color de borde inferior: RGBA (255.255.255.0.11)
Borde izquierdo:
El ancho del borde izquierdo:
Escritorio: 3 PX
Tableta: 3 PX
Teléfono: 0px
Color del borde izquierdo: RGBA (255.255.255.0.11)
Columna 3 Setters de repuesto La tercera columna también necesita valores de llenado personalizados.
Revestimiento superior: 3%
Finamiento inferior: 3%
ENLIZACIÓN IZQUIERDA: 3%

Revelaje derecho: 3%
Borde junto con la siguiente configuración del borde:
El borde superior:
El ancho del borde superior: 5 px
El color del borde superior:

Valor predeterminado: RGBA (255,255,255,0)
Coloque el cursor: #ffffff
Borde izquierdo:
El ancho del borde izquierdo:
Escritorio: 3 PX
Tableta: 3 PX
Teléfono: 0px
Color del borde izquierdo: RGBA (255.255.255.0.11)
Columna 4 Configuración Color de fondo para la última columna. Agregue un color de fondo blanco.
Color de fondo: #ffffff
El espacio aplica algunos valores de llenado adaptables personalizados.
Forro de arriba

Escritorio: 3%
Tableta: 3%

Teléfono: 10%
Levante inferior:
Escritorio: 3%
Tableta: 3%
Teléfono: 10%
Forro izquierdo:
Escritorio: 3%
Tableta: 5%
Teléfono: 10%
Junta derecha:
Escritorio: 3%
Tableta: 5%
Teléfono: 10%
Posición y reposicione toda la columna en el escritorio. Esto hará el tamaño de la columna absoluta y dejará que se adhiera a la parte inferior de la fila.
Posición:
Escritorio: Absoluto
Tableta y teléfono: predeterminado

Ubicación: en el lado inferior derecho
Clonar el botón del módulo en la fila anterior y colocar el duplicado en la columna 1 en la nueva fila Después de haber completado la configuración de la fila y la columna, es hora de comenzar a agregar módulos. Reutilizamos el módulo de botón que forma parte de la fila anterior. Clone el módulo y coloque su duplicado en la primera columna de la nueva fila. Cambie la alineación del botón Abra el duplicado del módulo de botones y modifique la alineación.
Alineación de botones: centro
Cambie la copia y los enlaces Cambie la copia del módulo y continúe atando.
Clonar el botón en la columna 1 dos veces y colocar los duplicados en las columnas 2 y 3 Después de haber cambiado la configuración del botón en la columna 1, puede clonar todo el módulo dos veces y puede colocar los duplicados en la columna 2 y 3.

Cambie la copia y los enlaces Cambie la copia y los enlaces para cada duplicado.

Agregue un módulo de texto a la columna 4 Agregue el contenido H2 a la última columna de la fila. Allí, el primer módulo que necesitamos es un modo de texto con contenido H2.
Configuración de texto H2 Cambiar a la pestaña Diseño del módulo y cambiar la configuración de texto H2 en consecuencia:

Fuente del Título 2: Work Sans

Rúbrica 2 Color de texto: # 000000

Rúbrica 2 Espaciación de litros: -2 PX

Espacio agregue un borde inferior.

Margen inferior: 10%
Agregue el módulo de formulario de contacto a la columna 4 Haga los campos de ancho completo y luego, agregue un formulario de contacto justo en el módulo de texto. Abra los nombres de nombre y dirección de correo electrónico individualmente y active la opción “Crear ancho completo” para ambos.
Haga un ancho completo: Sí
Configuración de campo Vaya a la pestaña Diseño del módulo y cambie la configuración de campo de la siguiente manera:

Color de fondo de campo: #FFFFFFCUCULOR TEXT CIALDS: # 000000
ENLIZACIÓN DE CAMPO: 4%

Campos de revestimiento más bajos: 4%
Fuente de hechos: el trabajo sin

Campos de tamaño de texto: 13 PX
Configuración de texto de CaptCha luego realiza algunos cambios en la configuración de texto de Captcha.
Font Captcha: trabajo sin
Color de texto Captcha: # 000000
Configuración somos elegantes y botones.
Use estilos personalizados para el botón: Sí
Tamaño de texto de texto: 17 PX


El color del texto del botón: #ffffff
El color de fondo del botón: # 000000
El ancho del nudo del botón: 0 PX

El rasgo de botón de botón: 0 px
Distancia entre letras y botones: -1 PX
Botón de fuente: trabajo sin
Borde y último, pero no menos importante, incluiremos un ancho del borde inferior.¡Eso es todo!
Entradas Ancho del borde inferior: 1 PX
Entradas Color de borde inferior: #DDDDDD

Vista previa ahora que hemos dado todos los pasos, para echar un vistazo final al resultado en diferentes tamaños de pantalla.Escritorio
Móvil