La impresionante plantilla para Prestashop “Warehouse” dispone de uno de los mejores constructores o page builders para WordPress.

 

DISFRUTA DE TODOS MIS CURSOS PREMIUM POR SOLO 10€/MES


VER CURSOS

 

Este potente constructor se conoce como “Elementor” y en la actualidad es utilizado en más de 1.395.321 instalaciones de WordPress. Aquí tienes un post sobre las características del page builder Elementor para wordpress

Elementor dispone de una versión de su potente constructor para Prestashop, que se ha incluido en la plantilla Warehouse, la mejor plantilla para Prestashop 1.7 y 1.6

 

Curso plantilla Warehouse Prestashop

MÁS INFO CURSO WAREHOUSE

 

En este post puedes ver como crear un Mega Menú con Warehouse, la mejor plantilla para Prestashop: Mega Menú plantilla Warehouse

 

Se han añadido una serie de widgets o módulos específicos de Prestashop más de los habituales que dispone por defecto como iconos, títulos, Editor de texto, etc.

Elementor es un constructor o page builder visual. Es decir, podemos ir viendo los cambios en tiempo real.

El constructor soporta varios idiomas. Es decir, podrás personalizar el diseño para cada uno de los idiomas que tengas en la tienda online.

 

QUIERO LA PLANTILLA WAREHOUSE

 

 

 

 

 

 

1.- Lugares en los que se puede utilizar el page builder elementor en Prestashop / Warehouse

 

El page builder de la plantilla Warehouse lo podemos utilizar en diferentes sitios de la tienda online:

a.- Home: como era de esperar, el constructor de la plantilla Warehouse lo podremos utilizar para moldear una fabulosa página de inicio o home de nuestra tienda online realizada con Prestashop. Para usar el constructor en la home tendrás que ir a: «MEJORAS > Diseño > Iqit Elementor – page builder»

b.- Páginas CMS: También podremos utilizar el constructor de la plantilla Warehouse en cualquier página estática o CMS de Prestashop.

 

¿No sabes que es una página CMS en Prestashop? mira este post: Páginas CMS

 

c.- Productos: También podremos usar el constructor “Elementor” en las fichas de productos.

 

 

2.- Estructura del constructor de la plantilla Warehouse

 

La estructura del constructor está formado por 3 elementos diferentes:

a.- Secciones (section): las secciones son los contenedores principales o primarios del constructor. En una página podremos tener tantas secciones como queramos.

Las secciones son muy flexibles, tienen multitud de opciones de personalización y podrán ocupar toda la anchura de la página o solo parte de ella.

 

incluir secciones en la plantilla warehouse para prestashop

Añadir una sección page builder plantilla Warehouse

 

b.- Columnas: Las columnas son contenedores más pequeños que las secciones y que se incluyen en las mismas.

Las columnas incluidas en una sección pueden tener diferente estructuras:

1 /1

1 /2 + 1 /2

1 /3 + 1 /3 + 1/3

1 /4 + 1 /4 + 1 /4 + 1 /4

1 /3 + 2 /3

2 /3 + 1 /3

1 /4 + 1 /4 + 1 /2

1 /2 + 1 /4 + 1 /4

1 /4 + 1 /2 + 1/ 4

1/ 5 + 1 /5 + 1 /5 + 1 /5 + 1 /5

1/ 6 + 1 /6 + 1 /6 + 1 /6 + 1 /6 + 1 /6

1 /6 + 4 /6 + 1 /6

 

estructuras de columnas en una seccion plantilla warehouse

Diferentes estructuras o distribuciones de columnas en una sección de Warehouse

 

c.- Widgets: los widgets son los elementos finales que se incluyen en las diferentes columnas de cada sección.

En una columna se pueden introducir varios widgets.

El constructor de la plantilla Warehouse dispone de una gran cantidad de widgets generales y específicos para Prestashop.

Cada widget es diferente, el constructor dispone de widget para añadir iconos, botones, bloques de texto, títulos, botones desplegables, separadores, imágenes, divisores, mapa de google, testimonios, barras de progreso, carrusel de imágenes, lista de productos, etc.

 

widgets de la plantilla warehouse para prestashop 1.7 y 1.6

Añadir widgets a la home con tema Warehouse

 

QUIERO LA PLANTILLA WAREHOUSE

 

 

