Las barras de pie de página adhesivas pueden ser una adición útil para cualquier sitio web, especialmente para dispositivos móviles. Una barra de pie de página adhesiva permanece fija (o atascada) en la parte inferior de la pantalla mientras el usuario se desplaza por la página. Su posición lo hace más accesible para los usuarios móviles (especialmente en teléfonos) porque está muy cerca del pulgar. Probablemente sea por eso que los diseñadores a menudo incluyen botones de navegación dentro de las barras de pie de página adhesivas. Puede impulsar la navegación UX en dispositivos móviles.
En este tutorial, le mostraremos cómo crear barras de pie de página adhesivas móviles en Divi . La base de cualquier barra de pie de página adhesiva es la posición fija que se controla fácilmente con las opciones de posición adhesiva integradas de Divi . Le mostraremos cómo usar la posición fija y el conjunto de herramientas de diseño Divi para diseñar 3 diseños diferentes de barra de pie de página fija, cada uno con 4 botones de navegación. Esto funcionará bien para cualquier empresa que busque mejorar la UX de su sitio en dispositivos móviles.
¡Empecemos!
Aquí hay un vistazo rápido a los diseños de la barra de pie de página móvil que construiremos en este tutorial.
Para poner sus manos en los diseños de este tutorial, primero deberá descargarlo 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.
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!
Cómo importar la plantilla y los diseños gratuitos a su sitio web Divi
Esta descarga contiene dos archivos. Uno se puede usar para importar la plantilla de pie de página al Theme Builder y el otro se puede usar para importar los diseños de sección individuales de cada pie de página a la Biblioteca Divi.
Para importar la plantilla de la barra de pie de página adhesiva a su propio sitio web, descomprima el archivo zip de descarga para acceder a los archivos JSON.
Luego ve al Panel de WordPress y navega a Creador de temas»>Divi > Theme Builder .
Luego haga clic en el ícono de portabilidad en la parte superior derecha de la página.
Dentro de la ventana emergente de portabilidad, elija el archivo JSON de la carpeta llamada «divi-sticky-footer-bar-template».
Luego haga clic en el botón Importar.
Para importar los 3 diseños de la sección de la barra de pie de página adhesiva a su Biblioteca Divi, navegue hasta la Biblioteca Divi.
Haga clic en el botón Importar.
En la ventana emergente de portabilidad, seleccione la pestaña de importación y elija el archivo JSON («divi-sticky-footer-bar-section-layouts.json») de la carpeta que descargó (y descomprimió).
Luego haga clic en el botón importar.
Una vez hecho esto, los diseños de las secciones estarán disponibles en Divi Builder.
Vayamos al tutorial, ¿de acuerdo?
Para comenzar, navegue hasta Theme Builder y haga clic para crear un nuevo pie de página global en la plantilla de sitio web predeterminada. (Alternativamente, puede agregar una nueva plantilla con fines de prueba).
Implementar vista de teléfono y modal de capas
Una vez dentro del editor de diseño de pie de página, abra el menú de configuración en la parte inferior de la página.
Haga clic en el icono del teléfono en el lado izquierdo para abrir la vista de teléfono del constructor. Esto ayudará a visualizar cómo se verá el pie de página fijo en el móvil mientras diseñamos.
Luego haga clic en el icono de capas a la derecha para abrir el modal de capas. Esto ayudará con la selección de elementos siempre que se acerquen demasiado.
Crear la sección fija
Para crear la sección adhesiva, podemos usar la sección regular predeterminada existente.
Abra la configuración de la sección y, en la pestaña avanzada, seleccione la opción de posición fija Stick to Bottom .
En la pestaña de contenido, agregue un color de fondo a la sección.
- Color de fondo: #1a2545
En la pestaña de diseño, actualice el relleno de la siguiente manera:
- Relleno: 0px arriba, 0px abajo
Esto acortará la altura de la sección de la barra de pie de página para dispositivos móviles.
Crear la fila
Una vez que la sección esté en su lugar, agregue una fila de una columna a la sección.
Abra la configuración de la fila y actualice las opciones de tamaño y espaciado en la pestaña de diseño de la siguiente manera:
- Ancho del canalón: 1
- Ancho: 94%
- Relleno: 6px arriba, 6px abajo
Para asegurarnos de que las columnas adicionales que vamos a agregar permanezcan adyacentes (no se apilarán) en el dispositivo móvil, debemos agregar un fragmento corto de CSS usando la propiedad Flex para mantener las cosas bien alineadas.
En la pestaña avanzada, agregue el siguiente CSS personalizado al elemento principal:
|
01
02
03
04
|
display:flex;align-items:center;justify-content:center;flex-wrap:nowrap; |
Para crear los botones de la barra de pie de página, vamos a utilizar el módulo de publicidad. Esto nos permite crear un botón que se parece a una aplicación móvil (un icono pequeño con un título debajo) que es perfecto para la navegación móvil.
Dentro de la columna, agregue un nuevo módulo publicitario.
Actualice el contenido de la propaganda de la siguiente manera:
- Título: Inicio
- Cuerpo: dejar en blanco
- Icono de uso: SÍ
- Icono: icono de inicio (ver captura de pantalla)
En la pestaña de diseño, actualice los estilos de icono de la siguiente manera:
- Color del icono: #fff
- Tamaño de fuente del icono: 24px
Luego actualice las opciones de Tamaño y texto del título de la siguiente manera:
- Fuente del título: Montserrat
- Peso de la fuente del título: semi negrita
- Estilo de fuente del título: TT
- Alineación del texto del título: Centro
- Color del texto del título: #fff
- Tamaño del texto del título: 10px
- Ancho máximo: 60px
- Alineación del módulo: Centro
Continúe agregando el siguiente relleno y esquinas redondeadas a la propaganda:
- Relleno: 5px (arriba, abajo, izquierda, derecha)
- Esquinas redondeadas: 5px (arriba, abajo, izquierda, derecha)
Para agregar un borde alrededor de la publicidad, vamos a usar una sombra de cuadro, principalmente porque no agrega ningún espacio real adicional al diseño.
- Sombra de caja: ver captura de pantalla
- Posición horizontal de la sombra del cuadro: 0px
- Posición vertical de la sombra del cuadro: 0px
- Fuerza de propagación de sombra de cuadro: 1px
- Color de sombra: rgba(255,255,255,0.12)
Para eliminar el espacio predeterminado entre la imagen y el título de la publicidad, agregue los siguientes fragmentos de CSS en la pestaña Avanzado para la imagen y el título de la publicidad:
Imagen de Blurb CSS
|
01
|
margin-bottom: 0px; |
CSS del título de Blurb
|
01
|
padding-bottom: 0px; |
Además, actualice las opciones de desbordamiento horizontal y vertical a Visible . Esto asegurará que la barra de configuración del módulo no se corte al editar dentro de Divi Builder.
Duplicar la columna para agregar más botones
Para crear los tres botones restantes, podemos duplicar la columna (que contiene el módulo de publicidad) tres veces. Esto creará un total de 4 columnas, cada una con botones idénticos.
Una vez que las columnas (y los botones) estén duplicados, puede volver a cada uno de los módulos publicitarios y actualizar el Texto del título y el Icono a lo que desee.
Parte 4: Guárdelo en la Biblioteca Divi
Ahora es un buen momento para guardar la sección en la Biblioteca Divi para que pueda agregar el pie de página adhesivo en cualquier lugar que desee más adelante.
Para guardarlo, haga clic en el icono Guardar en biblioteca en la barra de configuración de la sección al pasar el cursor sobre la sección. Luego asigne un nombre al diseño y guárdelo en la biblioteca.
¡Eso es todo! Veamos el resultado de nuestra barra de pie de página adhesiva en una página en vivo en la pantalla móvil.
Resultado
Para un diseño alternativo a esta barra de pie de página adhesiva, podemos ser un poco creativos con el fondo de la sección y la sombra del cuadro de la publicidad para dar la impresión de que los botones se extienden por encima de la barra.
Actualizar la configuración de la sección
Para hacer esto, abra la configuración de la sección y actualice el fondo de la siguiente manera:
En la pestaña del escritorio…
- Color de fondo: #1a2545
Debajo de la pestaña adhesiva…
- Color de fondo: transparente
- Degradado de fondo Color izquierdo: transparente
- Degradado de fondo Color derecho: #1a2545
- Posición inicial: 50%
- Posición final: 0%
Actualizar Blurbs
A continuación, utilice la función de selección múltiple para seleccionar los cuatro módulos publicitarios. Una vez seleccionados, abra la configuración de uno de ellos y actualice el color de fondo para todos a la vez:
- Color de fondo: #1a2545
En la pestaña de diseño, actualice la sombra del cuadro para los anuncios publicitarios de la siguiente manera:
- Fuerza de propagación de la sombra del cuadro: 3px
- Color de sombra: #1a2545
Para guardar este diseño de sección de la barra de pie de página fijo, haga clic en el icono Guardar en biblioteca en la barra de configuración de la sección al pasar el cursor sobre la sección. Luego asigne un nombre al diseño y guárdelo en la biblioteca.
Resultado
Aquí hay un vistazo al resultado final.
Para otro diseño alternativo a esta barra de pie de página adhesiva, podemos ser un poco creativos con la fila agregando esquinas redondeadas para que la barra de pie de página parezca más una pestaña.
Actualizar la configuración de la sección
Primero, abra la configuración de la sección existente y actualice el color de fondo adhesivo a transparente.
- Color de fondo (adhesivo): transparente
Asegúrate de eliminar también el degradado de fondo.
Actualizar configuración de fila
A continuación, abra la configuración de la fila y agregue el siguiente color de fondo:
- Color de fondo: #1a2545
En la pestaña de diseño, actualice lo siguiente:
- Relleno: 10px arriba
- Esquinas redondeadas: 20 px arriba a la izquierda, 20 px arriba a la derecha
Para guardar este diseño de sección de la barra de pie de página fijo, haga clic en el icono Guardar en biblioteca en la barra de configuración de la sección al pasar el cursor sobre la sección. Luego asigne un nombre al diseño y guárdelo en la biblioteca.
Resultado
Aquí está el resultado.
Para ocultar el pie de página en la vista de escritorio para que solo se muestre en dispositivos móviles, siempre puede actualizar la opción de visibilidad de la sección. Simplemente seleccione Escritorio en la opción Desactivar activado .
Resultado final
Echemos un vistazo final a los diseños de la barra de pie de página móvil.
Pensamientos finales
Crear una barra de pie de página adhesiva en Divi es bastante simple. Quiero decir, puede hacer que una sección (o fila) se adhiera a la parte inferior de la página con unos pocos clics. Después de eso, depende de usted cómo desea diseñar la barra de pie de página y qué contenido desea incluir. Los diseños de la barra de pie de página en este tutorial están destinados a dispositivos móviles y también están destinados a ser más funcionales y versátiles para que pueda tener una idea de cómo diseñarlos por su cuenta. ¡Así que no tengas miedo de experimentar con diseños más creativos!
Para obtener más información, vea cómo crear una barra de contacto móvil con clic para llamar, correo electrónico, SMS y enlaces de dirección .
Espero escuchar de usted en los comentarios.
¡Salud!