Tutorial de Elementor: El mejor maquetador visual para WordPress

elementor

Por fin podemos decir sin temor a equivocarnos que la revolución de Elementor y otros maquetadores visuales ha llegado a WordPress para quedarse. Ya nadie los considera una moda o un recurso para aficionados sin conocimientos de HTML o CSS. Miles de diseñadores web lo usan a diario y, si conoces un poco las tripas de WordPress como la jerarquía de plantillas, su potencial es enorme.

En las próximas líneas voy a entrar en el detalle que sostiene esta afirmación y, por si no los conoces, describiré los argumentos principales que hacen de Elementor una de las apuestas más sólidas en cuanto a la creación de webs avanzadas con WordPress.

Qué es Elementor y cuáles son sus características

Elementor es un plugin, una extensión de WordPress, que nació como una colección de módulos llamados «Elementos». Qué coincidencia, ¿verdad? Estos pueden añadirse a cualquier tipo de contenido: páginas, entradas o CPTs (Custom Post Types o tipos de contenido personalizado).

Los elementos se despliegan sobre «Secciones», que funcionan a modo de cajas, y pueden ser tan sencillos como bloques de texto, imágenes, vídeos o botones. Pero también puedes encontrar módulos avanzados como mapas, rejillas de entradas, sliders (marquesinas), tablas de precios, testimonios, acordeones, pestañas, contadores… Más de 80 elementos distintos si tienes en cuenta todas las opciones premium.

¿He dicho premium? Sí, lo has dicho. Elementor es un plugin gratuito disponible en el repositorio oficial de WordPress, pero también existe una versión Pro, de pago, que es la responsable de gran parte de su magia y su principal razón del éxito.

Aunque la versión gratis de Elementor ya es bastante interesante de por sí y puede ser suficiente para proyectos modestos, la gente que comercializa la versión Pro ha hecho un magnífico trabajo para ponerte los dientes largos.

Los menús del plugin del repositorio están trufados de previsualizaciones de los elementos y funcionalidades premium para recordarte que están a tu alcance si pasas por caja. En mi opinión incluso hasta de una forma excesiva, convirtiendo en farragosa la navegación entre tantas opciones.

Desde luego, si de algo puede presumir Elementor es de que sus muchos usuarios parecen estar muy satisfechos de su rendimiento. No hay más que mirar las valoraciones que tiene en el repositorio oficial de WordPress. Un lustroso 5 sobre 5 estrellas.

Elementor repositorio WordPress

Desde el momento en que empiezas a usar Elementor, descubres que en realidad es mucho más que una colección de módulos. Si solo fuera eso, Gutenberg estaría mucho más cerca de recortarle distancias.

Lo que Elementor (en su versión Pro) representa actualmente, en esencia, es un potente constructor web que permite definir muy eficazmente todas las propiedades visuales de cada elemento. Y lo que aún es más importante, no solo en la región del contenido (the_content) sino en todo el espacio visible: la cabecera, el pie de la web, las plantillas de entradas, de blog, archivos o páginas especiales como la de Error 404.

Se trata, por tanto de un maquetador integral de sitios web.

Elementor gratis

Personalmente, te recomiendo empezar con la versión del repositorio oficial. Te servirá para hacerte con la herramienta y familiarizarte con el flujo de trabajo. Con unas pocas horas de vuelo, comprobarás que es bastante asequible y que la curva de aprendizaje es perfectamente tolerable.

Tendrás a tu disposición casi 50 bloques de todo tipo (algunos son en realidad los widgets nativos de WordPress), animaciones de entrada y fondos con colores sólidos, degradados configurables, pases de diapositivas e incluso vídeos.

El editor te permitirá escoger la visibilidad y estilos de cada sección y elemento por el tipo de dispositivo y tendrás a tiro de botón la previsualización de móvil, tablet y escritorio para hacerte una idea muy exacta de cómo verán tu sitio todos los visitantes.

Esta versión gratuita trabaja en combinación con el tema que estés usando. Se adaptará a él y te ofrecerá la posibilidad de cederle el control de algunos de los estilos básicos del sitio como los colores por defecto y fuentes tipográficas.

elementor website

En este punto podría evaluar qué ventajas ofrece Elementor frente a Gutenberg, el editor de bloques nativo de WordPress.

La principal podría ser que disfruta de una mucho mejor y más completa gestión de los estilos de los bloques y, particularmente, de las secciones. En concreto aspectos como el tamaño, alineaciones, bordes, sombras, colores o tipografías de elementos y secciones son una delicia de configurar y su comportamiento es muy predecible.

Para rematar la faena, puedes definir los ajustes de los puntos de ruptura de las media queries (la medida exacta de pantalla donde cambia la versión de escritorio a tablet y móvil).