3.- Las secciones del constructor “Elementor” de la plantilla Warehouse

 

Como antes he comentado, las secciones son los contenedores más grandes o principales del constructor “Elementor” de la plantilla Warehouse.

En cada sección podemos incluir una amplia variedad de estructuras de columnas como hemos visto en el punto 2. B

Podemos incluir tantas secciones como queramos en una misma página.

 

En esta entrada de blog puede ver todas las características de la Warehouse, la mejor plantilla para Prestashop: Plantilla Warehouse

 

Las secciones se utilizan para dar un background (color de fondo o imagen de fondo) y una distribución de columnas en partes de una página.

Hoy en día habrás visto que una misma página existen diferentes partes o zonas que vienen caracterizadas por su color de fondo (o imagen de fondo). Se utilizan varias zonas con diferentes fondos en una misma página para mantener la atención del visitante y poder estructurar el contenido.

 

Las secciones del page builder elementor separan zonas de la home

Diferente secciones en una misma página

 

 

3.1.- Crear una sección con el page builder de la plantilla Prestashop Warehouse

 

Para crear una nueva sección en una página haz clic en el botón “ADD NEW SECTION”.

Hecho esto tendrás que elegir la estructura de columnas que quieres para dicha sección. Podrás elegir una entre las que se apuntan en el punto 2. B

 

 

3.2.- Configurar una sección con el page builder de la plantilla Prestashop Warehouse

 

Para configurar la sección que acabas de crear haz clic en con el ratón sobre la pestaña “section” de dicha sección y te aparecerá en el lateral izquierdo de la pantalla las diferentes opciones de configuración.

 

personalizar una sección creada con el constructor de la plantilla warehouse

Configurar una sección del page builder plantilla Warehouse

 

La configuración de la sección se divide en 3 pestañas diferentes:

 

 

A.- Layout:

 

Desde esta pestaña definiremos características estructurales del contenedor y de las columnas de su interior.

Definiremos si la sección la queremos de anchura completa (full width), anchura de las columnas, separación de las columnas, posición del contenido en la columna y altura de la sección.

 

apartado layout en configuración sección warehouse

Pestaña Layout configuración de una sección

 

 

B.- Style

 

Esta pestaña se divide en tres partes o bloques diferentes de configuración:

 

i.- Background: desde aquí elegiremos uno de los elementos más importantes en una sección que es ni más ni menos que el fondo de la misma. Podremos utilizar un color de fondo, un gradiente de color, una imagen o incluso un vídeo (se puede insertar un vídeo directamente de youtube)

ii.- Background Overlay: esta opción solo está disponible cuando hemos elegido algún tipo de fondo o background. Con esta opción podremos añadir una capa superpuesta al fondo.

iii.- Border: Desde este bloque podremos añadir un borde a la sección. Podremos elegir entre diferentes tipos de borde, el tipo de curva de las esquinas y la opción de sombreado.

iv.- Typography: desde este apartado podremos elegir de manera general los colores de diferentes tipos de textos dentro de la sección.

 

fondo con el constructor elementor para prestashop

Colocar fondo o background a una sección plantilla warehouse

 

 

C.- Advanced

 

El contenido de esta pestaña se clasifica en dos bloques:

 

i.- Advaced: Desde aquí podremos establecer los márgenes (margin) y los padding (margen interior) de la sección.

También podremos establecer el tipo de animación en el momento de mostrarse la sección.

ii.- Responsive: Desde este bloque podremos configurar diferentes opciones de visualización de la sección en móviles, tablets o escritorio.

También tenemos una opción para invertir las columnas de la sección cuando se visualiza con un móvil (reverse columns).

 

ocultar sección en moviles plantilla warehouse para prestashop

Pestaña «Advanced» de la configuración de secciones plantilla warehouse

 

QUIERO LA PLANTILLA WAREHOUSE

 

 

4.- Las columnas del page builder “Elementor” de la plantilla Warehouse

 

Las columnas son los contenedores que se incluyen dentro de las secciones. Dentro de las columnas colocaremos los elementos finales o widgets.

Para ver las opciones de personalización de una columna tendremos que hacer clic en la pestaña “Column” de una columna y aparecerán en el lateral izquierdo de la página todas las opciones de configuración.

 

El contenido se divide en 2 pestañas:

 

A.- Style:

