Elementor Page Builder Review: El mejor editor visual gratuito

En este post quiero contarte en detalle lo que te ofrece el plugin Elementor Page Builder y mi opinión sobre él. Llevo usándolo desde que salió prácticamente, cuando no tenía ni 10 mil instalaciones activas y ya va por más 700 mil. Así que, está claro que algo de bueno tiene que tener.

Un poco de historia, cuando todo era campo…

Antes de que saliera Elementor los reyes del mambo eran Visual Composer, Thrive Content Builder(ahora es Thrive Architect) y Beaver Builder. Pero todos ellos eran de pago y la versión gratuita de Beaver Builder estaba(y sigue estando) muy limitada.

Por lo que para maquetar tus paginas de WordPress no había muchas opciones y menos gratuitas que fueran buenas. Y las que había tampoco es que fueran la panacea, cada uno tenia sus defectos, para una cosa eran buenos y para otra dejaban mucho que desear o por lo menos esa es mi opinión.

Así que, cuando salió Elementor revolucionó el mercado con sus funcionalidades y su forma de editar.

Mi reacción fue en plan: ¿De verdad es gratis? Esto tiene que tener truco.

No tenía nada que ver con lo que ya había en el mercado y ofrecía muchas funcionalidades de forma gratuita que en otros plugins eran de pago o ni siquiera tenían.

Recalco, Elementor es Gratis. Aunque también tiene una versión pro que es la caña. Para más detalles sobre ella te dejo el enlace a mi review sobre Elementor Pro.

Resumiendo, que si todavía utilizas alguno de los otros page builder mencionados, prepárate, porque igual es hora de que cambies tu editor visual.

Qué es Elementor y por qué es el mejor editor visual gratuito

Si todavía no conoces lo que son los page builders, maquetadores visuales, editores visuales o como los quieras llamar, te recomiendo leer mi artículo sobre page builders.

De todos modos te resumo brevemente lo que son los page builders: Son plugins que te permiten editar el contenido de tu web de forma visual sin tener que tocar código o lo mínimo posible. Con ellos puedes diseñar las diferentes secciones de tu pagina web.

A lo que iba, cuando probé por primera vez Elementor hice algunas pruebas en local y una prueba que se me ocurrió es intentar replicar el diseño de otras paginas web usando Elementor.

Lo que hice fue replicar una página de la web de Beaver Builder, en concreto esta.  Y aquí está el resultado:

Element Builder ejemplo

No me costó nada replicarla y el resultado creo que es bastante bueno.

Vídeo review de Elementor Page Builder

Ya es un vídeo ya un poco antiguo y también es de los primeros que hice así que la calidad no es de lo mejor pero te servirá para hacerte una idea.

En mi canal de YouTube tengo una lista de reproducción sobre Elementor por si quieres ver más tutoriales.

Características principales de Elementor

En el vídeo ya has visto un poco cómo funciona, ahora toca ver los puntos fuertes y las principales características de Elementor.

Es gratis y de código abierto

Como he dicho antes es gratis y lo seguirá siendo. Al principio como no disponía de versión de pago pues generaba la duda de que si lo seguiría siendo o por cuanto tiempo le darían soporte…

Porque claro… normalmente si un producto es gratuito y no genera ningún beneficio económico lo que suele pasar es que queda en segundo plano, no recibe actualizaciones con frecuencia, no te ofrecen un soporte en condiciones y al final acaba por abandonarse. De algo hay que vivir.

Pero eso está claro que no va pasar, porque la versión premium de Elementor es todo un éxito y hay muchísimos usuarios tanto profesionales como particulares que la han comprado.

Por lo que seguro que pueden mantener a la plantilla de desabolladores y seguir mejorando el plugin tal como lo han estado haciendo hasta ahora con actualizaciones semanales prácticamente.

¿Que significa que es de código abierto?

Significa que al ser de código abierto cualquier desarrollador puede trastear el código del plugin y crear nuevas funcionalidades, corregir errores o lo que sea.

