Review y Tutorial de Elementor PRO vs Elementor GRATIS en español (2020)

¿Quieres diseñar tú mismo un sitio de WordPress a tu estilo sin tener que contratar a un desarrollador? Si la respuesta es afirmativa, estás en el sitio indicado y muy pronto podrás descubrir por qué hay tanto revuelo con este page builder.

En este análisis de Elementor y Elementor PRO, echaremos un vistazo a sus características, rendimiento y facilidad de uso, pero antes de entrar en materia, tengo una sorpresa para ti, y es que ya puedes hacerte con el tutorial WordPress avanzado que llevo tiempo creando para enseñarte todo lo que se de forma totalmente gratuita. ¡Descárgalo ahora!

Puede que no te lo creas, pero WordPress no siempre ha sido tan dinámico visualmente como lo es hoy en día.

Si hablas con alguien que lleve usando WordPress desde hace años, seguro que te habla de diseño de páginas simples, estructuras de blog repetidas una y otra vez y problemas para incrustar otras URLs, código HTML y animaciones con problemas o alojamiento de imágenes.

Por suerte, WordPress ha evolucionado mucho en los últimos años, en gran medida gracias a muchos de los plugins y plantillas o temas que han ido surgiendo, y que han ayudado a decir adiós a al formato básico para poder optar ahora a una gama infinita de diseños, estructuras y funcionalidades con las que conseguir páginas web únicas de forma fácil y rápida.

Uno de estos plugins destacados, y que han ayudado y mucho a cambiar el rumbo del CMS WordPress, es sin duda Elementor y como prueba de ello están las más de 4 millones de instalaciones activas con las que cuenta la versión gratuita de este plugin en el repositorio oficial de WordPress.org.

❓ Entonces… ¿Qué es Elementor?

Elementor es un plugin que forma parte de la categoría de los conocidos como page builders o constructores visuales, que mediante tecnología drag & drop, es decir arrastrando y soltando elementos  (como si se tratara de una presentación en Power Point) permite crear, añadir, mover, eliminar o configurar cualquier elemento relacionado con el aspecto de tu web.

Cuando activas Elementor en tu página web, además de la típica pantalla de edición de páginas y post incluida por defecto en cualquier instalación, se añade además, un nuevo botón en la parte superior para habilitar la edición mediante el plugin Elementor.

Este plugin, no requiere que tengas ningún conocimiento o habilidad en HTML, CSS o PHP (aunque siempre viene bien para saber cómo funcionan las cosas), ya que todo se puede realizar fácilmente mediante una intuitiva interfaz de usuario.

Además, una vez activado, funciona en la parte visible o «exterior» de la web, (técnicamente conocida como front-end), lo que significa que podrás ver en tiempo real todos los cambios que vayas realizando.

Como es habitual en el ecosistema WordPress, el page builder Elementor cuenta con una versión gratuita y otra premium o de pago, que como ya sabrás es conocida como Elementor Pro.

En ambos casos, podrás crear tus propios diseños, aunque lo más habitual es descargar plantillas para Elementor gratis que sirvan de base y que después podrás modificar a tu gusto.

Diferencias de Elementor vs Divi y otros page builders

Lo que hace a Elementor tan diferente de otros constructores visuales es, como ya te comenté, permite ver los cambios que realizas en vivo, desde la parte visual de tu web.

Algo que después han adoptado otros muchos maquetadores visuales, ya que realmente ha marcado la diferencia, ya que te da la capacidad de ver exactamente cómo quedarán los cambios que vas realizando directamente en tu página web, en lugar de un sobrio panel de administración.

Además, el plugin Elementor en cualquier de sus dos versiones, incluye varias características de diseño que permiten la personalización completa de tus diseños, como por ejemplo:

1. Sombras
2. Tipografías
3. Superposición de fondos
4. Titulares
5. Animaciones

Y mucho más que veremos más adelante en detalle, y es que Elementor proporciona s sus usuarios más de 100 plantillas y 300 bloques o elementos a partir de los cuales puede construir la página web de sus sueños, ya que están preprogramados con intenciones específicas, como llamadas a la acción, servicios y testimonios, lo que ayuda a eliminar cualquier tipo de duda.

Simplemente arrastras la funcionalidad que necesitas, en el lugar adecuado ¡y listo!

Por supuesto, Elementor también permite ajustar aspectos como los márgenes de la plantilla y el tamaño de la fuente para adaptarse a su diseño y cuenta con un práctico botón de deshacer/rehacer para revisiones rápidas, 0 por si quieres volver atrás, así como acceso a una lista de todos los cambios realizadas anteriormente por si la cosa «se te ha ido de las manos».

También podrás añadir el modo de mantenimiento a páginas específicas, mostrando en las mismas un cartel que avisará a tus visitas que esa sección no está disponible temporalmente, sin que tengas que preocuparte de que alguien vea un diseño a medias hasta que no esté completado y perfecto.

Elementor está preparado para ser traducido a 33 idiomas diferentes (y subiendo), y también cuenta con RTL y el soporte multilingüe integrado en el framework, por lo que podrás mostrar los diferentes elementos que crees de forma fácil con los siguientes lenguajes incluidos por defecto:

