¡Hola, menda!

Ya está aquí por fin la ansiada actualización de Elementor 3.0 cargada de novedades.

Hace más de 2 años desde la última gran actualización de Elementor y teníamos muchísimas ganas de poder disfrutar de novedades. 

Además, ya iba siendo hora de mejorar algunos aspectos de nuestro constructor visual favorito.

Pero no adelanto acontecimientos y vamos por partes.

Ahora sí, vamos con las novedades de esta versión 3.0

Elementor 3.0: buscando ser el mejor sistema de creación web 

Desde la última gran actualización de Elementor, su crecimiento dentro de WordPress ha sido exponencial.

Hace pocos meses se coló en el club de los plugins con más instalaciones activas en el repositorio de WordPress, superando los 5 millones de sitios web utilizando la versión gratuita de Elementor.

Y lo hizo solo 4 meses después de haber alcanzado los 4 millones.

Debido a este gran crecimiento, la obsesión del equipo de desarrollo de Elementor 3 ha sido trabajar en mejorar y orientar todo el proceso de creación de sitios web con Elementor hacia un flujo más optimizado.

¿Su objetivo final? Convertir a Elementor en el mejor sistema de creación de páginas web.

Los 3 grandes avances de Elementor 3.0

Aunque luego veremos de manera independiente qué novedades traen las versiones gratuita y PRO de Elementor, tenemos que entender esta versión 3.0 como una actualización global.

Todo gira en torno a la idea de optimizar y simplificar el trabajo desde el punto de vista del creador web.

Así que han puesto el foco en 3 grandes bloques:

• Rehacer la parte de estilos para poder crear un auténtico sistema de diseño en nuestros proyectos web.
• Mejorar la organización y estructura del maquetador de temas (Theme builder) con una propuesta mucho más visual y optimizada.
• Optimizar Elementor a nivel de código e infraestructura para conseguir grandes mejoras de rendimiento en nuestras páginas web.

Novedades de Elementor 3 en vídeo

Si además de leerme quieres ver algunas de estas novedades, puedes echarle un ojo al vídeo que hemos publicado sobre las novedades de Elementor en YouTube.

Mejoras en la versión gratuita de Elementor 3

De los 3 grandes bloques de novedades de esta versión, 2 de ellos son para la versión gratuita.

Tanto la parte de ajustes globales de diseño como toda la optimización de rendimiento son mejoras incluidas en la versión core del plugin.

Y, como siempre, la puedes descargar del repositorio de WordPress.

También se han incluido muchos ajustes y cambios menores.

Puedes revisarlas en los repasos a las actualizaciones de Elementor que hace el menda Ángel Zinsel (tienes el reporte de la 3.0, 3.0.1 y 3.0.2).

Mejoras en Elementor PRO 3.0

La principal mejora en la versión PRO de Elementor viene con el rediseño de la parte del Maquetador de temas.

Obviamente hay mucho trabajo detrás de esa actualización y se incluyen muchos otros pequeños cambios.

Si tienes curiosidad, puedes ver el reporte de las actualizaciones 3.0 y 3.0.1

¿Dónde están las opciones del sistema de diseño en Elementor 3? ¿Y el nuevo theme builder?

Tanto si eres nuevo como si ya llevas tiempo trabajando con Elementor, es posible que no localices dónde gestionar los nuevos bloques.

Principalmente el theme builder, ya que el acceso habitual (desde Plantillas -> Theme Builder) aún está disponible por retrocompatibilidad.

A mí me hizo volverme un poco loco esto.

Lo mejor para acceder a todas las novedades es que abras cualquier página o plantilla con el editor de Elementor.

Ahora haz click en el menú hamburguesa de la parte superior izquierda

Y después, elige la opción que quieras:

• Ajustes del sitio para gestionar toda la parte de estilos y el sistema de diseño.
• Maquetador de temas para acceder al theme builder

Sí, aún hay que darle una vuelta a las traducciones para unificar criterios.

Recuerda que la parte del Maquetador de temas es exclusiva de la versión de Elementor PRO.

¿Qué permite el sistema de diseño de Elementor 3?

Una vez accedemos a la parte de Ajustes del Sitio, Elementor nos despliega un listado de opciones dividido en 3 grandes bloques: diseño del sistema, estilos del tema y ajustes.

Vamos a ver qué incluye cada uno de ellos

Diseño del Sistema (¿O será sistema de diseño?)

La gran novedad. 

Desde aquí gestionamos los nuevos colores y tipografías globales.

Esta nueva opción de Elementor 3 nos permite crear nuestro propio sistema de diseño y definir estilos de colores y textos que podremos asignar a cada elemento de nuestro sitio web.

¿Dónde está la ventaja de este cambio? 

Poder aplicar estilos globales nos va a permitir optimizar muchísimo nuestro flujo de trabajo ya que, al hacer cualquier cambio, éste se aplicará de manera automática en cualquier punto de la web que esté conectado a ese estilo global.

