Por qué Elementor es cada vez más el mejor page builder para WordPress

Elementor es un maquetador visual de páginas para WordPress que posibilita crear diseños mediante arrastrar y soltar, sin necesidad de programar. Publicado en 2016, es el plugin más popular del repositorio desde diciembre de 2023, con más de 17 millones de instalaciones activas. Su versión gratuita incorpora más de 30 widgets, diseño responsive y contenedores flexbox y grid; la Pro suma Theme Builder y contenido dinámico.

Con más de 8 años de trayectoria, Elementor ha recorrido un camino enorme como empresa y como producto. En este post vas a ver gran parte de ese recorrido.

Publicado en 2016, Elementor se ha establecido rápidamente como una de las herramientas más potentes en el ecosistema de WordPress, siendo a día de hoy, concretamente desde el 11 de diciembre de 2023, el plugin más popular del repositorio de WordPress, con más de 17 millones de instalaciones activas en todo el mundo.

Elementor es un constructor visual de páginas web para WordPress que ha cambiado la forma en que los diseñadores y desarrolladores crean sitios web. Hasta tal punto que un diseñador web ya no necesita un desarrollador, ni viceversa.

Por supuesto, un buen proyecto web sigue beneficiándose tanto de un diseñador como de un desarrollador, pero el uso adecuado de Elementor reduce significativamente los tiempos de entrega de trabajos y ayuda a hacer más competitivos los presupuestos de los mismos.

Vamos a desmigar qué es Elementor, sus características principales, por qué ha tenido tanto impacto en el diseño web y ver si sigue siendo el mejor maquetador para WordPress o si en realidad ha empezado a declinar.

Elementor es un plugin que permite a los usuarios diseñar y construir sitios web mediante un editor visual de arrastrar y soltar en tiempo real y sin escribir código. Este enfoque permite que tanto principiantes como diseñadores experimentados construyan páginas web atractivas y funcionales de manera rápida y eficiente.

En esta primera parte del artículo vamos a ver qué nos ofrece la versión free o core de Elementor y qué añade Elementor Pro.

Características de Elementor Free

Elementor free, o core, es el motor del builder. Es el responsable del editor, del contenido estático en las páginas y de más de 30 widgets gratuitos.

Pero también es responsable de:

• el diseño responsive,
• el sistema de diseño,
• los contenedores flexbox y Grid CSS,
• las nuevas pestañas y acordeones anidados e
• incluso de la versión básica del landing page builder.

¡Vamos a verlas una a una!

Widgets de elementor free, no te vas a cansar de usarlos

No existe un page builder sin widgets (o elementos o bloques), y Elementor no podía ser menos. Como podéis ver en la imagen superior, al hacer clic en la esq. superior derecha rosa de la imagen, aparecen tres pestañas en el lateral izquierdo del editor.

En la pestaña de contenido puedes ajustar todo lo que se refiere al contenido del mismo, en el ejemplo, cargar la foto, leyenda, etc. En la segunda del centro, la de estilo, todo lo que tuviera que ver con colores, tipografías, tamaños, bordes y radios de caja, filtros CSS y demás. Por último, la pestaña avanzada de la derecha, ajustes más avanzados de disposición, condiciones de visualización, efectos de movimiento, fondos, máscaras, etc.

De los 30 widgets, tenemos un grupo de widgets simples pero fundamentales. Digo simples porque solo tienen una función o contenido. Estos son los que al final más vas a usar. Están agrupados bajo el término «básicos». Estos son encabezados, imagen, Editor de texto, botón, icono, Google Maps… Con ellos añadirás esos elementos en tu web.

Hay otro grupo de widgets que permiten introducir varios elementos simultáneamente en un solo widget. Están agrupados en la columna izquierda del editor bajo el epígrafe «general» y entre ellos están:

• Caja de icono: perfecto para mostrar servicios o productos de manera resumida
• Caja de imagen: widget que combina una imagen con un texto
• Galería básica: te permite construir muy rápidamente la típica galería de imágenes.
• Lista de iconos: Clásica lista con un icono identificatorio delante para listar elementos
• Carrusel de imágenes: igual que la galería pero en modo carrusel para ir desplazando lateralmente las imágenes.
• Recomendación: widget que combina texto, imagen, iconos y enlaces a redes sociales, etc.

Después tenemos algunos más avanzados, también bajo General, que nos permiten hacer cosas especiales:

• Acordeón y Pestañas nos permiten tener contenido agrupado horizontal y verticalmente y están explicados en detalle más abajo.
• Barra lateral nos permite crear un contenido lateral, bastante en desuso actualmente.
• Iconos sociales nos permite añadir las redes sociales que usamos, pero ojo aquí no ponerlos demasiado a la vista, si puedes en el pie de página y tirando a discretos o minimalistas. 😀
• Ancla del menú nos permite crear diseños Onepage muy fácilmente.
• Contador, Barra de progreso, y ruta de texto nos permite añadir diversas animaciones, geniales, para mostrar datos o mejorar las conversiones en nuestras páginas más marketineras.

