Elementor Pro: review + tutorial a fondo de la versión premium de Elementor

Hace algunas semanas escribí en el blog una entrada en la que hablaba en profundidad sobre la versión gratuita de Elementor Page Builder.

A raíz de este post, muchos me han preguntado, al ver la enorme cantidad de opciones que trae ya de por sí Elementor sin pagar un céntimo de euro, si merece la pena comprar la versión Pro (de pago) o que es exactamente lo que trae incluida.

Pues esa pregunta es precisamente la que quiero responder hoy con este tutorial + review sobre Elementor Pro.

Voy a enseñarte qué elementos incorpora esta versión premium de Elementor, los tipos de licencia que puedes comprar, los motivos por los que adquirir una u otra así como las deficiencias que yo le veo aún (pero que seguramente mejorarán en el futuro, porque estos chicos de Elementor van como un tiro a ser los más populares en muy poco tiempo).

Todo ello con el ánimo de que seas tú y sólo tú el que tome la decisión final de comprar o no Elementor Pro.

¡Empezamos!

Los nuevos “Elementos Pro” que incorpora Elementor Pro

Antes que nada, voy a comentarte por encima los nuevos elementos de diseño que incorpora la versión de pago de Elementor y después los explicaré más detalladamente uno por uno, tanto en formato texto como en vídeo (que siempre es más ilustrativo, ¿verdad?). 😉

Elementor Pro añade a la versión gratuita de Elementor los siguientes componentes (a fecha de 9 de marzo de 2017, que es cuando estoy escribiendo esta entrada):

1. Posts
2. Portfolio
3. Formulario
4. Price List
5. Price Table
6. Flip Box
7. Cuenta atrás (Countdown)
8. Slides
9. Plantillas (Template)
10. Herramientas de diseño para Woocommerce (Productos, categorías de productos, añadir al carro de la compra, etc.)

No te preocupes si no entiendes bien por el nombre en qué consiste alguna de las nuevas herramientas porque, como te he comentado antes, ahora las vamos a ver una por una.

Esto es sólo a nivel de nuevas utilidades, pero también incluye otro par de mejoras interesantes como son:

11. La posibilidad de añadir tu propio código CSS desde Elementor y ver los cambios en tiempo real, sin guardar y sin tener que actualizar la página para verlos.
12. La posibilidad de añadir plantillas de Elementor guardadas previamente por ti a otras áreas de la web como sidebars, footers, etc.

Además, próximamente tienen anunciado que van a añadir otros 3 elementos más a la caja de herramientas de Elementor Pro:

13. Carrusel (aunque esta opción ya está en la versión gratuita, imagino que en la versión Pro otorgarán más opciones y configuraciones)
14. Mailchimp (para realizar conexiones con esta herramienta de email marketing).
15. Twitter Feed (imagino que para añadir un timeline de una cuenta de Twitter desde Elementor).

Lo que sí resulta bastante evidente al ver esta lista es que la mayoría de estas herramientas están orientadas a una cosa: las conversiones de tu web en ventas, captación de leads, etc.

Así que ya te estoy adelantando uno de los motivos principales por los que deberías adquirirla. 😉

Pero no nos precipitemos y vamos a hablar uno por uno y al detalle sobre las nuevas herramientas que nos proporciona Elementor Pro.

Posts

Una de las herramientas que eché en falta cuando conocí por primera vez Elementor fue precisamente esta de la que voy a hablar ahora.

La utilidad posts te permite crear una cuadrícula en la que poner una serie de posts que te interese destacar.

Pero no se queda en eso únicamente. Con la herramienta “posts” puedes incluso diseñar tu propio índice para el blog si te lo propones, saltándote a la torera el que traiga tu plantilla por defecto.

Puedes elegir la disposición que tendrán tus posts en cuanto a columnas, posts que tendrá cada página (si quieres mostrarlo con paginación), tamaños y colores de títulos, imágenes destacadas, fragmentos de texto a mostrar antes de pulsar en un enlace “Leer más”, etc.

Del mismo modo, te permite mostrar únicamente los artículos que pertenezcan a una categoría concreta, posean unas etiquetas determinadas o hayan sido escritos por un determinado autor, así como establecer su orden.