1. Inglés (Australia) – (en_AU)
2. Inglés (UK) – (en_GB)
3. Inglés (Canada) – (en_CA)
4. Francés (Francia) – (fr_FR)
5. Francés (Bélgica) – (fr_BE)
6. Alemán – (de_DE)
7. Italiano – (it_IT)
8. Español (España) – (es_ES)
9. Español (Mexico) – (es_MX)
10. Japonés – (ja)
11. Portugués (Portugal) – (pt_PT)
12. Portugués (Brasil) – (pt_BR)
13. Sueco – (sv_SE)
14. Holandés – (nl_NL)
15. Danés – (da_DK)
16. Polaco – (pl_PL)
17. Italiano – (it_IT)
18. Chino (China) – (zh_CN)
19. Chino (Taiwán) – (zh_TW)
20. Persa – (fa_IR)
21. Hebreo – (he_IL)
22. Ruso – (ru_RU)
23. Rumano – (ro_RO)
24. Búlgaro – (hu_HU) – (bg_BG)
25. Griego – (el)
26. Catalán – (ca)
27. Checo – (ca_CZ)
28. Húngaro – (hu_HU)
29. Croata – (hr)
30. Finés – (fi)
31. Árabe – (ar)
32. Afrikaans – (af)
33. Ucraniano – (uk)

 

⚙️ Características incluidas en Elementor gratis (Review 2024)

Aunque ya hemos visto algunas características, en esta review del plugin Elementor, vamos a ver todos los detalles, y es que incluso con la versión gratuita de este page builder, puedes hacer muchas, muchas cosas.

Lo más importante es que puedes utilizar la interfaz visual de arrastrar y soltar de Elementor para diseñar páginas, mensajes y otros tipos de contenido al igual que con la versión pro. Esto significa que puedes crear diseños radicalmente distintos para diferentes páginas.

La «única» diferencia entre la versión de Elementor Pro y gratis, es que con la opción premium, dispondrás de elementos de diseño adicionales, para añadir aún más funcionalidades a tu página web.

Pero si estás empezando, o no tienes presupuesto, no te preocupes, ya que con la versión gratuita puedes incluso crear diseños multi-columna, algo que hasta la llegada del editor Gutenberg, se echaba mucho en falta en las características que WordPress traía por defecto.

Por otro lado, Elementor también puede ayudarte a que todo el diseño de tu sitio sea coherente, para que por ejemplo tu sección de blog y las páginas de tu tienda WooCommerce tengan un estilo similar.

Además, podrás crear tus propias plantillas de página por defecto y almacenarlas para usarlas más adelante en otras páginas y entradas para que tengan la misma estructura y poder recrear el mismo diseño de forma efectiva varias veces de forma fácil y rápida.

Además, en la versión gratuita de Elementor, se incluyen elementos o bloques para la mayoría de funcionalidades esenciales, pero también otras opciones más avanzadas, para las que, en caso contrario, deberías instalar plugins adicionales.

Aunque veremos la lista completa a continuación, sólo a modo de ejemplo, Elementor permite incluir botones, un mapa de Google, un carrusel de imágenes, iconos de medios sociales o incluso pestañas de acordeón entre otras muchas opciones, que puedes revisar a continuación en la lista completa de funcionalidades incluidas en Elementor gratis:

1. Titulares: Crea titulares llamativos que animen a los usuarios a interactuar con tu contenido.
2. Editor de texto: al igual que el editor WordPress, Elementor tiene un editor de texto visual WYSIWYG (What You See Is What you Get).
3. Edición de imágenes: El tamaño, configuración, márgenes y la opacidad de las imágenes se pueden manipular sin salir de este constructor.
4. Cajas de imágenes: Incluye cuadros con tus propias imágenes, texto y titulares.
5. Galería de imágenes: Muestra tus imágenes en una cuadrícula alineada.
6. Carrusel de imágenes: Añade un control deslizante animado o una visualización giratoria de las imágenes seleccionadas.
7. Iconos: Más de 600 iconos disponibles listos para incorporar a tu web.
8. Cajas de iconos: Igual que las cajas de imágenes, pero que contienen iconos. Ideal para mostrar servicios o propiedades de tu producto.
9. Iconos sociales: Incluye iconos para conectar tus cuentas de Facebook, Twitter y otras redes sociales en tu web.
10. Lista de iconos: Organiza tus iconos en listas ordenadas y con viñetas.
11. Incrustación de vídeo: Enlaza un vídeo de YouTube o Vimeo fácilmente.
12. Botones: Edita todas las características necesarias para diseñar y añadir tus propios botones
13. Testimonios/Reviews: Para añadir las opiniones de tus usuarios o clientes acerca de tu producto o servicio.
14. Contador: Para ver estadísticas en tu página.
15. Barra de progreso: ¿Trabajando en una objetivo concreto? Incrusta una barra de progreso para facilitar el seguimiento de acciones importantes, como por ejemplo, ¡el lanzamiento de tu nueva web!
16. Pestañas: Permite que los usuarios cambien de un lado a otro entre el contenido seleccionado añadiendo pestañas (también conocidas como tabs) en tu página.
17. Acordeón: Si tienes información para compartir pero no quieres ocupar gran parte de la página, puedes colocarlo en un acordeón plegable.
18. Toggle para cambiar: Muy similar al acordeón, pero especialmente indicado para crear un apartado de preguntas frecuentes.
19. Alerta: Añade un cuadro de alerta con colores para atraer la atención del visitante hacia lo más importante.
20. HTML: Inserta código HTML personalizado facilmente con este widget.
21. Shortcode: Añade shortcodes personalizados o de otros plugins rápidamente.
22. Anclas de menú: Crea un menú de navegación para las secciones internas de tu web para facilitar la interacción del usuario con tu página.
23. Leer más: Para establecer el límite donde tus usuarios deberán apretar el botón «leer más» para seguir disfrutando del contenido de tus posts.
24. Barra lateral: Crea y personaliza una barra lateral para el contenido adicional.
25. Google Maps: Haz que todos sepan dónde está tu empresa mostrando tu ubicación en Google Maps, ya sea mediante dirección o ubicación GPS.
26. SoundCloud: Incrusta audios directamente desde SoundCloud a tu sitio.
27. Divisor: Para dividir los distintos elementos de tu web con una línea.
28. Separador: Añade un espacio extra con el fin de dividir varias secciones (con ayuda, o no, del separador)
29. Columnas: Crea columnas para maquetar tu contenido de forma atractiva.
30. Puntuación de estrellas: Para que tus usuarios puedan valorar tu trabajo.