Diseño responsive y pixel perfect

El diseño responsive es prácticamente obligatorio desde 2012. Consiste en tener un solo diseño listo tanto para dispositivos móviles como tabletas y smartphones como para ordenadores de sobremesa y portátiles.

Hay 5 puntos cruciales a tener en cuenta en referencia al diseño responsive:

1. Necesitas herramientas para ocultar elementos de tu sitio en dispositivos seleccionados, de manera que puedas optimizar la experiencia del usuario para cada dispositivo. Esto al principio se consideró mala práctica, pues la gente pensaba que al solo ocultarse, Google lo consideraría contenido duplicado, pero hace tiempo que esto fue desmentido.
2. Debes tener un modo responsive para cambiar el aspecto y la sensación del sitio en diferentes dispositivos.
3. También precisas manejadores de vista previa que te permitan ver el sitio en un amplio rango de anchos.
4. Además necesitas opciones para cambiar imágenes de fondo, bordes, el orden de las columnas y otros elementos para dispositivos de diferentes tamaños.
5. Por último, posibilidades de puntos de ruptura personalizados que te permiten diseñar para diferentes tamaños de pantalla.

Sí, lo has adivinado.

Elementor incluye todo esto en su editor en la versión gratuita. E incluso, en lo referente a puntos de ruptura personalizados, además de los tres tradicionales de escritorio, tablet y móvil, añada hasta 4 más para grandes pantallas, portátiles, móviles y tabletas en apaisado o lo que puedes necesitar, hasta un total de 7 puntos de ruptura.

En cuanto al famoso pixel perfect es un concepto que engloba todo lo necesario para poder llevar un diseño en Figma, Photoshop o la herramienta que sea, a tu sitio WordPress quedando exactamente igual.

Y si, también gracias a todos los ajustes disponibles del editor de Elementor, tales como

• posibilidad de arrastrar y soltar,
• controles de espaciados y alineación,
• márgenes y rellenos personalizables,
• alineaciones verticales y horizontales avanzadas,
• unidades de medida como PX, %, EM, REM, VH, VW o incluso personalizadas incluyendo clamp

vas a poder ajustar el diseño al píxel perfecto, en cada uno de los tamaños de pantalla que necesites.

Si aun con todo esto no puedes construir lo que necesitas, siempre puedes introducir CSS personalizado fácilmente, eso sí, ya en la versión Pro.

Sistema de diseño de Elementor

Otra de las enormes bondades que ofrece el editor de Elementor es el sistema de diseño, integrado hacia agosto de 2020, con el que puedes personalizar, desde

• los ajustes del sitio dentro del propio editor,
• los colores y tipografías globales,
• fuentes,
• botones,
• contenedores de imágenes,
• campos de formulario,
• fondos,
• rellenos predeterminados,
• cajas de luz
• e incluso transiciones de página…

Podrás establecer todos los parámetros de tu identidad visual, que tienes, a tu disposición para modificarlo, con apenas unos clics en toda la web.

El sistema de diseño supone una transformación integral en la forma de trabajar con Elementor.

Esto, aunque pueda parecerte de poca relevancia, supone un cambio completo en el paradigma de trabajo con Elementor y constituye una de las bases sobre las que se sustenta el crecimiento exponencial de la empresa y del plugin.

Numerosos profesionales y agencias fundamentan su modelo de negocio en la escalabilidad de esta herramienta y en su capacidad de sacar adelante proyectos grandes y complejos en un periodo de tiempo realmente breve.

Cómo Flexbox Containers transforma el diseño web con Elementor

Los contenedores flex se presentaron en la versión 3.6 en marzo de 2022 en estado alpha, y desde entonces han generado muchísimo debate.

Estaban destinados a sustituir la estructura original de Elementor del modelo sección-columnas-elementos, que resultaba muy sencillo de usar pero también tenía limitaciones considerables.

En realidad, el flexbox ya se había integrado de forma muy restringida para poder ordenar, de manera muy básica, la vista de los widgets en las columnas, allá por 2019. Pero esto es algo muy diferente; era una implementación completa del sistema de flexbox CSS al editor de Elementor.

Para evitar los errores cometidos en 2020 con los ajustes globales de la versión 3.0, Elementor ha ido liberando los contenedores por fases. La primera como experimento alpha para que la comunidad pudiera ir probándolos.

