Seleccionar página

El archiconocido Page builder Elementor también se puede usar con Prestashop.

 

Tienes dos maneras de hacerlo:

 

👉 Módulo Creative Elements: puedes añadir el módulo Creative Elements a cualquier plantilla de Prestashop y de esta forma añadir el page builder Elementor a tu Prestashop. Si usas la plantilla Warehouse, no lo tienes que hacer, ya que dicha plantilla ya incluye el constructor Elementor.

MÓDULO CREATIVE ELEMENTS

👉 Plantilla Warehouse: Si no tienes plantilla aún, puedes comprar la plantilla Warehouse, que ya incluye el constructor Elementor.

Es una de las plantillas para Prestashop que más opciones de diseño incluye, y además también el constructor Elementor. Para mi, la mejor.

PLANTILLA WAREHOUSE

Elementor es sin duda uno de los mejores maquetadores visuales que existen. De alguna forma, junto al Divi builder, revolucionaron el mundo del diseño con WordPress. Pero, también puedes usar Elementor con Prestashop como ya te he comentado.

 

¿Quieres probar Elementor? haz clic en el botón de abajo y después haz clic en el botón Live Editor

PROBAR ELEMENTOR

¿Quieres probar Elementor? haz clic en el botón de abajo y después haz clic en el botón Live Editor

 

…SI QUIERES MÁS SOBRE PRESTASHOP, TIENDAS ONLINE Y SEO  APÚNTATE A MI ACADEMIA ONLINE: CURSOTIENDAONLINE.COM
IR A MI ACADEMIA

 

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


VER CURSOS

 

 

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 QUIERO CREATIVE ELEMENTS

 

 

 

 

 

 

1.- Cómo instalar Elementor en Prestashop

 

Cómo te he comentado al principio del post, existen dos formas posibles de implementar Elementor en tu Prestashop: utilizar el módulo Creative Elements o usar la plantilla Warehouse.

 

1.1.- Módulo Creative Elements

 

Si usas o quieres usar en Prestashop una plantilla (tema) que no sea Warehouse y quieres trabajar con Elementor, lo que has de hacer es adquirir e instalar el módulo Creative Elements.

El módulo Creative Elements tiene un precio en el momento de escribir este post de 100,99 € (sin IVA)

Una vez adquirido tendrás que descargarlo en tu ordenador e instarlo en Prestashop. Para instalarlo ve a: “Módulos > Gestor de módulos” y después haciendo clic en el botón “Subir un módulo”.

Te aparecerá una ventana emergente, donde deberás hacer clic sobre el enlace: “selecciona el archivo”, selecciona el archivo que te has descargado y dale a abrir.

 

Instalar el módulo Creative elements (Elementor Prestashop)

 

QUIERO EL MÓDULO CREATIVE ELEMENTS
…SI QUIERES MÁS SOBRE PRESTASHOP, TIENDAS ONLINE Y SEO  APÚNTATE A MI ACADEMIA ONLINE: CURSOTIENDAONLINE.COM
IR A MI ACADEMIA

 

 

1.2.- Plantilla Warehouse

 

Si quieres trabajar con el tema Warehouse no tendrás que comprar ni instalar ningún módulo ya que Warehouse incluye por defecto el constructor Elementor.

En el momento de escribir este post, el precio del tema o plantilla Warehouse es de 105$  sin IVA (unos 100€ al cambio)

Una vez hayas adquirido Warehouse, descarga el comprimido, entra en los archivos y busca el archivo comprimido de instalación comprimido acorde a tu versión de Prestashop (no lo descomprimas).

Instala dicho archivo desde: “Diseño > tema y logotipo” y haz clic en el botón “+ Añadir nuevo tema”. En el bloque “Importar desde tu ordenador” haz clic en “explorar”, selecciona el archivo comprimido de la versión de Warehouse adecuada a tu Prestashop y después dale a guardar.

 

Instalar la plantilla Warehouse con Elementor

 

