Elementor Page Builder

Elementor Page Builder: Review y tutorial del mejor editor visual gratuito

Uno de los puntos negativos de WordPress es el poco nivel de personalización que tiene su editor visual. Para conseguir un resultado profesional en nuestras páginas debemos ayudarnos con un editor visual “Drag & Drop”.

Con este tipo de plugins puedes diseñar y maquetar páginas de WordPress de una manera visual sin tener que tocar una línea de código, salvo para configuraciones específicas, pero la idea de los editores es que utilices el menor código posible.

Existe una gran variedad de editores visuales en el mercado: Page Builder de SiteOrigin, Visual Composer, Divi Builder, Beaver Builder, Thrive Content Builder y Elementor Page Builder.

Yo me centraré en Elementor, por que para mi es la mejor opción con diferencia y la que utilizo en todos mis proyectos como diseñador web.

Hasta la fecha he probado distintos editores visuales “Drag & Drop” para WordPress, pero con ninguno he conseguido los resultados que he podido obtener con el plugin Elementor Page Builder. En poco tiempo se ha convertido en un plugin indispensable para mis proyectos y en una pieza fundamental en mi caja de herramientas.

Se trata de un plugin que llegó al mercado el verano pasado (justo por estas fechas) y en tiempo récord se ha colocado en lo más alto respecto a sus competidores.

He decidido dividir este tutorial en dos partes (dos entradas diferentes).

En la primera parte te hablaré de la versión gratuita donde te mostraré todo lo que serás capaz de hacer, que será mucho ya lo verás. No hay ningún editor visual en el mercado que te ofrezca tanto por ni un € a cambio.

En el segundo post te hablaré de la versión premium, si te gusto la versión gratuita, la premium es otra bomba. Con Elementor Pro las posibilidades de diseño y configuraciones aumentan notablemente.

10 razones de peso para utilizar Elementor

Lo primero que quiero mostrarte son una serie de características que hacen de este plugin, el mejor plugin editor visual para crear contenido en páginas y entradas.

#1 Es gratis

Lo has escuchado bien, es gratis.

El plugin tiene disponible dos versiones una totalmente gratuita y otra premium con más funcionalidades y widgets disponibles.

Con la versión gratuita serás capaz de realizar todo tipo de composiciones en tus páginas y entradas, un poco más adelante te demostraré todas las posibilidades que ofrecen  sus widgets.

La versión de pago viene con más widgets preparados para ser utilizados en tus diseños y aumentar el poder del plugin considerablemente.

De las posibilidades que ofrece la versión premium te hablo en este post.

#2 Muy fácil de utilizar

La verdad es que los desarrolladores se lo han currado un montón y han conseguido una herramienta muy intuitiva y fácil de utilizar.

Cualquier usuario con un mínimo de conocimientos de informática será capaz de utilizar este fantástico plugin.

Simplemente se deben arrastrar los widgets y modificar los parámetros para modificar los estilos CSS. Todo muy fácil e intuitivo con su editor verás los cambios en vivo al momento.

#3 Sin necesidad de saber código

Una de las finalidades de los editores visuales es que seas capaz de hacer composiciones sin necesidad de tocar código, y en eso Elementor no se queda atrás.

Se pueden crear todo tipo de composiciones ya que los widgets tienen muchos parámetros para ser modificados según las necesidades. Evidentemente también podemos ayudarnos de código CSS si es necesario.

#4 Flujo de trabajo rápido y sin fallos

Llevo utilizando la herramienta desde sus inicios y muy pocas veces me ha dado errores o me ha fallado. Sólo he tenido algún problema de compatibilidad con plugins antiguos que hacía tiempo que no eran actualizados, pero eso no es culpa de Elementor.

Su interfaz carga muy rápido con unos tiempos de espera muy veloces entre que guardas o actualizas una página. Todos los cambios que hagas en tu diseño se ven reflejados al momento sin tiempos de carga de por medio.

#5 Máxima compatibilidad con con cualquier plantilla y plugin

No tendrás problemas de compatibilidad y podrás utilizar Elementor con cualquier plantilla de WordPress. Además si decides cambiar de tema no te preocupes porque no perderás tus diseños.

En este sentido yo te recomiendo que utilices GeneratePress la mejor plantilla de WordPress actualmente tiene un gran comportamiento con Elementor ya que se combinan a la perfección, además las dos plataformas se recomiendan mutuamente.

