¡Tu licencia Divi con un -20% de DescuentoOferta aquí

Cómo crear una barra de pie de página fija para tu tema Divi

Abr 10, 2020 | Tutoriales para Divi

Las barras de pie de página fijas pueden ser una manera conveniente de mantener la información importante sobre su sitio web en primer plano a medida que 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 de copyright 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 flota en la parte inferior de la pantalla a medida que el usuario se desplaza.

En este tutorial, vamos a diseñar una barra de pie de página fija completamente personalizada usando el generador de temas de Divi. Esto será útil para mantener esos pequeños pero significativos contenidos a la vista en todo momento.

Descargar el tutorial GRATIS

Para descargar el fichero JSON de este tutorial, será necesario descargarlo usando el botón de descarga, suscribiendose a nuestra lista de correo electrónico mediante el siguiente formulario. 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 «volverá a suscribir» ni recibirá correos electrónicos adicionales.

Cómo agregar la descarga de la plantilla de la barra de pie de página fija a su sitio Divi

¡ADVERTENCIA !: Agregar esta plantilla anulará la plantilla predeterminada del sitio web (si tiene una) en su sitio Divi. Sugerimos agregar esto 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 a su propio sitio web, descomprima el archivo zip de descarga para acceder al archivo JSON.

Luego vaya al Panel de WordPress y navegue hasta Divi> Generador de temas.

Luego haga clic en el icono de portabilidad en la parte superior derecha de la página.

Dentro de la ventana emergente 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 en la plantilla predeterminada del sitio web que no desea anular.

Luego haga clic en el botón Importar.

Por último, guarde los cambios del generador de temas y vea una página en vivo para ver la barra de pie de página fija.

Ahora, vamos al tutorial, ¿de acuerdo?

Parte 1: Agregar un pie de página global

Theme Builder de Divi le permite reemplazar el pie de página predeterminado por uno nuevo actualizando la Plantilla de sitio web predeterminada.

Para crear un pie de página global, vaya al Panel de WordPress y vaya a Divi> Generador de temas. Luego haga clic en el espacio «Agregar pie de página global» dentro de la Plantilla de sitio web predeterminada.

barra de pie de página fija divi

Luego seleccione la opción «Crear pie de página global» en el menú desplegable.

barra de pie de página fija divi

Esto desplegará el Editor de diseño de plantilla donde se le preguntará de inmediato con las tres opciones sobre cómo desea comenzar a construir. Seleccione «Construir desde cero».

barra de pie de página fija divi

Parte 2: Crear la barra de pie de página fija

Ahora que estamos editando desde el editor de diseño de plantilla, 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.

Agregar diseño de tres columnas a la fila

Primero, agregue un diseño de tres columnas a la fila.

barra de pie de página fija divi

Altura de la sección

Después de agregar las tres columnas, demos una altura establecida para la sección. Esto es importante para crear el espacio en la parte inferior de la página donde la fila fija finalmente se detendrá. 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: 85 px
  • Relleno: 0px arriba, 0px abajo

barra de pie de página fija divi

Configuración de fila

Ahora que nuestra sección está lista, estamos listos para personalizar la fila para que sirva como barra de pie de página fija. Abra la configuración de la fila y luego actualice lo siguiente:

Antecedentes

  • Color de fondo: # 1a1e36

barra de pie de página fija divi

Tamaño y espaciado

  • Ancho de canal: 1
  • Ancho: 100%
  • Ancho Máx .: 100%
  • Relleno: 0px arriba, 0px abajo, 3% izquierda, 3% derecha

barra de pie de página fija divi

CSS personalizado

Aunque la fila será 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 adecuadamente la fila. Y queremos asegurarnos de que el contenido dentro de la fila permanezca alineado verticalmente. Para hacer esto, agregue el siguiente CSS personalizado al elemento principal de la fila:

Escritorio

01
02
03
height: inherit !important;
display:flex;
align-items: center;

Teléfono

01
02
height: inherit !important;
display:block;

barra de pie de página fija divi

Posicionamiento fijo

Para arreglar la fila de modo que flote en la parte inferior de la pantalla, necesitamos darle una posición fija en la ubicación central inferior de la siguiente manera:

  • Posición: fija
  • Ubicación: centro inferior

barra de pie de página fija divi

Parte 2: Crear el contenido de la barra de pie de página fijo

En este punto, tenemos una barra de pie de página en la posición fija lista para el contenido. Podemos agregar cualquier contenido que queramos a cada una de las tres columnas. Pero como se trata de una «barra» de pie de página con una altura limitada de 85 px, 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 de copyright con un año actual dinámico. En la columna 3, agregaremos tres iconos de seguimiento de redes sociales.