Como casi siempre ocurre con Elementor, la flexibilidad es tremenda. 😀

Portfolio

En esta ocasión, el nombre no engaña y es bastante explicativo, ¿no crees? ;P

Con esta herramienta vas a poder diseñar un portfolio de trabajos sin límite alguno.

Y cuando digo sin límite, es sin límite.

Vas a poder clasificarlo como tú quieras, por categorías y/o etiquetas, de tal forma que no te veas “encorsetado” por tener que hacerlo de una forma u otra.

Efectivamente, te hablo de categorías y etiquetas porque tú vas a poder crear tu propios elementos de portfolio de manera individual (también puedes diseñarlos con Elementor, por supuesto) generando nuevas entradas en WordPress y metiendo estas en categorías o etiquetas concretas.

Más flexibilidad en opciones y diseño para hacer tus portfolios como realmente te dé la gana imposible.

De hecho, yo que me he visto con muchos problemas en el pasado de este tipo, me parece una bestialidad esta opción de poder hacer lo que se te antoje con el único límite de tu imaginación. Doy palmas con las orejas, te lo digo. 😀

El punto fuerte es la clasificación sin duda. Pero no por ello dejo de lado las opciones de:

– Disposición de los elementos, con las que podrás establecer como ser verán los diferentes elementos de tu portfolio en tu diseño.

– Filtrado, que te permitirá crear un menú superior con las categorías o etiquetas por las que quieras que el usuario pueda navegar al visitar tu portfolio.

Formulario

Otro de los elementos más utilizados en cualquier blog profesional o sitio web son los formularios de contacto.

Es por ello que Elementor Pro ha pensado en ello y te da la posibilidad de crear y configurar estos formularios desde su maquetador visual sin tener que instalar plugins adicionales como Contact Form 7 o similares.

Independientemente de que sus opciones son muy buenas y no les falta detalle, el hecho de que te ahorre instalar otros plugins ya también está provocando que mejores el rendimiento y la velocidad de tu web ya es de agradecer.

Así que ‘chapeau’ por los desarrolladores de Elementor al incluir esta herramienta en su editor, claro que sí. Piensan en todo y no me queda otra que descubrirme ante ellos.

Aparte de poder diseñar los formularios de contacto como se te antoje (cambio de tipografías, colores, añadir o quitar campos, disposición de los mismos, etc.), también puedes editar desde aquí muchas y variadas opciones de envío:

– A quien se le envía el email.
– El nombre del asunto y el remitente.
– A qué email se enviarán las respuestas a las consultas del formulario.
– Metadatos a incluir en el email (fecha, hora, URL de tu blog, IP de envío, etc.)
– Activar (o no) la posibilidad de incluir código HTML en los emails.
– Establecer una página de tu blog a la que redireccionar a la persona que te envía un email (muy útil para convertir más leads bajo mi punto de vista).

Vamos, que no han escatimado en funcionalidades con esta utilidad los desarrolladores de Elementor Pro. 😉

Listas y tablas de precios (Price List – Price Table)

Si tienes un servicio o un infoproducto con paquetes a diferentes precios, esta utilidad te va a encantar.

Se trata de establecer unos atractivos bloques con un precio y unas características determinadas en forma de lista (con la herramienta Price List) o con una tabla de precios más vistosa (Price Table) para que puedas poner todo lo que incluye esa ayuda que pones a la venta en tu blog para tus clientes.

Si lo combinas con el elemento “Columnas” de la versión gratuita, podrás crear tantos bloques de lista con precio como necesites para que de un golpe de vista tus lectores puedan comparar qué incluye cada paquete y la diferencia de coste entre ellos.

Chulo y muy útil para tus conversiones, ¿verdad? 😀

Naturalmente, puedes modificar todo lo referente a estas cajas (precios, colores, elementos de lista, tamaños, tipografías, etc.) con la misma facilidad que Elementor te permite hacerlo con todas sus herramientas.

Flip Box

Esta ha sido una de las últimas utilidades que Elementor Pro ha incluido en el maquetador recientemente.

Las “Flip Box” son cajas con contenido en las que puedes incluir llamadas a la acción (incluyendo textos, iconos y botones) de tal forma que puedas tener contenido por dos caras diferentes al pasar el ratón por encima de ellas.