Si echas algo en falta, o te parecen pocos, recuerda que estos son los widgets disponibles con la versión de Elementor gratis. Si das el salto a la versión pro, dispondrás de muchas más opciones y elementos para añadir a tu web.

✅ Review Elementor pro 2024 en español

La versión gratuita de Elementor no carece exactamente de características, pero si de verdad vas en serio con tu proyecto y quieres tener control absoluto sobre tu página web para poder modificar todos los aspectos de la misma, espera a ver lo que la versión premium de este plugin tiene para ti. ¡Comienza la review de Elementor Pro!

Obviamente, la versión premium de Elementor permite utilizar todas las funcionalidades y elementos disponibles en la versión gratuita, pero es que además de otras opciones de bloques, ya no estarás limitado a utilizar este constructor dentro del área de contenido sino que contarás con acceso a la funcionalidad Theme Builder de Elementor PRO, con la que podrás personalizar casi cualquier parte de tu sitio como por ejemplo los encabezados y pies de página con la misma tecnología de arrastrar y soltar.

Disponer de una licencia de Elementor Pro, también te permite diseñar páginas que antes eran intocables, como el archivo (para el blog, productos etc) y las páginas de un solo post.

También podrás crear plantillas y utilizarlas en todo el sitio web para ganar uniformidad, o sólo aplicar diseños específicos para distintas páginas a modo de landing page o páginas de aterrizaje para vender productos o servicios.

Si eres un usuario avanzado, también podrás crear plantillas para diferentes tipos de entradas personalizadas e incluir contenido dinámico mediante campos personalizados sin importar si son nativos, o con plugins como Advanced Custom Fields o Pods.

Otra gran ventaja de comprar una licencia de Elementor Pro es que tendrás acceso a una biblioteca más grande y completa que incluye:

• Widgets
• Plantillas
• Bloques

Podrás añadir funciones más avanzadas a su contenido, como formularios, sliders y tablas de precios entre otras muchas opciones que veremos más adelante, pero lo que me gustaría que te quedara claro ahora, es que contar una licencia de Elementor pro, expande los tipos de páginas que puedes crear, lo que ahorra tener que instalar un montón de plugins adicionales (por ejemplo, puede que ya no necesite un plugin de formulario de contacto).

Otras características útiles incluyen la posibilidad de añadir CSS personalizado directamente a los widgets, y la opción de crear widgets globales que pueden colocarse en varias páginas y editarse desde una sola ubicación (por ejemplo, un formulario de suscripción por correo electrónico que está estratégicamente ubicado en todo el sitio).

Principales características del plugin Elementor Pro para WordPress

A continuación veremos un listado completo de las características que ofrece la versión premium del maquetador visual Elementor Pro para WordPress.

Empezamos con un pequeño resumen de las cosas que puedes hacer con la versión premium:

1. Incrustar las publicaciones de otros sitios y mostrar los portafolios de trabajo dentro de los diseños de Elementor.
2. Adaptar un widget global a diferentes áreas del sitio para un acceso completo.
3. Incluir CSS personalizado en cualquier bloque de Elementor colocado en la página.
4. Incluir elementos de Elementor dentro de widgets y barras laterales para una mayor personalización.
5. Incorporar diapositivas para presentaciones interactivas en movimiento.
6. Personalizar todo el contenido proveniente del plugin para tiendas online WooCommerce.
7. Acceder a una biblioteca de bloques y plantillas más amplia que la disponible con la versión gratuita.
8. Diseñar y personalizar directamente desde el plugin Elementor aprovechando todas las capacidades de edición de todos los widgets y características.
9. Editar y personalizar específica para dispositivos móviles.
10. Capacidad de respuesta completa y global.
11. Automatizar tareas de marketing e integración con los principales softwares de CRM.
12. Tipografías personalizadas.
13. Gestor de funciones.
14. Deslizadores o sliders para imágenes o videos.
15. Widgets específicos para blogs
16. Compatibilidad ampliada con WooCommerce para tiendas online.
17. Título animado para la cabecera.
18. Título con imagen dentro del texto del propio titular.

Muy interesante ¿verdad? Pues espera, que hay mucho, mucho más.

¡Seguimos!

Theme Builder de Elementor Pro en todo el sitio web

Esta es una de las principales ventajas, y es que con la versión pro de Elementor, su Theme Builder no sólo se limita al área de contenido predefinida en el tema de WordPress que estés usando, si no que podrás diseñar visualmente cualquier apartado, incluye encabezados, pie de página, página de archivo, contenido individual y todas las demás partes de su sitio.

Esto funciona perfectamente en cualquier tema de WordPress preparado para trabajar con Elementor, por lo que no requiere de ningún desarrollo extra para adaptarlo y ponerlo en funcionamiento.