Algo por lo que Elementor es muy conocido es porque trabaja con la posibilidad de guardar bloques de elementos (combinaciones) y diseños de página completos en una biblioteca. Desde ahí podrás reutilizarlos más tarde en otras páginas o incluso otros sitios.

Además de tus diseños, dispones de un interesante biblioteca pública que puede ahorrarte mucho trabajo o inspirarte como punto de partida. La biblioteca ofrece algunos bloques y diseños gratuitos y otros solo disponibles para los usuarios de la versión Pro con número de licencia.

plantillas elementor

Pero es que estilos y diseños a parte, hay mucho más que valorar. Elementor trae de serie algunas funcionalidades y herramientas sorprendentes.

Una de ellas es el reemplazo de URLs. Si has hecho una migración web alguna vez, cambio de dominio incluido, habrás sufrido el problema de la sustitución de URLs que no responden a un Search and Replace en la base de datos. Esto se suele dar con configuraciones de módulos que por algún motivo se quedan con la URL original y suele requerir una corrección manual. Elementor viene con una herramienta propia que te ayudará a resolver esta cuestión con aquellas URLs que se resistan.

Existe otra configuración que personalmente también me resulta atractiva a mí, que trabajo para clientes. Esta es una que permite definir qué roles de usuario tendrán acceso a las herramientas de Elementor. Estoy es muy interesante para que nadie pueda modificar diseños o estropearlos involuntariamente al trastear por el sitio web.

El plugin también ofrece un más que interesante modo de mantenimiento donde usando el gestor de plantillas podrás crear tu propia página de «Próximamente» (que entrega un código HTTP 200 que permite la indexación por buscadores) o de «Mantenimiento» (código HTTP 503, que invita al robot de indexación a volver más tarde). Como ves, un plugin más que te ahorras y un SEO que mimas.

Lo mejor de todos estos extras y características frente al editor de bloques, Gutenberg, e incluso otras colecciones de bloque tan de moda como Atomic Blocks o Kadence Blocks, es que la interfaz y las opciones mantienen una gran unidad de estilos y configuraciones. La usabilidad es completa y no necesitas aprender nada nuevo. Todo funciona tal y como esperas.

Elementor Pro, el constructor de temas

En cuanto empieces a sentirte cómodo con las funcionalidades de Elementor, el cuerpo te va a pedir rock&roll y terminarás picando con la versión Pro, porque sus ventajas son notables.

Además de lo obvio, unos 40 módulos extra con elementos avanzados y algunos específicos para WooCommerce (¡wow!, luego entraré en esto), Elemento Pro ofrece unas serie de ventajas que harán que el tema que tengas instalado sea prácticamente irrelevante.

Desde la versión 2.0, Elementor toma el control de todo el frontend para permitirte crear tus propias plantillas completas para entradas, páginas, CPTs y archivos. Esto no solo es una gran ventaja a nivel de diseño sino a nivel de conservación racional del contenido de tu sitio.

Al utilizar el propio sistema de plantillas de WordPress y los elementos de tipo dinámico (título, descripción, meta, contenido, comentarios, etc.) podrás desactivar el plugin y el contenido seguirá manteniéndose limpio y disponible para el tema que tengas activo. Nada de shortcodes o códigos raros mezclados con el texto. En la comparativa con Visual Composer, más bajo, te mostraré cómo queda una página creada con Elementor una vez que lo desactivas. Te va a sorprender por su limpieza.

Elementor Pro se entiende muy bien con ACF (Advanced Custom Fields), como verás más adelante, con lo que las posibilidades de gestión del contenido se multiplican de una forma brutal. Proyectos con tipos de contenido personalizado que incorporan también campos personalizados son una delicia de maquetar.

Además, ahora sí, podrás editar la cabecera y pie de tu web con total libertad. Incluso de forma condicional, mostrando distintos elementos o diseños en función de en qué página del sitio se encuentre el visitante.

Otra funcionalidad destacada es la del creador de popups, mensajes flotantes para tu sitio. Al crearlos con los elementos y estilos propios de Elementor, las posibilidades son enormes: formularios de suscripción, CTAs, avisos, productos a la venta destacados, ventas cruzadas, etc.

Entre los elementos de nivel Pro también dispones del widget de formularios, muy potente y configurable, así que otro plugin que te ahorras. Y ya van unos cuantos, ¿verdad?

Si para la versión gratuita hablaba de la importancia de elegir un tema que se adapte correctamente, en la caso del Pro debo decir que nunca fue menos útil gastarte el dinero en un tema premium.