Ocho meses después, el estado pasó de alpha a beta, donde se recogieron todas las mejoras de la comunidad y se empezó a recomendar su uso en sitios nuevos, vigilando el comportamiento de los widgets o addons de terceros.

En febrero de 2023 se elevó a Release Candidate y finalmente, tras dos años de intensas pruebas (si incluimos la fase previa a la introducción), en septiembre de 2023, en la versión 3.16, se promovió a versión estable y activada por defecto para sitios nuevos.

Elementor había aprendido la lección. Por un lado, atender a la fuerte demanda de nuevas funcionalidades y por otro, aunque también responsabilidad de terceros desarrolladores, a no romper las webs previamente creadas.

Con flexbox, Elementor mata a dos pájaros de un tiro. Incorpora últimas tecnologías flexbox modernas y reduce drásticamente el DOM.

Pero, ¿cuál es la verdadera ventaja de flexbox? Flexbox permite acomodar vertical u horizontalmente de manera muy flexible y potente los distintos elementos dentro de un contenedor, que además refluyen de manera fluida y estética en tabletas y móviles.

Todo esto sin tener que estar con pruebas y error, metiendo valores personalizados de rellenos y márgenes a izquierda y derecha, arriba y abajo hasta que, más o menos, queda como el cliente o el diseño reclama.

O peor aún, metiendo secciones interiores. Más divs y más elementos al DOM. Es decir, cero pixel perfecto o como diría alguno, ñapas as a service 😡

De esta manera, con flexbox, Elementor mata a dos pájaros de un tiro. Por un lado, incorpora últimas tecnologías flexbox modernas reclamadas por su comunidad y por otro, reduce drásticamente el DOM de la web, reduciendo entre un 25-40% los elementos en el mismo.

Te dejo un video que te puede ayudar a entenderlo mejor

Si todavía no lo estás usando, también te dejo una herramienta, el playground de Elementor, que te permite practicar con los contenedores sin tener que instalar nada.

Grid Containers

El Grid Container es una herramienta muy útil y muy fácil de usar, incluso más que el contenedor flexbox.

Desde la versión de Elementor 3.13 se empieza a soportar los contenedores grid. Permite rejillas avanzadas basadas en CSS Grid, aunque de manera todavía algo limitada. A cambio, está ya como funcionalidad estable y en algún momento evolucionará a una versión completa.

De todas formas, es una herramienta muy útil, muy fácil de usar, incluso más que el contendor flexbox. En la rejilla de ejemplo que he creado arriba, se ve un grid de 3 columnas y 2 filas, en los que he intercalado imágenes y textos.

En el último, en vez de arrastrar un widget individual, he arrastrado un contenedor flexbox, y dentro, he introducido un widget de texto y un CTA.

He tardado menos de un minuto en crearlo y he combinado tanto CSS Grid como Flexbox. ¿No te lo había contado? Pues eso, las dos tecnologías son complementarias y trabajan perfectamente juntas.

Gutenberg también presentó una alfa de esta funcionalidad y tuve la oportunidad de verlo en la WordCamp Porto de 2024. Tengo curiosidad de ver quién la tendrá completa disponible antes.

Te dejo un video para que veas más en detalle la funcionalidad de grid en Elementor:

Nuevos sistemas de pestañas y acordeón de Elementor

En la versión 3.14 de Elementor hay un nuevo widget de pestañas. Gracias también a flexbox, puedes crear un sistema mucho más moderno de pestañas, donde cada una de estas puede a su vez contener widgets anidados para mejorar el contenido de los mismos.

Cada pestaña puede contener distintos widgets. Además, en modo móvil puedes convertir las pestañas en acordeón con un solo checkbox, formato mucho más adecuado para vertical.

Mira este video para más información:

También, los anteriores widgets de toogle/acordeón se ha reemplazado ahora con soporte de elementos anidados y se han fusionado en un nuevo widget de acordeón desde la versión de Elementor 3.15, donde la funcionalidad distinta de los dos widgets, tanto de mantener una sección abierta o varias, son ahora ajustes del mismo widget, cosa que tiene mucho más sentido.

Aquí otro video oficial para que veas los nuevos acordeones en acción

Modo de Próximamente (HTTP200) y Mantenimiento (HTTP503)

El Modo de Próximamente/Mantenimiento te permite mantener cerrada tu web y mostrar diseños personalizados mientras terminas la web o haces trabajos de mantenimiento en tus sitios o cuando hay algún problema técnico o errores.

Además de enviar el código de estado correspondiente para informar a los buscadores, puedes usar diseños, lo más sencillos o complicados que quieras, añadir un formulario para recoger datos para un newsletter o redirigir a otros sitios o redes sociales.

Todo lo que añade la versión de Elementor Pro