Creación y diseño visual de formularios de contacto

Los formularios de contacto son una parte esencial de todo sitio web, ya que son los motores de las conversiones y los leads.

El widget de formularios de Elementor Pro es revolucionario porque todo el proceso de gestión es visual.

Podrás crear tus formularios en la parte frontal de la web, de forma visual e intuitiva y conectarlos con cualquier plataforma de automatización de marketing o CRM de tu elección en unos pocos clics.

Nuevas plantillas y bloques

Elementor Pro ofrece muchas más plantillas y bloques hechos profesionalmente que se pueden personalizar fácilmente para crear sitios web impresionantes.

Las plantillas y los bloques integran los widgets de Pro, para que puedas crear páginas con diapositivas, titulares animados, formularios y otras funciones importantes de Elementor Pro.

Más características y widgets profesionales

Elementor Pro incluye algunos widgets y características vitales que son importantes para cualquier diseñador especialista en WordPress o si no lo eres, pero te gusta que tu proyecto web tenga un aspecto profesional.

Estos widgets adicionales incluyen titulares animados para un diseño impresionante, el widget Posts para una visualización asombrosa de entradas de blog, widgets de WooCommerce, diapositivas, carrusel multimedia y fuentes personalizadas.

Precio de Elementor PRO ¿Cuánto cuesta?

La versión de pago del plugin Elementor pro para WordPress cuenta con diferentes tarifas que varían en función del número de sitios que necesites.

Es decir, a diferencia de otros plugins, sólo hay una única versión de Elementor PRO y las características no varían entre un tipo de licencia y otra más allá del número de sitios donde lo puedes instalar.

Una vez aclarado esto, los precios son los siguientes:

PERSONAL	PLUS	EXPERT
Licencia 1 sitio	Licencia 3 sitios	Licencia 1000 sitios
49$ / año	99$ / año	199$ / año

Cualquiera de las diferentes opciones de precio cuentan con 30 días de compromiso de devolución del dinero si no quedas satisfecho además de las siguientes características:

• 50+ Widgets Pro
• 300+ Plantillas Pro
• Theme Builder
• WooCommerce Builder
• Popup Builder
• Sorpote para 1 año
• Actualizaciones para 1 año

¿Realmente necesitas comprar la licencia de Elementor Pro? ¿Vale la pena?

Esta puede que sea la pregunta del millón a la hora de valorar si es mejor Elementor Pro o gratis.

En mi opinión, hay varias cosas a tener en cuenta.

Si te lo puedes permitir y el dinero no es un gran problema, lo cierto es que esta es una herramienta bastante potente a la que seguro le sacarás mucho provecho y no te arrepentirás de la compra si realmente te vas a dedicar a crear páginas web.

Ahora bien, si como la mayoría de nosotros tienes que ver en qué inviertes el dinero de tu proyecto online, te recomiendo valorar cual es la finalidad de las páginas web que vas a construir.

Si sólo vas a crear páginas web de estilo básico, o que no tienes intención de monetizar a corto – medio plazo, probablemente la versión gratuita de Elementor debería ser suficiente para la mayoría de escenarios.

De hecho, Elementor probablemente ofrece una de las versiones gratuitas más ricas en lo que se refiere al mercado de page builders.

Eso sí, debes tener en cuenta que hay algunas opciones importantes que sólo están disponibles en la versión premium, como por ejemplo añadir comentarios al contenido de tu web o blog.

Del mismo modo, si tu intención es crear un sitio web profesional en el que vender servicios, productos o monetizarlo de alguna manera, lo más probable es que termines rentabilizando la inversión necesaria de descargar una licencia de Elementor Pro ta tu web.

En cualquier caso, si no lo ves claro y este apartado no ha terminado de ayudarte a tomar una decisión, te recomiendo que pases al siguiente, en el que repasaré para ti las principales diferencias entre una versión y otra para que puedas tomar la mejor decisión.

Diferencias entre Elementor Pro y gratis además del precio

¿Sigues intentando elegir entre las versiones de Elementor Pro y gratis? La versión gratuita es uno de los plugins más populares de WordPress.org, pero también está esa potente versión de pago que añade un montón de nuevas funcionalidades.

Así que…. ¿es necesario «pasar por caja» y pagar por Elementor Pro?

¿O será suficiente quedarse con la versión gratis de Elementor?

¡Vamos a descubrirlo!

En esta sección, te ayudaremos a responder a esa pregunta con una comparativa a fondo de Elementor Pro vs Free en 2024.

Y es que, como ya te comenté antes, no todo el mundo ni cualquier proyecto necesitará obligatoriamente pagar por Elementor Pro. Descargar la versión gratuita puede ser más que suficiente en muchos casos ya que viene con bastantes funcionalidades y opciones de personalización.

Sin embargo, la versión premium también puede valer la pena, aún teniendo en cuenta ese precio a pagar. Los elementos, plantillas y bloques adicionales pueden ser la clave para diseñar contenido verdaderamente único y por lo tanto, para tomar una decisión.

Además, la funcionalidad del Theme Builder ofrece un nivel de control sin precedentes sobre el aspecto del sitio web, que sin duda habrá que tener muy en cuenta.

En pocas palabras, te interesa la versión gratuita si te sientes identificado con lo siguiente:

Si simplemente quieres crear diseños más complejos para tus páginas respecto a lo que se puede hacer por defecto (como diseños de varias columnas), o si te gusta la experiencia visual de construir páginas, puedes estar más que satisfecho con la versión gratuita de Elementor.

