Elementor Pro Review y tutorial de la versión Pro de Elementor

Hace unos días escribí un artículo donde hablaba de la versión gratuita de Elementor, el mejor plugin para maquetar páginas y entradas en WordPress.

En este segundo artículo dedicado a este fantástico plugin quiero hablar de la versión Pro, para mostrarte las características y widgets que incorpora esta versión.

En su dia, hice la pre-compra de Elementor Pro para poder utilizar la versión premium desde el primer día. Desde el principio, he usado Elementor Pro en todos mis desarrollos como diseñador web y estoy encantado.

Voy acompañar la explicación de las diferentes funcionalidades y widgets con videos del autor para que aprecies mejor el potencial del plugin.

Si la versión gratuita te encanto estoy seguro que la versión pro no te va a defraudar, no podrás resistir hacerte con una licencia.

Quiero destacar que los chicos de Elementor se lo curran un montón y van añadiendo widgets y nuevas funcionalidades constantemente con lo que el plugin está en constante evolución.

Para corroborar esto nos muestran un mensaje donde nos dicen “esto es solo el comienzo”, con lo que debemos estar seguros de que lanzarán más widgets y mejoras para la versión premium.

Además, en su página web puedes ver los próximos plugins que van a sacar para la versión pro.

Los widgets que incorpora Elementor Pro

A continuación, voy a mencionarte las principales configuraciones de cada widget, para que te hagas una idea de su funcionamiento y las posibilidades que ofrece.

Evidentemente la versión Pro viene con más widgets y características disponibles, te recomiendo que eches un vistazo a este enlace donde puedes ver las diferencias entre las dos versiones.

#1 Posts

Este widget sirve para mostrar las últimas entradas de tu blog en cualquier parte de tu página web. Seguramente lo has visto en muchas ocasiones en blogs y páginas personales.

Puedes ver un ejemplo de utilización de este elemento en la página de incio de este mismo blog, donde muestro las seis últimas entradas al blog.

Antes utilizaba otro plugin Wp show posts para mostrar los últimos post, ahora con Elementor Pro me lo puedo ahorrar.

Algunos ajustes que puedes realizar:

  • Elegir el número de columnas a mostrar en los diferentes dispositivos: escritorio, tablet y móvil.
  • Número de entradas a mostrar
  • Adaptar y modificar el tamaño de la imagen destacada, o si lo prefieres ocultarla.
  • Activar el tipo de efecto “Masonry” para mostrar las entradas en diferentes tamaños
  • Mostrar entradas determinadas por categoría, autor, etiqueta y ordenarlas por fecha o de forma aleatoria.
  • Modificar el estilo aplicando colores, tipografía, márgenes, padding…

Este es el video del autor para que veas el widget en funcionamiento.

Estilo cards para mostrar las entradas

Recientemente han implementado una actualización de este widget, nos da la opción de escoger 2 tipos de diseño predefinidos para mostrar los posts, un estilo clásico y el estilo card.

Este segundo estilo proviene del material design, es un estilo que ha implementado Google en todas sus plataformas y una tendencia en el diseño web actual.

Te dejo otro video para que lo veas en acción.

Como puedes observar las opciones de configuración de este widget son muy grandes y te permitirá mostrar las últimas entradas como verdaderamente te dé la gana. Además te ahorrarás instalar otro plugin adicional para esta tarea.

#2 Portafolio

Puedes mostrar un portafolio con tus proyectos y trabajos realizados. Además puedes filtrar los elementos del portafolio por categoría, etiqueta…

Para hacer uso de este plugin tienes que usar custom posts ya que por defecto te muestra las últimas entradas. Para realizar esta tarea rápidamente puedes usar el plugin Custom Post Type UI, muy fácil de configurar.

Al igual que el resto de widgets puedes configurar las opciones de estilos para modificar colores, tipografías, márgenes, padding…

Otro fantástico widget que te permite crear portafolios de proyectos con el único límite de tu imaginación.

#3 Slides

Con este widget puedes colocar los famosos pases de imágenes en tu página web.

Seguro que los has visto en multitud de sitios web para mostrar ofertas, productos o servicios destacados o alguna llamada a la acción.

