Atención, si utilizas Elementor en la web de tu negocio, abre bien las orejas porque ya está aquí la actualización más gorda de los últimos años.
La gente de Elementor acaba de lanzar la versión 4.0 y han metido una modificación en sus nuevas características que cambia por completo las reglas del juego a la hora de crear tu web con este maquetador visual para WordPress.
Te estoy hablando de los llamados elementos atómicos.
Hay una parte de la comunidad que los está poniendo por las nubes y hay otra que se echa las manos a la cabeza con todo este cambio. Así que, como diseñador web, voy a analizarlos a fondo para sacar junto a ti nuestras propias conclusiones.
Índice de contenidos
¿Qué son los Elementos Atómicos en Elementor 4.0?
Para entender de verdad por qué Elementor se ha sacado de la manga este cambio tan radical, lo primero que tenemos que poner sobre la mesa es una verdad incómoda.
Y es que, bajo mi punto de vista, Elementor de un tiempo a esta parte está cambiando su público objetivo.
El antiguo rumbo de Elementor
Hace unos años, la intención de la empresa era vender su licencia Pro a cualquier persona. Daba igual que fuesen la panadera de tu barrio, un abogado o un estudiante. Querían que cualquiera, independientemente de sus conocimientos de diseño, de código o de optimización, pudiera hacerse una web de la forma más rápida posible.
Pero esto ha cambiado por completo.
El nuevo enfoque profesional
Si te fijas bien en todas las decisiones que Elementor están tomando últimamente, se nota a la legua que se están orientando a captar a un usuario mucho más profesional, como diseñadores, desarrolladores o agencias de marketing.
Se empezó a vislumbrar esto hace algún tiempo ya con el cambio de precios de sus planes y se ve ahora con la cantidad de herramientas que tratan de meterte con calzador alrededor del maquetador web (su propio hosting, su IA integrada,etc.)…
Esto son herramientas que pueden resultar jugosas para los que nos dedicamos a esto profesionalmente, pero poco o nada atractivas ni accesibles para el usuario de a pie.
Así que tengo malas noticias para ti si esperabas que Elementor siguiera siendo un juguete para aficionados: ya no se centran en captar a un público generalista; quieren enfocarse en el sector profesional.
Y para convencer a los desarrolladores más reacios, tenían que solucionar de una vez por todas su gran talón de Aquiles histórico: la optimización de código.
Pues bien, aquí es donde entran en juego los elementos atómicos.
¿De verdad los widgets atómicos mejoran la velocidad web y el DOM?
Principalmente los Elementos Atómicos han nacido para solucionar, entre otras malas prácticas de optimización de código, ese error típico que seguro que te ha saltado más de una vez en los test de velocidad de Google: el famoso “reduce el tamaño del DOM”.
¿Y qué es esto del DOM?
Te lo voy a explicar con un ejemplo de a pie para que lo entiendas a la primera, sin usar tecnicismos ni palabras raras.
La analogía de las cajas de regalo
Imagínate que para envolver un regalo metes una caja pequeña dentro de una mediana, la mediana dentro de una grande y la grande dentro de una maleta. Al final, para sacar el regalo, tienes que romper hasta cuatro capas de cartón o de papel.
Un poco absurdo, ¿verdad?
Pues eso es exactamente lo que hacía Elementor hasta ahora en el código de tu web.
Generaba un alto volumen de etiquetas HTML anidadas (capas y capas de cajas innecesarias) para pintar cualquier elemento en pantalla, ya fuera un simple título, un párrafo de texto o un botón. Un código más pesado que una vaca en brazos al que Google le da una pereza tremenda leer (y por el que te resta puntos en su test de velocidad).
Un código mucho más limpio
Los Atomic Elements de Elementor nacen precisamente para corregir este problema. Lo que aportan estos nuevos widgets es un código muchísimo más limpio. Se cargan de un plumazo todas esas capas de cajas innecesarias para que la web esté mejor optimizada a todos los niveles.
Y ojo, que esto no solo mejora un pelín más la velocidad (que a lo mejor a nivel usuario es algo que ni percibes), sino que nos da una flexibilidad brutal para optimizar las versiones móviles de los diseños que creemos.
Ahora vas a poder cambiar prácticamente cualquier opción o atributo de forma independiente en tablet o teléfono móvil.
Cosas tan sencillas como poner diferentes colores de fondo según la pantalla en un texto o un botón, que antes era un auténtico dolor de cabeza si no sabías de código CSS personalizado, ahora se hacen con un par de clics desde la propia interfaz gracias a estos nuevos widgets de los elementos atómicos.
¿Cómo activar los nuevos Elementos Atómicos en WordPress?
Si ya has actualizado a Elementor Pro 4.0, la primera vez que abras el maquetador te saltará un mensaje flotante preguntándote si quieres activar esta nueva experiencia. Si aceptas, ya puedes empezar a utilizar los elementos atómicos.
Ahora bien, si le diste a rechazar de primeras o no te apareció, no te preocupes, se activa así de fácil:
- Entra al escritorio de tu WordPress.
- Ve a Elementor > Ajustes.
- Haz clic en la última pestaña llamada Editor Atómico.
- Pulsa el botón de Activar (o “Probar la nueva experiencia”).
Una vez listos, verás una nueva sección en el panel lateral con todas las herramientas y widgets que corresponden a esta tecnología.
¿Qué widgets atómicos incluye la versión 4.0?
De momento, la gente de Elementor ha ido a lo más básico que se utiliza en casi cualquier web y que más necesitaba optimizar ese código:
- Bloques DIV y Flexbox Containers (con mejor optimización de código).
- Encabezados, párrafos y texto.
- Imágenes e imágenes SVG (iconos).
- Botones, separadores y pestañas.
- Vídeos (tanto de YouTube como normales).
Además, incluye el apartado de widgets para crear Formularios Atómicos.
Ojo con esto, amigo/a: ya no vienen tan prediseñados como el widget de formulario clásico de Elementor Pro.
Aquí puedes poner cada campo exactamente en el sitio que tú quieras. Te da una personalización extrema, pero claro, no es moco de pavo: la curva de aprendizaje es más compleja.
El gran cambio en la interfaz: General, Estilo e Interacciones
Si arrastras un encabezado atómico para compararlo con el antiguo, verás que las pestañas de toda la vida (Contenido, Estilo y Avanzado) han pasado a mejor vida. Ahora se dividen en tres secciones muy claras:
Pestaña General
Aquí es donde sigues metiendo el texto o configuras los ajustes más básicos del widget, como las etiquetas HTML (H1, H2, H3…). En esta parte la cosa no cambia demasiado respecto a lo que ya conocías.
Pestaña Estilo
El verdadero cambio radical. Ahora incluye la opción de añadir clases CSS directamente y despliega un arsenal de opciones de disposición, espaciado, tamaño o posición entre otras muchas propiedades avanzadas para personalizar estos elementos atómicos como tú quieras.
Son propiedades CSS puras integradas de forma visual en el maquetador. Si conoces estos conceptos, vas a hacer virguerías sin tocar una sola línea de código.
Pestaña Interacciones
Esta pestaña está dedicada en exclusiva a añadir animaciones y efectos de entrada dependiendo de lo que haga el usuario. Podrás activar efectos al cargar la página, al hacer scroll o al hacer clic en un elemento concreto.
Para que veas la potencia de la separación de estilos de la que te hablaba antes:
Si seleccionas la vista de tablet en el maquetador y le cambias el color al título (por ejemplo, a verde) y en escritorio lo dejas en rojo, Elementor ahora trata las características de forma totalmente individual.
Antes, para hacer algo así con ciertas opciones, te tocaba picar código CSS sí o sí porque el maquetador se lo pasaba por el forro.
Mi opinión sobre los Elementos Atómicos de Elementor
Tengo sentimientos encontrados con todo esto, no te voy a engañar.
A nivel profesional y de desarrollo puro y duro, creo que es un acierto total. Te da una flexibilidad y una optimización que los diseñadores y agencias vamos a agradecer muchísimo en el día a día de nuestros proyectos para clientes.
Pero (y aquí viene el gran “pero”), creo que con esto se pierde un poco la esencia de por qué nació Elementor.
Esta herramienta nació para hacer diseños de la forma más fácil y visual posible. Pero con esta interfaz atómica, el proceso de diseño se vuelve algo más lento y se llena de opciones técnicas que la gente de a pie no va a entender ni de coña. Es un cambio de paradigma total.
Así que… mi conclusión es la siguiente:
- ¿Eres un profesional que busca rendimiento máximo, flexibilidad total y quiere aplicar reglas CSS sin salir de la interfaz? Esta actualización te va a encantar.
- ¿Eres un usuario que solo quería arrastrar cuatro cosas para tener su web lista el domingo por la tarde para irse a tomar el aperitivo? Se te va a hacer cuesta arriba, porque hay demasiadas opciones técnicas.
Es el precio a pagar por tener una web mejor optimizada: aumenta la curva de aprendizaje, te va a tocar currar un poco más al principio, pero el resultado final a nivel interno es infinitamente mejor.
Y ahora cuéntame tú en los comentarios: ¿has actualizado ya a la versión 4.0? ¿Te asusta tanto control técnico o eres de los que celebra la muerte del DOM pesado? ¡Nos leemos abajo!