Incluye todo lo que necesitas para crear páginas y entradas visualmente atractivas con funcionalidades extra fuera de lo común, como los botones de llamada a la acción (CTA) y las barras de progreso.

Si por el contrario, crees que lo que más se aplica a ti y tu proyecto es el siguiente texto, no lo dudes, descarga Elementor Pro ahora.

Si quieres o necesitas poder personalizar casi todos los aspectos de la apariencia del sitio web, Elementor Pro  cuenta con las opciones que necesitas.

Y es que prácticamente podrás crear tu propio tema casi desde cero, lo cual es muy útil si estás buscando un sitio web que no se parezca al de nadie más o quieres darle a tu marca una imagen única.

Elementor Pro es también una buena opción si deseas añadir características premium como formularios de contacto y tablas de precios al sitio, sin tener que instalar un montón de plugins adicionales.

Por supuesto, es obvio decir que si te inclinas por Elementor Pro, tendrás que asegurarte de que se ajusta a tu presupuesto y que te lo puedes permitir, sobre todo, teniendo en cuenta que tendrás que ir renovando la licencia cada año para poder disponer de todas las actualizaciones.

Por suerte, al menos para un sitio web único, una licencia de Elementor Pro no es excesivamente cara (49$ por año).

Si llegados a este punto, aún no tienes claro que versión te conviene, mi recomendación es descargar Elementor gratis y probar si echas alguna funcionalidad imprescindible para tu proyecto en falta.

Si más adelante, tuvieras que comprar la versión premium de Elementor Pro, es muy sencillo actualizar cuando tengas la licencia y no perderás nada de lo que tengas creado con la versión free.

Por último, si todavía no está seguro de qué versión necesita, su mejor opción es simplemente instalar la versión gratuita y probarla. Es muy fácil actualizar a Elementor Pro en una fecha posterior, y no perderá nada de su trabajo.

Mejores temas y plantillas para Elementor (Pro)

Ahora que ya tienes claro qué versión de este plugin te conviene más, es momento de saber con qué tema o plantilla de Elementor vas a combinarlo para poder crear un sitio WordPress impresionante a la altura de este maquetador visual.

Llegados a este punto es importante que tengas en cuenta la diferencia entre tema o plantilla y cual te interesa más.

¡Vamos a verlo!

Temas (themes) para Elementor

Estos son temas regulares de WordPress que funcionan especialmente bien con Elementor

Esto son temas o themes regulares de WordPress, que funcionan especialmente bien con Elementor.

Lo ideal, es que sean temas especialmente ligeros y optimizados para trabajar con Elementor, para evitar tener que sobreescribir constantemente los estilos CSS, es decir el aspecto de las personalizaciones que quieras hacer.

Algunos de los mejores temas para Elementor son Astra (el que más te recomiendo), GeneratePress, OceanWP o Hello.

Plantillas (templates) de Elementor

Las plantillas Elementor no son temas completos de WordPress.

Son plantillas con diseños predefinidos que puedes importar a través de Elementor para crear un diseño para una sola página en concreto a diferencia de para todo el sitio como en el caso de los temas.

Aunque cuentes con las mejores de las plantillas para Elementor, siempre necesitarás un tema, pero estas plantillas pueden ahorrarte mucho tiempo al no tener que diseñar una página desde cero.

Puedes importarlos a través de la interfaz de Elementor, en lugar de instalarlos como un tema de WordPress convencional.

Entre muchas otras, algunas de las 6 mejores plantillas de Elementor son:

• Astra Starter Sites
• Elementorism
• EasyThemePacks
• The Landing Factory
• Katka Elementor Template Pack
• LaunchParty Section Blocks

Mejores addons, extensiones o complementos para el plugin Elementor (Pro)

El equipo de desarrollo de Elementor.com ha facilitado a otros desarrolladores la ampliación de funcionalidades de de este plugin, por lo que también puedes encontrar otros muchos plugins para Elementor creadas por terceros para ampliar las funcionalides del plugin oficial.

Este tipo de plugins, que sirven para ampliar las funcionalidades de otro principal, se conocen con el nombre de addons, extensiones o complementos y han sido desarrollados para aportar más funcionalidades (si cabe) al plugin oficial.

Además, en la mayoría de casos, cada complemento o extensión se centra en una tarea y un propósito específicos, por lo que no suelen recargar tu web excesivamente con material sobrante (como norma general).

Algunas de las 15 mejores extensiones o addons para Elementor más conocidos son:

• Crocoblock
• JetElements for Elementor
• Elementor Essential Addons
• Elementor Extras
• Livemesh Elementor Addons
• OceanWP Elementor Widgets
• PowerPack for Elementor
• Premium Addons for Elementor
• Ultimate Addons
• Widgetkit
• Elementor Addon Elements
• Elementor Addons & Templates – Sizzify Lite
• Elements Plus!
• Press Elements – Widgets
• PT Elementor Addons

Ayuda y soporte para Elementor Pro y gratis

Debes saber que Elementor proporciona soporte por correo electrónico a sus suscriptores de pago (mientras tengas activa una licencia)

Para los usuarios del plugin gratuito o con licencias no renovadas, dispones de los tutoriales en vídeo que ofrece el equipo oficial.

Por supuesto, en ambos casos, al ser un plugin tan globalmente utilizado, es muy probable que encuentres tutoriales de Elementor en internet para realizar casi cualquier cosa (como este que estás leyendo por ejemplo) y en todo casi, siempre podrás contratar un especialista de Elementor que te ayude si así lo deseas.

