Opt In Image
DESCARGA GRATIS
1.- Guía para crear una tienda online de éxito
2.- Guía SEO para Prestashop
  • Recibe todos los domingos las últimas entradas del blog.
  • Recibe contenidos exclusivos.

Te puedes dar de baja en cualquier momento. Nada de spam

 

Vamos a ver en este post los diferentes tipos de diseños de header o encabezamientos web que nos ofrece Warehouse, la mejor plantilla para Prestashop.

*** NO vamos a ver como personalizar colores (esto lo veremos en otro post)***. Solo nos vamos a centrar en los tipos de estructuras de header diferentes de que dispone la plantilla Warehouse

Los diferentes tipos de header los podremos seleccionar desde el Theme Editor (Editor de temas) que en la plantilla Warehouse se denomina “Iqit Theme Editor”

QUIERO LA PLANTILLA WAREHOUSE

 

 

 

1.- Cómo modificar el header de la plantilla Warehouse para Prestashop

 

Para cambiar el tipo de header de la plantilla Warehouse debemos acceder al editor de temas o Theme Editor de la plantilla.

En la plantilla Warehouse podemos acceder al “Theme Editor” o Editor de temas de dos maneras diferentes:

 

A.- Editor de temas en vivo (Iquit Theme Editor – Live): Con el editor de temas en Vivo podremos visualizar los distintos tipos de header en tiempo real.

Para acceder al Iquit Theme Editor – Live iremos a: “MEJORAS > Diseño > IqitThemeEditor – Live”

En la interface que nos aparece haremos clic en: “Header > Aspecto”

 

cambiar diseño header prestashop

Editor de temas (Live): desde aquí podremos cambiar el tipo de cabecera de Prestashop y ver como queda en tiempo real

 

B.- Editor de temas backoffice (Iquit Theme Editor – Backoffice): Con el editor de temas tipo backoffice tendremos que ir haciendo visualizaciones de la web para ir viendo los diferentes tipos de header disponibles con la plantilla Warehouse.

Para acceder al Iquit Theme Editor – BackOffice iremos a: “MEJORAS > Diseño > IqitThemeEditor – Backoffice”

Luego en el menú lateral iremos a: “Header > Aspecto”

 

cambiar tipo de header warehouse

Editor de temas (backoffice): Desde aquí podremos seleccionar los diferentes tipos de header de Warehouse

 

Aprende a utilizar el page builder de la plantilla Warehouse y crear una página de inicio a tu medida: Elementor page builder

 

 

2.- Tipos de header del tema Warehouse para Prestashop

 

El tema Warehouse para Prestashop ofrece 2 familias diferentes de headers o cabeceras para la tienda online:

 

A.- Headers horizontales: dentro de este tipo hay cuatro diseños diferentes de header para la web: style1, style 2, style 3 y style 4.

Todos estos tipos de header tienen en común que tienen un diseño horizontal situado en la parte superior de la web y que ocupan todo el ancho de la misma.

 

header horizontal plantilla warehouse

Headers con diseño horizontal

 

B.- Headers Verticales: dentro de este tipo de headers la plantilla Warehouse nos ofrece dos diseños diferentes: style 6 y style 7

Este tipo de headers tienen un formato de menú vertical situado como una barra lateral o sidebar, por lo que no ocupa todo el ancho de la parte superior de la web.

 

menu vertical plantilla warehouse

Header tipo vertical

 

A mí personalmente no me gustan mucho los header tipo vertical, ya que reducen el acho disponible para la web al ser ocupada una parte por la barra lateral del menú.

Además la visualización de un mega menú complejo es mucho más sencilla desde un menú horizontal que uno de tipo vertical.

Hace un tiempo había muchas webs y tiendas online que utilizaban una barra lateral para el header y menú del mismo, pero es algo que hoy en día se usa solo en contadas ocasiones.

 

Aquí puedes ver las principales características de la plantilla Warehouse: Características Warehouse

 

 

3.-Tipos de Headers o encabezamientos horizontales de la plantilla Warehouse

 

Vamos ahora a ver los 4 tipos diferentes de headers en formato horizontal que ofrece la plantilla Prestashop Warehouse.

 

 

3.1.- Diseño header plantilla Warehouse STYLE 1

 

Este es el diseño de header que ofrece la plantilla Warehouse por defecto. Está compuesto por 3 bloques horizontales.

 

partes del menú horizontal

Bloques que forman el header horizontal

 

En el bloque superior parte izquierda aparecen una serie de enlaces de interés que se gestionan a través del módulo: IQITLINKSMANAGER – block links

En la parte derecha del bloque superior aparece el selector de idiomas, el icono para el acceso a la lista de deseos (wishlist) y el icono del comparador de productos.

En el bloque central aparece el logo, la barra de búsqueda, el carrito y el inicio de sesión.

