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 200 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 sobre Elementor

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.

Las principales características de Elementor Page Builder

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:2    Promedio:5/5]

Kit de herramientas para crear un blog

Lo que uso para crear webs

Mi Kit de Herramientas con el que podrás empezar a crear tu web.

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.

  • Julio Vergara

    Excelente alternativa, se ve muy bien el editor, gracias por la info

    • La verdad es que sí. Un saludo Julio!

      • Julio Vergara

        Explicas muy bien, me suscribo aquí y en youtube, gracias

  • 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!

    • 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í.

  • Pier

    Soy nuevo en esto, no comprendo si se descarga y dónde está el link , ¿es online?, ¿Funciona en mac?

    • 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!

      • Pier

        Ok, muchas gracias

      • Pier

        ok, gracias

  • 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

    • 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.

  • alex torres

    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!

  • javier

    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 ?

    • 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.

  • Ana SEPÚLVEDA

    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

  • Óscar

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

    • 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.

      • Óscar Toro García

        Muchas gracias Joan!!!

    • 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.

  • 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.

  • Guillermo Martínez Palazon

    alguien sabe como poner enlaces externos en nofollow con elementor? gracias

  • Guillermo Martínez Palazon

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

¿Dónde te mando los accesos al Área Privada?

Cállate y coge mi dinero!!!

fry-coge-mi-dinero
convert-pro
logo-thrive-leads

¿Convert Pro o Thrive Leads?

La decisión es tuya

Convert Pro o

Thrive Leads

Pin It on Pinterest

Share This