Cómo crear una barra de sótano pegajosa con las opciones pegajosas de Div

Si está buscando una manera de agregar un CTA que siga a sus visitantes mientras navega por su sitio web, le recomendamos que elija una barra de sótano pegajosa. Se usa una barra de sótano pegajosa en la parte inferior de su navegador y puede incluir cualquier impulso de elegir, ya sea un botón de contacto o información. Tan pronto como los visitantes pasen por el área del sótano de su página, la barra del sótano y el diseño del sótano se combinarán mientras cambian los estilos del sótano pegajoso. ¡Esta hermosa estética puede ayudarlo a aumentar las tasas de conversión en sus páginas! Podrá descargar el archivo de plantilla 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 plantilla de sótano global gratuita para poner su mano en la plantilla de sótano global gratuita, primero deberá descargarla 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!
1 Allí, agregue un sótano nuevo o personalizado.
Comience a construir desde cero Comience a construir la plantilla del sótano desde cero.

2. Construya el diseño de la configuración del sótano del color de fondo Una vez que llegue al editor de plantillas, notará una sección. Abra esa sección y aplique un color de fondo negro.

Color de fondo: # 000000
Agregue la estructura de la columna de la fila # 1 Continuar agregando una nueva fila utilizando la siguiente estructura de columna:

Color de fondo sin agregar módulos, abra la configuración de línea y cambie el color de fondo.

Color de fondo: #A6C01
Dimensión Vaya a la pestaña Diseño de fila y cambie la configuración de tamaño adicional.

Use el ancho personalizado de la canaleta: sí
El ancho de la canaleta: 1
Ancho: 90%
Ancho máximo: 2580 PX
Alineación de filas: centro
Espaciado Agregue algunos rellenos personalizados en la parte superior e inferior y en tamaños de pantalla más pequeños. Cabeza superior: 5 PX (solo tableta y teléfono)

Finamiento inferior: 5 PX (solo tableta y teléfono)
Border luego, agregue algunas esquinas redondeadas receptivas a la configuración del borde.
Todas las esquinas:

Escritorio: 30 PX
Tableta y teléfono: 15 px
Operaciones y para garantizar que podamos crear superposiciones más adelante en el tutorial, estableceremos los rangos en visibles.
Desbordamiento horizontal: visible

Desbordamiento vertical: visible
Columnas 1 y 3 Visibilidad para evitar la aparición de demasiados elementos en el sótano de la pantalla, ocultaremos la primera y última columna entre nosotros tanto en la tableta como en el teléfono.
Agregue los módulos de blurb a la columna 1 Agregar contenido es el momento de agregar módulos, comenzando con un módulo de blurb en la columna 1. Agregue un contenido de su elección.

Seleccione el icono Seleccione un icono adicional.


Icono de configuración Vaya a la pestaña Diseño del módulo y estilice el icono en consecuencia:

Icono de color: # f5d72e

Icono del círculo: si
Color círculo: # 000000
Colocación de la imagen / icono: arriba
Alineación de imágenes / iconos: Centro
Use el icono del tamaño de la fuente: sí
Icono de tamaño de fuente: 32 PX
Configuración de texto Entonces, cambie la configuración del texto.
Alineación de texto: Centro

Color de texto: Abierto
Configuración de texto de título Haga algunos cambios en la configuración del texto del título.
Título de la fuente: Poppins

Color de texto del título: # 000000
Configuración de texto de CORP modificada y configuración para el texto del cuerpo.
Cuerpo de fuentes: Poppins

Peso de la fuente del cuerpo: Ultra Bold
Tamaño del texto del cuerpo: 20 PX
Dimensión Ponga el ancho de contenido en “100%” en la siguiente configuración de tamaño. Contenido: 100%
Espacio para crear una superposición, agregue un margen superior negativo a la configuración de espaciado.

Margen superior: -60px
Animación y complete la configuración del módulo eliminando la animación del icono de la configuración de animación.

Animación de imagen / icono: sin animación
Clone el módulo de la propaganda y coloque el duplicado en la columna 3 después de haber completado el primer módulo de desenfoque en la columna 1, clon una vez y coloque el duplicado en la columna 3.

Cambie el contenido y el icono Cambie el contenido y el icono duplicado.
Agregue los módulos de la propaganda a la columna 2 Seleccione el icono y luego, agregue un nuevo módulo de blurb a la columna 2. Deje el cuadro de contenido vacío y seleccione un icono de su elección.