Para que vayas abriendo boca, te dejo este vídeo de uno de sus creadores donde crea una landing page desde cero en poco menos de 10 minutos con GeneratePress y Elementor.

Como verás crear tu propio diseño es muy fácil y solo debes arrastrar los diferentes widgets para formar la estructura que te de la gana.

También tiene gran compatibilidad con los plugins más usados como WPML, Polylang, Woocommerce… como te comentaba solo he tenido pequeños errores de compatibilidad con plugins que llevan tiempo sin actualizar, esto no debería ser un problema ya que debes huir a toda costa de este tipo de plugins que llevan mucho tiempo sin recibir actualizaciones.

#6 Diseñar para dispositivos móviles es muy fácil con Elementor

Tendrás control de las media queries (código CSS que hace que el diseño vaya cambiando según la resolución de la pantalla) de una manera totalmente visual, con simplemente pulsar un botón podrás cambiar la resolución de la pantalla y podrás ver cómo se comporta el diseño en un escritorio, en la tablet o en un móvil, y a partir de aquí podrás modificar cada una de las resoluciones aplicando los estilos que necesites.

Diseñar una página web para los diferentes tamaños y resoluciones de pantalla nunca te resultará tan fácil.

Sin usar una sola línea de código tendrás control total sobre los diferentes diseños de tamaños de pantalla.

#7 Traducido al castellano al completo

El idioma en estos días no debería ser un impedimento ni un factor destacado para no hacerse con esta fantástica herramienta ya que está traducida al completo al castellano.

No deberás instalar ningún parche adicional para su traducción, solo debes instalar el plugin y desde un principio tendrás Elementor en un perfecto castellano.

#8 Código optimizado para el SEO

Los desarrolladores han pensado el código al milímetro, desarrollando un plugin con un código limpio que cumple con todos los estándares recomendados para un buen posicionamiento en buscadores SEO.

Evidentemente deberás desarrollar un estrategia SEO y trabajar el SEO on page de las páginas, ya que Elementor no puede hacer todo el trabajo por ti, pero te asegurarás que el código de la web no incumpla las reglas básicas.

#9 De código abierto

Se trata de una herramienta de código abierto con licencia GPL. Esto quiere decir que hay una gran comunidad de desarrolladores detrás dispuesto a colaborar e implementar mejoras en el plugin.

De esta manera cualquier desarrollador con capacidades puede aportar para mejorar la herramienta y extender sus funcionalidades con nuevos widgets. De hecho existen gran cantidad de plugins creados por desarrolladores que aumentan las capacidades de Elementor.

Te puede interesar echar un vistazo a este post del blog oficial del plugin, donde te muestran los 10 plugins desarrollados por terceros más populares.

#10 Tiene una gran reputación entre la comunidad

Se trata de una herramienta muy joven que cuenta con 1 año de vida, el día 6 de Junio fue su primer aniversario.

Desde sus inicios ha conseguido unos datos de valoración espectaculares consiguiendo mantener una nota media de 4’9 sobre 5, sencillamente espectacular y al alcance de muy pocos.

Cuenta con más de 100.000 instalaciones activas a día de hoy aumentando considerablemente cada día.

Solo con las valoraciones de los usuarios podemos hacernos una idea de la gran reputación que tiene este plugin y afirmar sin miedo a equivocarnos que nos encontramos con el mejor editor visual para WordPress que se ha lanzado hasta la fecha.

Personalización total sobre el diseño de la web

Una página web mantiene siempre la misma estructura y esta se divide en filas para el ancho y columnas para el alto. Con Elementor tendrás un control total para personalizar, modificar y redimensionar los diferentes elementos que conforman la arquitectura de una página web.

Anchura y altura de las filas

Tendrás el control total para modificar el ancho y alto de las filas.

Redimensionar columnas

Te resultará muy sencillo poder redimensionar el tamaño de las columnas simplemente arrastrando uno de sus lados. También te será muy fácil añadir o eliminar columnas a una estructura ya creada.

Posición del contenido dentro de las columnas

Podrás alinear el contenido de las columnas el la parte superior, en el medio o abajo de una manera muy sencilla.

Ajustes de relleno y márgenes

Podrás establecer fácilmente los ajustes de relleno y márgenes en secciones, columnas y los diferentes widgets de elementor, utilizando px, EM o %.

Espacio entre columnas

Podrás cambiar el espacio entre las diferentes columnas que conforman tu diseño y elegir el que mejor se adapte para tu diseño.

Widgets disponibles