Qué son y cómo funcionan los Motion Effects de Elementor Pro versión 2.5

Los Motion Effects, son como su propio nombre indica, efectos de movimientos añadidos a Elementor Pro a partir de la versión 2.5 con los que las diferentes secciones de tu web cobran vida.

Como ya sabes, los creadores de Elementor nos tienen acostumbrados a grandes mejoras en cada versión, como por ejemplo su Theme Builder, los popups, o la posición personalizada, pero ahora, con esta nueva actualización, podrás crear efectos visuales que modifican el aspecto de los diferentes elementos de tu web al hacer scroll.

A nivel técnico, se trata de una mezcla entre el famoso efecto parallax (que ya tiene un tiempecito) y diferentes tipos de animaciones y transiciones CSS junto a otros efectos de los que se encarga por completo este maquetador visual, englobándolo todo bajo la opción de Motion Effects, traducido al español como Efectos de Movimiento.

La verdad es que es toda una novedad en lo que al mercado de page builders se refiere, ya que ningún otro lo incluye hasta la fecha nada parecido a un nivel tan profesional.

Cada uno de estos efectos, podrá ser aplicado a los diferentes elementor o widgets de tu web para añadir las diferentes opciones arriba mencionadas, pero cuidado, no te pases añadiendo efectos de este tipo «a todo lo que se mueva» ya que podrías sobrecargar en exceso tu página web.

¿Cómo funciona?

Para activar los efectos de movimiento sólo tienes que abrir Elementor Pro en una página que estés construyendo y hacer clic en un widget ya añadido a la página.

Una vez seleccionado el elemento a modificar, en la parte superior, en la pestaña «Avanzado» encontrarás la opción ‘efectos de movimiento‘.

Tras pulsarlo, verás que se despliegan los siguientes grupos:

A. Efectos de scroll

Al hacer clic en efectos de desplazamiento o scroll se abrirá otro (más) menú que incluye los diferentes efectos:

• Deslizamiento vertical
• Desplazamiento horizontal
• Transparencia
• Desenfoque
• Rotación
• Escala

Por supuesto, aunque de nuevo no te lo recomiendo especialmente para no ralentizar demasiado la velocidad de carga, podrás aplicar más de un efecto a cada widget.

Una vez pinches en el icono para la edición de cada elemento, como sabes, se abrirá un panel para modificar los parámetros y detalles de cada efecto, entre otros:

• La dirección
• Velocidad de ejecución del efecto
• Viewport

Además, podrás modificar para cada elemento que se visualice o no en cada dispositivo (escritorio, tablet o móvil).

B. Efectos del ratón

En este apartado, tendrás acceso a las opciones de seguimiento del movimiento del ratón y otros efectos 3D a los que a su vez podrás modificar la velocidad y la dirección.

Estos efectos se pueden aplicar a imágenes, texto o casi cualquier otro widget, y además seleccionar si quieres que el movimiento siga al ratón o se mueva al contrario del mismo. Es decir, que el elemento se mueva a la izquierda cuando muevas el ratón a la derecha.

Con el efecto Inclinación 3D además, tendrás la opción de dar profundidad a una imagen o widget.

Ventajas y desventajas de los Motion Effects

Como puedes ver con los efectos de movimiento ‘Motion Effects’ de Elementor Pro cuentas con un montón de efectos para animar (casi) cualquier elemento de tu web.

Como ventaja, esto hace que puedas lograr un gran diseño y conseguir la atención de tus usuarios donde más te interese.

Como desventaja, una vez más, esto tiene el gran inconveniente de que al ser tan tremendamente sencillo añadir todos estos efectos a tu página, te puedes cargar toda la usabilidad y velocidad de carga a golpe de clic y con ello, tarde o temprano tu posicionamiento en Google y posibles ventas.

Por eso, mi consejo como diseñador web es que si vas a usar los efectos de movimiento en tu web principal, te recomiendo que los reserves sólo para ciertas páginas y elementos muy concretos y con el objetivo de llamar la atención sobre las partes más importantes de tu web, por ejemplo la sección para suscribirse a tu web, el formulario de contacto o cualquiera que sea el objetivo de tu sitio web.

Si por el contrario se trata de una página de prueba, una landing de una campaña temporal que sólo recibirá tráfico de pago o referido o quieres fardar ante alguien, puedes desatar tu creatividad a lo loco.

Novedades de Elementor Pro 2.9

Junto con esta versión de Elementor Pro 2.9, también llegan nuevas funcionalidades que veremos a continuación:

• Global CSS: Establezca reglas CSS personalizadas en todo su sitio
• SEO y accesibilidad: Mejora el SEO de tu sitio con etiquetas semánticas HTML5
• Medidas anti-piratería: A partir de esta versión, los usuarios de Elementor Pro que nunca hayan activado su licencia para el sitio, no podrán arrastrar y soltar los widgets de Pro. Esto es parte de nuestra continua lucha contra la piratería, y esperamos que esta medida nos ayude a reducir el abuso de Elementor Pro.

¡Pero no es todo! Además, desde la nueva versión 2.9 de Elementor Pro, tendrás acceso a las siguientes funcionalidades destacadas:

Nuevo Full Site Editing en Elementor PRO

Ahora lo llevamos al siguiente nivel, haciendo del Constructor de Temas (Theme Builder) una alternativa aún mejor a los temas a la hora de diseñar sitios de WordPress.

