Qué es Elementor 3 y cómo funciona en WordPress

Cuándo tenemos que hacer una página web para nuestro proyecto o el de algún cliente, es posible que tengamos que hacer algo más visual o necesitemos que la gestión de la página sea más sencilla.

Aunque lo ideal es construir páginas con el editor por defecto de WordPress: Gutenberg, a veces se queda corto o no es lo suficientemente intuitivo para la persona que va a gestionar la página.

En estos casos solemos buscar un constructor visual que nos ayude con la tarea. Hay muchos constructores visuales pero no todos están tan bien programados y optimizados como Elementor.

En este tutorial veremos cómo instalar, configurar y diseñar en WordPress con Elementor y haremos una comparativa con otros constructores similares para ver por qué Elementor es uno de los mejores constructores visuales para WordPress.

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

Elementor es un constructor visual para WordPress que tiene una versión gratuita, disponible en el repositorio de WordPress y una versión de pago llamada Elementor Pro.

Un constructor visual como Elementor nos permite maquetar páginas dentro de nuestro sitio web de forma intuitiva, rápida y visual.

A diferencia del editor por defecto de WordPress, Elementor nos permite ver el resultado de lo que estamos creando, para saber cómo quedará al publicarlo.

Widgets gratuitos de Elementor 3

En la versión gratuita de Elementor disponemos de los siguientes widgets o elementos:

Widgets gratuitos de Elementor
Widgets gratuitos de Elementor
  • Sección interior: Nos permite crear una sección con una o más columnas, a la que podremos añadir fondo y ajustar márgenes.
  • Encabezado: Con este widget podremos añadir un título o subtítulo en nuestra página, desde un H1 a un H6.
  • Imagen: Nos permite añadir un bloque de imagen y hacer algunos ajustes sobre ella.
  • Editor de texto: Un bloque con el que podremos escribir un texto normal o en formato HTML, basado en el editor clásico de WordPress.
  • Vídeo: Nos permite añadir un vídeo de Vimeo, Youtube, Dailymotion o subido a nuestro servidor.
  • Botón: Nos permite añadir un botón y ajustar su aspecto. Por ejemplo podemos ajustar el color, los bordes y la tipografía.
  • Separador y Espaciador: Estos elemntos nos sirven para añadir una separación o un espacio entre secciones.
  • Google Maps: Nos permite añadir un mapa de Google Maps con una ubicación concreta.
  • Icono: Nos permite elegir entre una variedad de iconos para añadir a nuestra página.

En la versión de pago disponemos de más widgets que podremos utilizar para maquetar nuestra página.

Plantillas de página gratuitas

Elementor nos permite partir de una plantilla prediseñada a la hora de crear una nueva página y hacer modificaciones sobre esta para adaptarla a nuestro gusto.

A la hora de añadir una plantilla, veremos que algunas están marcadas como «PRO». Estas plantillas solo las podemos usar si usamos la versión de pago, pero disponemos de un interesante número de plantillas gratuitas:

Plantillas prediseñadas de Elementor
Plantillas prediseñadas de Elementor

Guardar nuestras propias plantillas de página

Otra de las ventajas de Elementor es que nos permite guardar nuestras propias plantillas de página.

Podemos usarlas como base en otras páginas que editemos o incluso podríamos exportarlas para usarlas en otro sitio web.

Guardar plantillas en Elementor
Guardar plantillas en Elementor

Ajustar estilos y márgenes

Otra ventaja de Elementor es que nos permite ajustar los estilos de los diferentes elementos que añadamos, permitiéndonos cambiar por ejemplo el fondo y márgenes de la sección, la columna o el elemento que estemos editando.

En los elementos con texto podremos ajustar la tipografía: Tamaños, colores, grosor, altura de la línea, si lleva sombra, etc.

Apartado de Estilo en Elementor
Apartado de Estilo en Elementor
Tipografía en Elementor
Tipografía en Elementor
Edición de márgenes en Elementor
Edición de márgenes en Elementor

Diseño responsive

Otra de las características de Elementor es la posibilidad de cambiar entre el diseño de Escritorio, Tablet y Móvil y aplicar cambios específicos en los elementos para cada uno.

Diseño responsive en Elementor 3

¿Por qué Elementor se ha convertido en uno de los Mejores Maquetadores Visuales?

Existen multitud de maquetadores visuales para WordPress, algunos de los más conocidos son por ejemplo WpBakery (también llamado Visual Composer), Divi Builder (el constructor del theme Divi), Page Builder by SiteOrigin y Elementor.

Con la llegada de Gutenberg, Page Builder by SiteOrigin se ha adaptado y ha pasado a ser un bloque dentro del mismo, es uno de los maquetadores visuales más ligeros, pero no es tan visual ni intuitivo como Elementor y puede ser sustituido por otras opciones para Gutenberg.

