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 4 millones 😲. 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.

Artículo recomendado: Review 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.

Elementor Page Builder Introducción

Aquí tienes un vídeo de introducción para que te hagas una idea de cómo funciona.

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.

Artículo recomendado: Mejores addons para Elementor

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 Elementor

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.

Accede al audio para tener una web sencilla y eficaz desde la facilidad de WordPress​

Además de otros recursos que te ayudarán a crear o mejorar tu web.​

Responsable: Serhiy Kolomiychuk. Finalidad: Gestionar y enviar información de boletines y promociones a través de correo electrónico. Legitimación: Tu consentimiento. Destinatarios: Tus datos se guardan en MailChimp. Derechos: Tienes, entre otros, derecho a acceder, rectificar y suprimir tus datos cuando quieras.

40 comentarios en «Elementor Page Builder Review: El mejor editor visual gratuito»

  1. Hola Sergio. Gracias por el artículo!! Yo soy muy fan de Page Builder de Site Origin por el tema de que no usa shortcodes ni tiene lock-in, pero este tiene muy buena pinta también. Tendré que probarlo.
    Un saludo!

    Responder
    • De nada, para eso está. La verdad es que está muy bien. El de Site Origin no me gusta la verdad, lo probé varias veces pero me saca de mis casillas jeje
      Un saludo!

    • Es que la interfaz es muy poco colorida, se mimetiza demasiado bien con los colores propios de WordPress, tanto que me pierdo.

      Que lo use, no significa que me guste. Es el primero que conocí, y con el tiempo ha evolucionado para bien (antes sí usaba shortcodes, hará un año).

      Yo también quiero probar Elementor, pero ya lo dejaré para la remodelación de la web con un framework que me esta llamando mucho la atención y es gratuito.

      Por cierto, el amigo Joan Boluda me ha comentado (previa pregunta) que WordPress tiene previsto sacar su propio maquetador visual de serie (codex), aunque será algo básico de momento, por bloques.

    • Ya veremos a ver lo que sacan los de WordPress. De momento voy a usar Elementor y si sale algo mejor pues me cambio, que aquí no hay permanencia jeje.
      ¡Un saludo!

    • Vaya, han puesto en la versión Pro: formulario, lista de precios, slides. Algo que SiteOrigin tiene de forma gratuita, junto con las ‘Hero Images’ (que Elementor, ni tiene).
      El formulario de SiteOrigin, tiene muchas opciones, algo que también pensaba tenia el de Jetpack pero descubrí su límite.

      Elementor me llamaba la atención por sus diferentes sistemas para integrar las Faq: Tabs, Accordion, Toggle. De hecho, por eso lo quería probar.

      De momento me quedo con SiteOrigin, es más útil para mí.

    • Hola,
      No es un programa de ordenador, se instala en tu instalación de WordPress por lo cual es «compatible» con Mac.

      Lo puedes descargar desde el repositorio de WordPress o desde su página web. Lo más fácil es que lo instales directamente desde tu panel de administración de WordPress. Tienes que ir a Plugins-> añadir nuevo y lo buscas con el buscador. Luego simplemente le das a instalar y activar. Hecho eso, lo podrías usar tal como lo muestro en el vídeo.

      ¡Un saludo!

  2. Excelente artículo parece que vale solo en sitios nuevos ya que le probé en una página nuevita y todo anda bien, le quise poner en una página que usaba visual composer y me sale un error de falla de contenido, viendo foros en internet mucha gente también tiene ese problema

    Responder
    • Hola, se me pasó tu comentario.Creo que te refieres a este error:
      https://docs.elementor.com/article/56-content-area-not-found
      A mí también me ha pasado, pero es algo raro porque ese error sale cuando le da la gana. Sobre todo me ha pasado al editar la página de home. He tenido casos con tanto con páginas nuevas como con antiguas.

      De todo modos aunque tenga ese fallo, que supongo que corregirán, sigue siendo la mejor opción gratuita.

  3. Hola como haces para poner en tu pagina principal la sección de «lo ultimo del blog»? con el plugin elementor? así como lo tienes tu en forma «cuadrada»…lo he buscado y ni idea.. gracias!

    Responder
  4. hola buenas noches sergio excelente articulo y review de este editor
    tengo un detalle al subirlo a un servidor online, me toma las imaganes del localhost ya modifique las url de las base de datos wp-options como toda migracion basica pero aun asi no me toma las que he subido online.
    es mala idea trabajar con elementor en local ?

    Responder
    • Hola javier,

      No te preocupes, todas las imágenes que están dentro de un maquetador visual, suele pasar esto. Hay que ir retocando la URL a mano, porque no se cambian de forma automática, salvo en ciertos casos.

      Por ejemplo en el maquetador visual de SiteOrigin (que es compatible con Elementor), si pones las imágenes desde un widget de texto, has de cambiar a mano la URL. Sin embargo, no pasa esto cuando pones la imagen desde un widget de imagen, la URL se cambiaría de forma automática.

      A ver que te dice Sergio que usa Elementor, pero una de las claves puede ser el widget que hayas usado para las imágenes. Si es propio de imagen debería cambiarte la URL, como pasa con el maquetador de SiteOrigin.

      Saludos.

  5. Hola, lo descubrí ayer y lo estoy probando. Pero tengo una gran duda, he creado una columna y por error me he equivocado y me gustaría restaurar lo anterior, es posible recuperar, es decir “deshacer” el movimiento anterior? Gracias. Estoy aprendiendo y estoy me salvaría mucho el trabajo. Un saludo

    Responder
  6. Hola!!!
    Tengo una duda…. Es bueno (o no es muy malo) usar Elementor y Page Builder Site Origin a la vez para complementarlos?

    Responder
    • Desde el 31 de enero de 2017, SiteOrigin Widgets Bundle (el complemento de Page Builder de SiteOrigin) es compatible con Elementor y Beaver Builder.

      De hecho, en el foro de soporte de Elementor, uno de los autores del plugin, recomienda a un usuario su uso, dada la queja que da, relacionada con que Elementor, no posee de forma gratis: lista de precios ni slider (tampoco formulario de contacto), cosa que SiteOrigin sí, te lo da gratis.

      A Sergio, no le gusta mucho SiteOrigin, jeje.

      Saludos.

    • Pues no soy muy fan de SiteOrigin jejej, como ha comentado Joan. Pero vaya, que no es mala opción. Yo intentaría usar uno u otro, no los dos a la vez. Porque realmente ambos plugins están pensados para lo mismo. Y tener dos plugins que hacen «lo mismo» no es lo ideal.

    • Sergio, hacen lo mismo pero no tienen lo mismo. Al menos, no en 3 cosas, de las cuales 2 de ellas, destaca uno de los autores de Elementor, se encuentran en SiteOrigin Widgets Bundle de forma totalmente compatible. Vamos que lo destaca uno de los autores de Elementor, ni siquiera lo digo yo.

      De hecho, la suma de peso entre los 2, es lo que pesa por si sólo Beaver Builder, y encima viene capado casi totalmente en su versión gratuita.

      Con respecto a tener 3 plugins de diferente autor (es decir, un slider, lista de precios y formulario de contacto), te arriesgas a que entren en conflicto alguno de ellos.

      A favor del formulario de contacto de SiteOrigin diré que yo tengo puesto un correo de Gmail donde me llegan los mensajes, y todo lo recibo bien desde la bandeja principal. Tengo entendido que hay gente que está teniendo problemas con Contact Form 7, para recibir mensajes en la bandeja principal de Gmail, terminando la mayoría en spam.

      Saludos.

  7. Para los que han tenido la suerte de conocer este page builder de entrada, comentarles que gracias a un miembro de la comunidad WordPress, existe un ‘Addon’ para Elementor gratis:

    – Elementor Addon Elements (By Webtechstreet)

    Un ‘Addon’, es una serie de elementos específicos que no contiene un plugin y permite enriquecer éste. Normalmente, son los propios autores del plugin oficial quienes lo sacan y cobran aparte (o no).

    ¿Qué trae de interesante este Addon?

    – Flip Box
    – Text Separator
    – Price Table
    – Post List
    – Shape Separator (Deprecated.. use shape separator available with Elementor)
    – Animated Text
    – Split Text

    Aún no está el formulario de contacto ni slider, pero prometen nuevos añadidos próximamente.

    Yo porque empecé con SiteOrigin, sino estaría usando Elementor. Próximamente para mi nueva web, jeje. Hoy ando probándolo de forma local, es por eso que investigando y tal, descubrí este addon gratis.

    Ya ves Sergio que no me molesta para nada Elementor, es sólo que tengo toda mi web ya con SiteOrigin, y tengo que optimizar lo que conozco, y por otra parte al llevar tantos años, pues es más compatible con varios plugins, entre ellos Elementor y Beaver Builder (el cual en su edición gratuita no es gran cosa).

    Pero el diseño visual de Elementor me recuerda a cuando trabajaba con Dreamweaver para construir mis webs en HTML & CSS. Lo que ves, es lo que es, aunque no siempre era así, esa forma de trabajar con Dreamweaver como en el caso de Elementor, animaba a hacer diseños más bonitos y espectaculares.

    Saludos, a pasar buen domingo.

    Responder
  8. he probado con muchos plugin y tambien manualmente pero al volver a editar con elementor me pone los enlaces en dofollow.

    Responder
  9. Hola, buenos días, me gustaría hacerte una pregunta. En caso de querer hacer un formulario para captar leads, se podría hacer con algun pluguin gratuito o esta versión gratuïta o seria necesario contratar la versión pro.

    Responder
    • Hola Olga, con la versión pro de Elementor podrías crear formularios directamente con Elementor y vincularlos con lagunas de las plataformas de email marketing más populares. Es la opción más cómoda y fácil.
      También se puede hacer con algún otro plugin gratuito, pero la mayoría están bastante limitados. Yo utilizo uno que se llama Convert Pro, pero es de pago. ¡Un saludo!

  10. hola! Elementor en el apartado pricing de su web no pone que sea gratis!!! por 49USD por un site. Quizás desde que publicaste el artículo que lo han puesto de pago??’

    gracias

    patricia

    Responder
    • Hola, Elementor es gratis, lo puedes descargar desde el repositorio de WordPress. Pero en su web tiene la versión de pago que añade más funcionalidades.

  11. Me pasa una cosa muy rara. Voy editando todo y va quedando de forma perfecta, pero cuando tiro a ver como queda, le faltan los estilos y los colores. Es como si no me cogiera el CSS. En la previsualizsación perfecto, pero al ir a la página a ver como queda, sale todo sin esos efectos en las letras, fondos de color, etc. ¿Sabes por que puede ser?

    Responder
  12. Hola Sergio, muy interesante tu información, estoy necesitando una landing page y
    ojalá que no pueda salir muy caro, debido a que estoy retomando mi Propuesta Turística.-
    Tengo pocos conocimientos como para hacerla solo, luego de leer tu blog.
    Y lo importante que la landing salga impeque, bonita, sin dificultad para leerla.

    Espero por tus comentarios…
    Gracias.

    Responder
  13. Hola.
    Gracias por el artículo.
    Uso Elementor en una web y hasta ahora no había tenido ningún inconveniente que no pudiera solucionar, pero desde la última actualización veo que no puedo modificar ninguna página, porque no aparece la barra inferior de salvar el contenido editado.
    ¿A qué cree que puede deberse?
    He limpiado cachés, entrado y salido de la web, en fin, todo lo que se me ha ocurrido, pero es como si no fuera un problema temporal.
    Una ayuda o algo de luz sobre el tema me vendría de maravilla y lo agradecería mucho, porque no quisiera «rehacer» todas las páginas y entradas editadas con Elementor…
    Un saludo cordial.

    Responder
    • Hola Joaquín,
      Eso puede pasar por muchos motivos. Entra en Ajustes de Elementor -> Avanzado y cambia: «Método de impresión de CSS» y «Cambio de método de carga del edito» a ver si cambiando esos ajustes te funciona.
      Si no te funciona pues lo mejor es que contactes con los de Elementor y que ellos le echen un vistazo.
      Por cosas como estas no recomiendo editar los posts con Elementor ni ningún otro page builder.
      ¡Un saludo!

  14. Muchas gracias Sergio.
    Aplicaré tus consejos a ver qué sucede.
    En todo caso, desinstalé y reinstalé el plugin y volvió a aparecer.
    Saludos.

    Responder

Deja un comentario

Protección de datos