Elementor Pro prácticamente anula tu tema actual para darte la posibilidad de construir uno nuevo a medida y por encima. De hecho, el propio equipo de Elementor a publicado un tema gratuito en el repositorio oficial que se llama Hello Elementor y que prácticamente recuerda a un Underscores a pelo.

Sus principales características son que a nivel de rendimiento y velocidad vuela y que trata de ofrecer la máxima compatibilidad con los plugins más usados: WooCommerce, ACF, WPML, Yoast SEO, Wordfence… Por lo demás, no esperes ninguna virguería en el personalizador de la apariencia de Hello. Creo que es el tema que lleva menos opciones de configuración de todos los que he visto en mis 14 años con WordPress.

Y es que precisamente toda la parte visual deberá ser diseñada con las plantillas de Elementor Pro. Así que la idea que deberás tener en tu cabeza es que el tema «moleste» lo menos posible.

elementos

Elementor para PrestaShop

Prestashop nunca se ha caracterizado por su ecosistema de constructores visuales precisamente por lo que, cuando se empezó a oír hablar de Elementor en Prestashop, muchas personas se animaron a ver qué había de cierto en ello.

Lo primero que hay que decir es que Elementor, como tal, solo funciona en WordPress. Lo que existe para Prestashop es un software derivado de Elementor (gracias a su licencia GPL) que se ha adaptado para dos productos:

Si llegas a estos productos desde WordPress, echarás en falta varios elementos y funcionalidades que no han podido ser portados con éxito.

Las ventajas que sí incorporan son, por supuesto, la interfaz drag&drop para añadir elementos, el diseño de páginas en modo live (como si editaras en el frontend) y algunas bibliotecas de diseños predefinidos para hacer despliegues más rápidos.

Como ves, no está mal (y más teniendo en cuenta lo que hay en PrestaShop en este ámbito), pero se queda lejos de lo que podrías conseguir a nivel de diseño con WordPress, Elementor y WooCommerce, por ejemplo.

Por supuesto, en ese caso tendrías que prescindir de lo que PrestaShop puede aportarte.

creative elements

Compatibilidad de Elementor con temas de WordPress

Como he comentado anteriormente, Elementor es compatible con la mayoría de temas de WordPress. No obstante, al tratarse de un plugin que afecta tan profundamente al sistema, hay que tener en cuenta muchos aspectos para que la integración sea perfecta.

Por eso es bastante clave escoger un tema que se lleve bien con Elementor siguiendo las indicaciones del equipo de desarrollo. Que tu tema no aparezca en esa lista no quiere decir que no sea compatible, pero tampoco podrías asegurarlo. En cualquier caso lo ideal es usar algún tema ligero y que tenga cierto control de cabecera y pie, donde no llega tu constructor visual.

GeneratePress ha sido desde siempre uno de los temas más recomendados para Elementor. De hecho, a mí es uno de los que más me satisfacen de forma global por su velocidad y calidad. Y como cumple con los requisitos que comentaba anteriormente, creo que representa una opción razonablemente segura.

Si ya estás empezando con la versión Pro de Elementor, no le des más vueltas e instala Hello Elementor desde el repositorio oficial.

Hello elementor theme

Comparando Elementor con otros maquetadores visuales

El panorama de los constructores visuales ha sufrido una explosión enorme, aunque está dominado principalmente por los dos siguientes que voy a comparar con Elementor.

Debes tener en cuenta que muchas diferencias tienen más que ver con la facilidad de uso o la estrategia de diseño que con la potencia de funcionalidades. Todos ellos son grandes plugins aptos para un proyecto de alto nivel.

Elementor vs Visual Composer

Para comparar a estos dos titanes podría definir un subnivel más para ser justo. Pero ojo, que vienen curvas y las sutiles diferencias en los nombres te pueden llevar a confusión. Por una parte tienes Elementor, Visual Composer Free y WPBakery. Por otra, tienes Elementor Pro y Visual Composer Premium.

Los tres primeros son maquetadores del contenido, no del sitio completo. WPBakery es un subproducto de Visual Composer Premium orientado a maquetar los contenidos pero que no tiene acceso al diseño del logo, del menú principal o el pie de la web, por ejemplo.

La versión gratuita de Visual Composer, por su parte, tiene limitadas las mismas funcionalidades que echarás de menos en WPBakery, así que está en una situación técnica parecida. No en vano es habitual que haya gente que confunda WPBakery con Visual Composer. Incluso en la FAQ de la web de ambos han tenido que aclararlo.

A favor de Elementor y Visual Composer Free hay un argumento claro, ambos son gratis. Frente a esto, WPBakery cuesta 45$ actualmente. Eso sí, con una licencia lifetime de un único pago.