WpBakery, es un plugin pesado y por desgracia uno de los más usados al formar parte de la gran mayoría de los themes de ThemeForest, que es una de las páginas de venta de themes más conocidas y la cual no recomendamos.

Divi Builder es el maquetador visual del theme Divi, que hasta hace unos años solo se podía usar como parte de este theme y que ahora se distribuye también como plugin independiente, pero deja mucho que desear al usarse con otros themes.

Tanto WpBakery como en el caso de Divi Builder son maquetadores visuales con un alto grado de dependencia y al desactivarlos nuestra página se llena de shortcodes (códigos cortos que ejecutan funciones).

En el caso de Elementor, si se desactiva, se pierde la parte visual pero no se llena la página de shortcodes y se pueden distinguir los diferentes elementos (textos, imágenes, etc) sin problema, siendo más fácil volver a maquetarlos sin este plugin en caso de que haga falta.

Cada uno de los plugins mencionados tiene una interfaz diferente y Elementor es de los más intuitivos a la hora de maquetar y de los que menos problemas dan.

Además Elementor es más ligero que WpBakery o Divi, como veremos más adelante en este tutorial.

Cómo instalar y configurar el plugin de Elementor

Instalar Elementor en nuestra web es sencillo, nos vamos al apartado de Plugins -> Añadir nuevo, lo buscamos en el buscador y le damos a Instalar ahora:

Elementor en el repositorio de WordPress

Una vez instalado, le damos al botón de Activar:

Activar Elementor en el apartado de Plugins de WordPress

Al terminar la activación nos saldrá una pantalla de bienvenida:

Página de bienvenida a Elementor 3

Y ya podemos empezar a crear páginas con Elementor. Veremos que en la barra izquierda de la administración de WordPress nos salen dos nuevos apartados: Elementor y Plantillas

En el primer apartado podremos acceder a los ajustes, el gestor de perfiles, las herramientas, información del sistema, las fuentes personalizadas y los iconos personalizados.

Y en el segundo podremos acceder a la creación de plantillas.

Podemos crear nuestra primera página haciendo click en el botón «Crea tu primera página» o en Páginas -> Añadir nueva, que será el método habitual.

Configuración de Elementor

Si vamos al apartado Elementor -> Ajustes, dentro del área de administración de nuestro WordPress, podremos acceder a su configuración.

Dentro veremos tres pestañas, la primera de ellas es General, en la que podremos habilitar o deshabilitar el constructor para los diferentes tipos de contenido de nuestra o sitio.

Lo recomendable es usarlo solo para páginas o tipos de contenido similares, que requieran un toque más visual y no para contenido recurrente como pueden ser las Entradas o los Productos.

En este apartado también podemos desactivar los colores y las fuentes por defecto de Elementor para que se hereden del tema que estemos utilizando.

Ajustes generales en Elementor
Ajustes generales en Elementor

El segundo apartado, Estilo, ya no tiene uso en Elementor 3, ya que sus opciones se han incorporado dentro del propio constructor de páginas.

Y el tercer apartado, Avanzado, nos permite configurar algunos ajustes especiales, que normalmente no tocaremos a no ser que haya algún problema de compatibiliad.

Cómo funciona Elementor en WordPress

Al crear una nueva página veremos en la parte superior un botón con el texto «Editar en Elementor», que servirá para maquetar nuestra página con Elementor en lugar de con el editor por defecto.

Botón de Editar con Elementor al editar una página.

Consejo: Es recomendable ponerle un nombre a la página y guardarla como borrador antes de darle a Editar con Elementor para evitar problemas.

Una vez le damos al botón de Editar con Elementor, nos aparecerá una nueva página de edición, con una barra lateral izquierda y la página que estamos editando a la derecha:

Constructor de páginas de Elementor 3
Constructor de páginas de Elementor 3

Podemos empezar haciendo click en el botón + para añadir una sección o hacer click en el icono de carpeta para añadir una de las plantillas prediseñadas que comentábamos en uno de los apartados anteriores.

Si optamos por la segunda opción, nos saldrá una ventana modal en la que podremos elegir qué plantilla* queremos insertar.

Biblioteca de plantillas de Elementor
Biblioteca de plantillas de Elementor

*Las plantillas Pro solo están disponibles para la versión de pago.

Al hacer click sobre una de las plantillas, podremos previsualizarla y, en caso de querer añadirla a nuestra página, darle al botón Insertar.

Previsualización de una plantilla de página en Elementor
Previsualización de una plantilla de página en Elementor

Una vez le damos a Insertar, se añadirán los diferentes elementos que componen la plantilla y podremos cambiar textos, imágenes y ajustar lo que necesitemos.

