Análisis de Elementor y Elementor Pro

Elementor es un maquetador que permite diseñar una web en WordPress controlando cómo se presentan los contenidos. Todo ello sin tener que usar códigos y de forma fácil y muy visual.

A este tipo de plugins se les conoce también como page builders (en español, contructores web) o editores visuales. Y resulta que Elementor se lleva el premio gordo: es el maquetador más usado de WordPress.

Elementor no es un tema ni una plantilla. De hecho, consiste en dos plugins: uno gratuito (Elementor Page Builder) y otro de pago (Elementor Pro) que extiende las funcionalidades del primero.

En este análisis de Elementor conocerás sus bondades y te explico los extras que aporta Elementor Pro, para que juzgues si te interesa pillarlo.

Además, como diseñadora web que lo ha utilizado en muchos proyectos, también incluyo mi opinión de Elementor.

Aviso: esto no es un tutorial. Con este post no aprenderás a utilizar Elementor.

¡Empecemos! ????

Elementor y Elementor Pro a grandes rasgos

A continuación resumo en una tabla las características más importantes de Elementor y Elementor Pro.

Es una buena forma de entrar suavemente en materia, ¿verdad?

Nombre completo:	Elementor Page Builder
Fecha de lanzamiento:	1 de junio de 2016
Para qué sirve Elementor:	Permite diseñar una web en WordPress controlando cómo se muestra el contenido.
Instalaciones activas:	+ de 4 millones.
Calificación:	4,9/5 a partir de +5.100 votos.
Precio Elementor:	Gratis.
URL repositorio oficial:	https://es.wordpress.org/plugins/elementor/
¿Qué es Elementor Pro?	Es un plugin adicional, de pago, que añade funcionalidades.
Top 4 extras de Elementor pro	Formulario | Theme Builder | Popup Builder | WooCommerce Builder
Recomendación SrMomo	Totalmente. Razones y opinión de Elementor Pro más abajo.
Precio Elementor Pro:	49$ / año (Personal – 1 web) | 99$ / año (Plus – 3 webs) | 199$ / año (Expert – 1.000 webs)
URL Elementor Pro	https://elementor.com/pro/

¿Qué es Elementor?

Elementor es un maquetador de WordPress cuyos creadores son Yoni Luksenberg y Ariel Klikstein. El equipo tras Elementor ha pasado de dos personas en 2016 a más de treinta hoy en día.

No obstante, probablemente a ti te interese saber más bien qué puede hacer este editor visual por ti.

¿Para qué sirve Elementor?

Imagino que estás aquí porque quieres diseñar la web de tu negocio y tienes en mente una cuestión delicada: no sabes nada de código. Eso del HTML y del CSS te queda lejos.

La vía fácil en cambio es pillarte un tema rígido, limitarte a rellenar los huecos predeterminados con textos e imágenes. ¿El resultado? Una web plantillosa sin alma, sin carácter, que le dará a tu negocio un aire estándar, del montón.

Pero tú quieres diseñar tu web a tu gusto.

¿Verdad?

Aquí es donde Elementor entra en juego.

Elementor te permite mostrar como tú quieras todos los contenidos de tu página web. Ya sean contenidos gráficos o escritos. Estén en páginas o entradas de blog.

Y lo más importante: no hace falta que tengas ningún tipo de conocimiento técnico.

Digamos que es la forma más sencilla de tener las páginas de tu web como tú quieras si no tienes ni idea de código.

¿Cómo lo consigue?

Elementor es un editor visual, un constructor de páginas web que funciona bajo el concepto WYSIWYG (en inglés, What You See Is What You Get).

De esta forma, puedes diseñar tu web viendo lo mismo que verá la persona que la visite.

La imagen a continuación te muestra cómo se usa Elementor:

Como puedes apreciar, el funcionamiento es intuitivo y altamente visual.

¿Por qué Elementor fue revolucionario?