Después de ver la cantidad ingente de cosas que se pueden hacer con la versión gratuita a uno le queda la sensación que no se puede hacer mucho más. Pero todo lo contrario. La versión Pro, para empezar, añade más de 85 widgets modernos para cualquier propósito imaginable.

La versión Pro va sobre contenido dinámico, marketing e integraciones, opciones avanzadas de personalización, comercio electrónico, animaciones, trabajo en equipo y mucho más.

Theme Builder de Elementor: controla todo tu diseño desde un solo lugar

Tal como se observa más arriba, el theme builder es un panel unificado que ofrece acceso directo a la creación de tu tema de WordPress y de todas sus plantillas dinámicas. Sin entrar en excesivos tecnicismos, WordPress emplea plantillas dinámicas que se activan desde el tema.

Dichas plantillas dinámicas permiten gestionar el diseño de las diferentes zonas del sitio, como las cabeceras, los pies de página, el archivo de entradas, la entrada individual, el 404, etc.

Es aquí donde entra en juego la magia de Elementor Pro con los datos dinámicos. Puedes crear la plantilla de una entrada de tu blog y lograr que todas las entradas compartan el mismo diseño, o que una categoría tenga un diseño y otra categoría tenga otro distinto.

Lo mismo sucede con las páginas y los archivos. Los archivos son la manera en que la web muestra, mediante bucles o loops, los listados de las entradas, o los productos de una tienda o de una categoría.

Desde este panel del maquetador de temas, puedes generar tantas plantillas como requiera tu web. Otro ejemplo: puedes querer una cabecera y un pie de página para la home más grandes y completos, y para el resto de las páginas algo más sobrio.

Sin ningún problema. Diseñas las diferentes cabeceras y pies y, con Display conditions, indicas a cada cabecera y a cada pie dónde deben mostrarse.

Y todo ello sin incorporar ningún código PHP complejo en el tema. Sin añadir ni una sola línea de CSS. Solo arrastrando a tu plantilla los widgets dinámicos que traerán desde la base de datos toda la información solicitada y mostrarán la web a tus visitantes con las tipografías, los espaciados y los colores que hayas diseñado con el editor visual.

Loop Builder y Loop Carrousel, una revolución dentro de otra

Una de las herramientas que los contenedores flexbox han aportado a nuestro editor preferido son el loop builder y el loop carrousel. Antes de esto, contábamos con un widget de archivo muy limitado para construir nuestras plantillas.

O el widget Posts si queríamos emplear en alguna página determinados contenidos destacados como entradas recientes, una categoría concreta y cosas por el estilo. Había dos o tres skins preconfiguradas y escasa personalización adicional.

No obstante, el loop builder nos permite crear, mediante las etiquetas dinámicas, contenidos personalizados con las plantillas individuales denominadas loop item, y después personalizar absolutamente todo. Igualmente, podemos insertar de forma aleatoria contenido estático en el loop para destacar información adicional, anuncios o elementos visuales decorativos.

Lo mismo sucede con el loop carrousel. La única diferencia es que el carrousel posibilita la navegación horizontal por el contenido, muy de moda en la actualidad y muy útil para reducir el scroll vertical en el móvil.

Estos dos widgets, por sí solos, evitan plugins de terceros, como Ele Custom Skin o JetEngine, en un alto porcentaje de casos, incluso cuando necesitas inyectar contenido alternativo entre los elementos de tu loop.

Filtros de taxonomía o cómo mejorar la UX en tu web

Los relativamente filtros de taxonomía nos permiten filtrar nuestros contenidos mostrados en los loops. Se pueden añadir varios filtros a la vez para filtrados avanzados con selección múltiple y lógica booleana de AND y OR.

Es perfecto para

• filtrar contenidos en el blog
• custom post types
• Búsqueda y filtrado de productos en WooCommerce

También evita plugins adicionales de filtrado avanzado como JetSmartFilters en la mayoría de casos de uso.

Nuevo widget de búsquedas con entrega de resultados en tiempo real a través de Ajax

Una de las soluciones peor resueltas en WordPress es el buscador nativo del CMS. Y el widget original de búsqueda solo mostraba los resultados de WordPress, es decir, resultados pobres. Para mejorar esos resultados estabas obligado a instalar un buscador externo.

Pero ahora, con el nuevo buscador Ajax, esto ya no es necesario y además el bucle de resultados viene incorporado en el propio widget.

Como siempre, 100% personalizable con los elementos de tu sistema de diseño. Tengo ganas de compararlo con el plugin de búsqueda JetSearch, aunque como seguramente sabéis, el terreno de las búsquedas es un mundo en sí mismo en WP.

Nested Carousel otra virguería de Elementor