El color de fondo agrega un color de fondo.

Color de fondo: # 000000

Icono de configuración Vaya a la pestaña Diseño del módulo y modifique la configuración del icono en consecuencia:

Icono de color: #ffffff
Colocación de la imagen / icono: arriba

Alineación de imágenes / iconos: Centro
Use el icono del tamaño de la fuente: sí
Icono de tamaño de fuente: 30 PX
La dimensión luego realiza algunos cambios en la configuración del tamaño.
Ancho: 70 PX
Alineación del módulo: centro

Altura: 40 PX
El espacio luego aplique márgenes personalizados y valores de llenado para diferentes tamaños de pantalla.
Margen superior: -20px (solo tableta y teléfono)
Revestimiento superior: 5 px

Finamiento inferior: 0 PX
Border luego, agregue algunas esquinas redondeadas a la configuración del borde.
Todas las esquinas: 10 PX
Animación y elimine la animación predeterminada de la configuración de animación.

Animación / icono de imagen: sin animación, coloque un módulo de texto en la columna 2 Agregar contenido y el último módulo que necesitamos en esta fila es un módulo de texto 2. Agregue un contenido de su elección.
Configuración de texto Vaya a la pestaña Diseño del módulo y cambie la configuración de texto de la siguiente manera:

El peso de la fuente de texto: semi audac.
Tamaño del texto: 18 PX

La altura de la línea de texto: 1.8em

Alineación de texto: Centro
Agregue la estructura de la columna de la fila # 2 Continuar agregando una nueva fila utilizando la siguiente estructura de columnas:
Dimensión sin agregar módulos, abrir la configuración de línea, acceder a la pestaña de diseño y cambiar la configuración de tamaño de la siguiente manera:
Use el ancho personalizado de la canaleta: sí
El ancho de la canaleta: 2

Ancho máximo: 2580 PX


Espacio agregue algunos bordes superior e inferior.
Margen superior: 50 PX
Margen inferior: 50 PX
Agregue el módulo de imagen a la columna 1 Cargue la imagen Agregue un módulo de imagen en la columna 1 y cargue el logotipo o cualquier tipo de imagen.

Dimensión Vaya a la pestaña Diseño del módulo y cambie la configuración de tamaño de la siguiente manera:
Ancho: 59%
Alineación del módulo: izquierda

Agregue un módulo de texto a la columna 2 Agregue el contenido H3 y luego, agregue un módulo de texto a la columna 2 con un contenido H3 de su elección.

Configuración de texto H3 Cambie la configuración de texto H3 del módulo de la siguiente manera:
3 Fuentes: Poppins
Título 3 Fuente de peso: Bold

El encabezado 3 Color de texto: # 6d6d6d

Clon El módulo de texto 3x y se extienda en la columna 3 y 4 Después de haber completado este módulo de texto, puede clonar tres veces y extender los duplicados en las dos columnas restantes de la fila. Asegúrate del contenido Asegúrese de cambiar el contenido en cada texto módulo duplicado.
Agregue un módulo de texto a la columna 2 Agregar contenido Agregue otro módulo de texto justo en el módulo de texto anterior en la columna 2 y agregue un contenido de su elección.
Configuración de texto Vaya a la pestaña Diseño del módulo y cambie la configuración de texto de la siguiente manera:
Texto de fuente: Poppins

Tamaño de texto: 30 PX

La altura de la línea de texto: 1em

Alineación de texto: izquierda

Color de texto: Abierto
Configuración del enlace de texto Cambiar y el color del texto del enlace.
Enlace de color de texto: #ffffff
Clone el módulo de texto según sea necesario después de haber completado el módulo de texto, clono tantas veces como desee.
Cambie el contenido Asegúrese de cambiar el contenido y los enlaces en cada módulo duplicado.
Agregue un módulo de texto a la columna 3 Agregar contenido y luego, agregue otro módulo de texto a la columna 3. Agregue un contenido de su elección.

Configuración de texto Vaya a la pestaña Diseño del módulo y cambie la configuración de texto de la siguiente manera:
Texto de fuente: Poppins

Tamaño del texto: 22 PX

La altura de la línea de texto: 1em

Alineación de texto: izquierda