Si te dedicas a crear sitios web y alguna vez has tenido que aplicar un rebranding a un cliente que ha cambiado su color corporativo… sabes de lo que te hablo.

Poder cambiar de golpe todas las apariciones de un color es algo que te puede ahorrar, literalmente, horas de trabajo.

Y, siguiendo el mismo criterio, las fuentes globales nos permiten definir estilos genéricos de tipografía, tamaño, etc para poder aplicarlos a nuestro diseño desde un único lugar.

A partir de ahora, responder la pregunta de ¿Y podríamos ver cómo queda usando esta otra tipografía? No se va a traducir en un dolor de cabeza.

Lo que nos queda es empezar a trabajar en estos automatismos y adaptar (si los tienes) los diseños base que utilizas en tus proyectos para aprovechar toda esta potencia.

Estilo del tema

Esta parte se mantiene sin mucha novedad frente a versiones anteriores.

Desde aquí podremos editar los estilos por defecto de:

• Tipografías
• Botones
• Imágenes
• Campos del formulario

Vale.

Creo que ya sé lo que estás pensando.

Al menos, la primera pregunta que me hice al ver esto, fue:

¿Qué diferencia hay entre los ajustes de tipografía en los estilos del tema y las tipografías globales?

La respuesta es sencilla:

los ajustes de tipografía que vas a encontrar aquí están asociados a etiquetas HTML concretas (encabezados h1, h2, h3, párrafos, enlaces, etc).

Mientras que las fuentes globales son combinaciones genéricas de estilos.

De hecho, los ajustes de tipografía que tenemos en este apartado se pueden (y se debe) asociar las fuentes globales.

Ajustes

En este apartado se engloban el resto de ajustes generales:

• Identidad del sitio: para definir el logo, favicon y el título y descripción de WordPress.
• Fondo: estilos del fondo de la web.
• Disposición: ajustes de la estructura de la web (ancho del contenido, espacio entre widgets por defecto, etc).
• Caja de luz: hace poco renovaron toda la librería con la que se gestionaban los lightbox (cajas de luz) de las imágenes en Elementor. Y desde aquí puedes editar todos los ajustes de estilo.
• CSS personalizado: por si necesitas añadir algún código CSS a nivel global y no estás utilizando un tema hijo.
• Ajustes adicionales: para otras configuraciones de Elementor.

Primeros pasos con el sistema de diseño

?? Creo que esto se merece un artículo a fondo sobre sistemas de diseño.

Si te interesa, ya sabes que puedes enviarnos tu sugerencias o dejar comentarios y nos ponemos con ello.

En cualquier caso, si estás empezando en el proceso de utilizar un sistema de diseño, te dejo los primeros pasos que deberías seguir:

• Lo primero es definir la paleta principal de colores globales. Puedes elegir los 4 colores básicos que te propone Elementor (principal, secundario, texto y acento). Una buena herramienta para esto es coolors.co
• Ahora, desde cualquier selector de color de Elementor podrás seleccionar estos colores para que se queden vinculados.
• Además, podrás añadir otros colores a tu sistema de diseño y asignarle el nombre que quieras.
• Desde el momento en que seleccionas uno de los colores globales, al hacer cualquier cambio lo verás reflejado en todos aquellos puntos del diseño donde lo hemos aplicado.
•  Este mismo proceso está disponible con las tipografías: elegimos los ajustes tipográficos de manera global (familia, tamaño, etc) y lo aplicamos a lo largo de todo el diseño.

Lo maravilloso de esto es que, en cualquiera de los casos, si queremos aplicar un cambio solo tendremos que hacerlo una única vez y se aplicará en todas las referencias a ese estilo.

Este proceso, que estaba superado en otros métodos de trabajo, aún estaba verde con Elementor.

Como ves, los cambios en este nuevo sistema de diseño engloban más piezas además de la parte de colores y fuentes globales: desde los estilos de la caja de luz a la identidad del sitio.

Y también la estructura de nuestro sitio web.

El layout, que dicen en inglés.

Lo que nos lleva a la siguiente novedad de Elementor 3.

Novedades en el Maquetador de temas / Theme Builder de Elementor 3

La renovación del Maquetador de temas está orientada a unificar todas las partes de nuestra web en un único sitio en el que poder gestionarlo de manera visual.

Hasta ahora, el Theme Builder mostraba la información utilizando los listados habituales de WordPress.

Ahora, nos vamos a encontrar algo de este estilo:

Así lo cuentan en el blog de Elementor.

No sé qué te parece a ti.

Para mí, mucho más intuitivo y potente que en la versión anterior.

Elementor camina desde hace tiempo hacia un mundo en el que no sea necesario para nada el uso de un tema de WordPress.

No lo han dicho abiertamente, pero desde el lanzamiento de Hello Theme todos los cambios caminan en esa dirección.

Y convergen, además, con la intención de WordPress y el Global Site Editing en el que se está trabajando con Gutenberg.

Una suma de piezas

