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 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
En la versión gratuita de Elementor disponemos de los siguientes widgets o elementos:
- 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:
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.
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.
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.
¿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:
Una vez instalado, le damos al botón de Activar:
Al terminar la activación nos saldrá una pantalla de bienvenida:
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.
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.
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:
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.
*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.
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.
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).
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.
También podremos utilizar el botón derecho en el elemento que quedamos modificar:
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.
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:
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:
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:
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:
Resultado en Page Speeds:
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:
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:
Si le damos a Solucionar y le indicamos que lo convierta en bloques, nos adapta el contenido de vuelta al editor de WordPress:
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:
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:
¡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:
Después de solucionar los bloques recuperamos el texto, pero seguimos teniendo todos los shortcodes que ha añadido Visual Composer por el medio:
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.
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:
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:
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 😉