Dentro de la pestaña style tenemos divididas las opciones de personalización en dos bloques: Background & Border y Typography.

Desde dichas pestañas podremos personalizar el background o fondo de la columna, el tipo y radio del borde de la columna, sombreado y los colores del texto que se incluya en el interior.

B.- Advanced:

La pestaña advanced se divide en dos bloques: Advanced y Responsive, desde donde podremos personalizar los márgenes y padding de las columnas, animación, y anchura de las columnas en la versión móvil (Mobile Width)

 

configura columnas de las secciones contructor plantilla prestashop warehouse

Configurar columnas plantilla warehouse

 

 

5.- Los widgets del constructor “Elementor” de la plantilla Warehouse

 

Los widgets del constructor de la plantilla Prestashop Warehouse son los elementos finales que iremos incorporando en las columnas.

 

 

5.1.- Cómo añadir widgets a las columnas con la plantilla prestashop Warehouse

 

En primer lugar haz clic en icono con forma de nueve cuadrados pequeños situado en la parte superior izquierda de la pantalla para que te aparezcan los diferentes widgets disponibles.

A continuación haz clic sobre el widget que quieres colocar en una columna y sin soltar arrástralo hasta su posición, finalmente suelta el botón izquierdo del ratón para colocar el widget.

Una vez añadido podrás personalizarlo haciendo clic en el icono “Lápiz” que aparece en la parte superior derecha del widget y te aparecerán todas las opciones en la parte izquierda de la pantalla.

 

configurar widgets constructor elementor para prestashop

Configurar widgets constructor tema warehouse para prestashop

 

Dependiendo del widget tendremos diferente opciones de personalización. Pero siempre aparecerán en la parte derecha de la pantalla dividida en diferentes pestañas (Content, style y advanced).

El constructor “Elementor” utilizado en la plantilla para Prestashop Warehouse utiliza widgets generales y específicos para Prestashop.

 

 

5.2.- Listado de widgets de Elementor para la plantilla Warehouse

 

Vamos a ver un listado de los diferentes widgets de que dispone este fabuloso constructor para la plantilla Warehouse para Prestashop.

Vamos a dividir los widgets en dos bloques: widgets generales y widgets específicos para prestashop.

 

A.- Widgets específicos para Prestashop

 

a1.- Brand logos (logos de marcas): este widget específico para prestashop permite mostrar los diferentes logos de marcas o proveedores con los que trabaja la tienda online.

Los logos se pueden mostrar como un carrusel o en rejilla (grid)

 

widget marcas plantilla warehouse

Widget para mostrar marcas con plantilla warehouse

 

a2.- Product list sliders (productos): este widget es de los más importantes ya que nos va a permitir mostrar un bloque con productos de diferentes formas y según diferentes parámetros.

Podremos mostrar productos según: nuevos productos, más vendidos, que pertenezcan a una determinada categoría o incluso elegidos individualmente.

Podremos mostrar los productos en diferentes tamaños y según diferentes distribuciones en filas de 1 hasta 6 productos.

Los podremos mostrar en forma de “Rejilla” (Grid) o en modo carrusel.

 

mostrar productos en la home con plantilla warehouse prestashop

Mostrar widget de productos plantilla warehouse

 

a3.- Tabs with products (pestañas con productos): con este widget podremos mostrar diferentes bloques de productos en diferentes pestañas.

Podremos clasificarlos según: nuevos productos, más vendidos, que pertenezcan a una determinada categoría o incluso elegidos individualmente.

Los podremos mostrar también en modo rejilla o carrusel.

 

pestañas con productos modo rejilla o carrusel

Pestañas con diferentes productos en la home prestashop

 

 

a4.- Revolution slider: este widget nos servirá para introducir un slider previamente creado con el módulo más potente para creación de sliders que es “Revolution slider” muy conocido en el ámbito de WordPress. La plantilla incluye por defecto este módulo.

 

a5.- Vertical menú: este widget nos permite añadir un menú.

 

a6.- Newsletter: este widget nos permite añadir un bloque para que los visitantes se registren como suscriptores.

 

a7.- Module (módulo): este widget nos permitirá añadir algunos módulos de los que disponemos en Prestashop específicos de la plantilla Warehouse.

 

 

B.- Widgets Generales:

 

b1.- Columns (columnas): esto no es un widget en sí sino una opción para poder añadir nuevas columnas.

 