El nested carousel permite anidar contenidos avanzados en cada elemento del carrusel, incluido contenido dinámico, del mismo modo que ya hemos visto en los nuevos acordeón y pestañas anidadas.

A su vez, estos dos pueden, con la versión Pro de Elementor, incluir contenido dinámico anidado. Un quinteto de widgets, si sumamos al grupo el de Mega menú para contenidos anidados y el Off-Canvas widget, ambos muy bienvenidos.

Mega menú de Elementor

El mega menú ha sido otra de esas características tan demandadas por la comunidad. Con este widget puedes crear menús totalmente personalizados, gracias de nuevo a flexbox. Sí. Flexbox nos está dando últimamente muchas novedades y alegrías a los usuarios de Elementor y con cada una de estas funcionalidades nos ahorra o un tema dedicado (normalmente de pago), o un plugin.

Gracias a las posibilidades de flexbox, podemos crear mega menús totalmente personalizados y enriquecidos, ideales para blogs de viajes o comercios electrónicos, sin necesidad de funciones adicionales. Además, en una de las últimas revisiones de accesibilidad, se ha hecho totalmente accesible su contenido para los lectores de contenido.

Global Widgets o como reutilizar widgets en varios sitios

Los Global Widgets te permiten reutilizar los mismos widgets en múltiples páginas y actualizarlos desde un único lugar, asegurando la consistencia del diseño en todo el sitio. Ideal para elementos repetitivos como botones de CTA, banners y formularios de contacto.

Para convertir un widget configurado en global basta con pulsar con la tecla derecha sobre el icono rosa del lápiz del widget en el editor y seleccionar la opción correspondiente.

Animaciones e interacciones a tutiplén en Elementor

Hablando de superpoderes, aunque Elementor free incluye ya algunas animaciones básicas en la pestaña avanzada dentro de la sección de transformación, la versión de Elementor Pro añade otra tanda importante de ellas en la misma pestaña dentro de la sección de efectos de movimiento. Vamos a ver las más importantes.

• Efectos de scroll: Puedes añadir a cualquier elemento de tus widgets scroll vertical, horizontal, transparencia, efecto blur o borroso, de rotación y de escala, y además combinarlos.
• Efectos de ratón: En cuanto a animaciones de seguimiento de ratón, estás me gustan bastante, puedes hacer que la persona interactúe con el objeto en el sentido directo o inverso del ratón o con inclinación 3d, e incluso, combinar ambas. Bien usado puede hacer que el usuario interactúe con tu web más tiempo y tenga más empatía; mal usado, pues ya te imaginas, ¿no?
• Animación de entrada: En cuanto a animaciones de entrada en Elementor, te permite que el elemento seleccionado entre con fade in, zoom in, slide in, rotando, cualquiera de ellos, ya sea central o desde cualquiera de los laterales.

Si ninguno de ellos te convence, puedes recurrir a cualquiera de los buscadores de atención mostrados en el gif inferior.

Estas animaciones las puedes aplicar a nivel widget y/o a nivel de contenedor y subcontenedor y puedes además activarlas con retraso añadiendo una cadencia interesante que atraiga y a la vez despierte interés en el navegante.

Reglas muy básicas de la animación son:

• Evitar combinar demasiados efectos y procurar que todo resulte sutil y mantenga una cadencia armónica.
• En dispositivos móviles las animaciones son más delicadas y exigen una atención adicional.
• Asimismo, si quieres elevar esto a otro nivel, el propio elemento puede contar con animación en sí mismo, como un lottie o un svg animado.

En lo que respecta a la combinación, las posibilidades resultan infinitas, y mezclar animación tradicional y animación digital junto con la interactividad del ratón puede dar buenos resultados o incluso cierto aire vintage de flash, para bien o para mal.

Para consultar tutoriales y documentación, echa un vistazo al help center y a la Academy, ambos con recursos muy valiosos para aprender todos los consejos para lograr buenas animaciones.

Aquí tienes una librería de tutoriales de animación avanzada que puede resultarte de gran ayuda. Por cierto, para este listado de tutoriales se creó un widget interno para la playlist de videos y ahora también puedes emplearlo en tu Elementor 🙂

Contenido dinámico en Elementor Pro

Como has podido comprobar, muchas de las funcionalidades de Elementor Pro se generan para el contenido dinámico, lo que nos permite diseñar una vez y reutilizar ese diseño en tantas entradas, categorías, etiquetas o productos tengamos. También me permite hacerlo con los archivos o loops.

Mediante las etiquetas dinámicas puedes personalizar muchos de los widgets de Elementor Pro, más de 25, para plantillas de;

• Post,
• Page,
• Archive,
• Single,
• Archive,
• Search
• Producto,
• 404

Cada widget funciona con soporte para una determinada cantidad de etiquetas que aparecen disponibles al escribir las primeras letras en el campo.