Color de texto: Abierto
Configuración del enlace de texto Modificar y el color del texto del enlace.
Enlace de texto en color: #A6C01
Clonar el módulo de texto según sea necesario Clon este módulo tantas veces como necesite.
Cambie el contenido y, por supuesto, cambie el contenido y los enlaces según sea necesario.
Agregue un módulo de texto a la columna 4 Agregar contenido en la columna 4, agregaremos otro módulo de texto debajo del primer módulo de texto. Agregue un contenido de su elección. Configuración de texto Vaya a la pestaña Diseño del módulo y cambie la configuración de texto de la siguiente manera:

Texto de fuente: Poppins
Tamaño de texto: 16 PX

La altura de la línea de texto: 1.8em

Alineación de texto: izquierda

Color de texto: Abierto

Agregue las redes sociales Seguir a la columna 4 Agregue las redes sociales a su elección, luego agregue un módulo para rastrear las redes sociales al final de la columna. Agregue las redes sociales a su elección.
Elimine individualmente el color de fondo de cada red social Elimine el color de fondo de cada red social individual.
Espacio de regreso a la configuración habitual del módulo, acceda a la configuración de espaciado y agregue algunos valores de margen personalizados.
Margen superior: -15 PX
Margen izquierdo: -8px
Agregue la estructura de la columna de la fila # 3 Continuar agregando una nueva fila utilizando la siguiente estructura de columnas:

Dimensión sin agregar módulos, abra la configuración de la fila, pase a la pestaña de diseño y modifique la configuración de tamaño de la siguiente manera:

Use el ancho personalizado de la canaleta: sí

El ancho de la canaleta: 2
Igualar las alturas de la columna: sí
Ancho máximo: 2580 PX

Agregue un módulo de texto a la columna 1 Agregar contenido y luego, agregue un módulo de texto en la columna 1. Ingrese un contenido de su elección.

Configuración de texto Vaya a la pestaña Diseño del módulo y cambie la configuración de texto de la siguiente manera:
Texto de fuente: Poppins
Color de texto: # 595959
Tamaño de texto: 13 PX
Alineación de texto: Centro

Configuración del enlace de texto Modificar y el color del texto del enlace.

Color de texto de enlace: # 595959
Clon el módulo de texto dos veces y coloque los duplicados en las columnas restantes después de haber completado el módulo en la columna 1, puede clonar dos veces y colocar los duplicados en las dos columnas restantes. Modo de texto duplicado en consecuencia:
Módulo de texto en la columna 2:
Desktop: centro
Tableta y teléfono: izquierda

Módulo de texto en la columna 3:
Escritorio: correcto

Tableta y teléfono: izquierda

Cambie el contenido y cambie el contenido de ambos módulos duplicados.
3. Aplicar efectos adhesivos en la barra del sótano abre la fila 1 y aplique configuraciones adhesivas ahora que nuestra base de diseño está en su lugar, es hora de aplicar el efecto pegajoso. Abra la primera fila desde la sección, acceda a la pestaña avanzada y aplique la siguiente configuración adhesiva:
Posición pegajosa: adhiérase al fondo
Landcid Lower Gap:

Escritorio: 50 PX
Tableta y teléfono: 20 px
Stick Styles en un color de fondo de fila Ahora que hemos convertido nuestro turno en pegajoso, podemos aplicar estilos pegajosos en una fila y todos los elementos de su hijo. Comience agregando un color de fondo adhesivo en el turno # 1.

Color de fondo de palo: # 000000

Aplique estilos adhesivos a los módulos de propaganda en las columnas 1 y 3 configuraciones de icono y luego, abra los módulos de la propaganda en las columnas 1 y 3 y agregue un círculo pegajoso.
Color Sticky Circle: # EA6C01
Configuración de texto del título Agregue un color de texto pegajoso para el título.
Color del texto pegajoso del título: # EA6C01
Aplique estilos adhesivos al módulo de desenfoque en el color de fondo de la columna 2 y luego, abra el módulo de desenfoque en la columna 2 y aplique un fondo pegajoso.

4. Guarde todos los cambios en la plantilla y el tema Después de haber recorrido pasos pegajosos, ¡asegúrese de guardar los cambios en la plantilla y el fabricante antes de ver el resultado en su sitio web!
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
Pensamientos finales En esta publicación, te mostré cómo ser creativo con las opciones pegajosas de Div. Específicamente, le mostré cómo construir una barra de sótano pegajosa para fusionarse con el área del sótano principal una vez que las personas corren en la página. ¡Podrías descargar la plantilla JSON gratis! 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 obtener más información sobre Divi y obtener más regalos de la Divicidad, 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 beneficios de este contenido gratuito.