Desde la cabecera, el pie, las plantillas del blog para nuestras entradas o archivos… hasta las páginas de 404, los resultados de búsqueda o los bloques de contenido.

Cualquier página web realizada con Elementor está construida a partir de piezas globales reutilizables.

El nuevo maquetador de temas nos muestra todas esas piezas en una única pantalla.

Y, además, nos muestra una vista previa de los estilos.

Así, junto con la parte del diseño global tenemos a golpe de vista toda la identidad visual y la estructura de nuestra web.

Una delicia.

El proceso de trabajo con cada plantilla no ha cambiado prácticamente nada:

• Añadimos una nueva plantilla.
• Diseñamos o cargamos un diseño/plantilla.
• Aplicamos las condiciones de visualización.
• Ya lo tenemos listo para ver.

Lo único que ha cambiado ligeramente es cómo añadimos la plantilla. Podemos hacerlo desde el menú de la izquierda (pasando por encima del tipo de plantilla que queremos) o desde la esquina superior derecha:

Mejoras de rendimiento y velocidad con Elementor 3

Sí.

Hay una cosa más.

La optimización de los sitios web desarrollados con Elementor ha sido uno de sus talones de Aquiles en los últimos tiempos.

Puede que sean cambios en los algoritmos de Google o que el código cada vez se haya ido complicando más y más, empeorando el rendimiento.

Pero lo que está claro es que la optimización de velocidad con Elementor es algo que nos preocupa a muchos.

A nosotros. A vosotros. Y también a ellos.

Según palabras de Ben Pines, el rendimiento es una de las métricas en las que siempre han tenido el foco.

Y también la intención de mejorar en esta versión 3.

Voy a serte sincero: aún tengo pendiente dar un repaso intenso todos los cambios de rendimiento que han aplicado.

Pero, según nos indican, han hecho grandes cambios a nivel de código e infraestructura en esta actualización.

Lo que se ha transformado en grandes mejoras de rendimiento.

Cambios en el DOM

Voy a ponerme un poco friki.

Pero poco.

Una de las cosas que han hecho en Elementor 3 es reducir los elementos del DOM, para que así Elementor renderice más rápido el contenido y también a los navegadores (y las arañas de Google) les resute más sencillo de leer.

Hablando en castellano real: han conseguido usar menos código para hacer lo mismo.

Esto mejorará los análisis de Google Page Speed (aunque no deberían obsesionarte) y también la experiencia de los usuarios de nuestra web.

¿Actualizo a Elementor 3?

Si has llegado hasta aquí, veo que tienes un enorme interés en Elementor 3 y estás deseando ponerte a actualizar.

Como te decía al principio, mi recomendación es esperar unas semanas.

De hecho, yo solo he actualizado en un par de sitios de pruebas para hacer esta entrada.

Cómo actualizar Elementor 3

Si aún así quieres actualizar (o ya has actualizado y tienes algunos problemas), te recomiendo echarle un vistazo a este vídeo de Alberto Perojo en el que te cuenta su experiencia y útiles consejos:

Problemas conocidos

En Elementor son plenamente conscientes de que aún queda mucho trabajo por hacer en esta versión 3.

Tanto, que incluso han preparado una página de “errores conocidos de Elementor 3” tanto de su código como de compatibilidad con otros plugins.

Antes de actualizar, échale un vistazo para ver si tus otros plugins están en la lista de afectados.

Plugins del universo Elementor compatibles con Elementor 3.0

Por nuestra parte, ya sabes que en nuestro observatorio Elemendas nos pasamos el día peinando y analizando las actualizaciones de la mayoría de plugins del ecosistema de Elementor.

Así que también hemos preparado una página para que estés al tanto de los plugins compatibles con Elementor 3 que ya han sacado actualizaciones.

¿No trae Elementor 3.0 nuevos widgets?

Madre mía.

Pero, ¿todavía quieres más cosas?

No, de momento no hay widgets nuevos en el horizonte.

En esta versión 3 de Elementor se han centrado en mejorar el core.

El núcleo de Elementor.

Es algo que ya nos dijo Ben Pines en la Meetup de Elementor Madrid en febrero: el objetivo es hacer un ecosistema potente sobre la mejor base posible.

Y, en cierta medida, delegar la creación de esos nuevos widgets y funcionalidades en otros desarrolladores dentro del ecosistema de Elementor.

Más novedades de Elementor 3.0

Aún así, no creo que aquí se queden las novedades de Elementor 3.

Buscan conseguir que los creadores webs construyan webs más consistentes, rápidas y mejores.

Y seguro que tienen algunos ases en la manga:

• ¿Tal vez una importación de plantillas global?
• ¿Tal vez poder copiar entre sitios?
• ¿Tal vez algo relacionado con la nube?

Quién sabe.

Mientras, seguiremos disfrutando de estas mejoras y estaremos atentos a las nuevas.

Si aún no estás en nuestra newsletter y utilizas Elementor, deberías apuntarte para no perder detalle.

Cada lunes. En tu correo electrónico. A las 10:15.