Lo que todavía no hemos visto es que todo esto se extiende a la creación de contenido personalizado. El contenido personalizado en WordPress se crea mediante CPTs y campos personalizados.

Estos Custom Post Types y custom fields te permiten crear cosas como fichas de libros, de autores, eventos, viajes, fichas de coches, de especialistas, masajistas, profesores, viviendas, abogados o lo que se te ocurra o necesite un proyecto avanzado.

Elementor se integra a la perfección con los plugins que permiten crear estos CPTs y custom fields y después puedes realizar diseños avanzados y mostrarlos en el frente de tu web en distintos formatos, como listas, calendarios, rejillas personalizadas (loop builder) o incluso mapas con información geolocalizada.

Los plugins más conocidos son Metabox, Pods, Toolset o el archiconocido ACF. También puedes encontrar nuestro super mega post con todas las posibilidades y características de JetEngine. ¡No te lo pierdas!

Experimentos y nuevas características

Te explico qué es y cómo te afecta el tema de los experimentos y las nuevas características.

Los experimentos son toda novedad que se presenta a partir de Elementor 3.1. Estas novedades están disponibles para todos los usuarios y pueden activarse y desactivarse. Los estados de estos experimentos son:

• Alfa: prueba la funcionalidad en sitios de prueba, no se recomienda en sitios de producción
• Beta: la funcionalidad se considera estable y puedes usarla con cierta tranquilidad en sitios nuevos, pero verificando antes que los addons de terceros que quieras usar son compatibles.
• Release candidate: se han realizado más pruebas y esa versión es la candidata a ser una nueva característica estable
• Característica estable: sale del listado de experimentos en curso y se añade al listado de nuevas características donde seguirás teniendo la opción de activarlo o no en función de tus necesidades o proyectos viejos en los que prefieres mantener la retrocompatibilidad para que todo siga funcionando.

Todo esto se controla desde «Elementor > Ajustes > Características» donde encontrarás las dos listas, experimentos y características, con cada experimento, activado o desactivado (el semaforito verde significa activado), y en negrita el estado (alfa, beta, etc.)

Roadmap de Elementor

Desde hace un par de años, y tras una presión importante de la comunidad, Elementor decide hacer público el roadmap de sus productos, y podemos adivinar a principios de cada año cuáles serán las grandes líneas de trabajo.

Asimismo, hay presentaciones trimestrales con las novedades más inmediatas por salir. Aunque Elementor estruja al máximo estos eventos para hacer su marketing y esto cabrea bastante a la gente que los sigue, la verdad es que para los que estamos interesados en este producto, nos permite ver, o al menos vislumbrar, cuáles serán las novedades antes de que salgan las betas del trimestre.

A día de hoy se esperan mejoras en contenido dinámico, sin estar muy elaboradas. También se esperan mejoras en el formulario, que por cierto ya ha recibido varios ciclos de actualización, incluyendo los formularios por pasos.

Tras las mejoras de display conditions a nivel de elementos, se espera como agua de mayo los tan esperados y solicitados formularios condicionales. También sería genial tener posibilidad de pagos incorporados, pero de momento me da que hay que tirar de forms y soluciones de terceros.

Otro de los anuncios (sin anuncio) está en la parte de animaciones e interacciones que lleva ya unos años sin mejoras reseñables. Parece que en algo están trabajando. Mi sueño sería un Animation builder dentro de Elementor, ¿se cumplirá?

Por último, anuncian mejoras en WooCommerce, pero tampoco hay nada anunciado específico, aunque sí hay mucha actividad en la comunidad de Elementor haciendo encuestas y entrevistas con usuarios.

Otro punto de mejora que está en el deber de Elementor, es terminar de añadir la funcionalidad completa de CSS Grid en los grid containers. Eso sería un salto definitivo de calidad a la hora de implementar diseños complejos en Elementor. Concretamente, añadir alturas y anchos personalizados en las rejillas.

Después de este repaso vamos a intentar aterrizar todo un poco, vamos primero con el tema precios y algunas recomendaciones.

Elementor ofrece cuatro planes de precios diseñados para diferentes necesidades. Por un lado, tienes una versión lite llamada Essential de una sola licencia. Después tienes una versión Advanced con 3 licencias, Expert con 25 y Agency con 1000 licencias que el día que estoy escribiendo son iguales.

¿Por qué hago esta aclaración? Hasta hace poco Essential también era una versión completa. Parece que ahora Elementor ha cambiado de idea y está haciendo un repackaging del plugin no solo con licencias escalonadas, sino con funcionalidades escalonadas.