Editando una plantilla de Elementor
Editando una plantilla de Elementor

Si en lugar de una plantilla le damos a añadir una sección, nos dará la opción de elegir entre diferentes estructuras predefinidas, aunque después podremos modificarla a nuestro gusto, ajustando visualmente los anchos de cada columna y el número de columnas (hasta 10).

Selección de estructura al añadir una sección en Elementor
Selección de estructura al añadir una sección en Elementor

Una vez añadida una sección, si pasamos por encima de la sección, la columna o un elemento nos aparecerán diferentes iconos para seleccionarla y personalizarla.

Sección de Elementor
Sección de Elementor

También podremos utilizar el botón derecho en el elemento que quedamos modificar:

Botón derecho sobre una columna de Elementor
Botón derecho sobre una columna de Elementor
Botón derecho sobre una sección de Elementor

Si hacemos click sobre uno de los símbolos + nos saldrá una barra lateral izquierda con diferentes widgets podemos añadir a la página arrastrándolos dentro de la columna o sección que nos interese.

Añadir un elemento en Elementor
Añadir un elemento en Elementor
Después de añadir un encabezado de Elementor
Después de añadir un encabezado de Elementor

En cada elemento, si nos ponemos encima, veremos un icono azul con un lápiz. Si hacemos click en él, veremos que en la barra lateral izquierda aparecen opciones para ajustar diferentes propiedades de ese elemento:

Editando el contenido de un encabezado de Elementor
Editando el contenido de un encabezado de Elementor

Si cambiamos de pestaña haciendo click en Estilo, podemos cambiar la apariencia del elemento: Tipografía, colores, formas, etc. Dependiendo del elemento nos saldrán unas opciones u otras:

Cambiando el color de un encabezado en Elementor
Cambiando el color de un encabezado en Elementor
Eligiendo la tipografía de un encabezado de Elementor
Eligiendo la tipografía de un encabezado de Elementor
Añadiendo una sombra de texto en Elementor
Añadiendo una sombra de texto en Elementor

Y al hacer click en la tercera pestaña iremos a los ajustes avanzados, entre los que están los márgenes, los efectos de movimiento y la opción de ocultar el elemento en Escritorio, Tablet o Móvil en caso de que queramos:

Pestaña "Avanzado" al editar un elemento con Elementor
Pestaña «Avanzado» al editar un elemento con Elementor

Comparativa: Elementor vs Divi vs Visual Composer

Vamos a hacer una comparativa de rendimiento entre Elementor y dos de los maquetadores visuales más conocidos: Divi Builder, que se utiliza en el theme Divi y Visual Composer (WpBakery), que podemos encontrar en la mayoría de themes de ThemeForest.

Instalación limpia con Astra, utilizando Gutenberg:

Como referencia vamos a tomar una instalación limpia de WordPress a la que añadiremos el theme Astra y en la que crearemos una página sencilla con Gutenberg:

Instalación limpia de WordPress con Astra

Resultado en Page Speeds:

Resultados en Page Speed – Versión móvil
Resultados en Page Speed – Versión de ordenador

Añadimos Elementor

Como todos los constructores visuales, la velocidad de carga será algo peor por su uso, aunque sigue siendo de los constructores más ligeros a día de hoy, veamos cómo incluye.

Creamos la misma página en Elementor para comparar los resultados y vemos que en Page Speed la puntuación baja 34 puntos en móvil y 17 en ordenador al usar este maquetador:

Resultados de Page Speed en móvil al añadir Elementor
Resultados de Page Speed en móvil al añadir Elementor
Resultados de Page Speed en ordenador al añadir Elementor
Resultados de Page Speed en ordenador al añadir Elementor

Por eso es importante que solo utilicemos un maquetador visual en páginas y no en contenido recurrente como las entradas y sería recomendable optimizar nuestro sitio web para reducir este impacto.

Si desactivamos Elementor y nos vamos a editar la página veremos que nos sale un aviso:

Editando una página al desactivar Elementor
Editando una página al desactivar Elementor

Si le damos a Solucionar y le indicamos que lo convierta en bloques, nos adapta el contenido de vuelta al editor de WordPress:

Después de hacer click en solucionar tras desactivar Elementor
Después de hacer click en solucionar tras desactivar Elementor

Con algunos elementos es posible que no detecte bien algún elemento, pero nos da la opción de convertirlo al formato del editor de WordPress y no nos aparece ningún shortcode o código raro.

Cambiamos Elementor por Visual Composer

Ahora le toca su turno a Visual Composer o WpBakery, el maquetador visual por defecto de la mayoría de themes de ThemeForest.

Aunque no es lo habitual, vamos a ver el constructor por separado:

