Divi

Ocultar menú o pie de página en Divi (3 formas)

Jefferson Maldonado
Por Jefferson Maldonado 16 Feb 2023 6 min de lectura

En este videotutorial te mostramos cómo mostrar u ocultar el menú o pie de página de ciertas páginas en Divi. Esta es una duda que surge a muchos usuarios cuando, por alguna necesidad particular, requieren ocultar su menú de navegación o pie de página en una página específica. En este tutorial te mostramos 4 formas diferentes de lograrlo.

Si quieres aprender a hacer menús personalizados y profesionales en Divi, no te pierdas nuestro curso de Menús y mega menús con Divi, donde te mostramos decenas de formas de crear menús verdaderamente profesionales.

Si eres usuario de Divi, es probable que hayas necesitado ocultar el menú o pie de página en alguna página de tu sitio web. Ya sea que estés creando una página de agradecimiento, una landing page o una página que no necesite el menú o pie de página, saber cómo ocultarlos te ayudará a mejorar la apariencia y funcionalidad de tu sitio web.

¿Cuándo tiene sentido ocultar el menú o footer en Divi?

Ocultar el menú y el pie de página tiene sentido en estos contextos:

  • Landing pages de captura: quieres que el usuario se enfoque solo en completar el formulario, sin distracciones de navegación.
  • Páginas de «Gracias» post-compra: el flujo ya terminó; el menú podría llevar al usuario fuera del embudo de conversión.
  • Páginas de webinar o evento: la experiencia de pantalla completa mejora la concentración del asistente.
  • Checkout de WooCommerce: minimizar el menú aumenta la tasa de finalización de compras.

Método 1: Ocultar menú y pie de página cambiando la plantilla de la página

Este es el método más sencillo y no requiere tocar el Theme Builder. Para ocultar el menú o pie de página en una página específica dentro de WordPress y Divi sigue estos pasos:

  • Inicia sesión en el panel de administración de WordPress.
  • Edita la página en la que quieres ocultar el menú y pie de página.
  • En la sección de atributos de página (panel lateral derecho), selecciona la plantilla «Blank Page» o «Página en blanco» en el menú desplegable.
  • Actualiza la página para guardar los cambios.

Con esta opción, la página mostrará únicamente el contenido del Divi Builder, sin header ni footer. Es la opción ideal cuando quieres una landing page completamente limpia y no necesitas personalizar header o footer de ninguna manera.

Si quieres ver cómo hicimos la tienda online del ejemplo del video, puedes lograrlo revisando nuestro curso de tienda online básico con WooCommerce y Divi.

Método 2: Crea un menú o pie de página vacío en el Theme Builder

Este segundo método es más preciso porque te permite personalizar qué aparece en el header/footer de una plantilla específica. Los pasos son:

  • Ve a Divi > Theme Builder desde el panel de WordPress.
  • Localiza la plantilla aplicada a la página que quieres modificar (o crea una nueva plantilla y asígnala a esa página).
  • Elimina el encabezado o pie de página global de esa plantilla.
  • Crea un header o footer particular para este diseño, pero sin ningún elemento dentro (solo el contenedor vacío).

La ventaja de este método frente al Método 1 es que puedes mantener visualmente algo (como un logo solo, sin links de navegación) o agregar un header minimalista específico para esa página, lo que da más control creativo.

Método 3: Usa las opciones condicionales de Divi

Este método es especialmente potente porque te permite ocultar secciones del header o footer en cualquier página usando las condiciones de visibilidad de Divi, sin crear plantillas nuevas:

  • Entra al header o footer global desde el Theme Builder.
  • Selecciona la sección que contiene los elementos de navegación y abre su configuración.
  • Ve a la pestaña Avanzado > Condiciones.
  • Configura la condición para que la sección NO se muestre en las páginas específicas donde quieres ocultarla (usa la opción «Excluir» y selecciona las páginas).

