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

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.

Este artículo se centra en los siguientes temas:

1. Los requisitos previos
2. Crear un menú de pie de página
3. Optimización de la versión móvil
4. Tener en cuenta el diseño

Aviso: 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 la pantalla del menú principal de Divi como se explica en este tutorial.

A continuación, vaya a la página que desea modificar, aquella en la que desea establecer el menú de pie de página y active el Constructor Visual.

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

2 - Crear 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. Saisissez le code CSS ci-dessous <strong>entre les balises <style> et </style></strong>

#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.

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".

De este modo, 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 un menú de este tipo, sus créditos y iconos de pie de página ya no será visible. Tampoco 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 en 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:

• Hacer que el menú se fije en el pie de página y luego en la parte superior de la pantalla tras el desplazamiento
• Forzar que el pie de página vaya al fondo de la pantalla aunque el contenido sea demasiado pequeño

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.