Elementor está más limitado en cuanto a módulos pero, a cambio, ofrece acceso a parte de su galería de plantillas y bloques. Para Visual Composer solo están disponibles con la opción de pago. WPBakery cuenta, como es natural, con muchos más módulos avanzados y las posibilidades son mayores. De hecho es uno de los constructores visuales más habituales en los temas comercializados en Themeforest, el principal market premium de temas.

En este trío la balanza se mueve en función de tu presupuesto, la variedad de módulos y la disponibilidad de plantillas. En todos los casos dependerás de un buen tema para rematar el diseño global del sitio.

Por otro lado, tenemos a Elementor Pro y Visual Composer Premium, los buques insignia de ambas alternativas.

Los dos permiten afectar a todo el sitio web, sin restricciones de ningún tipo. Incluso a nivel de licencias coinciden en el planteamiento: permiso para su activación en 1, 3 o 1000 sitios y frecuencia de renovación anual (no hay licencia lifetime para desarrolladores, mal que te pese).

Respecto a precio, Elementor se mantiene por debajo. Unos 10$ de diferencia para la licencia más simple, pero nada más y nada menos que 150$ más barato para la más completa. Un buen pellizco para un diseñador freelance, sin duda.

Ojo, que la renovación anual de Visual Composer tiene un 40% de descuento por lo que deberías hacer una proyección a futuro para tomar una decisión si esta se basa únicamente en el aspecto económico.

En cuanto a variedad de elementos, widgets, módulos o como quieras llamarlos, Visual Composer se lleva la palma, con más de 200. Será difícil que necesites algo que no esté disponible (salvo que sea un módulo de formularios, ¡ups!).

En cualquier caso, tanto Elementor como Visual Composer disfrutan de un enorme catálogo de extensiones desarrolladas por terceras empresas. Si algo no lo encuentras de serie, seguro que otro lo ha desarrollado y puesto a la venta. En el repositorio oficial encontrarás algunas joyas, pero para lo más goloso casi siempre tendrás que recurrir al mercado premium.

En mi opinión, las dos opciones son muy potentes y no sabría decir cuan cuál quedarme por funcionalidades.

Creo que Elementor ofrece una interfaz de maquetación algo más usable, pero también más fea. También me parece que el backend de Elementor carga algo más ligero, pero es difícil medir esta diferencia.

Visual Composer en cambio cuenta con una documentación oficial más extensa, pero tiene una comunidad en español mucho menos numerosa (hay que destacar el crecimiento de las meetups de Elementor por todo el mundo).

Para acabar, ambos han enfocado su funcionamiento en tratar de ser lo más limpios posible con WordPress. Visual Composer cambió su antigua estrategia de uso de shortcodes y puedes considerar que, en cuanto a efecto lock-in, no deberías encontrar demasiadas diferencias entre ambos plugins.

En este ejemplo puedes comprobar cómo se muestran dos páginas iguales creadas con ambos constructores, una vez que desactives el plugin:

comparativa de Elementor

Como puedes ver en la captura, el resultado visual tras desactivar el plugin es muy aceptable en ambos casos. Texto limpio con el mismo contenido que el original y un botón que se convierte en enlace.

Visual Composer es particularmente resultón en la forma en que mantiene el botón pero, a cambio, deja muchísimos <divs> en el código HTML de la página.

Elementor deja un código sorprendentemente limpio en un bloque del editor clásico dentro del editor de bloques de tu página.

 

Divi Builder vs Elementor Pro. ¿Cuál es mejor?

Esta es una de las batallas más míticas en los últimos tiempos. Llegó primero y, por eso seguramente, Divi es uno de los temas para WordPress más usados del mundo (aunque aquí hablaré del plugin, el builder). No hay avance de uno de estos dos super plugins que no trate de ser igualado y superado por el otro. Tanto es así que ambos cuentan con posibilidades muy parecidas actualmente y permiten modificar de forma integral el diseño del sitio web.

Los módulos de Divi son muy parecidos a los elementos de Elementor. Permiten editar plantillas del tema, páginas especiales, usar contenidos dinámicos, modificar cabecera y pies, editar las fichas de producto de WooCommerce con libertad… Además, los dos ofrecen una completa librería de plantillas.

Si piensas en la comunidad que los rodea, ambos cuentan con infinidad de extensiones, plantillas y extras de todo tipo. Por si esto fuera poco, los dos están trabajando intensamente en la creación de grupos de meetup por todo el mundo orientados a capacitar al máximo número posible de usuarios.

En algunos aspectos negativos también hay coincidencias. La documentación técnica avanzada es escasa y necesitan de cierto trabajo de optimización a nivel de WPO.