Ahora, gracias a la edición completa del sitio o Full Site Editing, podrás ir variando para modificar por completo tus cabeceras, encabezados y pies de página, así como el contenido principal con un simple clic de tu ratón.

¿Cómo funciona?

1. Dentro de Elementor, haz clic en el área de la cabecera o header para editarla.
2. A continuación, haz clic en el área de contenido para editar el contenido de la página.
3. Por último, haz clic en el área de pie de página para hacer cambios en el pie de página o footer.
4. Eso es todo, pero si quieres volver atrás, siempre podrás acceder a las diferentes partes de tu sitio con un simple clic.

Nuevos colores dinámicos (Elementor PRO)

Como ya vimos antes, la funcionalidad de Contenido Dinámico de Elementor Pro es una función muy útil que te permite crear sitios web avanzados, como directorios y catálogos, sin necesidad de saber código, pero de una forma fácil ya que podrás reutilizar elementos y secciones ya creados.

Pues bien, todo esto venía ya que ahora, desde la versión 2.9 de Elementor Pro, puedes añadir colores a la lista de elementos dinámicos incluidos en este page builder.

Por lo que además del texto, los números y las imágenes, ahora puedes incrustar valores de color dinámicos en las páginas de Elementor. Esta característica está disponible dentro de cualquier widget que tenga un campo de color.

De esta manera, será mucho más fácil mantener un diseño profesional que respete la gama cromática de tu imagen corporativa en todo momento.

¿Increíble verdad?

¿Cómo funciona?

1. Crea un campo personalizado de color con el plugin Advanced Custom Fields, Pods , o las opciones nativas de WordPress.
2. Construye una plantilla única y añade el campo personalizado de color que has creado en las diferentes áreas de la página.
3. Añade varias publicaciones y define un color diferente en el campo personalizado del color.
4. Aplica la plantilla única que creaste a esas páginas.
5. ¡Listo!

Tutorial Elementor Pro en español (2024)

Llegados a este punto, ya estás al tanto de todas las novedades de las últimas actualizaciones así como de las diferencias entre la versión premium y la gratuita, por lo que entiendo que ya sabes qué opción vas a usar, así que pasamos ya al tutorial de Elementor Pro en español  con el que aprenderás a usar este constructor visual paso a paso y desde cero.

Revisaremos a fondo el proceso para crear una página y un post, y si completas este tutorial en español de Elementor Pro, te convertirás en todo un experto  de esta herramienta aunque hoy sea la primera vez que la abres.

Así que, comencemos.

Por si eres de las personas que prefieren el video, te dejo un video que parte de cero en el que aprenderás cómo instalar Elementor, activarlo, y empezar a usarlo en tu web con todo su potencial.

Si prefieres ir leyendo a tu ritmo y poner las cosas en práctica sin tener que estar constantemente parando el video, por favor, sigue leyendo.

¿Cómo crear una página con Elementor?

Cuento con que ya sabes instalar y activar un plugin, por lo que pasamos directamente a la acción con este tutorial de Elementor para crear una página (de no ser así, puedes ver los pasos en el video de arriba).

Una vez tengas instalado y activo el plugin, abre el panel de administración de tu web en WordPress y ve a Páginas > Añadir nueva.

Haz clic en el botón «Editar con Elementor» que verás en la página superior y serás inmediatamente redirigido al panel de personalización de Elementor.

Ahora tienes dos opciones.

La primera es crear la página desde cero. Esto implica ir arrastrando los diferentes elementos o widgets que encontrarás en la barra lateral de la izquierda para soltarlos en el espacio de trabajo de la página.

El segundo es mucho más fácil, así que es el que te recomiendo para empezar.

Dentro del centro del área de trabajo puede ver dos botones, haga clic en el botón gris «Añadir plantilla«.

Se abrirá ante ti una biblioteca de plantillas para Elementor que contiene varios diseños de páginas, muchas de ellas gratis.

Elige la página que más te guste y se adapte a tus necesidades y pulsa el botón «insertar».

Como podrás ver, la página insertada se combina con elementos estándar personalizados que podrás reorganizar o personalizar como quieras.

Para iniciar la personalización, deberás hacer clic en el elemento que deseas cambiar y se abrirá un menú en el campo de la izquierda.

Ese menú tiene tres pestañas: «Contenido«, «Estilo» y «Avanzado«.

Contenido

La pestaña «Contenido» permite cambiar lo que se mostrará en ese elemento: texto, imagen, enlace o cualquier otra cosa. Aquí se personaliza el contenido en sí mismo, sin ningún estilo visual.

Estilo

Como habrás podido imaginar, la pestaña «Estilo» ofrece las herramientas necesarias para cambiar la apariencia del contenido creado. Colores, fuentes, fondos, alineaciones, bordes y márgenes.

La interfaz es muy sencilla, así que estoy seguro de que entenderás bien cómo usarla después de jugar durante unos minutos.

Avanzado

La pestaña «Avanzado» contiene diferentes funciones adicionales, como el fondo completo del elemento o la animación de aparición.

Lo más probable es que no pases mucho tiempo en esta sección, pero lo mejor es que sepas bien las funciones que contiene por si en algún momento lo necesitas.

En resumen, con Elementor Page Builder crear páginas se vuelve tan fácil e interesante como jugar a un videojuego.

Eliges la plantilla con la estructura adecuada, la aplicas y luego la personalizas de acuerdo con el aspecto del tema que utilices (o no, dependiendo del diseño web que quieras utilizar).

