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

Si está buscando una manera de agregar un CTA que siga a sus visitantes mientras navegan por su sitio web, podría considerar optar por una barra de pie de página fija. 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 del pie de página se fusionarán mientras cambian los estilos de su 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 la 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 poner sus manos en 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 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.

.et_bloom .et_bloom_optin_1 .et_bloom_form_content { background-color: #4843d2 !important; } .et_bloom .et_bloom_optin_1 .et_bloom_form_container .et_bloom_form_header { background-color: #ffffff !important; } .et_bloom .et_bloom_optin_1 .carrot_edge .et_bloom_form_content:before { border-top-color: #ffffff !important; } .et_bloom .et_bloom_optin_1 .carrot_edge.et_bloom_form_right .et_bloom_form_content:before, .et_bloom .et_bloom_optin_1 .carrot_edge.et_bloom_form_left .et_bloom_form_content:before { border-top-color: transparent !important; border-left-color: #ffffff !important; }
@media only screen and ( max-width: 767px ) {.et_bloom .et_bloom_optin_1 .carrot_edge.et_bloom_form_right .et_bloom_form_content:before { border-top-color: #ffffff !important; border-left-color: transparent !important; }.et_bloom .et_bloom_optin_1 .carrot_edge.et_bloom_form_left .et_bloom_form_content:after { border-bottom-color: #ffffff !important; border-left-color: transparent !important; }
}.et_bloom .et_bloom_optin_1 .et_bloom_form_content button { background-color: #f92c8b !important; } .et_bloom .et_bloom_optin_1 .et_bloom_form_content .et_bloom_fields i { color: #f92c8b !important; } .et_bloom .et_bloom_optin_1 .et_bloom_form_content .et_bloom_custom_field_radio i:before { background: #f92c8b !important; } .et_bloom .et_bloom_optin_1 .et_bloom_border_solid { border-color: #f7f9fb !important } .et_bloom .et_bloom_optin_1 .et_bloom_form_content button { background-color: #f92c8b !important; } .et_bloom .et_bloom_optin_1 .et_bloom_form_container h2, .et_bloom .et_bloom_optin_1 .et_bloom_form_container h2 span, .et_bloom .et_bloom_optin_1 .et_bloom_form_container h2 strong { font-family: «Open Sans», Helvetica, Arial, Lucida, sans-serif; }.et_bloom .et_bloom_optin_1 .et_bloom_form_container p, .et_bloom .et_bloom_optin_1 .et_bloom_form_container p span, .et_bloom .et_bloom_optin_1 .et_bloom_form_container p strong, .et_bloom .et_bloom_optin_1 .et_bloom_form_container form input, .et_bloom .et_bloom_optin_1 .et_bloom_form_container form button span { font-family: «Open Sans», Helvetica, Arial, Lucida, sans-serif; } p.et_bloom_popup_input { padding-bottom: 0 !important;}

Descárgalo gratis

Únase al boletín informativo 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 muchos otros recursos, consejos y trucos increíbles y gratuitos de Divi. Síguenos y serás un maestro 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.

You have successfully subscribed. Please check your email address to confirm your subscription and get access to free weekly Divi layout packs!

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 yendo a Divi Theme Builder en el backend de su sitio web de WordPress. Allí, agregue un nuevo pie de página global o personalizado.

Comience a construir desde cero

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

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

Ajustes de sección

Color de fondo

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

  • Color de fondo: #000000

Añadir Fila #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

Pase 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 del canalón: 1
  • Ancho: 90%
  • Ancho máximo: 2580px
  • Alineación de filas: Centro

Espaciado

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

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

Borde

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

  • Todas las esquinas:

    • Escritorio: 30px
    • Tableta y teléfono: 15px

desbordamientos

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

  • Desbordamiento horizontal: visible
  • Desbordamiento vertical: visible

Columna 1 y 3 Visibilidad

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

Agregue el módulo Blurb a la columna 1

Agregar contenido

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

Seleccionar icono

Seleccione un icono a continuación.

Configuración de iconos

Pase a la pestaña de diseño del módulo y diseñe el icono en consecuencia:

  • Color del icono: #f5d72e
  • Icono de círculo: Sí
  • Color del círculo: #000000
  • Colocación de imagen/icono: Arriba
  • Alineación de imagen/icono: Centro
  • Usar tamaño de fuente de icono: Sí
  • Tamaño de fuente del icono: 32 px

Configuración de texto

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

  • Alineación de texto: Centro
  • Color del texto: Claro

Configuración del texto del título

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

  • 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 negrita
  • Tamaño del texto del cuerpo: 20 px

Dimensionamiento

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

  • Ancho de 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 módulo Blurb y colocar duplicado en la columna 3

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

Cambiar contenido e icono

Cambie el contenido y el icono del duplicado.

Agregue el módulo Blurb a la columna 2

Seleccionar icono

A continuación, 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.

Color de fondo

Agregue un color de fondo a continuación.

  • Color de fondo: #000000

Configuración de iconos

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

  • Color del icono: #ffffff
  • Colocación de imagen/icono: Arriba
  • Alineación de imagen/icono: Centro
  • Usar tamaño de fuente de icono: Sí
  • Icono Tamaño de fuente: 30px

Dimensionamiento

Realice algunos cambios en la configuración de tamaño a continuación.

  • Ancho: 70px
  • Alineación del módulo: Centro
  • Altura: 40px

Espaciado

Luego, aplique márgenes personalizados y valores de relleno en diferentes tamaños de pantalla.

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

Borde

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

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

  • Peso de fuente de texto: semi negrita
  • Tamaño del texto: 18px
  • Altura de la línea de texto: 1,8 em
  • Alineación de texto: Centro

Añadir Fila #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 la 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 del canalón: 2
  • Ancho máximo: 2580px

Espaciado

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

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

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

Pase 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:

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

Clonar módulo de texto 3x y distribuir 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 en 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

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

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

Ajustes de texto de enlace

Cambie el color del texto del enlace también.

  • Color del texto del enlace: #ffffff

Clonar 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

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

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

Ajustes de texto de enlace

Modifique también el color del texto del enlace.

  • Color del texto del enlace: #ea6c01

Clonar 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

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

  • Fuente del texto: Poppins
  • Tamaño del texto: 16px
  • Altura de la línea de texto: 1,8 em
  • Alineación de texto: Izquierda
  • Color del texto: Claro

Agregar seguimiento de redes sociales a la columna 4

Agregar Redes Sociales de Elección

Luego, agregue un módulo de seguimiento de redes sociales al final de la columna. Agrega las redes sociales de tu preferencia.

Eliminar el color de fondo de cada red social individualmente

Elimina el color de fondo de cada red social individualmente.

Espaciado

Regrese 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

Añadir Fila #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 la 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 del canalón: 2
  • Igualar 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

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

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

Ajustes de texto de enlace

Modifique también el color del texto del enlace.

  • Color del texto del enlace: #595959

Clonar 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 de 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: Derecho
    • Tableta y teléfono: Izquierda

Cambiar contenido

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

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

Abra la fila n. ° 1 y aplique configuraciones fijas

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

  • Posición pegajosa: Stick to Bottom
  • Compensación inferior pegajosa:

    • Escritorio: 50px
    • Tableta y teléfono: 20px

Estilos fijos de fila

Color de fondo

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

  • Color de fondo adhesivo: #000000

Aplique estilos fijos 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 del círculo adhesivo: #ea6c01

Configuración del texto del título

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

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

Aplique estilos adhesivos al módulo de Blurb en la columna 2

Color de fondo

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

  • Color de fondo adhesivo: #ea6c01

4. Guardar todos los cambios de plantilla y generador de temas

Una vez que haya completado los pasos pegajosos, asegúrese de guardar los cambios en la plantilla y 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 adhesivas 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 la 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 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.