A día de hoy tienes 28 widgets disponibles en la versión gratuita, cada uno con amplias opciones de configuración y una gran cantidad de ajustes para que puedas configurarlos a tu gusto de una manera muy sencilla. Además de las opciones de configuración de cada widget también tienes disponibles los atributos margen, relleno, fondo y borde… que se pueden aplicar a todos los elementos.

Si con las opciones de configuración no tienes suficiente puedes insertar clases CSS para acabar de añadir estilos.

A continuación vamos a ir desgranando todos los widgets de manera individual para ver todas las posibilidades que nos ofrecen y los atributos que se pueden aplicar a cada uno.

#1 Encabezado

Con este widget podrás crear títulos en tus diseños pudiendo modificar la etiqueta (h1, h2,h3,h4…) y establecer la fuente, color, tamaño, peso, altura de línea…

También podrás crear enlaces, aplicar márgenes y rellenos, establecer fondos o personalizar aún más con tus propias reglas CSS.

Todas estas opciones las podrás aplicar a todos los widgets que vamos a ver con lo que las posibilidades de diseño son interminables y sólo limitadas por tu propia imaginación.

#2 Imagen

Este widget te permite añadir imágenes a tu diseño de una manera fácil, simplemente debes arrastrar el widget donde quieras colocar la imagen.

Se trata de un widget fundamental y que seguramente usarás habitualmente. Al agregar la imagen desde el panel de la izquierda a nuestro lienzo de trabajo podrás configurar todas sus características y darle el estilo que quieras.

Podrás modificar el tamaño, la opacidad, aplicar animaciones, bordes… además de los ajustes de margenes, rellenos, fondos…. habilitados para todos los widgets.

#3 Editor de texto

Puedes añadir texto en cualquier parte de tu diseño muy fácilmente. Se pueden controlar todas las características del texto con un editor muy similar al que trae WordPress por defecto.

Además de poder aplicar estilos también puedes elegir la posición del texto dentro de la columnas, lo que permite una gran versatilidad.

#4 Video

Con este widget puedes incrustar y añadir videos de Youtube o Vimeo con un comportamiento totalmente responsive.

Además te permite modificar una serie de características como modificar la proporción del video, ocultar o añadir controles de reproducción, auto-reproducir el vídeo…

Una característica curiosa de este widget es que puedes cambiar la imagen de portada que viene con los videos de Youtube o Vimeo por otra que sea más atractiva y que se adapte mejor a tu diseño.

#5 Botón

Con este widget tendrás control total sobre los botones con una gran nivel de personalización. La variedad de estilos aplicable a los botones es muy grande pudiendo añadir iconos, bordes, modificando fuentes,  colores, márgenes… nunca crear un boton había resultado tan fácil y variado.

Además cuentas con 5 botones con diseños predefinidos preparados para implementar en tus diseños.

#6 Separador

Con este elemento puedes añadir lineas horizontales para dividir el diseño, como por ejemplo, las típicas lineas horizontales que podemos ver en muchos de los encabezados.

#7 Espaciador

Con este elemento puedes añadir espacios en blanco del tamaño que quieras para separar los diferentes elementos del diseño.

La verdad es que es un widget que no utilizo demasiado ya que prefiero jugar con los márgenes de los diferentes elementos.

#8 Google Maps

Puedes integrar un mapa de Google Maps de manera muy sencilla e intuitiva, basta con pegar las coordenadas o dirección y tendrás el mapa incrustado en la página.

En las opciones de configuración del widget puedes modificar el nivel de zoom, el alto e impedir el scroll en el mapa. Esta última configuración me parece muy útil ya que a veces puede resultar muy molesto y entrar en conflicto con el scroll de la página.

Este es un widget muy útil en páginas corporativas para empresas, donde hay una sección de “Contacto” con un mapa para localizar la empresa físicamente.

#9 Contador

Con este widget puedes añadir los típicos contadores de números que sean puesto tan de moda y que puedes ver en gran número de páginas.

El widget te permite establecer un número inicial y uno final, de esta manera, una vez cargada la página podemos ver una animación desde el punto inicial hasta el final.

Se puede controlar la duración de la animación y agregar títulos debajo de los contadores, además de controlar y modificar todos los atributos de diseño como colores, márgenes… que podemos modificar en todos los elementos.

#10 Icono

También se pueden insertar iconos de Font Awesone en cualquier parte del diseño.

