Las barras de pie de página fijas pueden ser una forma conveniente de mantener información importante en su Sitio web en primer plano cuando el usuario interactúa con el contenido de su página en cualquier dispositivo.
Al igual que con Divi, una barra de pie de página generalmente existe como un elemento estático en la parte inferior de la página después del contenido del pie de página principal. Incluyen cosas como texto con derechos de autor e íconos de redes sociales.
Pero, si no oculta el contenido de la barra de pie de página en la parte inferior de la página, puede crear una barra de pie de página personalizada que flote en la parte inferior de la pantalla mientras el usuario se desplaza.
En este tutorial, vamos a diseñar una barra de pie de página fija totalmente personalizada utilizando el generador de temas Divi. Esto le resultará útil para mantener esos pequeños pero importantes contenidos a la vista en todo momento.
Resultado posible
Aquí hay una descripción general de la barra de pie de página fija que vamos a diseñar.
Cómo agregar la plantilla de barra de pie de página fija para descargar en su sitio Divi
¡ADVERTENCIA!: Agregar este modelo reemplazará el plantilla de sitio web por defecto (si tiene uno) en su sitio Divi. Sugerimos agregarlo a un sitio de prueba para que no arruine nada en un sitio en vivo.
Para importar la plantilla de barra de pie de página fija por su cuenta Sitio web, descomprima el archivo zip de descarga para acceder al archivo JSON.
Luego vaya al panel de WordPress y vaya a Divi> Theme Builder.
Luego haga clic en el ícono de portabilidad en la parte superior derecha de la página.
En la ventana de portabilidad, elija el archivo JSON que acaba de descomprimir y seleccione la opción "Descargar copia de seguridad antes de importar", en caso de que haya tenido algo previamente en el plantilla de sitio web predeterminado que no quería anular.
Luego haga clic en el botón Importar.
Finalmente, guarde los cambios en el generador de temas y muestre una página en vivo para ver la barra de pie de página fija.
Ahora pasemos al tutorial, ¿de acuerdo?
Parte 1: Agregar un pie de página global
El creador de temas de Divi le permite reemplazar el pie de página predeterminado por uno nuevo actualizando el plantilla de sitio web por defecto.
Para crear un pie de página global, vaya al panel de WordPress y vaya a Divi> Theme Builder. Luego haga clic en el espacio "Agregar pie de página global" dentro de la Plantilla de sitio web predeterminada.
Luego, seleccione la opción "Crear un pie de página personalizado" en la lista desplegable.
Esto desplegará el Editor de diseño de modelo, donde se le solicitarán inmediatamente las tres opciones sobre cómo desea comenzar a construir. Seleccione "Construir desde cero".
Parte 2: crear la barra de pie de página fija
Ahora que estamos editando desde el editor de diseño de plantillas, podemos comenzar a diseñar la barra de pie de página fija. Una vez hecho esto, tendrá una barra de pie de página fija con tres columnas que están listas para el contenido.
Agregue un diseño de tres columnas a la línea
Primero, agregue un diseño de tres columnas a la fila.
Altura de la sección
Una vez agregadas las tres columnas, démosle una altura definida a la sección. Esto es importante para crear espacio en la parte inferior de la página donde finalmente terminará el teléfono fijo. También eliminaremos el relleno superior e inferior predeterminado.
Para establecer la altura y el relleno, abra la configuración de la sección y actualice lo siguiente:
- Altura: 85px
- Relleno: 0px alto, 0px bajo
Configuraciones de línea
Ahora que nuestra sección está lista, estamos listos para personalizar la fila para que sirva como una barra de pie de página fija. Abra la configuración de la fila, luego actualice lo siguiente:
contexto
- Color de fondo: # 1a1e36
Tamaño y espaciado
- Ancho de canal: 1
- Ancho: 100%
- Ancho máximo: 100%
- Relleno: 0px arriba, 0px abajo, 3% izquierda, 3% derecha
CSS personalizado
Aunque la fila es fija, queremos que la altura de la fila coincida con la altura de la sección principal para que el espacio en la parte inferior de la página contenga la fila correctamente. Y queremos asegurarnos de que el contenido de la fila permanezca alineado verticalmente. Para hacer esto, agregue el siguiente CSS personalizado al elemento principal de la fila:
oficina
altura: heredar! importante; pantalla: flex; alinear elementos: centro;
Teléfono
altura: heredar! importante; pantalla: bloque;
Posicionamiento fijo
Para hacer que la línea sea fija para que flote en la parte inferior de la pantalla, debemos darle una posición fija en la ubicación central inferior de la siguiente manera:
- Posición: fija
- Ubicación: centro inferior
Parte 2: crear el contenido de la barra de pie de página fija
En este punto, tenemos una barra de pie de página de posición fija lista para el contenido. Podemos agregar cualquier contenido que queramos a cada una de las tres columnas. Pero dado que se trata de una "barra" de pie de página limitada a 85 píxeles de altura, debemos limitar la cantidad de contenido. Por esta razón, agregaremos un pequeño menú con un logotipo dinámico y 4 elementos de menú en la columna 1. En la columna 2 agregaremos texto con copyright con un año actual dinámico. En la columna 3, agregaremos tres íconos de seguimiento de redes sociales.
Agregar un menú a la columna 1
En la columna 1, agregue un módulo de menú.
Selecciona el menu
Luego seleccione uno de los menús que ya ha creado en su Sitio web. Asegúrese de mantener los elementos del menú en 4 o menos.
Agregue el logotipo del sitio como contenido dinámico
Para el menú del logotipo, agregaremos dinámicamente el logotipo del sitio. Haga clic en el icono "Usar contenido dinámico" mientras se desplaza sobre el área de vista previa del logotipo. Luego, seleccione el logotipo del sitio en la lista desplegable.
Quitar fondo
Luego, elimine el fondo del menú predeterminado para que sea transparente.
Diseño de menú
En este punto, estamos listos para agregar algún diseño al menú. Para este diseño, lo mantendremos simple y pequeño. Actualice los siguientes parámetros de diseño:
- Menú de fuentes: paso elevado
- Color del texto del menú: # b59c61
- Imagen sepia: 100%
- Altura máxima del logotipo: 50 px
Agregar texto de copyright a la columna 2
Una vez que el menú esté en su lugar, vaya a la columna 2 para agregar el texto de copyright.
Añadir un módulo de texto.
Agregue un nuevo módulo de texto a la columna 2.
Agregue dinámicamente la fecha actual con texto anterior y posterior
Aquí vamos a ser creativos con contenido dinámico para mostrar el año actual en texto con derechos de autor. Esto garantizará que el año se actualice automáticamente durante la vida útil del sitio.
Para hacer esto, haga clic en el icono "Usar contenido dinámico" y seleccione "Fecha actual" de la lista.
En la ventana emergente Fecha actual, actualice lo siguiente:
- antes:
- 01
Copyright ©
- después:
- 01
| Tous Droits Reservés
- Formato de fecha : personalizado
- Formato de fecha personalizado : 20 años
Dar formato al texto
Actualice el diseño del texto y el margen de la siguiente manera:
- Fuente de texto: paso elevado
- Color del texto: # b59c61
- Alineación del texto: centro.
- Margen (solo teléfono): 10 píxeles en la parte superior, 10 píxeles en la parte inferior
Esto admite texto de copyright.
Agregar iconos de seguimiento de redes sociales a la columna 3
En la columna 3, agregue un módulo de seguimiento de redes sociales.
Agregar redes sociales
En la pestaña Contenido, agregue las redes sociales necesarias al sitio. Para este diseño, usamos tres de ellos.
Configuración de seguimiento de redes sociales
A continuación, actualice la configuración de diseño para todos los iconos de seguimiento de redes sociales de la siguiente manera:
- Alineación del módulo: recto (escritorio y tableta), centro (teléfono)
- Color del icono: # 1a1e36
- Usar tamaño de icono personalizado: SÍ
- Tamaño de fuente del icono: 16px (escritorio y tableta), 14px (teléfono)
Actualizar la configuración de las redes sociales
Para actualizar el diseño del icono de red social individual, abra la configuración de la primera red y actualice lo siguiente:
- Color de fondo: #ffffff
- Relleno: 8 píxeles a la derecha, 8 píxeles a la izquierda
- Esquinas redondeadas: 8px
Amplíe la configuración de las redes sociales a todos
Luego abra el menú de configuración adicional para la primera red y seleccione " Ampliar estilos de elementos " en la lista. En la ventana emergente Extender estilos, elija Extender estilos en " Esta columna »Et cliquez sur Expandir .
Esto extenderá el diseño al resto de los íconos en la columna.
Consideraciones finales
Agregar una barra de pie de página fija tiene sentido en algunos casos. La altura de la barra es lo suficientemente pequeña como para no distraer ni ocupar demasiado espacio en el móvil. Y le brinda la posibilidad de agregar CTA importantes para obtener mejores conversiones y una experiencia de usuario más fluida.
Para este diseño, el espacio en la parte inferior de la página se crea estableciendo una altura fija para la sección y luego permitiendo que la línea fija herede la altura de la sección (aunque es fija).
Otros recursos
Aquí está una lista de Recursos adicionales que te pueden ayudar a crear en el diseño de tu sitio web con Divi.
- Cómo crear una página de inicio de sesión personalizada en Divi
- Cómo agregar un módulo de navegación de ancho completo en Divi
- Cómo crear un control deslizante de pantalla completa en Divi
- Cómo agregar un contador circular en Divi