Agregar menú a la columna 1

En la columna 1, agregue un módulo de menú.

barra de pie de página fija divi

Seleccione el menú

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.

barra de pie de página fija divi

Agregar logotipo del sitio como contenido dinámico

Para el menú del logotipo, vamos a agregar el logotipo del sitio dinámicamente. Haga clic en el icono «Usar contenido dinámico» mientras se desplaza sobre el área de vista previa del logotipo. Luego, seleccione Logotipo del sitio en el menú desplegable.

barra de pie de página fija divi

Quitar fondo

Luego, elimine el fondo predeterminado del menú para que sea transparente.

barra de pie de página fija divi

Diseño de menú

En este punto, estamos listos para agregar diseño al menú. Para este diseño, vamos a mantenerlo simple y pequeño. Actualice la siguiente configuración de diseño:

  • Fuente del menú: paso elevado
  • Color del texto del menú: # b59c61
  • Imagen sepia: 100%
  • Altura máxima del logotipo: 50 px

barra de pie de página fija divi

Agregar texto de copyright a la columna 2

Una vez que el menú esté en su lugar, salte a la columna 2 para agregar el texto de copyright.

Agregar módulo de texto

Agregue un nuevo módulo de texto a la columna 2.

barra de pie de página fija divi

Agregar fecha actual dinámicamente con texto anterior y posterior

Aquí vamos a ser creativos con contenido dinámico para mostrar el año actual dentro del texto de copyright. Esto asegurará 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.

barra de pie de página fija divi

En la ventana emergente Fecha actual, actualice lo siguiente:

  • Antes de:
  • 01
    Copyright ©
  • Después:
  • 01
    | All Rights Reserved
  • Formato de fecha : personalizado
  • Formato de fecha personalizado : 20 años

barra de pie de página fija divi

Diseño de texto

Actualiza el diseño del texto y el margen de la siguiente manera:

  • Fuente de texto: paso elevado
  • Color del texto del texto: # b59c61
  • Alineación de texto: centro
  • Margen (solo teléfono): 10px arriba, 10px abajo

barra de pie de página fija divi

Eso se encarga del 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.

barra de pie de página fija divi

Agregar redes sociales

En la pestaña de contenido, agregue las redes sociales necesarias para el sitio. Para este diseño, estamos utilizando tres.

barra de pie de página fija divi

Configuración de seguimiento de redes sociales

Luego actualice la configuración de diseño para todas las redes sociales y siga los siguientes iconos:

  • Alineación del módulo: derecha (escritorio y tableta), centro (teléfono)
  • Color del icono: # 1a1e36
  • Usar tamaño de icono personalizado: SÍ
  • Tamaño de fuente del icono: 16 px (computadora de escritorio y tableta), 14 px (teléfono)

barra de pie de página fija divi

Actualizar la configuración de la red social

Para actualizar el diseño del icono de la 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

barra de pie de página fija divi

Extender la configuración de redes sociales a todos

Luego, abra el menú de más configuraciones para la primera red y seleccione « Extender estilos de elementos » de la lista. En la ventana emergente de estilos extendidos, elija extender los estilos a lo largo de “ Esta columna ” y haga clic en Extender .

barra de pie de página fija divi

Esto extenderá el diseño al resto de los íconos en la columna.

Deshabilitar columna 1 / menú en tableta y teléfono

Para que la barra de pie de página sea compatible con dispositivos móviles, debemos desactivar una de nuestras columnas con su contenido en la pantalla de la tableta y el teléfono. Para este ejemplo, vamos a deshabilitar la visualización del menú deshabilitando la columna 1 en el teléfono y la tableta de la siguiente manera:

barra de pie de página fija divi

Guardar resultados

Asegúrese de guardar el diseño antes de salir del editor de diseño.

barra de pie de página fija divi

Luego, también asegúrese de guardar los cambios para Divi Theme Builder.

barra de pie de página fija divi

Por Prunaestudio

Por Prunaestudio

Prunaestudio es un estudio de diseño web ubicado en Valencia (España). Estamos especializados en el diseño web basado en WordPress con la plantilla premium de Elegantthemes, Divi.

* Todos el contenido pertenece y se ha traducido del blog de Elegantthemes (Divi Resources)

Nuestras últimas entradas

¡20% de Descuento en Divi!

Sitios web y usuarios ilimitados

Únete a más de 700.000 clientes y obten acceso a Divi, Extra, Bloom, Monarch y mucho más. Impulsa a todo tu equipo y crea sitios web ilimitados con una licencia.

¡Ir al descuento!



You have Successfully Subscribed!

Pin It on Pinterest

Share This