Antes de existir soluciones visuales como Elementor para diseñar una web en WordPress, la maquetación se hacía básicamente a través de shortcodes.

Lo cual era un rollo patatero. ????

¿Qué diantres es un shortcode?

Es un código que ponemos en el editor de WordPress y que inserta algo en la parte visible de nuestra web.

Por ejemplo, un shortcode puede permitirnos poner una galería de imágenes. O puede ser una columna con texto dentro. O un botón.

Quizás prefieras verlo con una imagen, así que te dejo un ejemplo de shortcodes para crear dos columnas con una galería de tres imágenes en la primera y un botón en la segunda.

Actualmente los shortcodes ya no se utilizan para maquetar una página. Estas son las dos principales razones:

1. Utilizar shortcodes significa tener que aprender códigos. Esto te desvía de dedicarle más tiempo a llenar tu web con imágenes y textos de calidad.
2. Cada plugin y cada plantilla tiene sus propios shortcodes. Así que al final es un auténtico lío saber qué pertenece a qué entre tanto código.

Elementor supuso una alternativa a los shortcodes.

Un editor visual es básicamente es un drag-and-drop con el que pintas tu web como tú quieras, sin necesidad de aprender código.

Atento al vídeo a continuación. En él te muestro cómo usar Elementor para crear lo mismo que saldría con los shortcodes de ejemplo que te he puesto antes.

¿Mucho más sencillo no? ????

¿Cómo funciona Elementor Page Builder?

Para que puedas hacerte una mejor idea de cómo editar con Elementor, voy a describirte lo que aparece en la pantalla de ordenador siguiente:

En primer lugar, hay dos grandes áreas fáciles de identificar:

1. En medio de la pantalla ves la página que estás maquetando.
2. A la izquierda tienes la columna donde se genera toda la magia y que aparece cuando editas cualquiera de los elementos. Esta columna se compone por tres pestañas.

Antes de mostrarte las tres pestañas, permíteme presentarte tu nuevo amigo: el widget.

El widget: la pieza básica de Elementor

La forma más sencilla de explicar qué es un widget es la siguiente: tienes un widget para cada tipo de contenido. Por ejemplo, tienes widgets para añadir una imagen, un texto, un mapa de Google, un listado o un contador.

Como has podido ver en el vídeo anterior, lo que haces es arrastrar un widget al centro de la pantalla y luego lo editas. Editar un widget es la forma de personalizar tu web.

Ahora sí, una vez claro el concepto de widget, puedes aprender cómo usarlo a través de sus tres pestañas de edición.

Las tres pestañas de un widget de Elementor

Pestaña «Contenido»

En la primera pestaña de un widget puedes editar todo lo que tiene que ver con el contenido y la funcionalidad.

Por ejemplo, y dependiendo del widget, los textos a mostrar, la dirección URL a la que enlazar o los iconos de redes sociales que quieres que aparezcan. Digamos que en esta columna vas a indicar qué tiene que mostrar ese widget.

Pestaña «Estilo»

En esta segunda pestaña puedes indicar cómo se tiene que mostrar el contenido del widget.

Para mí, en esta columna reside gran parte del poder de Elementor. Puedes hacer que los widgets se vean como tú quieras. Sin escribir código, sin depender de la plantilla.

Las opciones de personalización son tan potentes que difícilmente puedes adivinar que dos webs han sido maquetadas con Elementor, sin ver el código fuente de cada una.

¡En esta pestaña es donde está la diversión, amigo!

Pestaña «Avanzado»

En esta última pestaña puedes establecer cosas tan importantes como:

• Márgenes y relleno para el widget, sección o columna.
• Fondo en el caso de que quieras colocar una imagen.
• Bordes.
• Adaptabilidad: determina si ese widget se esconde en escritorio, móviles o tablet. Imagina que tienes un vídeo muy chulo pero que pesa lo suyo. Puedes establecer que se muestre sólo en escritorio (donde se presume una buena conexión a Internet) y en cambio no aparecer en móviles.