En el bloque inferior aparece el menú horizontal de la tienda

 

diseño style 1 plantilla warehouse prestashop

Diseño de header STYLE 1 prestashop Warehouse

 

 

3.2.- Diseño header tema Warehouse STYLE 2

 

El diseño de header STYLE 2 es exactamente igual que el STYLE1 con la única diferencia que en la parte derecha del bloque central aparece el icono del carrito e inicio de sesión uno junto al otro en vez de uno encima de otro.

Además en el header STYLE 2 el texto de inicio de sesión es sustituido por un icono.

 

diseño encabezamiento header style 2

Diseño de header Style 2

 

Aprende a crear un mega menú con la plantilla Warehouse: crear un menú warehouse

 

 

3.3.- Diseño header theme Warehouse STYLE 3

 

Este diseño de header de la plantilla Warehouse es una modificación del header STYLE 2

En este header desaparece la barra de búsqueda de productos y es sustituida por un icono que aparece en el lateral derecho en forma de “lupa”.

Si haces clic en el icono de búsqueda aparecerá una barra de búsqueda grande a través de una capa emergente.

El resto de elementos son iguales al diseño de header STYLE 2

 

tipo de menú diseño style 3 tema warehouse

Diseño header style 3 Warehouse

 

En la siguiente imagen puedes ver como aparece la barra de búsqueda de productos cuando se hace clic en el icono en forma de lupa.

 

barra busqueda diseño menú warehouse

Barra de búsqueda que se muestra al hacer clic en el icono en forma de lupa

 

 

3.4.- Diseño header plantilla Warehouse STYLE 4

 

Este tipo de diseño de header es muy similar al diseño tipo STYLE 3, con la importante diferencia de que en este caso la barra de menú sube desde el bloque inferior del header al bloque central y se sitúa entre el logo y el icono de la lupa.

Este es el único diseño de header en el cual solo existen 2 bloques horizontales. En todos los anteriores diseños de header habían 3 bloques horizontales que formaban el header (superior, central e inferior)

 

header style 4 plantilla warehouse

Diseño header STYLE 4

 

 

4.- Tipos de Headers verticales de la plantilla Warehouse Prestashop

 

La plantilla Warehouse Prestashop dispone de dos diseños web con menú lateral. Como decía, yo no soy muy partidario de este este tipo de diseños pero para algunos casos podrían ser interesantes.

 

 

4.1.- Diseño header plantilla Warehouse STYLE 6

 

Este tipo de header dispone de tres bloques diferenciados.

 

i.- Bloque superior: El superior recoge el selector de idiomas, lista de deseos y enlace del comprador. Si está activado el módulo IQITLINKSMANAGER, su contenido aparecerá encima del selector de idiomas y resto de enlaces mencionados.

 

ii.- Bloque central: en este bloque aparece el logo y tres iconos: lupa (buscador de productos), icono inicio de sesión e icono del carrito.

 

iii.- Bloque inferior: en el bloque inferior se muestra el menú de la tienda online.

 

header de la plantilla warehouse con menú lateral

Header Warehouse Style 6

 

 

4.2.- Diseño header plantilla Warehouse STYLE 7

 

Este tipo de header se diferencia del anterior en su bloque central. En este caso aparece la barra de búsqueda de productos en vez del icono de lupa, y el carrito e icono de inicio de sesión aparecen uno encima de otro en vez de uno al lado del otro.

 

Diseño de menú vertical Style 7 Prestashop warehouse

Diseño de menú vertical Style 7 Prestashop warehouse

 

 

4.3.- Cambio de módulos del hook displayNav2 al displayNav1

 

Si te decides por utilizar alguno de los dos headers con formato vertical. Es decir, o el diseño STYLE6 o el diseño STYLE7, y ves que el selector de idioma no aparece bien colocado como te muestro en la siguiente imagen:

 

selector de idoma con mucho margen

Selector de idioma mal colocado, cambiar modulos del hook displaynav2

 

Tendrás que ir a: “MEJORAS > Diseño > Posiciones de los módulos”, desenganchar los siguientes módulos del “displayNav2”

 

  • Bloque selector de idioma
  • Bloque de moneda
  • IqitWishlist
  • IqitCompare

 

Y engancharlos en el “displayNav1”

 

 

Bloguer especializado en Woocommerce / WordPress, Divi y Prestashop. Me dedico a impatir formación y a la creación de páginas web, blogs y tiendas online.Mi otro blog, especializado en WordPress y Divi: horizonweb.es

Uso de cookies

Utilizamos cookies propias y de terceros para mejorar nuestros servicios y su experiencia de navegación. Si continua navegando, consideramos que acepta su uso. Puede cambiar la configuración u obtener más información Aquí,plugin cookies

ACEPTAR
Aviso de cookies