Como todos los widgets Elementor te da muchas posibilidades para aplicar diferentes atributos, pudiendo establecer diferentes tipos de fondos, modificando el relleno, estableciendo colores primarios y secundarios, girar los iconos a tu antojo o aplicando animaciones.

Como puedes ver es impresionante la cantidad de atributos que se pueden aplicar a los diferentes widgets.

#11 Lista de iconos

Se trata de un widget genial para crear listas de iconos con texto. Tendrás control total para modificar los atributos de los iconos y de los textos, modificando tamaños, colores…

#12 Acordeón

Con este widget podrás insertar texto en forma de acordeón, lo que te va a permitir ahorrar más espacio en tus diseños.

Se trata de un elemento muy utilizado en páginas de tipo preguntas y respuestas.

Con las opciones de configuración de Elementor puedes personalizar el acordeón para dejarlo a tu gusto.

En la página de mi servicio Diseño web WordPress en la parte inferior puedes ver un ejemplo de funcionamiento de este elemento.

#13 Alternar

Un widget parecido al anterior y que nos sirve para mostrar texto de manera ordenada.

#14 Pestañas

Se trata de otro elemento para mostrar texto separado en diferentes pestañas.

Como en el resto de widgets puedes configurar las opciones de diseño para dejar el elemento a tu gusto, cambiando tipografías, colores…

# 15 HTML

Si necesitas insertar tus propios trozos de código HTML con este plugin te será muy fácil. Simplemente debes pegar tus trozos de código HTML en este elemento.

#16 Shortcodes

Con este widget puedes añadir shortcodes a tu diseño sin ningún problema. Este elemento te da la posibilidad de enlazar Elementor con cualquier otro plugin que permita el uso de shortcodes.

Por ejemplo puedes insertar formularios de contacto con el plugin Contact Form 7. Con la versión Pro puedes ahorrarte este plugin ya que tiene un widget para insertar formularios de contacto.

#17 Ancla de menú

Con este widget puedes enlazar diferentes secciones de una página. Al pulsar el enlace te desplazas hasta la sección con un efecto de scroll.

Se trata de una característica que vemos implementada en la mayoría de páginas web, de esta manera conseguirás un diseño más dinámico ganado también en usabilidad.

#18 Cuadro de imagen

Puedes insertar de manera muy cómoda y sencilla una imagen con un título y una descripción.

Como en todas las herramientas de Elementor puedes modificar los diferentes atributos y parámetros para modificar tamaños, fuentes, colores, margenes…

Se trata de un widget muy útil que te permite crear los típicos cuadros de imagen y texto con servicios a destacar. En mi caso he utilizado este widget para mostrar los diferentes servicios que ofrezco en mi página de inicio.

#19 Cuadro de icono

Similar a la herramienta anterior pero en este caso se sustituye la imagen por un icono de Font Awesome.

También puede ser muy útil para mostrar diferentes servicios a destacar.

#20 Galería de imágenes

Con este widget puedes añadir una galería de imágenes de una manera muy sencilla.

Puedes modificar diferentes parámetros como el tamaño de la galería, el número de columnas, el orden…

Como el resto de widgets se trata de una herramienta muy potente con la que seguramente te ahorrarás instalar otro plugin adicional.

#21 Carrousel de imágenes

Junto con el anterior widget otra fantástica herramienta para añadir imágenes en tus diseños.

Este widget esta enfocado para crear pases de imágenes.

Del mismo modo que el resto de herramientas, desde el editor tienes la posibilidad de configurar los sliders para modificar muchos parámetros.

#22 Soundcloud

Con este widget puedes incluir archivos de audio de Soundcloud, se trata de un plugin muy útil para webs relacionadas con la música, radio o el mundo del podcast.

Evidentemente, puedes controlar diferentes parámetros para controlar si autoreproducir el audio, número de reproducciones, modificar colores de los botones…

#23 Testimonios

Otra característica que puedes ver implementada en muchas páginas web y que sirve para mostrar las opiniones de clientes valorando tu marca o servicios.

Puedes configurar gran cantidad de parámetros como todos los otros widgets.

En la sección testimonios de esta web puedes ver este widget en pleno rendimiento.

#24 Social Icons

Seguro que tienes que insertar iconos en tu página web para enlazar con las redes sociales en algún momento.

Con esta herramienta te será super sencillo insertar este tipo de botones pudiendo configurar gran cantidad de parámetros. Una vez más otro widget fantástico.

#25 Barras de progreso

Otro elemento interesante que puedes encontrar en multitud de páginas web.