Ahora que has visto cómo se usa Elementor, veamos cuáles son los widgets que tienes a tu disposición.

Los 5 widgets de Elementor más usados (versión gratuita)

En este apartado vas a ver los diferentes widgets que tienes disponibles si escoges la versión gratuita de Elementor. Más adelante ya analizaremos la versión de pago (Elementor Pro) y los elementos exclusivos que trae.

Puedes verlos todos en la siguiente imagen:

Como ves, hay un montón de widgets con los que puedes añadir muchos tipos de contenido distintos.

Pero déjame que te diga los cinco widgets con los que querrás empezar a jugar:

#1 Encabezado y editor de texto

Estos widgets sirven para poner respectivamente títulos y textos en la página. La gracia es que se puede dar mucho estilo, sobretodo a los encabezados, para que destaquen y llamen la atención.

#2 Imagen

A veces colocar una imagen puede ser un dolor de cabeza. Con este widget de Elementor podrás colocarla a tu gusto, recortarla, ponerle sombra… ¡lo que se te ocurra!

#3 Galerías y carousel de imágenes

La verdad es que las galerías y los carruseles de imágenes cada vez se usan menos. Sin embargo, cuando empiezas en esto el diseño web, es algo recurrente.

En la imagen puedes ver arriba una galería de imágenes y abajo un carrusel. El segundo widget es el que está en modo de edición en la columna izquierda.

#4 Vídeo

Este widget te permite insertar de una forma sencillísima vídeos de Youtube, Vimeo o autoalojados. Además, por si no quieres mostrar todo el vídeo, puedes especificar un momento de inicio y otro de finalización.

#5 Iconos sociales

Este widget es básico para poner tus redes sociales. Incluso puedes colorear cada red social con su color oficial o con el que tú quieras.

Con Elementor también puedes dar estilo a tu plantilla

A principios de 2020 Elementor nos soprendió con una nueva feature muy interesante: Theme Style.

Se trata de personalizar el estilo de tu tema desde el propio Elementor.

Theme Style te permite usar todo el poder de Elementor para personalizar tus textos, encabezados, botones, formularios e imágenes de forma global.

¿Qué te ahorras?

Por ejemplo, tener que dar estilo a cada texto, aunque el estilo que quieras aplicar a cada texto sea el mismo.

Personalmente me parece algo espectacular. Un game changer como suele decirse.

Dicho de otra manera, estos elementos de diseño que normalmente los define la plantilla, ahora podrás hacerlo desde el mismo Elementor, si quieres.

Con todo lo que ello implica: facilidad de realizar cambios, opciones infinitas de diseño, efectos hover, y muchas más posibilidades.

Y por si fuera poco, para más inri, esta feature está incluida en la versión gratuita de Elementor.

Debo repetirlo: esto supone un cambio brutal en el campo de juego. Hace que muchas plantillas de WordPress queden completamente obsoletas y sean innecesarias.

Y supongo que ahora te harás la gran pregunta:

¿Necesitas una plantilla si usas Theme style de Elementor?

La respuesta es que sí. Más abajo, en la sección de preguntas frecuentes te lo explico.

Mi opinión de Elementor Page Builder

Como diseñadora web, llevo años realizando webs en WordPress. A lo largo de este tiempo, he visto cosas de todos los colores. He «maquetado» webs mediante shortcodes y he trabajado con varios editores visuales.

Y lo cierto es que Elementor me encanta. Te lo recomiendo totalmente.

Sin embargo, más allá de mi impresión particular, creo que hay tres razones principales por las cuales deberías animarte a probar Elementor (recuerda que tiene una versión gratis):