Con las condiciones de Divi puedes usar lógica granular: ocultar en páginas específicas, en categorías, en tipos de contenido, para usuarios logueados o no logueados. Es la opción más flexible de todas sin necesidad de crear plantillas adicionales.

Método 4: Ocultar con CSS (sin tocar el Theme Builder)

Si los métodos anteriores no se ajustan a tu situación o necesitas una solución rápida sin modificar la estructura del Theme Builder, puedes ocultar el menú o footer con CSS personalizado. Agrega este código en Apariencia > Personalizar > CSS adicional o en la opción de CSS de Divi:

/* Ocultar el header en una página por su ID */
body.page-id-1234 #main-header {
    display: none !important;
}

/* Ocultar el footer en una página por su ID */
body.page-id-1234 #main-footer {
    display: none !important;
}

Sustituye 1234 por el ID de la página donde quieres ocultar los elementos. Para encontrar el ID, ve a la lista de páginas en WordPress, pasa el cursor sobre el título de la página y mira la URL que aparece en la barra de estado del navegador (verás post=XXXXX).

Este método es el más rápido para casos puntuales pero tiene una desventaja: si el ID de la página cambia (por ejemplo, al migrar el sitio), el CSS deja de funcionar. Los métodos 1-3 son más robustos a largo plazo.

Comparativa de métodos

MétodoDificultadFlexibilidadMejor para
1. Plantilla Blank PageFácilBásicaOcultar todo de una vez
2. Theme Builder (vacío)MediaAltaHeader/footer personalizado
3. Condiciones de DiviMediaMuy altaReglas complejas por tipo
4. CSS por ID de páginaFácilBásicaSolución rápida y puntual

Preguntas frecuentes

¿Ocultar el menú afecta el SEO de la página?

No directamente. Google indexa el contenido de la página, no si tiene header o no. Sin embargo, si la página tiene links internos en el menú, al ocultarlo esos links dejan de ser rastreables por los bots desde esa URL específica. Para páginas de landing o «gracias», esto no representa ningún problema en la práctica.

¿Puedo ocultar solo el menú pero mantener el footer visible?

Sí, perfectamente. Los métodos 3 (condiciones) y 4 (CSS) te permiten actuar de forma independiente sobre el header y el footer. Con condiciones de Divi puedes excluir solo la sección del menú sin afectar el footer, o viceversa.

¿Esto funciona igual en Divi 5?

Los métodos 1, 3 y 4 funcionan igual en Divi 5. El método 2 (Theme Builder) tiene una interfaz ligeramente diferente en Divi 5 pero la lógica es la misma: puedes asignar headers y footers específicos por plantilla y dejarlos vacíos si quieres ocultar esos elementos.

Conclusiones

Ocultar o mostrar el menú o pie de página de ciertas páginas en Divi es una tarea sencilla que se puede lograr de varias formas. Al cambiar la plantilla de WordPress a Blank Page, puedes ocultar el menú y pie de página de una página específica con un solo clic. Con el Theme Builder y las condiciones de Divi tienes un control más granular y profesional.

Es importante tener en cuenta el diseño y la usabilidad del sitio al tomar decisiones sobre qué elementos mostrar u ocultar en diferentes páginas. Con estos conocimientos, podrás personalizar el diseño de tus páginas en Divi de manera efectiva y mejorar la experiencia de navegación para tus visitantes.

// ¿Te sirvió este tutorial?

Imagina lo que aprenderás
con los cursos completos

En UXDivi llevamos los tutoriales del blog al siguiente nivel: proyectos reales de principio a fin, recursos descargables y soporte directo conmigo. Todo por menos del costo de un curso individual en otra plataforma.

+44 cursos +1116 alumnos 4.7 en Trustpilot Garantía 7 días
Jefferson Maldonado
// Escrito por

Jefferson Maldonado

UX Director · Founder UXDivi, MUX Studio y UXDivi Templates

UX Director | fundador de UXDivi y MUX Studio

Comentarios

Para dejar un comentario, accede a tu cuenta de UXDivi.

Acceder a mi cuenta