Seguro que has visto más de una vez esas barras de progreso que sirven para mostrar graficamente el grado de conocimientos de determinado profesional.

Podrás configurar todos los atributos de esta herramienta modificando colores, texto, animaciones…

#26 Alerta

Con este widget puedes crear textos destacados dentro de cajas con fondo de color.

#27 Sidebar

Puedes incluir una barra lateral en cualquier parte de tu diseño. Solo tienes que seleccionar la posición del widget a mostrar y colocarlo donde quieras.

En el caso de GeneratePress tienes la opción de elegir entre: barra lateral derecha, barra lateral izquierda, cabecera, barra superior y cualquiera de las cinco posiciones del pie de página.

#28 Widgets de WordPress

Si el nivel de personalización es ya bestial con todos los widgets que trae por defecto con Elementor, además puedes insertar y colocar cualquier widget de WordPress en el lugar que prefieras de tu diseño.

Puedes usar cualquier widget de WordPress para utilizarlo en tus entradas o páginas.

Guarda tus diseños o importa tus plantillas

Otra de las características del plugin es que podemos guardar y exportar nuestros diseños para ser utilizados en otros proyectos.  De esta manera ahorras gran cantidad de tiempo aumentando tu rendimiento y productividad.

Dispones de una gran cantidad de plantillas prediseñadas que puedes modificar y adaptarlas a lo que necesites o simplemente te servirán de inspiración.

Con el tiempo suelen añadir mas plantillas.

Documentación disponible

Al tratarse de un plugin muy joven (hace poco cumplió 1 año de vida) la documentación de la página oficial todavía no es muy extensa, si lo comparamos con sus principales competidores, pero esta muy bien organizada y continuamente van actualizando contenidos.

Puede resultar interesante suscribirse a su blog, ya que de esta manera serás de los primeros en enterarte de novedades, descuentos…

Cabe destacar que tienen un canal de Youtube, donde muy frecuentemente van subiendo videos donde explican el funcionamiento de los diferentes widgets y herramientas.

Los más avanzados también pueden consultar su página de GitHub.

Conclusión y opinión

No creo equivocarme si te dijo que Elementor se ha convertido en apenas un año de existencia en el mejor plugin para editar contenido y con ello en el editor visual número uno, desbancado y relevando en un segundo lugar al famoso Thrive Content Builder y todos sus rivales.

Se trata de una herramienta muy polivalente que continuamente va creciendo e implementando nuevas funcionalidades con sus widgets.

Si te mueves en este mundillo del diseño web no puedes dejar pasar la oportunidad de probar este magnífico plugin, si no lo has hecho ya, te aseguro que con este plugin conseguirás un nivel de personalización extraordinario en todos tus diseños.

Si aún utilizas otro editor visual, te animo a que pruebes la versión gratuita que he analizado en este tutorial te aseguro que te sorprenderá y rápidamente dejarás abandonado tu antiguo editor visual por Elementor.

Dejo para el siguiente post analizar los widgets premium que hacen de Elementor Pro una herramienta todavía más potente.

¿Has probado Elementor? sino lo has hecho ya estás tardando! 😉

Daniel Massó

Soy diseñador web, me encanta Wordpress y todo el mundo digital. Me gustan los diseños limpios sin excesos, que tengan una buena usabilidad. En mi blog comparto mis conocimientos para ayudarte a triunfar con tu web.

4 comentarios en “Elementor Page Builder: Review y tutorial del mejor editor visual gratuito

  1. Buenas ,
    Tengo una duda:
    ¿crees que vale la pena comprar la versión pro de Elementor.?
    Suelo realizar proyectos asiduamente para clientes.
    Muchas gracias

    • Hola Jose Antonio,

      Si rotundo!!!! más aún si te dedicas al diseño web a nivel profesional.
      Elementor Pro no te va a defraudar!! Yo te recomendaría que te hicieras directamente con una licencia UNLIMITED ya que puedes instalar el plugin tantas veces como quieras. También puedes empezar por un plan más económico y con el tiempo actualizar a uno superior.

      Saludos!!

  2. Hola,

    Genial este magnífico post me ha servido de guía, soy novata en todo esto y estoy probando la herramienta.

    ¿Entiendo que también puedo usarlo en mis entradas?

    Saludos y gracias por compartir

    • Hola Izaskun,

      Me alegra saber que te a servido de ayuda!!
      Puedes utilizar Elementor en tus entradas sin problema aunque yo no soy muy partidario de ello.

      Un placer

Deja un comentario