Es decir, yo puedo tener un mensaje concreto en uno de los lados de esta “Flip Box” y al pasar el ratón por encima de ella, dicho contenedor se gira con una animación muy chula mostrando la otra cara del contenido que he preparado.

Pero no sólo puede girarse, también puede mostrar la otra capa oculta haciéndola aparecer encima de la que sale en un principio o utilizar varias animaciones más totalmente diferentes.

Dicho así puede parecer un poco raro todo, pero en el vídeo que te he preparado  con una review + tutorial completo sobre Elementor Pro lo verás más claro (lo tienes un poco más abajo si te pica la curiosidad 😉 ). Ya verás que es muy simple.

También te dejo este otro publicado por los propios desarrolladores de Elementor.

Puede que no le veas la utilidad a simple vista a estas cajas, pero sí que la tiene…

Es una manera de llamar la atención con la primera de las caras (o capas, llámalo como quieras) y que al ponerse encima de ella te muestre en la segunda capa una llamada a la acción que quieras que el usuario realice con una animación mucho más vistosa y llamativa que poniendo directamente la llamada a la acción sin más.

Se puede decir que es una manera de despertar más curiosidad y asegurarte que no pasan por alto esa llamada a la acción. 😉

Si le pongo un “pero” es que no puedes incluir cualquiera de las herramientas de Elementor (como por ejemplo, la inclusión de videos), si no que únicamente puedes jugar con iconos, imágenes, botones y texto.

Pero vamos, mirandólo por otro lado, para hacer unas buenas (y efectivas) llamadas a la acción tampoco necesitas mucho más, ¿no crees? 🙂

Cuenta atrás (Countdown)

Creo que el título de esta utilidad es bastante descriptivo, ¿no? ;P

Con ella podrás implementar en el diseño de tus páginas una cuenta atrás, muy útil de cara a landings en las que vayas a hacer algún lanzamiento de un curso, un producto o incluso de la publicación de un nuevo sitio web.

También puede serte de gran ayuda a la hora de diseñar páginas con una oferta concreta que se acabe en un periodo de tiempo determinado. Una vez más, es un elemento pensado para aumentar y/o mejorar las conversiones en este sentido.

Puedes establecer si tu cuenta atrás será de días, horas, minutos y/o segundos, establecer la fecha del lanzamiento, cambiar las etiquetas de los contadores e implementar todas las opciones de diseño pertinentes.

En resumen, es una herramienta muy sencilla de configurar a la vez que muy práctica. Lo tiene todo.

Slides

Con este nueva herramienta incluida en Elementor Pro podemos generar nuestros propios sliders de imágenes a pantalla completa o ciñéndote al ancho de tu contenedor principal.

Por si no sabes lo que son, los sliders son esas animaciones que tan de moda estaban hace algún tiempo en las que al principio de un sitio web se colocaban varias imágenes con diferentes mensajes, pudiendo pasar de una a otra con elementos de navegación como flechas o puntos.

Digo “estaba” porque, aunque aún hay muchas webs que las utilizan, la realidad es que cada vez son menos usadas en los nuevos diseños debido a que proporcionan más perjuicios que beneficios.

Pero esto quizás es algo de lo que te hable otro día en un post aparte, porque es un tema que da para hablar bastante. 😉

En cualquier caso, bajo mi punto de vista, está bastante bien que Elementor haya pensado en una utilidad de este tipo, ya que tenerla nos puede ahorrar instalar otros plugins enfocados a esta tarea que consumen bastantes recursos.

Aunque es bastante completa, también es cierto que deja algo que desear respecto a dichos plugins, ya que a día de hoy no te permite hacer sliders por capas (es decir, que una imagen del slider puedas colocar algo más que un fondo y un texto o un botón y que los diferentes elementos puedan aparecer a distinto tiempo).

Pero, por otro lado, también creo que no está mal pensado por parte de Elementor haberlo hecho más sencillo.

¿Por qué? Porque así los tiempos de carga mejoran y las posibles conversiones que puedas conseguir con estos sliders de imágenes no se ven afectadas, puesto que sí puedes generar tus llamadas a la acción con los elementos que dispone y que te he mencionados anteriormente.