Te dejo un vídeo de los creadores para que veas las posibilidades de este widget.

Tienes muchas opciones de configuración aunque no es tan completo como plugins especializados para esta tarea como por ejemplo Revolution Slider.

Personalmente no me gusta mucho abusar de este tipo sliders aunque muchas veces me veo obligado por preferencias de los clientes ya que es una forma muy visual de mostrar servicios o productos destacados.

Otro punto a favor para los chicos de Elementor ya que nos ahorraremos un plugin más.

#4 Forms

Si los anteriores widgets ya eran la bomba ¡este es un puntazo!

Como su nombre indica, podemos crear formularios de contacto fácilmente de una manera muy intuitiva y totalmente personalizables.

Igual que los anteriores widgets con este también te ahorrarás instalar un plugin para la creación de formularios como por ejemplo Contact Form 7.

Tienes total libertad para diseñar formularios a tu gusto cambiando todo tipo de estilos, modificando tipografías, colores, añadir o quitar campos, márgenes… las opciones son ilimitadas como los anteriores widgets.

Además puedes modificar distintas opciones de envío:

  • A quien se envía el email
  • El nombre y el asunto del remitente
  • A que email se envían las respuestas a las consultas enviados desde el formulario
  • Qué metadatos incluir en el email
  • Posibilidad de incluir código HTML

Para ver un ejemplo de este widget puedes ver mi página de contacto donde el formulario de contacto ha sido construido con Elementor Pro.

Captación de suscriptores y vinculación con Mailchimp

En una de sus últimas actualizaciones ahora se pueden conectar los formularios creados con Elementor Pro con Mailchimp.

Se trata de otro punto a favor de Elementor Pro y van unos cuantos. De esta manera puedes ahorrarte otro plugin extra para insertar formularios de contacto para captar suscriptores, aunque de momento no tienes un nivel de configuración tan amplio como Thrive Leads, plugin creado específicamente para captar leads. No dudo que en el futuro los chicos de Elementor nos sorprenderán con alguna actualización en este sentido.

#5 Price Table

Genial widget que te permite crear las típicas tablas de precios que debes haber visto en gran cantidad de páginas web.

Te permite crear las típicas tablas de precios separadas por diferentes bloques para separar los diferentes servicios a ofrecer.

Evidentemente, puedes modificar todo lo referente a los estilos para dar el formato que te guste a tus tablas de precios.

#6 Countdown

Con esta funcionalidad puedes añadir una cuenta atrás para alguna oferta o promoción por un tiempo determinado. Los countdown los habrás visto en landing pages de productos o servicios.

Es muy sencillo de configurar, podrás establecer la cuenta atrás en días, horas, minutos y segundos. Además si no quieres mostrar por ejemplo los días los puedes ocultar al igual que las horas, segundos y minutos.

Evidentemente, puedes configurar las opciones de estilo típicas en todos los widgets de Elementor: color, fondo, margin…

#7 Price lists

Otra alternativa para mostrar precios en nuestra página web pero en esta ocasión en formato lista de precios.

Muy útil por ejemplo si queremos mostrar el menú de una restaurante o una lista de precios de un salón de peluquería por ejemplo.

#8 Flip box

Las Flip Box son cajas de contenido donde se pueden incluir textos, iconos y botones en dos caras.

Al pasar el ratón por encima de ellas el contenedor se gira con una animación mostrando información en las dos caras.

El widget permite utilizar distintas animaciones para animar este tipo de cajas. Es una manera de llamar la atención del usuario y de esta manera que no pase por alto la llamada a la acción.

Para que veas a lo que me refiero, te dejo este video de los creadores del plugin.

#9 Share buttons

Se trata de un widget añadido no hace mucho tiempo y otro acierto de los chicos de Elementor.

Con esta funcionalidad podrás añadir los botones de compartir contenido en las redes sociales.

Para realizar estas tareas hasta ahora utilizaba el plugin Monarch pero desde que han añadido esta funcionalidad en Elementor Pro he prescindido de él. De esta manera me ahorro otro plugin.

Una cosa que me gusta y que Monarch no tenía es la posibilidad de compartir contenido directamente en WhatsApp o Telegram.