1. Da rienda suelta a tu creatividad. En comparación con otras soluciones, no tienes límites a la hora de maquetar. Puedes hacer (casi) todo lo que quieras para diseñarte una web que respire a ti y a tu negocio.
2. Es un editor muy potente. Me refiero al hecho de que no importa qué tipo de web quieras hacerte. Seguramente tengas tus necesidades cubiertas.
3. Permite diseñar una web rápidamente. El hecho de que Elementor sea un solución WYSIWYG, y que funcione bajo el drag and drop, te ahorra muchas horas. Mi consejo es que este tiempo lo emplees en llenar tu web con textos e imágenes relevantes para tu cliente potencial.

Llegados a este punto, ya conoces bastante bien qué es Elementor y las posibilidades que te brinda.

Pero como he comentado anteriormente, existe también una versión premium llamada Elementor Pro. A continuación, vas a ver en qué consiste y si vale la pena que la compres.

Ahora sí: ¿qué es Elementor Pro?

Como tantos otros plugins para WordPress, Elementor tiene una versión gratuita y una versión premium.

Con la versión gratuita puedes hacer muchas cosas, tal y como has podido ver más arriba.

Pero con Elementor Pro puedes hacer prácticamente todo lo que imagines.

Los 5 mejores widgets exclusivos de Elementor Pro

La versión de pago de Elementor pone a tu disposición muchos widgets extras interesantes. En esta imagen puedes ver un listado con todos ellos:

Ahora paso a mostrarte los cinco widgets de Elementor Pro que creo son super útiles:

#1 Formulario de contacto y de suscripción

Un formulario es un elemento básico de cualquier una web. Existen muchos plugins específicos para esta funcionalidad. Así que no necesitarías Elementor Pro para crear un formulario.

Sin embargo, el widget Formulario de Elementor Pro te permite crear, de forma visual y fácil, dos tipos de formularios:

1. Formulario de contacto: recibe solicitudes de más información acerca de tus servicios o directamente peticiones de presupuesto.
2. Formulario de alta en newsletter: crea una lista de suscriptores a la que enviar tus proyectos, ofertas y entradas de blog.

Un punto super guay a favor del formulario de Elementor es que se conecta con los servicios de email marketing más conocidos como MailChimp y MailerLite.

De esta forma, alguien que rellene el formulario de suscripción en tu web será dado de alta automáticamente en el servicio que utilices.

Mola, ¿verdad? ????

#2 Listado y tabla de precios

En general, te recomiendo poner tus tarifas o precios en tu web. Al menos una cifra orientativa. Es una muestra de transparencia y también te permite evitar perder tiempo filtrando los contactos.

El hecho es que Elementor Pro te brinda una manera bastante elegante de presentar tus números, a través de dos widgets que puedes ver en la imagen. Por orden: listado de precios y tabla de precios.

#3 Carousel de testimonios

Es importantísimo que pongas testimonios en tu web. Estos despiertan más confianza en tus clientes potenciales que el texto comercial que tú pongas, por muy bueno que sea.

Aunque existe un widget llamado Recomendación, a mi me gusta más el llamado Testimonial Carousel. El motivo es que puedes poner muchos testimonios sin que ocupen mucho espacio en la página, pues van rotando.

#4 Countdown

En un primer momento, puede que poner una cuenta atrás en tu web no sea algo que te llame la atención.

Pero el día que la necesites (por ejemplo, para poner una caducidad a un descuento o a una oferta), te darás cuenta que hay un montón de plugins que dicen hacerlo pero que pocos lo hacen de forma sencilla y gratuita. Y ninguno te permite diseñar una cuenta atrás a tu gusto.

Con el widget Countdown de Elementor Pro, lo tienes fácil.

#5 Share Buttons

Este widget no tiene muchas opciones. Pero sirve perfectamente para que tus lectores compartan tus entradas de blog en las redes sociales.

A diferencia de la cuenta atrás, sí hay otras opciones válidas que te dan esta funcionalidad de compartir en redes sociales. Sin embargo, el widget de Elementor Pro te evita tener que instalar un plugin extra.

Lo cierto es que en Elementor Pro tienes aún más widgets interesantísimos. Puedes utilizarlos para crear plantillas y contenidos para WooCommerce, como te explico a continuación.