Además, después de crear una página, podrás guardarla como plantilla predeterminada para utilizarla en otras páginas en el futuro.

¿Cómo crear un post con Elementor?

Cuando se trata de la creación de nuevas entradas, prácticamente puedes seguir el mismo proceso descrito anteriormente para las páginas, así que no te aburriré con los detalles, ya que probablemente, teniendo en cuenta lo fácil que es usarlo, ya estés «trasteando» por tu cuenta en lugar de seguir leyendo este texto.

¿Me equivoco 🙂 ?

❌ Ventajas y desventajas de Elementor y Elementor PRO

A modo de resumen, para ir terminando este tutorial de Elementor Pro en español, aquí está todo lo que me gusta y lo que no me gusta de Elementor en 2024:

Ventajas de Elementor

• Versión gratuita para los que no quieren o se pueden permitir la opción premium.
• Impresionante gama de características y funcionalidades.
• Es fácil de usar.
• Permite crear diseños de página totalmente personalizados sin necesitar conocimientos de HTML, CSS o PHP.
• La vista previa en tiempo real le ofrece una verdadera edición visual.
• La plantilla de página en blanco o canvas básicamente toma tu tema actual y lo obvia, permitiéndote usar sólo los bloques y secciones de Elementor en una página completamente vacía, por lo que permite un control total sobre el aspecto del sitio web.
• La posibilidad de ajustar el diseño según los diferentes dispositivos (escritorio, tableta y móvil) por separado. Además, se permite incluso ajustar la distribución de las columnas para cada dispositivo o tamaño de pantalla específico.
• La opción de retroceso permite volver a una versión anterior de Elementor por si acaso algo se rompe durante una actualización.
• Si alguna vez necesitas desactivar o desinstalar  Elementor en algún momento futuro, no vas a dejar tu web llena de atajos o shortcodes vacíos y sin contenido como ocurre con otros maquetadores visuales como Divi o WPBakery.
• Ajustes fáciles de deshacer/rehacer gracias a un historial completo de revisiones.
• En lugar de tener que usar una ventana emergente como otros creadores de páginas, Elementor te permite hacer clic en la página y empezar a escribir directamente.

Desventajas de Elementor

• En el momento de escribir este artículo, no permite estilizar tus enlaces por alguna razón. Tampoco hereda los estilos de enlace correctamente del tema actual.
• En cuanto a la tipografía en general, a veces los estilos se aplican correctamente, a veces no y tienes que volver a modificarlo.
• Los estilos de widgets por defecto no siempre se ven bien desde el principio, aunque seguro que esto irá mejorando.
• Las plantillas globales frente a las estáticas pueden ser confusas.
• El historial de revisión de cambios no siempre es ideal.
• Puestos a soñar, se echan en falta algunas características orientadas al marketing.

Opiniones de Elementor Pro y gratis

Ahora que ya hemos visto las ventajas más destacadas y las opciones que se podrían mejorar de una forma objetiva, me toca «mojarme» un poco y darte mi opinión personal sobre el plugin Elementor.

Lo que más me gusta, es que aunque hay una versión premium disponible, puedes disponer de gran parte del potencial de este plugin de forma gratuita, lo que es ideal para proyectos sin ánimo de lucro, principiantes o profesionales que trabajan desde países en crisis o que les resulta más difícil acceder a ciertos tipos de divisas.

Además, en mi opinión, en comparación con otros page builders, la interfaz de Elementor es la más fácil de usar para un principiante. Por supuesto, elijas el maquetador visual que elijas, siempre tendrás que invertir algo de tiempo en aprender a usarlo, pero considero que con Elementor, es más probable que «empieces a rodar» antes.

Otro aspecto que me gusta muchísimo, es la posibilidad de mostrar u ocultar widgets en ciertos dispositivos.

Ideal sobre todo si tu audiencia se basa principalmente en el móvil o si por ejemplo, tienes una imagen enorme en la cabecera que sólo se ve bien en escritorio.

Gracias a los responsive controls de Elementor podrás ocultar lo que consideres en dispositivos móviles con un simple clic de ratón, lo cual es ideal para optimizar la velocidad de carga de la web (WPO) y por lo tanto el posicionamiento en buscadores de tu web (SEO).

En resumen, si no sabes HTML, CSS y PHP y no tienes intención de aprender, una de las mejores, si no la mejor opción que tienes, es utilizar Elementor gratis o Elementor pro para crear tu página web en WordPress.

Conclusión

Le pese a quien le pese, Elementor es sin duda el page builder más popular para WordPress.

También es rápido, intuitivo y está repleto de funciones útiles en cualquiera de sus dos versiones:

1. Elementor Free: Tendrás acceso a un montón de elementos, plantillas y bloques, y podrás usarlos para crear páginas y entradas con contenido enriquecido.
2. Elementor Pro: Podrá elegir entre una biblioteca de opciones mucho más amplia y podrá personalizar aún más tu sitio web, pudiendo editar casi todas las zonas con la función theme builder (incluyendo cabeceras o headers, pies de página o footers, páginas de archivo, entradas y páginas individuales, y mucho más).

Este tutorial de Elementor Pro y gratis en español acaba aquí.

Si te ha gustado este artículo, te invito a compartirlo en redes sociales para que ayude a más gente.

Por último, puedes dejar tu email en el formulario que verás debajo para recibir gratis nuestra Guía Completa de Wordpress en PDF. También te informaremos de nuevos artículos, recursos y ofertas útiles para tu Wordpress.