En cualquier caso, de lo que no hay duda es de que vas a poder crear slides atractivos que te sirvan para realizar llamadas a la acción sin necesidad de otros plugins. Así que está muy guay que hayan incluido una herramienta así. 😀

Plantillas (Templates)

Esta no es exactamente una nueva herramienta, pero si una implementación que te hace la vida un poco más fácil.

Lo que puedes hacer con ella es añadir elementos que tengas diseñados de otras veces y previamente guardados en tu biblioteca de Elementor en tu diseño actual.

Es muy útil de cara a tres cosas principalmente:

– Reutilizar elementos concretos como separadores, títulos, etc. que ya hayas diseñado una vez y que se repiten varias veces a lo largo de tu diseño, de tal forma que no tengas que andar configurándo cada uno de ellos uno por uno y ahorrándote tiempo.

– Reutilizar plantillas completas en diferentes sitios web.

– Utilizar, mediante la combinación con los widgets del propio CMS WordPress, plantillas o elementos de diseño que hayas diseñado con Elementor en otras zonas como la barra lateral o el footer. Muy útil por ejemplo para creación de banners o llamadas a la acción, de tal forma que puedas insertar contenido creado con Elementor en cualquier parte de tu plantilla que tenga zonas de widgets.

Utilizarlo es tan sencillo como arrastrar desde Elementor un elemento de plantilla a tu diseño y seleccionar en el desplegable que plantilla quieres utilizar entre todas las que hayas guardado de manera previa.

Herramientas para comercio electrónico con Woocommerce

Elementor Pro también ha pensado en aquellas personas que necesitan dar un diseño personalizado a su tienda creada con WordPress y Woocommerce.

Por ello, esta versión premium incluye cuatro herramientas con las que podrás personalizar más el diseño de tu tienda online, además de poder establecer filtros avanzados que te permitirán mostrar tus productos de la manera que más convenga a tus intereses.

Te las muestro a continuación. 🙂

Woocommerce “Productos”

Añade productos de tu tienda online a una página que tú quieras, pudiendo establecer en cuantas columnas y qué número de productos se mostrarán.

En el apartado “Query” de esta herramienta puedes establecer qué productos se van a mostrar en función de su categoría, etiquetas o fabricante / autor del mismo.

Otra posibilidad en cuanto a filtros es mostrar los productos destacados (featured) o los más vendidos (Sale) dentro de la categoría, fabricante o etiquetas que hayamos establecido previamente con la anterior opción.

Además, tienes la opción de ordenar todos los productos por nombre, popularidad, valoración de los compradores, fecha, precio o incluso mostrarlos de manera aleatoria.

En este sentido, se puede decir que no hay limitaciones aparentemente visibles.

Sin embargo, sí que le tengo que pegar un pequeño tirón de orejas a Elementor en este apartado (aunque creo que lo solucionarán pronto dada su capacidad de mejora constante).

Las opciones de personalización de diseño, para mi, son un poco cortas. No puedes establecer desde esta herramienta los colores o tamaño de los botones de compra, ni del precio, así como otras opciones como tamaño de la imagen del producto.

Como digo, creo que es algo que acabarán implementando, porque no se entiende que en otras herramientas del maquetador, como los cuadros de imagen de los que hablamos en la review de Elementor, si dispongamos de este tipo de opciones y aquí no aparezcan por ninguna parte.

Woocommerce “Añadir al Carro”

Esta es una herramienta que te permite crear botones de Añadir al carro de un producto concreto en cualquier parte de tu diseño.

Esto sí que me parece un gran acierto por parte de Elementor Pro. Me parece algo súper útil. Mucho más de lo que pueda parecer a simple vista.

El hecho de poder añadir en cualquier página un botón de añadir al carro te da la posibilidad de incluir un botón de este tipo en páginas de ofertas o de venta individuales de un producto, lo cual es genial para realizar campañas personalizadas de dicho producto en un sitio web realizado con WordPress.

O lo que es lo mismo: podrás realizar un diseño atractivo en una página individual (como una ‘squeeze page’) para promocionar un producto concreto sin renunciar a poner directamente en esa página un botón de añadir al carro, minimizando el número de clics que el usuario tiene que hacer para comprar ese producto del que tú estás haciendo una campaña personalizada.