Esto ayuda a que evolucione mucho más rápido porque cualquier usuario (con los conocimientos necesarios obviamente) puede colaborar en su desarrollo.

De hecho, ya hay unos cuantos addons gratuitos en el repositorio de WordPress que amplían las funcionalidades de Elementor.  Más abajo hablo sobre los mejores addons para Elementor.

Iintuitivo y muy fácil de usar

Se nota que se lo han currado para que todo sea muy intuitivo.

Tienes a un lado un panel con todos los elementos que puedes usar y en ese mismo panel editas las opciones de cada uno de ellos y en el otro lado ves lo que es todo el contenido de la pagina. De esta forma se aprovecha mejor el espacio.

Solo tienes que arrastrar el módulo que quieres usar y colocarlo en la fila o columna correspondiente.

Es rápido y funciona con live preview

Una de las primeras cosas que noté al empezar a usarlo es su fluidez y lo rápido que se carga todo.

Si has usando algún otro editor visual, normalmente al querer editar cualquier elemento se te abre una ventana tipo “pop-up” o algún panel y tienes que esperar a que se cargue, guardar, cerrar y así todo el rato.  Y algunos encima tardan en cargar (como el VC…).

Y ya son páginas con mucho contenido es para echarse a llorar…

Con Elementor eso no pasa, al pinchar sobre un elemento todas las opciones de configuración aparecen en el panel de la izquierda inmediatamente sin tiempos de carga. Y todo los cambios que hagas se ven reflejados inmediatamente sin tener que guardar antes.

Además, puedes ocultar el panel de módulos(para ver la pagina ancho completo) con un clic y previsualizar tu diseño sin recargar ni salir de la página que estés editando.

Esto permite trabajar de forma mucho más fluida ahorrando tiempo y clics.

Lo de no tener que guardar antes de ver cómo queda la web realmente es más importante de lo que puede parecer.

Porque imagínate que estás rediseñando una una sección de tu web y quieres ver cómo va quedando por si tienes que retocar alguna cosa. Si guardas todos los usuarios verán la pagina a medio hacer y sino pues no sabes si lo estás haciendo bien, regular o mal. Yo cada vez que tengo que tocar un proyecto con VC me entran ganas de tirarme por la ventana jajajaj

Diseña sin tocar código salvo excepciones

Como cada módulo o widget que incluye tiene tantas opciones de estilos y configuración no vas a tener que recurrir a tocar código CSS en la mayoría de los casos.

En caso de que quieras hacer alguna cosa muy concreta y específica igual sí que tendrás que añadir un estilo CSS propio.

De todos modos los desarrolladores ya han pensado en ello y en su versión premium cada widget tiene un apartado para añadir CSS personalizado.

Con la versión gratuita también lo puedes hacer asignando una clase CSS al widget y añadiendo el estilo en CSS Adicional de WordPress.  Es más laborioso pero se puede hacer perfectamente.

Está traducido al español

Si el inglés no es tu fuerte con Elementor no tendrás problemas ya que está completamente traducido al castellano desde el primer momento que lo instalas.

No es que sea la característica más importante al menos para mí pero se agradece que esté en español.

Pensado para el SEO

Los desarrolladores también han pensado en el aspecto SEO.

Los elementos que tiene títulos te dan la posibilidad de elegir la etiqueta HTML a usar: h1, h2, h3, h4, h5, h6 o un div, span o p. Y además si permiten enlaces puedes marcar sin son nofollow y si quieres que se abran en una nueva pestaña.

A las secciones/filas les puedes asignar la etiqueta HTML: section, headerfooter, aside, article, nav o div.

Y para las columnas tienes: div, article, aside y nav.

(clic para ampliar las imagenes)

Al poder seleccionar la etiqueta HTML que vas a usar para cada elemento podrás estructurar la web correctamente y optimizarla para el SEO.

Personalización de columnas y filas

Las estructura de una página web al final siempre se divide en filas y columnas. Y uno de los puntos fuertes de Elementor son las opciones que ofrece para configurar las filas(secciones) y columnas.