Te dejo el video de los creadores para que veas el widget en pleno rendimiento.

Como es habitual en todos los widgets las posibilidades de configuración son enormes, puedes aplicar estilo en las siguientes opciones:

  • Elegir entre 5 diseños predefinidos
  • Número de columnas
  • Mostrar o ocultar contadores
  • Modificar colores y tipografías
  • Mostrar o ocultar iconos y textos
  • Márgenes y rellenos

Con la ayuda de los Hooks de GeneratePress y un poquito de código PHP he podido sustituir mi antiguo plugin Monarch.

Puedes ver como me ha quedado en la parte superior o inferior de cualquier post de mi blog. ¡El resultado es fantástico!

#10 Login

Otra funcionalidad añadida recientemente a la versión Pro.

Si tienes una web de membresía en la que debes dar acceso a usuarios al panel de control este widget te puede ir muy bien.

Lo ajustes de personalización son muy similares al widget de formulario.

Con esta funcionalidad serás capaz de:

  • Dirigir al usuario a una determinada página después de hacer login
  • Mostrar un mensaje a los usuarios ya logeados
  • Recuperar contraseñas
  • Recordar usuarios

#11 Widgets para tiendas online con Woocomerce

Con Elementor Pro también podrás modificar y personalizar el diseño de aquellas tiendas online creadas con Woocommerce.

Tienes cuatro widgets creados para estas tareas:

#1 Woocommerce – Products

Con este widget puedes mostrar los productos de tu tienda en cualquiera de tus páginas.

En el apartado “Query” puedes elegir también si mostrar productos de una categoría o etiqueta en concreto o seleccionarlos de una manera individual.

Puedes ordenar los productos por nombre, popularidad, valoración, fecha, precio…

Sin embargo, las opciones de configuración de diseño son cortas en comparación con los otros widgets de Elementor. Seguramente con el tiempo mejorarán ya que estos chicos están en constante actualización y mejora de las widgets.

En este momento no se pueden establecer colores y tamaños para los botones, modificar las imágenes de producto o cambiar las tipografías.

Los productos se muestran con los estilos por defecto de Woocommerce para modificarlos tenemos que buscar otra alternativa con Elementor no lo podemos hacer.

#2 Woo-Elements

La característica de este widget es poder incluir en cualquier parte de nuestra web elementos propios y específicos de Woocommerce.

  • Carro de compra
  • Páginas de producto
  • Seguimiento de pedido
  • Página de pago
  • Cuenta de cliente

Como el anterior se queda un poco cojo ya que no incluye opciones de diseño

#3 Woo-categories

Muy parecido al widget de productos pero con categorías.

Puedes elegir el número de categorías totales a mostrar y elegir el número de filas. Puedes filtrar si mostrar todas las categorías, mostrar solo las que tu decidas o mostrar subcategorías.

Como en los anteriores widgets de Woocomerce las opciones de diseño son bastante mejorables.

#4 Woo-Add to cart

Con esta herramienta puedes crear botones para añadir un producto al carro de la compra.

Podrás modificar el botón a tu gusto cambiando colores, tipografías…

Puede ser una herramienta muy útil en páginas específicas de venta.

Mejoras de Elementor Pro respecto la versión gratuita

Ademas de incluir todas las herramientas y addons mencionados, Elementor Pro incluye mejoras para poder personalizar todavía más los diseños y hacer un flujo de trabajo más rápido.

Más plantillas disponibles para ser insertadas en tus diseños

Al igual que la versión gratuita tienes una serie de plantillas con diseños predefinidos para poder usar en tus diseños.

A los usuarios más novatos les serán de gran ayuda ya que pueden servir de base para utilizarlas y adaptarlas a sus diseños. Se trata de una buena forma de poder practicar y comprobar como están configuradas las plantillas.

Encontrarás páginas para:

  • De productos o servicios
  • Para contacto
  • De login
  • Landing pages para vender productos
  • Páginas sobre nosotros

Guarda e inserta tus diseños en la zona que quieras de la web