b2.- Heading (encabezado): widget para poder añadir un título.

 

b3.- Image (imagen): widget para poder añadir una imagen, por lo que será un widget bastante utilizado.

 

b4.- Text Editor (editor de texto): este widget proporciona un bloque de texto con el correspondiente editor, por lo que será uno de los widgets más habituales.

 

b5.- Vídeo (Vídeo): widget para añadir vídeos

 

b6.- Button (botón): widget para poder añadir un botón con un montón de opciones de personalización del diseño del mismo.

 

b7.- Divider (divisor): con este widget podremos mostrar una línea divisora que separe dos zonas de la página. Podremos personalizar el diseño al detalle de dicha línea.

 

b8.- Spacer (espacio): con este widget podremos establecer un espacio en blanco de un determinado número de píxeles.

Podremos personalizar la altura de este espacio de forma diferente según el dispositivo en que se esté mostrando la web.

 

b9.-  Row shape separator (separador con forma): con este widget podremos crear separadores con forma de triángulo o rectángulo u otras. Este widget dispone de muchas opciones para personalizar el diseño de dicha forma.

 

widget separador con diferentes formas y colores

Widget separador con forma de la plantilla warehouse

 

b10.- Image Box (bloque con imagen): este widget permite añadir de una sola vez una imagen + un título + un texto descriptivo. Evidentemente esto también se podría ir añadiendo con diferente widgets (un widget image + un widget de heading + un widget Text editor) pero la ventaja es que con el widget “Image Box” lo hacemos de una sola vez.

 

widget bloque imagen con warehouse prestashop

Widget para añadir imagen + título + texto con warehouse

 

b11.- Google Maps (mapa Google): con este widget podremos añadir un mapa de google maps.

 

b12.- Icon (icono): con este widget podremos añadir un icono con el page builder “Elementor” de Warehouse, la mejor plantilla para Prestashop. Por lo que también será un widget muy utilizado. Las opciones de personalización del diseño del icono son muy numerosas.

 

b13.- Icon Box (bloque de icono): al igual que en el widget “Image Box” que veíamos antes este es un widget que se podría construir con widgets separados. En este caso el widget Icon Box nos añade un icono + un título + una descripción de texto.

 

b14.- Image Carrusel (carrusel de imágenes): con este widget podremos añadir un carrusel de imágenes. Se pueden mostrar una o varias imágenes en la pantalla y luego ir pasándolas con unas flechas laterales y/o puntos.

 

b15.- Icon list (lista de iconos): con este widget podremos crear una lista de texto precedidas por un icono.

 

b16.- Counter (contador): con este widget podrás establecer un valor numérico y un texto.  Cuando se visualice el número este empezará desde cero e irá subiendo hasta el número que haya sido fijado a modo de contador.

 

b17.- Progress Bar (barras progreso): algo similar al widget Counter pero en vez de ser un progreso numérico será un progreso a través de barras de color.

 

b19.- Testimonial (testimonios): a través de este widget podremos establecer las típicas recomendaciones con imagen + texto que se suelen ver hoy en día en muchos sitios web.

 

b20.- Tabs (pestañas): con este widget podremos añadir un bloque de texto que se visualizará a través de varias pestañas.

 

b21.- Accordion (Acordeón): un acordeón es una serie de botones desplegables con la condición de que solo puede haber uno abierto. Muy utilizado en las preguntas frecuentes.

 

b22.- Toggle (botones desplegables): con este widget podremos añadir botones desplegables, pero esta vez independientes unos de otros no como en el caso anterior. Muy utilizado en las preguntas frecuentes

 

Botones desplegables en la mejor plantilla para prestashop

Botones desplegables plantilla Warehouse

 

b23.- Instagram: este widget sirve para poner un bloque o módulo asociado a una cuenta de Instagram.

 

b24.- Social Icons (redes sociales): este widget permite añadir iconos asociados a las redes sociales en las que está presente tu ecommerce.

 

b25.- Alert (alerta): este widget permite añadir cuadros de aviso con texto. El widget permite diferentes diseños del bloque según sea el tipo de aviso que se quiere realizar.

 

b26.- HTML: este widget permite añadir directamente código HTML.

 

QUIERO LA PLANTILLA WAREHOUSE

 

 

Compártelo ya!!