Los dos extras revolucionarios de Elementor Pro

Theme Builder: crea tus plantillas con Elementor Pro

Qué es Theme Builder y por qué te va a gustar

Esta opción de Elementor Pro es una maravilla. Es aquello con lo que los que llevamos años trabajando con WordPress estábamos esperando que alguien hiciera.

Se trata de usar todo el poder de Elementor para crear plantillas para:

• Cabecera y pie de página.
• Entrada de blog.
• Páginas de archivo del blog, como una categoría.
• Producto de WooCommerce.
• Páginas de archivo de WooCommerce.
• Página 404.

Esto significa que Elementor toma el poder por encima de tu plantilla y define cuál es el diseño para cada uno de los puntos anteriores. 

Por ejemplo, ésta es la plantilla que tenemos en SrMomo para cuando aparece un error 404 (página no encontrada):

La gran ventaja del Theme Builder de Elementor Pro es lo fácil que es editar cualquier cosa con este maquetador visual.

Solamente tienes que coger un widget y arrastrarlo donde quieras. Sin necesidad de códigos PHP. Sin modificar CSS.

Bueno, no sé si transmito bien el alcance de esto pero te lo resumo: brutal ????. Honestamente, creo que solamente esto ya vale mucho más de lo que cuesta el plugin premium.

Estos son todos los widgets que tienes a tu disposición para crear plantillas personalizadas con Theme Builder:

Los mejores widgets de Theme Builder

De todos los widgets del Theme Builder de Elementor Pro, destaco los siguientes:

Para la plantilla del header y el footer:

• Site logo: permite colocar tu logotipo en la cabecera.
• Search form: aparece una lupa en la que el usuario puede buscar en tu web. Aparecerá una página de resultados con entradas y páginas relacionadas.
• Menu cart: coloca un icono en la cabecera en el que se ve el número de productos en el carrito de compra. Al hacer clic en él se despliega el carrita por la derecha de una forma muy chula. Te dejo un ejemplo real de una web que yo misma diseñé. En la imagen se ve lo que sucede tras hacer clic sobre el widget:

Para la plantilla de entradas de blog y archivo del blog:

• Author Box: muestra una cajita con la información del autor del blogpost. Es muy customizable y coge los datos de tu perfil de usuario.
• Post info: muestra las metadatas del blogpost que tú elijas (fecha de publicación, autor, categorías, etiquetas, etc.).

Para la plantilla de una ficha de producto en WooCommerce:

De estos widgets no sabría cual destacar. Todos me parecen fantásticos. Si has trabajado con WooCommerce ya sabes que es muy difícil hacer que dos tiendas online con el mismo tema no se parezcan entre ellas.

Así que todo lo que tenga que ver con customizar la apariencia de WooCommerce me parece un unicornio con una crin de arco iris corriendo por un prado lleno de flores silvestres que huelen a suavizante de ropa.

Elementor Pro ha ido incorporando en su Theme Builder tantos widgets específicos para WooCommerce que a día de hoy ya lo separa. Este es el origen del WooCommerce Builder.

Popup Builder: crea modales con Elementor Pro

Los modales, también conocidos como popups, son aquellas ventanitas que aparecen mientras visitas una página web. Habitualmente sirven para captar suscriptores para una newsletter o para informarte de un descuento.

Si has intentado hacer modales con WordPress probablemente hayas visto e incluso probado alguno de los plugins específicos para ellos. Por ejemplo, OptinMonster, Sumo o Thrive Leads.

Hay dos cosas que yo siempre quise mejorar de cualquiera de ellos:

• Más fácilidad de uso. Para aprender a usar alguno de ellos debías dedicarle mucho tiempo. Demasiado.
• Mayor personalización. Los popups resultantes solían tener una apariencia distinta a la de la web.

Hasta que Elementor Pro sacó su Popup Builder.