No sé si esto es definitivo y se profundizará o darán marcha atrás. No sería la primera vez que han hecho lanzamientos nuevos como Agency y Studio para después reajustar el precio de Agency de 999 € a unos mucho más razonables 399 €. y suprimir Studio.

De todas formas, no sería de extrañar que en la medida que aumentan las funcionalidades y el mercado de Elementor, tenga para ellos más sentido una oferta más amplia de planes para cubrir más escenarios.

Dejo un artículo del help center donde puedes ver las diferencias entre la versión gratuita, Essential y el resto de paquetes si tienes dudas de cuál adquirir. Desde mi lado solo deciros que la diferencia entre Essential y el resto es sustancial y tienes que tener muy claro que no vas a necesitar ninguna de las funciones adicionales (que son muchas).

Elementor, o la revolución del page builder en WordPress

A lo largo de este artículo se ha repasado gran parte de las funcionalidades de Elementor Pro en sus versiones más recientes, que son muchísimas. Sin embargo, no parecía suficiente para abarcar lo que Álvaro Fontela pedía explicar: ¿por qué Elementor continúa siendo el mejor page builder del mercado?

Aunque es cierto que las funcionalidades contribuyen a comprender Elementor, hay aspectos que no se entienden únicamente con ellas.

En este sector resulta muy complicado crecer y diferenciarse, conservar el liderazgo y, aún peor, es muy sencillo fracasar por decisiones equivocadas o por no atender la demanda de los usuarios, y todavía más en entornos de comunidades como el open source o, más concretamente, WordPress.

Los cofundadores, Yoni y Ariel, CEO y CTO respectivamente, han sabido hacer crecer el producto y mantenerlo a lo largo del tiempo. Todo ello con un equipo que comenzó con apenas 4 o 5 personas y ahora alcanza casi las 400.

En lo que respecta a funcionalidades, tanto la versión gratuita como la de pago, que hemos revisado ampliamente, también superan todas las expectativas.

Una base sólida de widgets gratuitos que cubre con holgura las necesidades de diseño, un enorme nivel de personalización a nivel de widget, a nivel de contenedor, así como de página o de ajustes globales. También la capacidad de edición responsive, que además evoluciona con las nuevas versiones.

Tres revoluciones que convierten a Elementor en el editor total para WordPress

Se pueden identificar claramente al menos 3 grandes actualizaciones del producto que han supuesto cambios de magnitud también en la manera de entender y usar WordPress.

La primera gran actualización llega en abril de 2018, en la versión 2.0, con la incorporación de las plantillas dinámicas para los single post, los archivos o bucles de WordPress, cabecera y pie, páginas 404, etc.

Esta primera revolución cambia las reglas del juego y los usuarios de Elementor suben de categoría al poder hacer cosas hasta entonces vedadas a programadores en el terreno del tema.

Pero no se detiene ahí: poco después, en agosto de ese mismo año, en la versión 2.1, se añadió soporte para WooCommerce Builder y para CPTs y custom fields, con amplia compatibilidad con ACF, Pods, Toolset y JetEngine.

Si quieres comprender en toda su magnitud qué significan los contenidos dinámicos en WordPress y cómo te permiten ganar (mucho) más dinero como creador web, visita este post sobre CPTs, custom fields y taxonomías personalizadas.

El soporte completo a plantillas y contenidos dinámicos amplió enormemente las posibilidades de crear webs y páginas complejas sin habilidades avanzadas de programación, prácticamente no code, pero con resultados muy comparables a los obtenidos con código puro y duro.

La segunda gran revolución han sido los ajustes globales y el sistema de diseño de Elementor presentado en agosto de 2020. Pese a su mal comienzo, hoy está sólidamente asentado y funciona a las mil maravillas. El flujo de trabajo es perfecto y permite acelerar muchísimo los tiempos de desarrollo.

Ya no se hacen aproximaciones a un diseño estático de Photoshop. Ahora se traslada el sistema de diseño desde Figma y se va maquetando paso a paso cada sección para diseños pixel perfect, ¿no?

Hmm, como ya vimos, el modelo «Sección>Columnas>Elementos» empezaba a mostrar sus carencias con composiciones complejas. Además, las webs se volvían más pesadas y la percepción de la gente no era la mejor en cuanto a WPO.

Por fortuna, la tercera gran actualización de los contenedores flexbox no tardaría en llegar y en marzo de 2022 se presentó dentro del editor en estado alpha.

El gran problema era cómo evitar que volviera a ocurrir lo de 2020 más allá de los experimentos.

Así que nos armamos de paciencia para que todo estuviera bien cocinado, y hubo que esperar a septiembre de 2023 para que todo estuviera en su punto justo y se activaran por defecto los contenedores en sitios nuevos; a partir de ahí se liberaron una gran cantidad de novedades que dependían de ellos.