Otro puntazo de Elementor Pro es que puedes diseñar cualquier elemento utilizando las opciones de Elementor y después incluir ese elemento en cualquier zona de la estructura de tu página web como en los widgets del sidebar o el footer.

Se trata de una característica que multiplica por mucho las capacidades de personalización y flexibilidad de diseño de tu página web.

Puedes diseñar un banner desde el editor de Elementor. Una vez diseñado y guardado el elemento en la biblioteca de Elementor podemos insertar de forma muy sencilla como si de cualquier otro widget se tratara en la barra lateral o el footer.

Si utilizas GeneratePress puedes utilizar sus Hooks para añadir estos shortcodes en casi cualquier lugar de la web.

Como te he comentado antes en mi blog hago uso de los hooks de GeneratePress en combinación con Elementor Pro para mostrar los botones de compartir en redes sociales al inicio y al final de cada post.

Utilizando el mismo sistema también he implementado al final de cada post una lista con imágenes de contenido relacionado.

Editor CSS en tiempo real

Como has podido ver todos los widgets tienen muchas opciones de configuración pero si estas se te quedan cortas siempre puedes aplicar estilos CSS personalizados para obtener un nivel de personalización aún mayor.

En la pestaña “Avanzado” puedes aplicar estilos CSS a cualquier elemento creado con Elementor Pro.

Con esta opción tienes control total para modificar el aspecto de los diferentes widgets y ver los cambios al instante sin necesidad de escribir las reglas CSS en otro documento. Para ver los cambios no es necesario guardar y actualizar el navegador ya que verás los cambios al instante.

Para los que nos dedicamos a esto profesionalmente es un gran avance ya que nos permite optimizar mejor nuestro tiempo.

¡Otro hurra para los chicos de Elementor! 😉

Tipos de licencias y precios de Elementor Pro

Llegados aquí llega el momento de saber cuanto cuesta todo esto.

Actualmente hay tres tipos de licencias personal, business y unlimited.

Todas las licencias incluyen un año de soporte, lo que varia es el número de sitios donde se puede instalar el plugin.

Personal: Puedes usar Elementor Pro en 1 sola página web.

Business: Puedes usar el plugin hasta en 3 páginas web diferentes.

Unlimited: Esta es la licencia que tengo yo. Con esta licencia puedes instalar Elementor Pro tantas veces como quieras, tanto en páginas tuyas como en desarrollos de clientes. Si te dedicas al diseño web no lo dudes esta es tu opción.

Pasado el año para seguir recibiendo las actualizaciones debes actualizar la licencia, aunque si no renuevas puedes continuar utilizando Elementor Pro sin problemas.

Las renovaciones de licencias tienen una rebaja de un 50% menos del precio total.

Si ya te he convencido puedes comprar Elementor Pro directamente desde este enlace.

Puede resultar interesante suscribirse a su blog, ya que de vez en cuando lanzan ofertas donde reducen el precio de sus licencias considerablemente. Por ejemplo, por su aniversario lanzaron una campaña con grandes descuentos, otra fecha donde suelen hacer descuentos es en el famoso black friday. ¡Debes estar atento!

Conclusión y opinión personal

Imagino que en este momento te estarás planteando la siguiente pregunta:

¿Merece la pena comprar Elementor Pro?

Mi respuesta es muy clara Sí!!

¿Por qué?

Es una herramienta pensada para profesionales del diseño web y usuarios menos avanzados con muchas mejoras respecto a la versión gratuita.

Esta versión incluye herramientas muy utilizadas en páginas web como por ejemplo:

  • Crear formulario de contacto
  • Sliders de imágenes
  • Portafolio de proyectos
  • Mostrar entradas de un blog
  • Botones para compartir en redes sociales

Más los widgets para Woocommerce, tablas de precios, cuenta atrás…

Con la versión Pro cubrirás todas las funcionalidades que puede tener una página web, con lo que te ahorraras instalar plugins específicos para cada cosa.

Un punto a destacar es que te ahorrarás una gran cantidad de plugins adicionales, una cosa siempre positiva que nos ayudará a mejorar el rendimiento general de la web.