¿Entonces en qué se diferencian? Para mí, existen varios factores determinantes diferenciales.

A favor de Divi: Las licencias disponibles. Elegant Themes tiene un programa de licencias que no puede ser más simple, 89$ al año o 249$ en un pago único. Además, te llevas un par de plugins muy majos: Monarch y Bloom. No hay límite de sitios ni cosas raras. Hay descuentos frecuentes y es bastante fácil pillarlas más baratas. Las licencias de Elementor siempre hay que renovarlas y oscilan bastante en cuanto a lo que permiten cada una de ellas.

El soporte que acompaña a Divi (en inglés) es fantástico. Entre otras cosas, asesora en personalizaciones de CSS, algo que en muy pocos soportes he visto.

Algunas de las transformaciones 3D y los efectos de scroll que ofrece Divi para sus elementos y secciones son dos herramientas increíbles para conseguir diseños muy dinámicos y avanzados.

A favor de Elementor: Si algún día te cansas de Elementor y lo desactivas, tu contenido estará muy limpio, tal y como has visto antes. Mira ahora lo que hace Divi con una página igual y échate a llorar:

divi sin plugin

¿Ves todos esos shortcodes y código basura? Un horror al que no quieres enfrentarte, créeme.

Es cierto que normalmente estos constructores visuales solo deberías usarlos en principio en los contenidos estáticos como las páginas y, en el caso de un cambio de tema o de plugin de construcción, se suele rehacer todo el diseño de cero. Sin embargo si tanto Visual Composer como Elementor lo consiguen, ¿por qué deberías exigirle menos a Divi?

Por otra parte la traducción a español de Elementor es buena y la de Divi es absolutamente infame.

Desde un punto de vista más profesional, para diseñadores la interfaz de edición de Elementor parece algo más rápida de usar que la de Divi, siempre que estés diseñando en un monitor grande.

Para desarrolladores parece que Elementor es más respetuoso con los estándares de WordPress y más asequible al trabajar con los hooks de que dispone.

WPO de Elementor vs Visual Composer vs Divi

Si hablando de rendimiento te vas a los números, encontrarás bastantes diferencias entre estos 3 maquetadores visuales.

Para esta prueba he usado el mismo diseño de las capturas anteriores. Una sección con fondo de un color con transparencia, dividida en dos columnas. Un texto a la izquierda y un botón a la derecha. Muy simple.

pagina de elementor

 

La prueba se ha realizado sobre un Hosting Inicio SSD de Raiola Networks (como el que podéis usar cualquiera de vosotros para una web sencilla) teniendo instalado y activado únicamente el plugin de construcción.

Se han realizado 3 mediciones de cada caso (a veces hay pequeñas variaciones) y se ha tomado como referencia el resultado intermedio.

Ninguno de los plugins ha tenido ninguna configuración ni optimización extra. Activar, construir y pasarlo por el Google PageSpeed Insights para ver qué consejos de optimización entregaba.

Al analizar los datos, ten en cuenta que la puntuación destacada no hace referencia a lo «rápida» que sea la página sino más bien a lo optimizada que esté a un nivel genérico (se tienen en cuenta varios parámetros). En la captura de cada caso, podréis ver algunos datos sobre tiempos de carga.

Estos son los datos para la versión móvil:

comparativa movil

comparativa escritorio

Impresionantes los números de Visual Composer, ¿verdad? La web es casi un segundo más rápida en el tiempo hasta que está interactiva y medio segundo en el primer renderizado.

Esto no quiere decir que con ajustes no se puedan mejorar los datos de Elementor o Divi pero deja muy claro que, de serie, Visual Composer es mucho más rápido.

Personalmente, los resultados de Elementor y particularmente Divi en la versión móvil me parecen lamentables. Creo que deberían trabajar en mejorar ese aspecto.

Elementor con otros plugins

Elementor con WooCommerce

Las posibilidades de Elementor Pro con WooCommerce, el plugin de ecommerce más usado del mundo, son una de las mayores razones de su éxito. Y esto es así porque el constructor visual ha desglosado todos y cada uno de los elementos que componen las fichas de producto para que puedas diseñarlas a tu antojo con total libertad.

De hecho, esta capacidad era hasta hace no mucho una de las ventajas principales de que disfrutaba Elementor frente a su principal competidor, Divi. Desde hace algunas versiones esto también se ha igualado.

WooCommerce tiene el problema de que es muy reconocible y que apenas goza de posibilidades de configuración a nivel visual. Esto provoca que vista una tienda, vistas todas (dicho de una forma bruta), salvo que diseñes un tema a medida.