Por supuesto, el botón lo puedes molder a tu gusto en colores, iconos, tipografías, animaciones, etc. al igual que ocurría con los botones normales de la versión gratuita de Elementor. 🙂

Woocommerce “Elementos”

La función de esta herramienta es básicamente poder incluir en cualquier parte determinados elementos característicos y propios de Woocommerce. Estos elementos son:

1. Página del carro de la compra.
2. Página de un producto concreto de la tienda.
3. Página de pago.
4. Formulario de seguimiento de un pedido.
5. Inserción del menú de opciones conrrespondiente a la cuenta del comprador.

No tiene mucho más, salvo las opciones de estilo comunes a la mayoría de las herramientas de Elementor y Elementor Pro (márgenes, rellenos, clases CSS, fondos, opciones responsive, etc.).

Una vez más, al igual que te he comentado con Woocommerce Productos, echo de menos algunas opciones más de personalización, por ejemplo, al insertar la ficha de un producto concreto o en los títulos que se generan en las diferentes páginas que puedes insertar.

Woocommerce “Categorías”

La última de las utilidades correspondientes a Woocommerce que añade Elementor Pro es la de poder insertar un cuadro con las categorías de producto que haya en tu tienda virtual.

Al igual que ocurría con los productos, puedes organizarlas en el número de columnas que tu quieras y mostrar tantas categorías como se te antoje.
Además, tienes diferentes formas de filtrar y ordenar estas categorías para que tú puedas mostrarlas tal y como desees. Incluso cuentas con la opción de incluir manualmente las categorías que tu quieras.

Eso sí, ten en cuenta que cogerá las imagenes de categoría y descripciones que hayas puesto en la categoría de Woocommerce. Así que eso sí que no es modificable desde Elementor.

Hasta aquí han llegado los nuevos elementos que incorpora Elementor en su versión premium.

Si algo no te ha quedado demasiado claro, te ánimo a que veas este vídeo tutorial en el que explico todo esto punto por punto sin saltarme ni una sola coma sobre cada una de estas herramientas. 

Pero esto no es el final. También han incluido alguna mejora más muy interesante. 🙂

Otras mejoras que te brinda Elementor Pro respecto a su versión gratuita

Aparte de todas estas nuevas herramientas, Elementor Pro ha incluido un par de mejoras adicionales bastante interesantes de cara a poder personalizar todavía más si cabe cualquier diseño web.

Editor CSS en tiempo real

En Elementor Pro, todas las pestañas de “Avanzado” de cualquiera de sus herramientas incluye un editor CSS en tiempo real con el que podremos añadir código de este tipo y ver los cambios al instante.

Si no sabes de CSS, seguramente no lo veas una gran ventaja o ni siquiera comprendas para que puede servirte esto. Lo entiendo y es comprensible.

Pero puedo asegurarte que para los que nos dedicamos a esto a diario o para personas que tienen unos mínimos conocimientos de este lenguaje, si que es una importante mejora.Sobre todo por el importante ahorro de tiempo que supone escribir algunas reglas CSS personalizadas y ver inmediatamente como van a quedar sin necesidad de guardar y actualizar el navegador para comprobarlo. 🙂

En mi caso, como podrás comprender, esta mejora es de 10 o de 20 en cuanto a nota para Elementor Pro.

Añadir plantillas diseñadas con Elementor a otras zonas de la web que no sean páginas ni entradas

Aunque esto ya te lo he comentado antes al hablarte de la nueva herramienta plantillas, es digno de volver a recalcarlo en este apartado.

Adquiriendo esta versión premium, podrás diseñar cualquier cosa utilizando las opciones de Elementor para después incluirlas en otras zonas de la estructura de tu blog o tu web como el sidebar o el footer.

Piensa lo guay que es diseñar por ejemplo una llamada a la acción en forma de banner con Elementor y después poderlo incluirlo ahí para que aparezca en todas las páginas o entradas de tu blog. ¿No te parece una pasada? 😀

Una vez has diseñado la plantilla que te interesa en Elementor, puedes incluirla a través del menú de apariencia (“Apariencia – Personalizar”) de WordPress de manera sencilla como si de cualquier otro widget se tratara.