Como te he comentado gracias a Elementor Pro me he podido ahorrar los siguientes plugins:

  • Contact Form: para crear formularios
  • Wp show posts. para mostrar las últimas entradas
  • The Grid. para crear una galería de imágenes
  • Monarch: para insertar botones de compartir en redes
  • Y si eres amante de los sliders también te ahorrarás el plugin dedicado para ello

¡Con Elementor Pro me he cargado 5 plugins de un plumazo! ¡Genial!

Todas las herramientas de la versión Pro están pensadas para profesionalizar tu blog o página web pudiendo con ellas aumentar tus ventas y conversiones.

Para los profesionales del diseño web, el poder incluir CSS personalizado en todos los elementos y ver los cambios en tiempo real es otro avance considerable.

Y si además podemos utilizar plantillas propias para insertarlas en cualquier zona de widgets de la web la flexibilidad y posibilidades de configuración ¡se multiplican por 100!

Además si usas GeneratePress puedes insertar estos elementos de la librería de Elementor en cualquier lugar de la web con la ayuda de los hooks.

Con el matrimonio GeneratePress y Elementor Pro ningún diseño se te resistirá y serás capaz de maquetar todo tipo de estructuras web.

Algunos aspectos a mejorar

Por otro lado, también tiene cosas que se pueden mejorar como por ejemplo las opciones de diseño de los widgets de Wocommerce donde el nivel de personalización no es tan grande como el resto de widgets.

También se puede mejorar el tema de la creación de formularios de suscripción y su conexión con plataformas de email marketing como Mailchimp, Mailrelay…

Actualmente se pueden enlazar los formularios con Mailchimp pero aún debemos usar Thrive leads para sacar el máximo rendimiento a este tipo de herramientas.

Ahora dime tu ¿Has probado Elementor? ¿Tienes otra alternativa mejor? ¿Tienes dudas de adquirir la versión Pro?

Déjame tus comentarios siempre son de interés.

Daniel Massó

Soy diseñador web, me encanta Wordpress y todo el mundo digital. Me gustan los diseños limpios y sencillos sin excesos, que tengan una buena usabilidad para mejorar la experiencia de usuario y la conversión. En mi blog comparto mis conocimientos para ayudarte a triunfar con tu web. Conóceme mejor en: Sobre mí

4 comentarios en “Elementor Pro Review y tutorial de la versión Pro de Elementor

  1. Hola Daniel!

    Genial tu post sobre Elementor Pro!!

    Como muy bien dices te puedes ahorrar instalar varios plugins con la instalación de este fantástico plugin.

    Para mí era un coñazo configurar los formularios de contacto con Conatct Form, con Elementor todo es mucho más fácil e intuitivo!!

    Además no me sorprendería que en un futuro mejoren el tema de formularios de captación ya que constantemente están aportando mejoras y actualizaciones al plugin.

    saludos

    • Hola Manuel,

      Te doy toda la razón!!!

      Crear formularios y aplicar estilos en vivo es muy fácil con Elementor Pro. ¡¡El nivel de personalización de los widgets es una pasada!!

      Yo tengo confianza en que la gente de Elementor nos va a sorprender d’aquí poco y seguro que en un futuro no muy lejano podremos prescindir de Thrive leads también. ¿Sería una pasada no crees??

      Abrazo

  2. Buenas

    Me gustaría saber tu opinión acerca del precio de este plugin ¿Lo consideras caro?

    ¿Vale la pena comprar la versión premium?

    Gracias de antemano

    • Hola Jose Antonio,

      Creo que Elementor Pro es una GANGA así de claro. Imagina que compras la versión más económica de 49$ para poder instalar en 1 sitio web. Con estos 49$ puedes instalar todos los widgets de Elementor Pro en tu web, formulario, slider, widget para mostrar los post, portafolio, botones compartir, etc Si tuvieras que comprar todas estas herramientas premium por separado te costarían un pastizal!!! Por ejemplo un plugin para crear slides como Slider Revolution ya cuesta 25$ y solo hace eso!! con Elementor puedes implementar muchas funcionalidades a tu web, es un TODO en UNO.

      Si te dedicas a esto del desarrollo te saldrá más a cuenta el plan Unlimited que te permite instalar Elementor tantas veces como quieras

      Saludos

Deja un comentario