QUIERO LA PLANTILLA WAREHOUSE
…SI QUIERES MÁS SOBRE PRESTASHOP, WAREHOUSE, ELEMENTOR, TIENDAS ONLINE Y SEO  APÚNTATE A MI ACADEMIA ONLINE: CURSOTIENDAONLINE.COM
IR A MI ACADEMIA

 

 

2.- Estructura del constructor ELEMENTOR para Prestashop

 

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.

 

…SI QUIERES MÁS SOBRE PRESTASHOP, WAREHOUSE, ELEMENTOR, TIENDAS ONLINE Y SEO  APÚNTATE A MI ACADEMIA ONLINE: CURSOTIENDAONLINE.COM
IR A MI ACADEMIA

 

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 MÓDULO CREATIVE ELEMENTS

 

 

3.- Las secciones del constructor “Elementor”

 

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 Elementor Prestashop

 

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

…SI QUIERES MÁS SOBRE PRESTASHOP, WAREHOUSE, ELEMENTOR, TIENDAS ONLINE Y SEO  APÚNTATE A MI ACADEMIA ONLINE: CURSOTIENDAONLINE.COM
IR A MI ACADEMIA

 

3.2.- Configurar una sección con Elementor

 

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

…SI QUIERES MÁS SOBRE PRESTASHOP, WAREHOUSE, ELEMENTOR, TIENDAS ONLINE Y SEO  APÚNTATE A MI ACADEMIA ONLINE: CURSOTIENDAONLINE.COM
IR A MI ACADEMIA

 

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 QUIERO CREATIVE ELEMENTS

 

 

4.- Las columnas del page builder “Elementor” para Prestashop

 

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” 

 

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

…SI QUIERES MÁS SOBRE PRESTASHOP, WAREHOUSE, ELEMENTOR, TIENDAS ONLINE Y SEO  APÚNTATE A MI ACADEMIA ONLINE: CURSOTIENDAONLINE.COM
IR A MI ACADEMIA

 

5.1.- Cómo añadir widgets a las columnas con Elementor

 

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 

 

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

…SI QUIERES MÁS SOBRE PRESTASHOP, WAREHOUSE, ELEMENTOR, TIENDAS ONLINE Y SEO  APÚNTATE A MI ACADEMIA ONLINE: CURSOTIENDAONLINE.COM
IR A MI ACADEMIA

 

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 QUIERO CREATIVE ELEMENTS
…SI QUIERES MÁS SOBRE PRESTASHOP, WAREHOUSE, ELEMENTOR, TIENDAS ONLINE Y SEO  APÚNTATE A MI ACADEMIA ONLINE: CURSOTIENDAONLINE.COM
IR A MI ACADEMIA

 

 

6.- 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.

 

 

Compártelo ya!!

ACCEDE A TODOS MIS CURSOS POR SOLO 10€/MES

1.- CURSO CLAVES PARA CREAR UNA TIENDA ONLINE DE ÉXITO (9 Clases)
2.- CURSO PRESTASHOP (56 Clases)
3.- CURSO WOOCOMMERCE (39 Clases)
4.- CURSO ACTUALIZACIONES Y SEGURIDAD PRESTASHOP (7 Clases)
5.- CURSO ACTUALIZACIONES Y SEGURIDAD WORDPRESS (9 Clases)
6.- CURSO SEO TIENDAS ONLINE (12 Clases)
7.- CURSO PLANTILLA WAREHOUSE (26 Clases)
8.- CURSO PLANTILLA FLATSOME (36 Clases)
9.- MC: GOOGLE ANALYTICS PARA ECOMMERCE
10.- CURSO SUSCRIPTORES PRESTASHOP (7 Clases)
11.- CURSO BLOG PRESTASHOP (12 Clases)
12.- CURSO WORDPRESS (44 Clases)
ETC. ETC.
*** ADEMÁS TIENES MI SOPORTE VÍA EMAIL***

IR A LOS CURSOS

You have Successfully Subscribed!

Abrir chat
¿Dudas sobre mis cursos o servicios?
🙋🏻‍♂️** ¿Alguna duda sobre mis cursos o servicios? Soy Joaquín, cuéntame y te ayudo encantado
**Accede a TODOS mis cursos por solo 10 €/mes desde cursotiendaonline.com