Diseño PrestaShopTutoriales PrestaShopElementor PrestaShop page builder

¿Qué es elementor y para qué sirve?

Vamos a ver cómo crear la página de inicio de tu tienda con Elementor sin saber programar en PrestaShop.

Elementor es un page builder (un page buider es un maquetador visual que ayuda a crear sitios fácilmente sin necesidad de saber código para programar)

Está creado para facilitarnos el trabajo a la hora de crear contenidos.

Hasta la fecha encontrábamos Elementor en plantillas como Warehouse (si no conoces esta plantilla te invito a que le des un vistazo haciendo clic aquí plantilla warehouse para PrestaShop) y en WordPress (en WordPress el plugin está en versión gratuita con algunas opciones deshabilitadas útil para crear contenido, también está la versión Pro que es de pago) 

Pero por fin tenemos el módulo para PrestaShop.

Se puede instalar y hacerlo funcionar en cualquier plantilla aunque no todas te permitirán editar la página de inicio.

Lo recomendable es utilizarlo con la plantilla Classic aunque como he mencionado antes la plantilla Warehouse lo lleva de serie.

Puedes utilizar Elementor en páginas de contenido CMS, productos, categorías, marcas, proveedores, e incluso puedes utilizar hooks que dispone el módulo para enganchar contenido.

Hooks donde puedes insertar contenido con Elementor para PrestaShop
Hooks donde puedes insertar contenido con Elementor

¿Cómo instalar Elementor en PrestaShop?

Usar este módulo es sencillo solo has de instalar el módulo de la forma habitual y listo.

Desde módulos > Gestor de módulos (Module manager en algunas instalaciones) y subir módulo.

Cómo subir el módulo Elementor en PrestaShop
Subir el módulo Elementor en PrestaShop

Tras su instalación verás en el lateral izquierdo dentro del apartado “Personalizar” un texto llamado “Creative Elements” tras desplegarlo puedes ver varios elementos como:

Contenido cualquier lugar: Aquí te llevará a la zona donde podrás comenzar.
Plantillas Guardadas: Tu lista de plantillas creadas.
Ajustes: Los ajustes del módulo, recomiendo dejarlo tal como está, pero puedes editar el ancho que tendrá el contenido por ejemplo.

Menú del módulo Elementor
Elementor en la barra lateral del panel de administración

Tras su instalación verás en el lateral izquierdo dentro del apartado “Personalizar” un texto llamado “Creative Elements” tras desplegarlo puedes ver varios elementos como:

Contenido cualquier lugar: Aquí te llevará a la zona donde podrás comenzar.
Plantillas Guardadas: Tu lista de plantillas creadas.
Ajustes: Los ajustes del módulo, recomiendo dejarlo tal como está, pero puedes editar el ancho que tendrá el contenido por ejemplo.

Ajustes del módulo Elementor para PrestaShop
Ajustes del módulo Elementor

¿Cómo empezar a crear la página de inicio de tu tienda con Elementor?

Antes de comenzar a cómo crear la página de inicio de tu tienda con Elementor es importante desde mi punto de vista conocer los widgets.

Eso sí, antes quiero explicarte algo básico que elementor proporciona para diseñar cualquier contenido.

Si quieres saber que significa widgets te invito a que lo leas en Wikipedia ¿qué son los widgets?

Elementor incorpora diseño de rejillas, es decir, tenemos la posibilidad de jugar con los anchos como queramos, e incluso con tamaños como full width pantalla completa.

Por ejemplo tiene widgets de todo tipo, por ejemplo:

  • Insertar video
  • Columnas
  • Botones
  • Shortcodes
  • Formulario de contacto
  • Rejilla de productos
  • Carousel de productos
  • Pestañas (tabs)
  • Y mucho más
Tipos de widgets en Elementor de PrestaShop
Tipos de widgets en Elementor

Para poder empezar a crear la página de inicio es importante que desactives todos los módulos que se muestran en la home.

En el caso de un PrestaShop recién instalado con la plantilla Classic has de desactivar los siguientes módulos:

  • Carrusel de imágenes
  • Productos destacados
  • Módulo banner
  • Modulo texto personalizado

Una vez desactivados ya puedes comenzar.

Veamos un video donde puedes ver un ejemplo claro de cómo diseñar la página de inicio (está en inglés, pero lo entenderás bien)

Las Plantillas de Elementor

Como habrás visto en el video es posible arrancar con una plantilla si no quieres complicarte la vida.

Dispones de unas cuantas, aquí puedes ver un ejemplo:

Plantillas predeterminadas en Elementor PrestaShop
Plantillas predeterminadas en Elementor

Hay de diferentes tipos, para la página de inicio, para la página de contacto, página de mantenimiento etc.

Es un buen comienzo.

¿Dónde conseguir el módulo Elementor para PrestaShop?

Este módulo lo puedes conseguir en la tienda de addons de PrestaShop cerca de los 100€

Te recomiendo que cojas la opción Zen para estar cubierto en soporte y actualizaciones por un año, nunca se sabe que puede pasar.

Está disponible para la versión 1.6 y 1.7

Espero que te haya gustado este post y seguiremos hablando de este fantástico módulo.