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.
Antes de sumergirnos en el tutorial, echemos un vistazo rápido al resultado en diferentes tamaños de pantalla.
Escritorio
Móvil
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.
@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!
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.
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 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.
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.