Ha incorporado funcionalidades muy solicitadas por la comunidad, haciendo más ligero el producto y permitiendo además activar y desactivar características de forma personalizada.

Así surgieron los loop builders, los loop carousel, las pestañas, acordeones, carruseles anidados y mega menús, que florecieron y llevaron el sistema de diseño a su máxima expresión visual y de eficiencia.

Elementor también ha aprendido a sortear crisis reputacionales, y además a salir fortalecido y con soluciones inteligentes como los experimentos, que permiten a los usuarios decidir a qué ritmo adoptar los cambios y mantener una retrocompatibilidad en la que WordPress es el rey.

Ha creado su propio maquetador de temas y, con cada nuevo widget o extensión, ha reducido la necesidad de plugins y addons extra hasta la mínima expresión.

Entretanto no han dejado de producirse otras funcionalidades y novedades. Para tiendas online, Elementor ha creado un gran builder para WooCommerce que puedes encontrar desarrollado en detalle en el enlace.

Además, Elementor es perfecto como herramienta de marketing para sitios propios y para la creación de landing profesionales y agencias grandes. Hay un post dedicado a todas las funcionalidades de marketing en Elementor que seguro que te resultará útil.

Elementor ha logrado lo que muy pocos: modernizar por completo su producto en cuanto a tecnologías, procesos de trabajo y aspecto, manteniéndose aún totalmente familiar para sus primeros usuarios.

Han revolucionado y optimizado el ciclo de releases cada seis semanas, logrando un promedio de 8 nuevas versiones cada año en los últimos tiempos.

Ha mejorado su documentación, sus contenidos, su soporte y su ecosistema de addons, y ha creado un sistema extremadamente robusto de bibliotecas y de Template kits.

También cuenta con un catálogo de planes acorde a perfiles de usuarios muy distintos, con costes acordes. Todos estos aspectos más meta los puedes leer en detalle en cómo sacarle el máximo provecho a Elementor.

Ha dado la vuelta a la performance de su editor con mejoras continuas en los últimos cuatro años hasta hacerlo realmente rápido, y tiene integraciones completas con los plugins más completos de SEO como Yoast y Rankmath.

Y mejora de forma continua la accesibilidad en todas sus funcionalidades.

No ha necesitado tener dos versiones, una vintage y otra nueva, ni volver locos a sus usuarios.

No ha abandonado un editor (y a sus usuarios) para lanzar otro producto totalmente nuevo.

No ha detenido durante más de dos años el desarrollo de su producto para sacar el mismo pero renovado.

Elementor también ha respetado el grandfathering con todos sus early adopters y nunca ha subido los precios a nadie, aun habiendo tomado medidas más o menos acertadas y más o menos controvertidas, incluso en escenarios inflacionarios como los actuales.

Ha renovado por completo la interfaz del editor, la ha hecho más accesible e integrado las funciones repartidas en la nueva top bar.

Se han sumado con gran agilidad a la revolución de la inteligencia artificial con una propuesta que no deja de mejorar y adaptarse a las necesidades y estilos de cada usuario.

Descubre más en la Evolución del editor de Elementor.

Mantienen un producto que responde perfectamente a las necesidades de un usuario para una pequeña web, incluso totalmente gratis, y han sabido escalarlo para responder a los desafíos de agencias de primer nivel internacionales.

También hay cosas que mejorar. En el debe todavía falta:

• continuar perfeccionando el código,
• impedir que los fallos se arraiguen,
• dar más respaldo a las comunidades de cada zona,
• seguir potenciando la comunicación con sus usuarios y con toda su comunidad.

El roadmap con anuncios cada trimestre constituye un avance positivo en esa dirección.

Lo cierto es que han trasladado las posibilidades de diseño y la eficiencia de su editor a terrenos que casi ningún usuario había concebido. Han incorporado herramientas colaborativas tan atractivas como «Notas». Ha hecho que sus usuarios crezcan a la par que el editor hasta crear flujos de trabajo sumamente potentes y disponer de un modelo de negocio rentable y escalable.

Todo esto lo ha conseguido duplicando en dos ocasiones en cuatro años su base de sitios activos, al pasar de 4 millones de sitios activos en 2020 (en el décimo puesto del ranking de los más populares) a más de 17 millones en 2024, siendo el plugin más popular y con más instalaciones activas, y desbancando a colosos como Jetpack, Yoast, WooCommerce o el muy valorado Contact Form 7.

Por tanto, apreciado Álvaro, estas son, en síntesis, las razones por las que Elementor es hoy el plugin más popular de WordPress y el mejor Page Builder del mercado. Y no únicamente eso, como diría una IA, cuenta con un presente espléndido y un futuro lleno de posibilidades.

Preguntas Frecuentes