Y no eche la mirada atrás.

Desde entonces uso Elementor también para los popups de mis proyectos. Saco provecho de ya conocer este maquetador, de su poder de diseño y de su facilidad de uso. Sin mencionar el ahorrarme tener que instalar otro plugin, lo cual siempre afecta a la velocidad de carga de la web, poco o mucho.

Ahora es tan solo cuestión de echarle imaginación pues las posibilidades son muchas:

Además de ayudarte a diseñar los modales de tus sieños, Popup Builder cuenta con mogollón de opciones de configuración.

Las más interesantes, para mí, permiten que el modal:

• Aparezca tras X segundos desde la carga de la página.
• Salga al pasar un % de scroll vertical en la páginas.
• Se lance cuando el usuario hace clic en un enlace o en un botón.
• Aparezca cuando el usuario intenta irse de la web.
• Solamente es visible en ciertas páginas.

¡Una pasada!

Elementor vs Elementor Pro: las diferencias

Como has podido ver a lo largo de este blogpost, existen muchas diferencias entre la versiones gratuita y premium de Elementor.

Si las comparamos, para mi éstas son las 4 diferencias más importantes entre Elementor y Elementor Pro:

1. Más widgets disponibles. Con Elementor Pro no sólo tienes disponibles un mayor número de widgets que con la versión gratuita. Además, éstos son indispensables, como el widget de formulario que te sirve para contacto o para alta en newsletter.
2. El game changer que supone Theme Builder. Con la versión gratuita Elementor Page Builder no lo tienes incluido. Pero como te he mostrado anteriormente, Theme Builder es básicamente la caña.
3. Popup Builder. Es la característica exclusiva de Elementor Pro que te explico en el punto previo. Le sacarás partido, seguro.
4. Un sinfín de plantillas bien hechas. A mi particularmente me gusta hacer diseños más personalizados. Pero he de admitir que algunas plantillas de Elementor Pro están muy bien diseñadas. Eso las convierte en ideales para hacer rápidamente una web o si no tienes idea de diseño. Debajo te dejo una imagen con unas pocas plantillas para que veas de qué hablo.

Mi opinión sobre Elementor Pro

Después de todo esto que te he explicado, ya puedes hacerte a la idea de lo que opino.

¿Elementor Pro? Me encanta.

Creo que Elementor es un maquetador visual muy potente y que podrás hacer lo que quieras con el diseño de tu página web. Además, tiene un soporte excelente y un ritmo de actualizaciones brutal.

Si a ello le añadimos los extras que aporta Elementor Pro, para mi es la solución para personalizar una web como quiera.

Preguntas más frecuentes sobre Elementor y Elementor Pro

¿Cuánto cuesta Elementor Pro?

El coste es de 49$ en el plan personal que te permite utilizar esta maravilla en un único sitio web. Creo que esta licencia es suficiente para la gran mayoría de proyectos que se reducen a diseñar una sola web.

El precio de Elementor Pro me parece muy razonable considerando todo lo que puedes hacer con él:

1. Personalizar tu web tanto como quieras.
2. Dar rienda suelta a tu creatividad sin preocuparte por saber de códigos. Utilizarlo es hasta divertido.
3. ¡El tiempo que te ahorras por no tener que instalar múltiples plugins y configurarlos!

Si estás pensando en pillarte Elementor Pro por todo lo que te he comentado, te agradecería que lo hicieras a través de nuestro enlace de afiliación. De esta forma, nosotros nos llevaremos una comisión por haberte recomendado este maquetador sin que a ti te cueste nada.

Como siempre, nosotros recomendamos las herramientas que utilizamos en nuestro a día a día. Lo hacemos de forma honesta y en base a nuestra experiencia. Si además nos llevamos una pequeña comisión, pues estupendo. Pero para nada esto influye en lo que opinamos y utilizamos.

¿Lo tienes claro? Haz clic aquí ⬇️

