Cómo crear una barra de pie de página adhesiva con las opciones adhesivas de Divi

Si está buscando una forma de agregar una llamada a la acción que siga a sus visitantes mientras navegan por su sitio web, podría considerar optar por una barra de pie de página pegajosa. Se utiliza una barra de pie de página adhesiva en la parte inferior de su navegador y puede incluir cualquier llamado a la acción de su elección, ya sea un botón o información de contacto. Tan pronto como los visitantes se desplacen al área de pie de página de su página, la barra de pie de página y el diseño de pie de página se fusionarán mientras cambian los estilos de la barra de pie de página adhesiva. ¡Esta hermosa estética podría ayudarlo a aumentar las tasas de conversión en sus páginas! También podrá descargar el archivo JSON de plantilla de forma gratuita.

Hagámoslo.

Avance

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

Escritorio

Móvil

Descargue la plantilla de pie de página global GRATIS

Para tener en sus manos la plantilla de pie de página global gratuita, primero deberá descargarla usando el botón a continuación. Para obtener acceso a la descarga, deberá suscribirse a nuestra lista de correo electrónico Divi Daily mediante 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 se le “volverá a suscribir” ni recibirá correos electrónicos adicionales.

Descarga los archivos

Descárgalo gratis

Únase al boletín de Divi y le enviaremos por correo electrónico una copia del último paquete de diseño de página de destino de Divi, además de toneladas de otros recursos, consejos y trucos increíbles y gratuitos de Divi. Síguelo y serás un maestro de Divi en poco tiempo. Si ya está suscrito, simplemente escriba su dirección de correo electrónico a continuación y haga clic en descargar para acceder al paquete de diseño.

DESCARGAR

Te has suscripto satisfactoriamente. ¡Verifique su dirección de correo electrónico para confirmar su suscripción y obtenga acceso a paquetes de diseño Divi semanales gratuitos!

1. Crear nueva plantilla de pie de página

Vaya a Divi Theme Builder y agregue un nuevo pie de página global o personalizado

Comience por ir al Divi Theme Builder en el backend de su sitio web de WordPress. Allí, agregue un nuevo pie de página global o personalizado.

Empiece a construir desde cero

Empiece a crear la plantilla de pie de página desde cero.

2. Crear diseño de pie de página

Configuración de la sección

Color de fondo

Una vez dentro del editor de plantillas, verá una sección. Abra esa sección y aplique un color de fondo negro.

• Color de fondo: # 000000

Agregar fila n. ° 1

Estructura de la columna

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

Color de fondo

Sin agregar módulos todavía, abra la configuración de la fila y cambie el color de fondo.

• Color de fondo: # ea6c01

Dimensionamiento

Vaya a la pestaña de diseño de la fila y cambie la configuración de tamaño a continuación.

• Usar ancho de canalón personalizado: Sí
• Ancho de la canaleta: 1
• Ancho: 90%
• Ancho máximo: 2580px
• Alineación de filas: centro

Espaciado

Agregue un poco de relleno personalizado en la parte superior e inferior también en tamaños de pantalla más pequeños.

• Acolchado superior: 5px (solo tableta y teléfono)
• Acolchado inferior: 5px (solo tableta y teléfono)

Frontera

A continuación, agregue algunas esquinas redondeadas sensibles a la configuración del borde.

• Todos los rincones:
  • Escritorio: 30px
  • Tableta y teléfono: 15px

Desbordes

Y para asegurarnos de que podamos crear superposiciones más adelante en el tutorial, configuraremos los desbordamientos de filas como visibles.

• Desbordamiento horizontal: Visible
• Desbordamiento vertical: visible

Visibilidad de las columnas 1 y 3

Para evitar que aparezcan demasiados elementos de la barra de pie de página en pantallas de menor tamaño, ocultaremos la primera y la última columna de nuestra fila tanto en la tableta como en el teléfono.

Agregar módulo Blurb a la columna 1

Agregar contenido

Es hora de agregar módulos, comenzando con un módulo Blurb en la columna 1. Agregue algún contenido de su elección.

Seleccionar icono

Seleccione un icono a continuación.

Configuración de iconos

Vaya a la pestaña de diseño del módulo y aplique el estilo del icono en consecuencia:

• Color del icono: # f5d72e
• Icono de círculo: Sí
• Color del círculo: # 000000
• Ubicación de la imagen / icono: parte superior
• Alineación de imagen / icono: centro
• Usar tamaño de fuente del icono: Sí
• Tamaño de fuente del icono: 32px

Configuración de texto

A continuación, cambie la configuración del texto.

• Alineación de texto: centro
• Color del texto: claro

Configuración del texto del título

Realice también algunos cambios en la configuración del texto del título.

• Fuente del título: Poppins
• Color del texto del título: # 000000

Configuración del texto del cuerpo

Modifique también la configuración del texto del cuerpo.