En todos los foros de los constructores visuales se repetía la pregunta de cómo diseñar libremente la ficha de producto y parece que en Elementor Pro tomaron buena nota. Se pusieron a trabajar a fondo para conseguir crear un paquete de elementos de WooCommerce que ha conseguido hacer de Elementor el constructor por excelencia para ecommerce.

Usando el sistema de plantillas del plugin, podrás definir qué plantilla quieres que se use para los productos y crear exactamente la tienda de tus sueños.

Considero importante aclarar que la versión gratuita del plugin, aunque es 100% compatible con WooCommerce, no ofrece ninguna ventaja particular sobre el mismo. Todas las opciones están en la versión Pro.

Elementor con ACF

ACF o Advanced Custom Fields es uno de mis plugins preferidos. Permite añadir campos personalizados a cualquier contenido de WordPress, lo que supone una forma estupenda de poder organizar la información.

Por ejemplo, imagina una web de un inmobiliaria donde cada propiedad que venden tiene una ficha (un custom post type) con la superficie, nº de habitaciones, localización, precio… Cada uno de estos elementos puede ser un campo personalizado que el redactor añade cómodamente de forma separada y ordenada. Estos campos pueden ser textos, URLs, fechas, números, correos, mapas… Es decir, formatos de entrada muy variados.

Uno de los inconvenientes clásicos de ACF es que si bien es bastante sencillo añadirlos al backend para que recoja esos datos, no es tan fácil mostrarlos como te gustaría en el frontend si no tienes algunos conocimientos de programación.

Con Elementor Pro puedes gestionar esa situación de forma óptima. El plugin permite crear una plantilla en la que añadir módulos dinámicos que muestren los valores que se han recogido en los campos personalizados. Mientras creas esa plantilla, podrás elegir un post de ejemplo que se muestre en la interfaz para comprobar en tiempo real cómo funciona la maqueta con contenido real.

Una vez asignada esa plantilla al post personalizado en cuestión, todas las entradas correspondientes se mostrarán tal y como has definido.

Plantillas para Elementor

En algunos de los puntos anteriores he mencionado la librería de plantillas de Elementor. Se trata de un catálogo de bloques (combinaciones de elementos) y plantillas (páginas completas) con más de 150 modelos. Unos pocos están disponibles para el plugin gratuito aunque los más atractivos son, sin duda, los dirigidos a la versión Pro.

Debo reseñar que, para poder usarlas, es imprescindible tener activada la licencia de Elementor (no solo instalado el plugin Pro).

Estos bloques y plantillas son un buen punto de partida para diseños propios e incluso representan una forma muy rápida de desplegar sitios con WordPress con una apariencia profesional con solo unos clics.

Además de la librería oficial, puedes encontrar miles de diseños en los market de plantillas más habituales, como TemplateMonster o Envato donde tienen publicado un plugin que da acceso a una librería con 350 modelos disponibles gratuitamente.

Existen otras fuentes interesantes, como LaunchParty (con 600 plantillas gratuitas), The Landing Factory (con más de 1200 plantillas desde 8$) o Elementorism, de la gente de CSSIgniter.

Extensiones o addons de Elementor

Essential addons elementor

Essential Addons for Elementor

Casi 40 nuevos módulos que puedes añadir a la versión gratuita del plugin para no tener que hacerte con la Pro (o pensártelo un poco más). Se trata de un plugin freemium que en la versión gratis, además de los nuevos elementos, te ofrece algunas funcionalidades muy interesantes:

  • Una barra de progreso de lectura, para posts tan largos como este 😉
  • Un duplicador de páginas y posts con un clic.
  • Un creador de Tablas de Contenido para poner índices en tus entradas, páginas y CPTs.

WidgeKit

All-in-One Addons for Elementor – WidgetKit

Otra treintena de widgets para Elementor Free. Entre ellos hay elementos para WooCommerce y plugins de sistemas de formación online (Learning Management System o LMS) como LearnPress, LearnDash o Sensei.

ultimate addons elementor

Ultimate Addons for Elementor

Otra galería de elementos muy interesante. En este caso, se trata de un plugin de pago que ofrece módulos tan interesantes como: titulares a dos colores, popups modales, deslizadores para fotos con el clásico antes y después, fondos de partículas animados, ventanas de login a WordPress con perfiles sociales, FAQS con Schema integrado y muchas otras fantasías sorprendentes.

Se trata de módulos muy particulares y originales con los que seguro que conseguirás llamar la atención.

Conclusión: ¿Por qué Elementor se ha convertido en el maquetador favorito de tanta gente?

Si has llegado hasta aquí, mis más sinceras felicitaciones. Sé que ha sido un post extenso 🙂

