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.

 

 

VER CURSOS

 

 

 

 

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

 

 

2.- Ocultar header y footer en Prestashop con 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.

 

 

2.1.- Identificador de la página CMS donde queremos ocultar header y footer

 

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.

 

pagina cms prestashop identificador quitar header y footer

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 codigo css a página cms ocultar header y footer

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.

 

 

3.- Ocultar header y footer de una página CMS con Prestashop

 

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

 

Compártelo ya!!

RECIBE GRATIS

CURSO PRESTASHOP

(20 vídeos)

Y WOOCOMMERCE

(14 vídeos) y MÁS

 

1.- CURSO PRESTASHOP 1.7 GRATIS (20 VÍDEOS)

2.- CURSO WOOCOMMERCE GRATIS (14 VÍDEOS)

3.- Guía para crear una tienda online de éxito
4.- Guía SEO para Prestashop
5.- Training Woocommerce, plugins imprescindibles y recomendados

QUIERO LOS CURSOS Y DEMÁS GRATIS

Mira en tu buzón de correo, para confirmar la suscripción.