Resultados en la versión móvil de Page Speed al cambiar a Visual Composer
Resultados en la versión ordenador de Page Speed al cambiar a Visual Composer
Resultados en la versión ordenador de Page Speed al cambiar a Visual Composer

Vemos que respecto a Elementor la versión responsive baja otros 8 puntos, mientras que la versión de ordenador se reduce 7 puntos menos.

La versión de ordenador es más fácil de optimizar que la de móvil, por lo que nos interesará sobre todo el primer dato en estos casos.

Si en lugar de usar Visual Composer por separado instalamos un theme de ThemeForest que lo incorpore, los resultados son mucho peores. Por ejemplo en el caso de The7 junto con Visual Composer:

Resultados en la versión móvil de Page Speed al cambiar a The7 + Visual Composer
Resultados en la versión móvil de Page Speed al cambiar a The7 + Visual Composer
Resultados en la versión ordenador de Page Speed al cambiar a The7 + Visual Composer
Resultados en la versión ordenador de Page Speed al cambiar a The7 + Visual Composer

¡ThemeForest en estado puro! Todavía 19 puntos menos que solo con Visual Composer en móvil y 23 en ordenador.

Y ahora viene lo interesante y uno de los motivos por los que no usar este maquetador visual. Al desactivar Visual Composer vemos que aparte de no reconocer algunos elementos, añade shortcodes antes y después del elemento:

Editando la página después de desactivar Visual Composer
Editando la página después de desactivar Visual Composer

Después de solucionar los bloques recuperamos el texto, pero seguimos teniendo todos los shortcodes que ha añadido Visual Composer por el medio:

Editando una página después de desactivar Visual Composer - Resultado después de darle a Solucionar
Editando una página después de desactivar Visual Composer – Resultado después de darle a Solucionar

Esto para un solo elemento de texto dentro de una sección con una sola columna, imaginaros si fuera un página completa con más secciones, columnas y elementos, una autentica locura…

Cambiamos a Divi

Ahora veamos qué tal se porta Divi en relación a sus otros dos contendientes.

Resultado en la versión móvil de Page Speed tras activar Divi
Resultado en la versión móvil de Page Speed tras activar Divi
Resultado en la versión ordenador de Page Speed tras activar Divi
Resultado en la versión ordenador de Page Speed tras activar Divi

Vemos que al cambiar al theme Divi los resultados son muchísimo peores que en los otros dos casos. Y eso que solo hemos hecho una página con un texto.

Si desactivamos Divi y cambiamos de vuelta a otro tema, Astra en este caso, tenemos la posibilidad de instalar Divi Builder, que sería el maquetador visual por separado. Veamos qué tal se porta a nivel de rendimiento:

Resultado en la versión móvil de Page Speed tras activar Divi
Resultado en la versión móvil de Page Speed tras activar Divi Builder
Resultado en la versión ordenador de Page Speed tras activar Divi Builder
Resultado en la versión ordenador de Page Speed tras activar Divi Builder

Vaya, toda una sorpresa, con Divi Builder no mejoran los resultados, incluso baja un poco la puntuación en móvil, por lo que el maquetador no debe ser ni muy responsive ni muy ligero…

Veamos ahora qué pasa si desactivamos Divi Builder y volvemos a editar la página:

Editando la página tras desactivar Divi / Divi Builder
Editando la página tras desactivar Divi / Divi Builder

De nuevo un precioso poema de código, solo para un texto, multiplicadlo por todos los elementos que pueda tener una landing page por ejemplo y el resultado puede ser un verdadero testamento :/

Conclusiones

Como hemos visto, un maquetador visual como Elementor nos facilita la tarea a la hora de diseñar Landing Pages y páginas que necesiten un toque visual adicional y puede ser más intuitivo para usuarios poco acostumbrados a WordPress.

La desventaja es que cargan más la página que usar el editor por defecto (Gutenberg), por lo que solo es recomendable usarlos para páginas que necesiten ese toque adicional y no usarlos en tipos de contenido recurrente como por ejemplo las entradas del blog.

Como hemos visto Elementor es más limpio a nivel de código que Visual Composer y Divi y al desactivarlo no nos llena las páginas de shortcodes que hacen casi imposible encontrar los elementos que hemos añadido.

Si prefieres dejar la parte de diseño en manos de expertos, tanto si quieres diseñar tu página con Gutenberg como si la quieres diseñar con Elementor, puedes solicitar presupuesto en el apartado de Diseño Web de nuestra web 😉

Deja un comentario

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

[Guía Gratuita]
Cómo hacer Mantenimiento WordPress

¿Te interesa el contenido que estás leyendo? Rellena este formulario para descargar una guía definitiva sobre Mantenimiento en WordPress. (Más de 50 páginas).

Ir arriba
Abrir chat