Es probable que cuando empezaras a leerlo estuvieras evaluando si merecía la pena sumergirte en el mundo de Elementor e invertir tu tiempo en aprender a manejarlo. También puede ser que seas usuario de Divi, Visual Composer, WPBakery o un firme defensor de Gutenberg y quieras reforzar tus argumentos para seguir con ellos.

De lo que estoy seguro es de que escribir este post me ha servido personalmente para hacer un buen repaso de los argumentos de éxito de este fantástico constructor de webs que es Elementor. Porque sí, puede que se trate del mejor maquetador visual actualmente.

Elementor juega con dos barajas:

  • La del implementador web que por fin puede liberarse de la servidumbre del CSS o el JavaScript y soñar con diseños avanzados repletos de funcionalidades.
  • La del diseñador/desarrollador web que tiene a su disposición todo un ecosistema de recursos muy avanzados que le permiten crear mucho más rápido de lo que jamás habría soñado. Y tiempo es dinero, dicen. De hecho, un buen conocimiento de HTML, CSS y PHP siguen siendo armas definitivas para sacarle aún más jugo a Elementor.

¿Cubre Elementor mejor estas tareas que su competencia? Es difícil decirlo. Creo que cada caso es un mundo y, donde unos aprietan más, otros recuperan por otro lado. Desde luego, Elementor es muy poderoso, equilibrado y satisfará las necesidades principales de todo aquel que lo pruebe casi con total seguridad. No hay riesgo por esa parte.

Para mí solo surge una duda sobre Elementor como apuesta de futuro. Me refiero a cómo encaja Elementor en el ecosistema del Editor de Bloques de WordPress. Elementor lleva un camino paralelo que en ningún momento ha planteado cruzar con el proyecto Gutenberg. ¿Puede seguir siendo así indefinidamente?

Creo que no a medio plazo, siempre que Elementor pretenda seguir siendo solo un plugin en un futuro hipotético sin temas (como parece) en WordPress.

Quizás la duda razonable sea si Elementor está pensando en que su esencia sea otra muy distinta. Por ejemplo, la de ser una capa que funcione por encima de WordPress, usándolo tan solo como un framework. O ni siquiera eso. Quién sabe.

Hay algunos movimientos empresariales tras la empresa que desarrolla Elementor que están provocando debates interesantes en este sentido. Entre ellos, si el tipo de inversión que reciben en las rondas de financiación privada para su desarrollo es compatible (o más bien razonable) con seguir apostando por la licencia GPL, algo con lo que Elementor ya tuvo contradicciones en el pasado.

Algunos de sus inversores no pertenecen a este mundillo y es natural que haya dudas sobre cómo encajarán en ese ámbito.

Veremos qué nos depara el futuro. El presente está claro que es apasionante para Elementor.

Share on twitter
Compartir en Twitter
Share on facebook
Compartir en Facebook
Share on pinterest
Compartir en Pinterest

¿Te gusta el blog?

Apúntate al boletín y te enviaremos los mejores artículos una vez al mes.

¿Te ayudamos?

Escríbenos si tienes dudas o necesitas una solución específica. Nuestros expertos te ayudarán en todo lo posible.

Sé el primero en enterarte de ofertas, sorteos y novedades.

Tenemos 12 comentarios en

"Tutorial de Elementor: El mejor maquetador visual para WordPress"