Cuanta más flexibilidad te ofrezcan este tipo de herramientas mejor. Y Elementor en este sentido ha dado un saltito más que sus competidores no tienen. ¡Bravo! 🙂

Tipos de licencia de Elementor Pro que puedes adquirir

Llegados a este punto del post, es más que probable que ya hayas tomado una decisión sobre si adquirir o no Elementor Pro.

Por tanto, te estarás haciendo la pregunta del millón… ¿cuanta «money» voy a tener que invertir en esto?

Bien, yo te la respondo encantado.

A día de hoy Elementor Pro tiene 3 tipos diferentes de licencia:

1. Personal, con la que podrás instalar Elementor Pro en un único blog o sitio web.

2. Negocios (Business), en la que las instalaciones de Elementor Pro que puedes realizar se amplían hasta 3 sitios web diferentes.

3. Ilimitada (Unlimited), con la que tendrás la posibilidad de instalar Elementor Pro en tantas webs como quieras, ya sean tuyas o de tus clientes. Es la más recomendada para diseñadores y desarrolladores web. 😉

Recalcar que todas ellas incluyen garantía de devolución de 30 días, así como 1 año de soporte y actualizaciones del plugin.

Del mismo modo, aunque no renueves el soporte y la actualización después de un año, tú podrás seguir utilizando Elementor Pro después sin problema alguno (lo único, claro está, que si hay nuevas mejoras o herramientas que se incluyan después no las vas a recibir).

Si finalmente te has decantado por cualquiera de ellas, puedes comprar Elementor Pro directamente desde este mismo enlace.

Conclusión y opinión personal

Ahora quiero responder a la pregunta que mucha gente me hacía a través de los comentarios, vía email o redes sociales.

¿Merece la pena adquirir Elementor Pro?

Pues… bajo mi punto de vista sí.

¿Por qué?

Pues porque pienso que incluye mejoras interesantes respecto a la versión gratuita de Elementor Page Builder tanto para gente con menos conocimientos como para desarrolladores. Una vez más han pensado en todo tipo de público y eso es de 10.

Por ejemplo, para los primeros incluye herramientas tremendamente utilizadas en muchos sitios como los slides, la creación de portfolios por categorías (con el ahorro en otros plugins que esto también te supone) o los «grids» de posts destacados.

De cara a los segundos usuarios que he mencionado antes, aparte de las herramientas del primer grupo que también son útiles para ellos, también incluye el CSS en tiempo real o el tema de poder utilizar plantillas en cualquier zona de widgets, lo cual aporta mucha más flexibilidad y facilidad a la hora de trabajar tanto en los diseños propios como los que son para clientes.

Por no hablar de que muchas de estas herramientas son herramientas pensadas para aumentar las ventas y conversiones de tu blog profesional, tu web o tu tienda online.

Es decir, va enfocado a profesionalizar aún más tu plataforma digital y a que esta te sirva para conseguir tus objetivos y vender tus servicios o productos.

Así que por todo esto… yo sí que la recomiendo.

Por otro lado, también te digo que tiene cosas que mejorar, cosas que aún veo un poco verdes y que aún se me quedan cortas las herramientas que han incluido.

Por ejemplo, creo que no hubiese estado de más incluir alguna herramienta para crear formularios de suscripción (y no sólo de contacto) o conectar mediante API’s o códigos HTML a plataformas de email marketing.

Sí, ya sé que estas tareas se pueden hacer con Thrive Leads. Pero si te las incluyen en una única herramienta y te ahorras un plugin…pues a nadie le amarga un dulce, ¿no crees?

Aparte, si te dicen constantemente que esta versión Pro está enfocada a las conversiones… no me explico demasiado bien como de primeras no han incluido algo relacionado con la captación de Leads.

En cualquier caso, me consta que ya están trabajando en algo de esto con el anuncio de que pronto incluirán una herramienta para conexiones con Mailchimp.

Sin embargo, espero que no sólo se queden en esta plataforma de email marketing, ya que hay mucho mundo (y bastante mejor bajo mi punto de vista) más allá del famoso monito de la gorra de cartero. ;P

Ahora te toca a ti. ¿Qué piensas de todas estas mejoras incluidas en Elementor Pro? ¿Merecen la pena? ¿Te parecen un fiasco? ¡Dime lo que piensas en los comentarios!