¿Cómo conseguir un menú fijo en el pie de página con Divi?

Actualizado el 08/04/2021 | Publicado el 15/07/2019 | 2 comentarios

En un tutorial anterior, vimos cómo arreglar el menú de Divi en la parte superior de la pantalla después del desplazamiento de la página. En este artículo, veremos cómo conseguir un menú fijo en el pie de página.

En el orden del día de este artículo:

  1. Los requisitos previos
  2. Crear un menú fijo en el pie de página
  3. Optimizar la versión móvil
  4. Tener en cuenta el diseño
Menu fixe en pied de page avec Divi
Menú fijo en el pie de página con Divi

Anuncio: este artículo contiene enlaces de afiliación que reconocerá fácilmente. Los enlaces clásicos están en púrpura y los enlaces patrocinados están en rosa.

1 - Requisitos previos

En primer lugar, tendrá que ocultar el menú principal de Divi como se explica en este tutorial.

A continuación, dirígete a la página que quieres modificar, aquella en la que quieres poner el menú de pie de página y activa el Visual Builder.

¿Sabías que puedes probar Divi gratis? Ir a esta página y haz clic en "PRUEBA GRATUITA

2 - Crear un menú de pie de página

Section menu fixe en pied de page
Añadir una sección para obtener un menú fijo en el pie de página.
  1. Añade una sección de Pantalla Completa dentro de tu diseño. Puede insertarlo en cualquier lugar, ya que no afectará a su posición final. Dentro de esta sección, inserte un módulo "Menú de pantalla completa". Podrá elegir el menú que desee: debe haber sido creado previamente en la pestaña Apariencia > Menú.
  2. Abra la configuración de la sección Pantalla Completa haciendo clic en el icono de la rueda.
  3. Añade un ID de CSS en la pestaña "Avanzado". Introduzca: "ldmenu".
  4. Dentro de esta sección de pantalla completa, añada un Módulo de código.
  5. Ir a la pestaña "Contenido"
  6. Introduzca el siguiente código CSS entre las etiquetas
#ldmenu {
position:fixed;
bottom:0;
width:100%;
z-index:9999;
}

Para más información sobre inserción de código en Divilea este artículo.

3 - Optimizar la versión móvil

Con los pasos anteriores, tienes un menú fijo en el pie de página.

Sin embargo, la versión móvil puede no ser óptima. Así que asegúrese de comprobar las opciones correctas para que el menú también esté disponible en la versión móvil.

Menu fixe en pied de page en version mobile
Optimizar el menú fijo del pie de página para la versión móvil

En la configuración del módulo Menú de pantalla completa, vaya a la pestaña "Estilo" y asegúrese de que la opción "abrir submenús " esté configurada como "arriba".

Así que su menú fijo se desplazará hacia arriba, en la versión móvil (y en la versión de escritorio). Esto es importante, de lo contrario los subelementos de su menú no serán visibles en absoluto.

4 - Tener en cuenta el diseño

El menú de pie de página pegajoso da un estilo original a un sitio, sin embargo, asegúrese de que no interfiere con sus otros elementos de diseño.

Por ejemplo, con este menú, sus créditos y iconos de pie de página ya no será visible. No podrá crear un pie de página que se revela al desplazarse u otros estilos personalizados.

Así que asegúrate de elegir y no mezclar todo dentro de la misma página o sitio.

Para ir más allá, propongo otros 2 tutoriales para hacer el menú fijo en el pie de página:

Además, este tutorial para crear un Header Hero con menú transparente podría ser de su interés...

¿Necesitas más recursos sobre Divi? Visite el blog de ElegantThemes que está lleno de ideas y tutoriales.

menu fixe en pied de page de Divi
footer fixed menu with Divi

537 palabras

2

A ti también te debería gustar:

Appliquer des masques et des formes sur vos images avec Divi

Aplica máscaras y formas a tus imágenes con Divi

Las máscaras hacen que tus imágenes parezcan más gráficas y dan a tu diseño un aspecto original. ¿Sabías que puedes crearlos fácilmente con el Constructor Visual de Divi? Te muestro cómo en este tutorial y en este vídeo.

2 Commentaires

  1. Laura

    Hello, merci pour ce tuto, c’est exactement ce que j’essaye de faire, pour l’affichage tablette et mobile uniquement.
    Le code n’a pas l’air de fonctionner, il s’affiche tout simplement en dur en front. Une idée du soucis ? Peut être à cause du nouveau Divi ? A savoir que j’ai utilisé la fonction theme builder de Divi et que j’ai mis ça en footer.
    Merci !

  2. Lycia Diaz

    Salut Laura, effectivement, le code que j’ai donné doit certainement être optimisé pour tes besoins, à savoir pour les version tablette et mobile. C’est certainement une histoire de CSS. Dans ton navigateur (Chrome ou Firefox), inspecte le code (clic droit > inspecter) et regarde ce qui pourrait être optimisé en termes de taille d’écran.

Soumettre un commentaire

Votre adresse e-mail ne sera pas publiée. Les champs obligatoires sont indiqués avec *

Je souhaite recevoir les news du blog Astuces Divi !

Ce site utilise Akismet pour réduire les indésirables. En savoir plus sur comment les données de vos commentaires sont utilisées.

Pínchalo en Pinterest

Acciones
Comparte esto