12 respuestas

  1. Saludos Pablo. Yo, como novato que soy y tras ver múltiples tutoriales, me he decantado por Elementor para iniciar un par de proyectos. Uno más personal, que lo usaré para trastear y aprender bien las opciones que da la versión Pro (que es la que me decidí de mano a coger) y otro, en el que ya iré mas sobre seguro.
    Pero ésta guía me ayuda mucho, si bien no para decantarme por un constructor (que ya lo he hecho), sí sobre todo para conocer parte de algunas funciones del plugin y también para no perderme el el mar de plantillas de WP. Gracias, tendré este artículo entre los de mi cabecera hasta dominarlo mejor.

  2. Muy buena Guía.
    Para mí la gran ventaja de Elementor es el Theme Builder y la capacidad de hacer plantillas prácticamente de lo que quieras, incluso de una taxomonía en particular. Esto es más complicado con otros editores visuales.

    Visual Composer es un gran editor visual, pero su gran problema es que se suele vender en temas con otras opciones terribles para el WPO. Juntas Visual con Slider Revolution, añades Essential Grid más Hibryd Gallery y la cosa se pone imposible. Ahora bien, es innegable que estas herramientas, por separado (algunas), han mejorado mucho su rendimiento desde la salida de Elementor. Por cierto, también ahora se vende Elementor con algunos de estos plugins y tiene los mismos problemas que Visual.

    En mi caso, no hay dudas: Elementor es la opción ganadora, por su theme builder y por ser más visual que el propio Visual. Si le añadimos cosas como CPT y JetEngine, estamos ante un universo antes imposible de alcanzar por alguien sin profundos conocimientos de programación.

    Saludos.

    1. Hola Rafa, estoy de acuerdo contigo. En el propio post lo comento, para mi el poder hacer plantillas personalizadas tipo single, archive, cpts y demás, es una auténtica mina. Lo mismo para pies y cabeceras. También es cierto que Divi lo permite igualmente y la gestión es bastante parecida. No veo muchas diferencias a ese nivel. Un saludo y gracias por comentar, Rafa.

  3. Gracias Pablo por esta magnífica review; el mayor problema que le veo a Elementor como bien apuntas tu, es su futuro en el ecosistema WordPress. Pero desde luego, un gran maquetador visual a tener en cuenta.
    Un gran abrazo Pablo.

    1. Hola, Carlos. Para mi es sin duda la mayor incógnita. Se trata de un gran plugin, con un potencial de crecimiento increíble y una comunidad super motivada. Pero me genera muchas dudas su relación con WordPress a medio plazo. Veremos los próximos pasos y sobre todo a qué se destinan esas inversiones tan grandes que han recibido recientemente. Un abrazo, Carlos.

  4. Hola Pablo,
    No te dejas nada. Me ha gustado mucho.

    Te cito, porque me ha gustado de un párrafo, esto en concreto.

    «¿Cubre Elementor mejor estas tareas que su competencia? Es difícil decirlo.»

    Pienso cómo tú, es complicado decirlo cuando lo primero es valorar el proyecto.
    Siempre será un placer tenerte en alguna charla para la Meetup Elementor Zaragoza.
    Si te ánimas ya sabes donde estoy… Raiola, es posible, será patrocinador 😉

    Un abrazo 😉

    1. Hola, Chabi. Muchas gracias por comentar, me alegro de que te haya gustado. La verdad es que es una suerte que tengamos hoy día tantas posibilidades de calidad a nivel de maquetación visual. Y muchas gracias por la invitación 😀 lo tendré en cuanta para alguna de mis futuras visitas a Zaragoza. Un abrazo fuerte.

  5. Hola Pablo que tal.,,, Excelete información.. Tengo una pregunta.. Al hacer una tienda woocommerce desde cero con elementor , incluye elementor el bloque de productos ( para mostrar una pagina llena de productos). O hay que adquirir alguna plantilla o plugin .. He visto varios cursos de youtube pero o bien lo hacen con una plantilla de archivo , o enseñan a hacer una pagina de producto induvidual.. Un saludo

  6. Hola Pablo,

    Gran artículo con información detallada al milímetro, enhorabuena, está curradísimo.

    Te escribe aquí un fan de Elementor, porque en IdeandoAzul desarrollamos casi todos nuestros proyectos web con él por su flexibilidad, usabilidad, etc. Porque de Thrive Architect ni hablamos ya, ¿no? 🙂

    Solo quería añadir una cosa, Elementor Pro ya cuenta con un tema llamado «Hello Elementor».
    Un abrazo,

    Iago Domeka

  7. Hola Pablo,
    Me ha gustado mucho tu artículo, me ha parecido muy interesante.
    Desde siempre me había llamado la atención el diseño web, pero a pesar de haber hecho algún curso de HTML (hace un millón de años), me parecía imposible poder hacer algo mas haya de un blog.
    A penas hace aún un año que descubrí WordPress, y desde el principio Elementor ha sido la herramienta que me ha posibilitado, el poder disfrutar del desarrollo de mis proyectos de una forma autodidacta.
    Ahora disfruto de mi afición gracias a Elementor, y me gustaría que siguieras haciendo vídeos tan instructivos, y agradables de ver como el de este articulo, para seguir aprendiendo.

    Muchas gracias.

    Estrella.

  8. Muy buenas, Pablo. Primero, gracias por tal nivel de detalle en las explicaciones.
    Tengo una duda fundamental de novato. Quiero empezar a trastear las funciones pero, a la vez, ir produciendo distintos sitios web, como servicio y salida laboral. Aún no he contratado siquiera el plan premium de WordPress, por lo que quería saber si sólo con el Elementor Pro voy a poder currármelo. Y además, ¿necesito contratar un hosting?
    Muchas gracias

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Utilizamos cookies propias y de terceros para obtener información estadística, mostrar publicidad personalizada a través del análisis de tu navegación, así como para interactuar en redes sociales. Si continúas navegando, consideramos que aceptas nuestra Política de cookies. ACEPTAR

Aviso de cookies