En este post vamos a ver cómo podemos ocultar o no mostrar la cabecera o header y el footer de una página CMS concreta de Prestashop. Algo habitual en una landing page creada con Prestashop.
He visto por la red muchas preguntas sobre cómo ocultar el header y footer en Prestashop y respuestas claras y sencillas de ejecutar.
Nosotros vamos a ocultar el header y footer utilizando CSS. De esta forma no tendremos que modificar archivos de Prestashop. El código CSS lo podremos añadir en el área de texto que suelen tener las plantillas para este menester o a través de un módulo gratuito.
LANDING PAGE PRESTASHOP - ÍNDICE NO MOSTRAR HEADER Y FOOTER PRESTASHOP
1.- ¿Por qué ocultar el header y footer de una página en Prestashop? – Landing Page Prestashop
Crear una landing page en Prestashop nunca ha sido una tarea fácil. Siempre ha sido más complicado que aplicaciones como WordPress.
Para este tipo de páginas es muy habitual la necesidad de NO mostrar el header y footer de la web, para que el visitante de la landing no pueda “escapar” de dicha página.
Otro elemento importante es disponer de un constructor o page builder que nos permita realizar un trabajo en condiciones.
Ya sabéis que yo utilizo la plantilla Warehouse y que ésta incluye el page builder Elementor. Sin duda, uno de los mejores constructores del mercado.
Además, con la plantilla Warehouse, podremos utilizar el page builder no solo en la página de inicio o home sino que también lo podrás utilizar en páginas CMS.
Con nuestro page builder y nuestro truco para ocultar header y footer en páginas CMS concretas de Prestashop, estaremos en disposición de poder crear una landing page.
PLANTILLA WAREHOUSE
Vamos a utilizar un código CSS para ocultar el header y footer en una página CMS concreta de Prestashop utilizando la plantilla Warehouse.
Lo primero que debemos saber es el ID o identificador de la página CMS en la que queremos que no se muestre el header y footer.
Para ello, iremos a: “PERSONALIZAR > Diseño > Páginas”. Se te mostrarán todas las páginas CMS que tienes creadas en Prestashop.
Fíjate que hay una columna denominada: “ID”. Pues bien, apúntate el Identificador o ID de la página CMS en la que quieres ocultar cabecera y pie.
averiguar el ID de la página CMS en la que queremos ocultar el header y footer
2.2.- Añadir código CSS en Warehouse para no mostrar cabecera y pie.
La plantilla Warehouse dispone de una zona para poder añadir código CSS sin tener que editar ningún archivo de Prestashop.
Para ello debes ir a: “PERSONALIZAR > Diseño > IqitThemeEditor – Backoffice”.
Ahora, haz clic en la pestaña: “Custom CSS/Js/Codes” y ve al área de texto: “Custom CSS code”.
A continuación, añade el siguiente código:
.cms-id-1 #header {display:none;}
.cms-id-1 #footer {display:none;}
.cms-id-1 .breadcrumb {display:none;}
.cms-id-1 .page-header {display:none;}
Añadir código css a warehouse para ocultar header y footer
Nota: cambia el 1 por el id de la página CMS que quieras ocultar. En este ejemplo serviría para ocultar el header y footer de la página CMS con ID=1
Nota: las líneas que incluyen #header y #footer sirven para ocultar cabecera y pie de la página CMS.
Nota: la línea que incluye la clase .breadcrumb sirve para ocultar también las migas de pan o breadcrumbs que por defecto incluye la plantilla Warehouse.
Nota: la línea que incluye la clase .page-header sirve para ocultar el título de la página.
Si no estás utilizando la plantilla Warehouse, debes ver si la plantilla que estás utilizando dispone de una ventana para añadir código CSS.
Si es así, puedes añadir directamente el código que te voy a indicar posteriormente. Si no es así, puedes utilizar el módulo gratuito: Custom code module by ST-themes
En este post se explica detenidamente las opciones que tienes en Prestashop para poder añadir código CSS: Cómo añadir código CSS a Prestashop
Nota: existe la posibilidad que en determinadas plantillas no funcione correctamente el código CSS que te voy a indicar. En la plantilla por defecto de Prestashop, si funciona.
Como te he indicado en el apartado 2.1, lo primero que debes averiguar es el número que identifica o identificador de la página CMS en la cual quieres quitar el header y footer. Mira el proceso en el apartado 2.1
Una vez te hayas instalado el módulo, dale a configurar e introduce en la ventana: “Custom CSS Code” el siguiente código:
.cms-id-1 #header {display:none;}
.cms-id-1 #footer {display:none;}
Nota: cambia el 1 por el id de la página CMS que quieras ocultar. En este ejemplo serviría para ocultar el header y footer de la página CMS con ID=1
Me encanta el diseño web y el mundo del ecommerce. Apasionado de Prestashop, Woocommerce/Wordpress y de la formación. Me gustaría que este blog te sirviera de ayuda para poner en marcha e ir mejorando y evolucionando tu tienda online. Ya seas un profesional del sector o no, seguro que encontrarás mucha información de valor e interés aquí.
Hola, estoy usando el Warehouse, pero me está ocultando el selector de idiomas, cómo puedo hacer para que aparezca? Tengo 3 idiomas en mi tienda, pero se ve el selector en ninguna parte?
Hola Daniel.
Si has ocultado el header como se explica en este post, no te aparecerá ni el selector de idiomas ni ningún otro elemento del header.
Me gustaría también invitartea que eches un vistazo a mi plataforma de formación https://cursotiendaonline.com/ desde donde puedes Acceder a TODOS mis cursos online por solo 10 €/mes (Incluye ¡¡SOPORTE!!). En la plataforma tienes cursos sobre Prestashop, Warehouse, Curso claves para crear una tienda online de éxito, Curso alta en google e indexación web, SEO General, SEO Ecommerce, Analytics tiendas online, Blog Prestashop, Curso Copywrting, Woocommerce, WordPress, etc. etc.
Hola Joaquin
Gracias por tu post, he probado ha hacer los cambios que comentas en diferentes paginas y todo funciona genial con el CSS, pero tengo un problema.
Me gustaria hacer lo mismo con la pagina Index (HOME) para que parezca una Landing Page y los usuarios vayan donde me interesa y no den vueltas por el menu principal.
Como tengo que hacerlo, por cierto no tengo ni idea de programación he hecho algunos cambios en los archivos .tpl de algunas cosas y hasta el momento me ha ido bien con tus tutoriales.
Muchas gracias
HOla Joaquín. Muchas gracias por toda la info que compartes.
Me ha quitado el header y footer pero no el título ni el breadcrumb. A qué puede ser debido? (tengo warehouse).
Por otro lado, si la página que quiero hacer landing (quitar estos 4 elementos) es una página de un producto específico. Cómo se haría? Gracias.
Hola, muy buenas. Gracias por la aportación.
¿Sería posible ocultar solamente el topbar el header?
¿Una especie de … #topbar …?
He probado pero no funciona.
GRACIAS!
Buenas tardes,
En primero lugar, muchísimas gracias por vuestros post, son de gran ayuda.
Os escribo porque quería preguntar cómo puedo ocultar el header y el footer de la home, para asi hacer la lading page, ya que para las páginas cms funciona perfectamente, pero no encuentro cómo hacerlo para la home.
Muchísimas gracias.
Hola Joaquín!
Como estás?
bueno, quisiera agradecerte, tu web es muy buena e informativa. Te quería consultar sobre los layouts, ya que enseñas como ocultar header y footer, lo he intentado y me funciona sólo en las páginas cms. Mi pregunta es si es posible modificar el header y footer de un layout o solo puedo elegir entre los styles que me propone warehouse?
Te agradezco, tu tiempo y conocimiento
Saludos desde Chile!
Buenas Tatiana.
gracias por tus comentarios.
Claro, en la configuración de warehouse es posible elegir entre diferentes diseños de header y footer
Hola,
Estoy probando la plantilla Warehouse con el style 5, la cuestion es que quiero la home con una columna a la izquierda. El problema es que si pongo el revolution slider en el hook home me tapa los modulos que contiene la columna izquierda.
Hay alguna manera de hacerlo?
Veo que con el page builder puedo crear la columna de la izquierda pero claro entonces no puedo asignar modulos al hook columnleft ya que realmente no existe. Haber si me puedes dar algo de luz en esto ya que tu eres un crack con la plantilla, muchas gracias por tus aportes.
Hola Albert.
Este caso tan específico mejor consúltalo en el soporte de Warehouse que son los que seguro, pueden analizar tu caso concreto más de cerca, y más fácilmente, te pueden resolver tu duda
https://iqitcommerce.ticksy.com/
Seguro que tienen una solución prevista para poder añadir la barra lateral en al home y usar al mismo tiempo el slider
Hola,
al poner el codigo;
.cms-id-1 .breadcrumb {display:none;}
No se oculta la barra breadcrumb, ¿Que estoy haciendo mal?
Gracias de antemano por toda la ayuda, tienes una magnifica forma de explicar fácil y eficaz
Buenas.
Es posible que tu página cms no sea la id=1. Tienes que poner el id correspondiente a la página cms con la que estás trabajando
Buenas tardes Joaquín,
Muchas gracias por tu excelente trabajo. Tengo dos problemas relacionados con este tema. No puedo ocultar el breadcrum aunque oculta perfectamente es resto de elementos (he verificado el id de la página CMS).
Por otro lado esa modificación solo funciona en Desktop. Si lo veo en responsive no respeta el {display:none}. Imagino que es un tema de prioridades en el CSS.
Cualquier pista al respecto es bienvenida
Hola, buenas tardes.
Espero poder ayudar a las consultas de este artículo.
En primer lugar te agradezco Joaquín Barberá Aledo, por la información brindada puesto que me ha servido de mucha ayuda.
Por otra parte, les comento a los que tienen el problema con el breadcrumb, es probable que de por si el theme usado haya definido por importancia que se muestren los breadcrumb en los CMS, por lo que hay que declarar nueva importancia.
Es decir, al agregar el código CSS en el breadcrumb, deben colocar lo siguiente y antes del punto y coma ‘!important’
Es decir, debe quedar de esta manera:
.cms-id-1 .breadcrumb {display:none!important;}
De esta manera se declara a este código como el que se considera más importante sobre los demás a la hora de procesar el CSS.
Espero haberlos ayudado. Éxitos!
Arturo, gracias por tu aportación
un saludo