Cómo quitar el menú principal de una URL concreta de tu web

Seguro que muchas veces has visto landing pages sin menú principal. En realidad, es lo óptimo ya que así evitas distracciones en los usuarios con el objetivo de conseguir las máximas conversiones posibles.

Sin embargo, la mayoría de plantillas no dan la opción para poder quitar el menú principal en la página que deseas. Por lo que te ves obligado a tocar el CSS para poder conseguirlo.

Además, si utilizas algún page builder para crear tu landing te puede generar ciertos problemas. Por ejemplo, al crear una landing con elementor page builder, he tenido un problema al seleccionar las opciones que te eliminan el menú principal. Y es que no solo eliminaba el menú principal, sino que quitaba el header y el footer. Por lo que si tienes, por ejemplo, instalado el código de seguimiento de Anlytics en estos archivos, no conseguirá leer ningún dato.

Esta es la razón por la que me he visto obligado en investigar cómo crear una landing eliminando el menú principal. Así que no voy a enrollarme más. Vamos con los pasos que hay que dar para quitar el menú principal de una URL concreta.

 

quitar menu principal landing

 

Pasos para quitar el menú principal de tus landing page

 

Paso 1. Ver cuál es la id de tu landing page

Para esto, os voy a ilustrar con alguna imagen para que no os perdáis.

 

  • Abrimos el inspector de elementos

Para abrir el inspector de elementos bastará con pulsar el botón secundario y dar a inspeccionar. Aparecerá una ventana como la que está recuadrada en rojo.

quitar menú de landing page

  • Comprobamos cuál es la id de la landing page

Como puedes comprobar, el inspector está dividido en dos. En el lado izquierdo aparece el código html y en el derecho el código CSS.

Nos tenemos que situar en el lado izquierdo e ir al principio del todo. Ahí debemos fijarnos en donde pone page-id. En este caso la id de mi landing page es “page-id-873”.

quitar menú de landing page

 

Paso 3. Eliminar el menú principal solo de tu landing page mediante CSS

Para tocar los CSS de mi web uso y recomiendo usar SiteOrigin CSS ya que me parece un plugin muy completo y liviano. Personalmente me gusta mucho. Por eso es uno de los componentes de mi lista de mejores plugins para WordPress.

Ahora debemos insertar el siguiente código en nuestro editor CSS;

 

 

En mi caso pone page-id-873 que es la id de mi landing page. En el vuestro debéis poner la id de vuestra landing.

 

Con esto, conseguiremos eliminar el menú principal de nuestra landing page. Además, seguiremos teniendo constancia de los movimientos de nuestros visitantes a través de analytics ya que sigue existiendo el header y el footer en nuestra landing.

En este caso no he encontrado ninguna solución en internet. En el soporte de WordPress, el creador de Elementor recomendaba usar un plugin para solucionar el problema. Elementor es una gran herramienta. Es uno de los plugins que recomiendo en el post de mejores plugins, y no quería dejar de usarla por este problema. Por lo que me ha tocado investigar, y al final he dado con la manera de hacerlo sin usar de plugins adicionales. Si se puede hacer sin plugins, mejor. Espero que os haya ayudado a solucionar el problema y si tenéis alguna duda os invito a que me preguntéis en los comentarios o que os pongáis en contacto a través de mail. Estoy deseando poder ayudaros.

Muchas gracias a Shutterstock por las imágenes principales.

¿Te ha gustado el artículo? No te vayas sin votar
[Total:2    Promedio:4.5/5]
Roberto Flores on FacebookRoberto Flores on GoogleRoberto Flores on LinkedinRoberto Flores on Twitter
Roberto Flores
Roberto Flores
Profesional de Marketing Online, especialista en posicionamiento SEO, SEM y diseño Web. Socio certificado de Google. Inquieto por naturaleza y aprendiendo constantemente nuevas técnicas. Colaboro y ayudo a empresas y profesionales a conseguir mayor visibilidad en internet. Consultor de Marketing Online Freelance. ¿Trabajamos juntos?

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

 

Scroll Up