Puedes hacer lo que te de la gana con las filas y columnas:

  • Colocar una imagen de fondo que ocupe toda la pantalla
  • Establecer una altura mínima
  • Colocar una capa de fondo de color plano o degradado
  • Centrar el contenido verticalmente
  • Colocar un vídeo de fondo

Tienes el total control sobre el ancho y el alto de cada fila.

Layout

Con Elementor puedes redimensionar las columnas simplemente arrastrando uno de los lados de la columna o para ser más preciso puedes establecer un porcentaje exacto a cada columna en opciones de configuración.

Redimesionar Columnas

No estas limitado a los tamaños estándar sino que puede ajustarlas a tu gusto.

Otra opción que me gusta bastante y es el poder alinear el contenido de las filas y columnas: arriba, en medio y abajo.

Posición del contenido

Ajustar el espacio entre las columnas tampoco es un problema.

Espaciado entre columnas Elementor

Y por supuesto tienes opciones de padding y margin que puedes establecer usando 3 medidas diferentes px, em y %.

Opciones específicas para diseño móvil

Adaptar el contenido a dispositivos móviles siempre fue un dolo de cabeza pero eso se acabo con Elementor.

Elementor ofrece la posibilidad de previsualizar el contenido en formato escritorio, tablet y móvil cosa que está muy bien. Poro lo realmente genial de esto es que también puedes hacer ajustes de los diferentes elementos que solo afectarán al dicho formato.

responsive design elementor
Diseño Responsive

Te pongo algunos ejemplos:

Hay veces que al colocar un encabezado grande en móviles se ve regular porque al ser el texto muy grande a lo mejor se divide una palabra en dos filas. Pues no hay problema, puedes especificar que en móviles el tamaño de letra sea 36px y en escritorio 60px.

Otro ejemplo serían los espacios que entre elementos sobre todo sin los espacios laterales.

Muchas veces se añaden espaciosos laterales a columnas o bueno cual otro elemento para que no que el contenido muy pegado un respecto al otro. Pero luego en dispositivos móviles se ve fatal porque apenas queda espacio para el texto y te sale una palabra por fila.

Al igual que antes Elementor te permite ajustar padding y margin diferente para cada formato.

Guarda tus diseños o importa plantillas prediseñadas

Otra de las funcionalidades que me gusta es que puedes exportar tus diseños y reutilizarlos en otras páginas. O puedes insertar directamente en la página que estés editando una plantilla prediseñada por los desarolladores con un par de clics.

Elementor Template Library

Una vez que importes una plantilla lo único que tendrás que hacer es adaptarla a tus necesidades. O también las puedes usar como ejemplo para aprender a usar Elementor.

Resumen

Como opinión final te puedo decir que es un plugin que me ha sorprendido por todo lo que ofrecer siendo gratuito 100%. Se nota que lo hicieron con cabeza y que se lo están tomando enserio. Porque ya han metido bastantes mejoras desde que salió hace 5 meses.

La única desventaja es que para crear páginas a ancho completo necesitas que tu plantilla  lo permita. Yo lo he probado con la plantilla GeneratePress, que tiene esa opción y va genial.

Me parece el mejor editor visual gratuito para WordPress con diferencia. Es intuitivo, rápido, incluye diferentes módulos, con muchas opciones de personalización… muy completo en general.

Si no tienes mucho presupuesto o no te quieres gastar dinero en un editor visual, no lo dudes usa Elementor.

Déjame en los comentarios tu opinión sobre el plugin o coméntame las dudas que tengas.  Estaré encantado de ayudarte.

Me puedes hacer un gran favor compartiendo este post en tus redes sociales.

[Total:8    Promedio:4.3/5]

Sergio Kolomiychuk

Autodidacta, apasionado del WordPress, marketing y las nuevas tecnologías. Me encantan las webs limpias con buena usabilidad y es lo que ofrezco a mis clientes. Comparto lo aprendido en el blog para ayudar a otras personas a crear una web profesional. 

Shut up and take my money !!!

fry-coge-mi-dinero