>> Sí, quiero comprar Elementor Pro y premiarte por tu artículo <<

¿Es necesario un tema o plantilla si uso Elementor?

Si has leído el artículo, puede que te preguntes para qué quieres un theme si con Elementor ya puedes definir el header, el footer, las plantillas de los diferentes tipos de contenidos y hasta el estilo global de toda tu web.

Bien, para empezar, toda instalación de WordPress necesita un tema o plantilla. Elementor es un plugin y por lo tanto no sustituye a los temas.

En resumen, la respuesta es que sí: aunque utilices Elementor, necesitas un tema.

Eso sí, al tener Elementor definiendo casi todo lo que tiene que ver con el aspecto de tu web, puedes escoger un tema muy sencillo, incluso uno gratuito.

Pero mi preferido es GeneratePress (haz clic para más información).

¿Qué tal se llevan Elementor y el SEO?

Seguramente una de las cosas que más cuesta lograr es que una web se posicione arriba. Así que con esto en mente, te voy a comentar la relación entre Elementor y el SEO.

Lo cierto es que trabajar con Elementor o con otro maquetador visual no determina tu posición en los resultados de Google. Pero como todo, influye.

¿Cómo Elementor favorece tu posicionamiento SEO?

Pues básicamente estando bien hecho.

Con esto quiero decir que el código que conforma Elementor es limpio y está pensado para que tu web vaya rápida. Y justamente es esto, la velocidad de tu web, lo que representa una de las muchas variables del SEO. Una web rápida gusta a los usuarios y por lo tanto a Google.

Comparativas de Elementor con otros maquetadores visuales

Como sé que hay otros editores visuales de los que has podido escuchar algo, me parece lógico el compararlos con Elementor. Así puedes ver cuál te conviene más.

Elementor vs. Visual Composer

Visual Composer, hoy en día llamado WP Bakery Page Builder, ha sido durante años el editor más popular. En este apartado lo vas a conocer un poco pero mi objetivo es compararlo con Elementor.

He usado ambos editores visuales en varios proyectos, por lo que te puedo dar una opinión sincera de cual creo que es, en general, mejor.

A continuación voy a analizar varios aspectos que para mí son importantes.

Widgets

Si vemos el número absoluto de diferentes widgets que tiene cada uno, más o menos tienen los mismos (unos 50). Pero a mi me parece que los de Elementor son mucho más versátiles.

Por ejemplo, en relación a los formularios de contacto:

• Visual Composer tiene varios widgets que conectan el maquetador con plugins de terceros. De esta forma, tienes un widget para Contact Form 7, otro para Ninja Forms, etc.
• Con Elementor tienes un widget de formulario de contacto que funciona de forma independiente. ¡No necesitas usar otro plugin para ello! Por si fuera poco, te recuerdo que el widget de formulario de Elementor se integra con herramientas de email marketing como MailChimp.

En cuanto a la personalización de los widgets, ambos tienen muchas opciones. Pero Elementor es más intuitivo, puesto que la columna de estilo te permite modificar cosas que Visual Composer no te permite.

Eso sí, ambos permiten aplicar CSS customizado a cada widget, pero hay que saber código.

Velocidad

Por velocidad podemos entender dos cosas: velocidad de la carga de la página o velocidad en el desarrollo de la página.

Te resumo el gran análisis que hizo Pagely sobre este tema en 2019:

• En velocidad de carga, Visual Composer gana la partida. Pero considero que la diferencia (un 18% más veloz) no es la suficiente como para declinarte por él. ¿Porqué? Los tiempos de desarrollo y la curva de aprendizaje son más largos en Visual Composer. Dicho de otra forma, aprenderás antes a dominar Elementor y con él diseñarás webs más rápidamente.
• En velocidad de desarrollo, el ganador es claramente Elementor. En el análisis, la misma página se desarrolla un 33% más rápido en Elementor que en Visual Composer. Si tienes que diseñar muchas páginas, vas a agradecer esas horas de más. ????