• Fuente del cuerpo: Poppins
• Peso de la fuente del cuerpo: Ultra Bold
• Tamaño del texto del cuerpo: 20px

Dimensionamiento

Ponga el ancho del contenido en "100%" en la configuración de tamaño a continuación.

• Ancho del contenido: 100%

Espaciado

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 en la configuración de animación.

• Animación de imagen / icono: sin animación

Clonar el módulo de propaganda y colocar el duplicado en la columna 3

Una vez que haya completado el primer módulo Blurb en la columna 1, clónelo una vez y coloque el duplicado en la columna 3.

Cambiar contenido e ícono

Cambie el contenido y el icono del duplicado.

Agregar módulo Blurb a la columna 2

Seleccionar icono

A continuación, agregue un nuevo módulo Blurb a la columna 2. Deje el cuadro de contenido vacío y seleccione un icono de su elección.

Color de fondo

A continuación, agregue un color de fondo.

• Color de fondo: # 000000

Configuración de iconos

Vaya a la pestaña de diseño del módulo y cambie la configuración del icono en consecuencia:

• Color del icono: #ffffff
• Ubicación de la imagen / icono: parte superior
• Alineación de imagen / icono: centro
• Usar tamaño de fuente del icono: Sí
• Tamaño de fuente del icono: 30px

Dimensionamiento

A continuación, realice algunos cambios en la configuración de tamaño.

• Ancho: 70px
• Alineación del módulo: centro
• Alto: 40px

Espaciado

Luego, aplique valores de margen y relleno personalizados en diferentes tamaños de pantalla.

• Margen superior: -20px (solo tableta y teléfono)
• Acolchado superior: 5px
• Acolchado inferior: 0px

Frontera

A continuación, agregue algunas esquinas redondeadas a la configuración del borde.

• Todas las esquinas: 10px

Animación

Y elimine la animación predeterminada en la configuración de animación.

• Animación de imagen / icono: sin animación

Agregar módulo de texto a la columna 2

Agregar contenido

El siguiente y último módulo que necesitamos en esta fila es un Módulo de texto en la columna 2. Agregue algún contenido de su elección.

Configuración de texto

Vaya a la pestaña de diseño del módulo y cambie la configuración del texto de la siguiente manera:

• Peso de la fuente del texto: Semi negrita
• Tamaño del texto: 18px
• Altura de la línea de texto: 1.8em
• Alineación de texto: centro

Agregar fila n. ° 2

Estructura de la columna

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

Dimensionamiento

Sin agregar módulos, abra la configuración de fila, vaya a la pestaña de diseño y cambie la configuración de tamaño de la siguiente manera:

• Usar ancho de canalón personalizado: Sí
• Ancho de la canaleta: 2
• Ancho máximo: 2580px

Espaciado

Agregue un poco de margen superior e inferior a continuación.

• Margen superior: 50 px
• Margen inferior: 50 px

Agregar módulo de imagen a la columna 1

Cargar imagen

Agregue un módulo de imagen a la columna 1 y cargue su logotipo o cualquier tipo de imagen de su elección.

Dimensionamiento

Vaya a la pestaña de 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

Agregar módulo de texto a la columna 2

Agregar contenido H3

A continuación, agregue un módulo de texto a la columna 2 con algún 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:

• Fuente del título 3: Poppins
• Peso de fuente del encabezado 3: Negrita
• Color del texto del encabezado 3: # 6d6d6d

Clonar el módulo de texto 3x y distribuirlo en las columnas 3 y 4

Una vez que haya completado este módulo de texto, puede clonar tres veces y distribuir los duplicados en las dos columnas restantes de la fila.

Cambiar contenido

Asegúrese de cambiar el contenido de cada módulo de texto duplicado.

Agregar módulo de texto a la columna 2

Agregar contenido

Agregue otro módulo de texto justo debajo del módulo de texto anterior en la columna 2 y agregue algún contenido vinculado de su elección.

Configuración de texto

Vaya a la pestaña de diseño del módulo y cambie la configuración del texto de la siguiente manera:

• Fuente de texto: Poppins
• Tamaño del texto: 30px
• Altura de la línea de texto: 1em
• Alineación de texto: izquierda
• Color del texto: claro

Configuración del texto del enlace

Cambie también el color del texto del enlace.

• Color del texto del enlace: #ffffff

Clonar el módulo de texto según sea necesario

Una vez que haya completado el Módulo de texto, clónelo tantas veces como desee.

Cambiar contenido

Asegúrese de cambiar el contenido y los enlaces en cada módulo duplicado.

Agregar módulo de texto a la columna 3

Agregar contenido

Luego, agregue otro módulo de texto a la columna 3. Agregue algún contenido vinculado de su elección.

Configuración de texto

Vaya a la pestaña de diseño del módulo y cambie la configuración del texto de la siguiente manera:

• Fuente de texto: Poppins
• Tamaño del texto: 22px
• Altura de la línea de texto: 1em
• Alineación de texto: izquierda
• Color del texto: claro

Configuración del texto del enlace

Modifique también el color del texto del enlace.

• Color del texto del enlace: # ea6c01

Clonar el módulo de texto según sea necesario

Clona este módulo tantas veces como necesites.

Cambiar contenido

Y, por supuesto, cambie el contenido y los enlaces según sea necesario.

Agregar 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 algún contenido de su elección.

Configuración de texto

Vaya a la pestaña de diseño del módulo y cambie la configuración del texto de la siguiente manera:

• Fuente de texto: Poppins
• Tamaño del texto: 16px
• Altura de la línea de texto: 1.8em
• Alineación de texto: izquierda
• Color del texto: claro

Agregar seguimiento de redes sociales a la columna 4

Agregue las redes sociales de su preferencia

Luego, agregue un Módulo de seguimiento de redes sociales al final de la columna. Agrega las redes sociales que prefieras.

Eliminar el color de fondo de cada red social individualmente

Elimina el color de fondo de cada red social de forma individual.

Espaciado

Vuelva a la configuración normal del módulo, vaya a la configuración de espaciado y agregue algunos valores de margen personalizados.

• Margen superior: -15px
• Margen izquierdo: -8px

Agregar fila n. ° 3

Estructura de la columna

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

Dimensionamiento

Sin agregar módulos todavía, abra la configuración de fila, pase a la pestaña de diseño y cambie la configuración de tamaño de la siguiente manera:

• Usar ancho de canalón personalizado: Sí
• Ancho de la canaleta: 2
• Ecualizar alturas de columna: Sí
• Ancho máximo: 2580px

Agregar módulo de texto a la columna 1

Agregar contenido

Luego, agregue un módulo de texto a la columna 1. Inserte algún contenido de su elección.

Configuración de texto

Vaya a la pestaña de diseño del módulo y cambie la configuración del texto de la siguiente manera:

• Fuente de texto: Poppins
• Color del texto: # 595959
• Tamaño del texto: 13px
• Alineación de texto: centro

Configuración del texto del enlace

Modifique también el color del texto del enlace.

• Color del texto del enlace: # 595959

Clonar el módulo de texto dos veces y colocar duplicados en las columnas restantes

Una vez que haya completado el módulo en la columna 1, puede clonarlo dos veces y colocar los duplicados en las dos columnas restantes de la fila.

Cambiar alineaciones de texto

Cambie las alineaciones del texto para cada módulo de texto duplicado en consecuencia:

• Módulo de texto en la columna 2:
  • Escritorio: Centro
  • Tableta y teléfono: izquierda

• Módulo de texto en la columna 3:
  • Escritorio: Derecha
  • Tableta y teléfono: Izquierda

Cambiar contenido

Y cambie también el contenido en ambos módulos duplicados.

3. Aplicar efectos adhesivos a la barra de pie de página

Abra la fila n. ° 1 y aplique ajustes fijos

Ahora que nuestra base de diseño está en su lugar, es hora de aplicar el efecto pegajoso. Abra la primera fila de la sección, vaya a la pestaña avanzada y aplique la siguiente configuración adhesiva:

• Posición adhesiva: pegarse a la parte inferior
• Desplazamiento de la parte inferior pegajosa:
  • Escritorio: 50px
  • Tableta y teléfono: 20px

Estilos pegajosos de fila

Color de fondo

Ahora que hemos convertido nuestra fila en pegajosa, podemos aplicar estilos pegajosos a la fila y a todos sus elementos secundarios. Comience agregando un color de fondo pegajoso a la fila # 1.

• Color de fondo pegajoso: # 000000

Aplicar estilos pegajosos a los módulos de Blurb en las columnas 1 y 3

Configuración de iconos

A continuación, abra los módulos de Blurb en las columnas 1 y 3 y agregue un color de círculo adhesivo.

• Color de círculo adhesivo: # ea6c01

Configuración del texto del título

Agregue un color de texto de título pegajoso también.

• Color del texto del título fijo: # ea6c01

Aplicar estilos pegajosos al módulo Blurb en la columna 2

Color de fondo

Luego, abra el Módulo Blurb en la columna 2 y aplique un color de fondo pegajoso.

• Color de fondo pegajoso: # ea6c01

4. Guardar todos los cambios en el generador de plantillas y temas

Una vez que haya completado los pasos difíciles, asegúrese de guardar su plantilla y los cambios en el generador de temas antes de ver el resultado en su sitio web.

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 las opciones pegajosas de Divi. Más específicamente, le mostramos cómo crear una barra de pie de página adhesiva que se fusiona con el área de pie de página principal una vez que las personas se desplazan hacia abajo en la página en la que se encuentran. ¡También pudo descargar el archivo JSON de plantilla de forma gratuita! 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 obsequios de Divi, asegúrese de suscribirse a nuestro boletín por 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.