Interfaz de usuario

Vamos a comparar ahora la pinta que tienen ambos editores cuando los usamos para diseñar una página. Vamos a ver un ejemplo de cada uno, tal y como los propios autores nos lo presentan.

Visual composer tiene dos formas de editar una página:

Desde el editor de backend:

Desde el editor de frontend:

En cambio Elementor solamente tiene una forma de editar una página:

Para mí, la interfaz de Elementor es mucho mejor que la de Visual Composer si te gusta ver los cambios en vivo.

Si en cambio prefieres editar usando el Backend (sin ver el resultado de lo que estás haciendo), entonces Visual Composer es para ti.

Qué ocurre cuando desactivas ambos plugins

He aquí el quid de la cuestión. Éste es el punto por el que acabé descartando Visual Composer de todos mis proyectos.

El hecho es que todos los editores visuales generan código para mostrar el diseño, pero Elementor es el único que elimina estos shortcodes una vez desactivas el plugin.

¡Veamos un ejemplo! La misma página diseñada con ambos maquetadores. Veamos qué sucede al desactivar cada plugin y cómo queda la página.

Quiero que te fijes en el resultado de ambas páginas una vez desactivas el plugin:

• Con Elementor la página aparece el texto y las imágenes sin formato.
• En cambio, con Visual Composer se genera cantidad de código basura que tendrás que borrar manualmente.

Por este motivo dejé de realizar webs con Visual Composer.

Cambiar de maquetador visual cuando has usado Visual Composer (o cualquier otro) es un martirio, porque tienes que borrar un mónton de código basura. En cambio con Elementor no supone ningún tipo de trabajo extra.

Elementor vs. Avada

Avada es la plantilla más vendida de Themeforest, el marketplace más importante de WordPress. Y tiene su propio maquetador llamada Fusion Builder.

Ante todo debes saber que estuve usando Avada varios años. Esto significa que me gané la vida diseñando páginas con Avada.

Pero, ¿sabes qué? Al final me decanté por Elementor por los mismos motivos explicados en el punto anterior.

La razón más destacable: Avada también te deja código basura. Pero otro motivo importante: Avada tiene unos tiempos de carga demasiado largos para mi gusto.

Elementor vs Gutenberg

Hace relativamente poco, WordPress sacó una actualización importante: un maquetador propio de WordPress llamado Gutemberg. Lo bueno es que es completamente gratuito.

Entonces te preguntarás: ¿para qué necesito otro editor?

Pues porque Gutenberg es demasiado simple.

No te deja realizar customizaciones ni poner todo «como a ti te de la gana». Si tu idea es tener una web con un aspecto profesional, Gutenberg se queda muy corto.

Otras comparativas

Podría seguir comparando Elementor con otros page builders que realizan la misma función de maquetación visual. Ya sea con plugins como Divi, Thrive Architect (el antiguo Thrive Builder) o Beaver Builder (muy utilizado con el template llamado Astra) o con webs tipo Wix. Seguramente querrías saber qué opino sobre todos ellos.

No obstante, la verdad es que nunca los he usado. Todos ellos son populares y seguro tendrán sus puntos fuertes. Pero en SrMomo estamos para recomendarte exclusivamente en base a nuestra experiencia profesional. Al no haberlos utilizado, no me siento legitimada a opinar sobre ellos.

En conclusión

Como todo en la vida, esto se acaba. Tan sólo espero que este tutorial análisis a fondo o review sobre Elementor y la comparativa con Elementor Pro te hayan sido super útiles. Si es así, me doy por mega satisfecha ????

Me encanta Elementor. Y con Elementor Pro soy capaz de diseñar mis páginas y las de mis clientes tal y como quiero que sean.

En cualquier caso, yo por mi parte, lo dejo aquí. ¡Muchas gracias por leer!

¿Te he ayudado a decidirte a utilizar Elementor? ¿Ves justificado comprar Elementor Pro?