Elementor 3.26 impulsa el diseño dinámico y mejora el rendimiento web

La nueva versión Elementor 3.26 llega con una propuesta sumamente interesante: impulsar el diseño dinámico y acelerar el rendimiento de los sitios web con optimizaciones de CSS y mejoras en la estructura del DOM. Según informes, también introduce funcionalidades como la detección de AdBlock y la posibilidad de unificar imágenes de producto con ayuda de la IA. En esta nota, exploraremos las novedades que buscan agilizar nuestro proceso de desarrollo y potenciar la experiencia de cada visitante.

Diseño dinámico con Off-Canvas y Loop Grids

Una de las grandes incorporaciones es la funcionalidad Off-Canvas para los Loop Grids en la versión Pro. Según la nota de prensa, ahora es posible añadir el widget Off-Canvas directamente en plantillas de Loop Grid, facilitando la creación de experiencias interactivas sin salir de la misma página. Esto resulta muy útil en catálogos de productos, blogs, y hasta listados de servicios.

De acuerdo con la fuente, se pueden disparar estos Off-Canvas desde cualquier campo de enlace disponible, por ejemplo en un botón, un encabezado o una imagen. Así, el usuario puede ver detalles adicionales, como descripciones extensas o formularios de contacto, sin tener que navegar a otra URL. Este enfoque ayuda a mantener la atención del visitante y reducir la tasa de rebote.

La ventaja principal radica en su flexibilidad, ya que el contenido que se muestra en el Off-Canvas se conecta dinámicamente a cada ítem del Grid. Esto permite a los propietarios de un ecommerce, por ejemplo, exhibir información detallada de cada artículo, de manera personalizada, y agilizar posibles compras con un sistema de “vista rápida”. Para más consejos sobre diseño, revisa nuestra guía interna de Elementor.

Sitios más rápidos con optimizaciones de CSS y DOM

Según informes, el equipo de Elementor ha puesto la velocidad de carga y la eficiencia en primer plano. Se han realizado ajustes inteligentes en el CSS, de manera que los estilos para carruseles (Swiper) solo se cargan cuando realmente se usan. Esto representa un ahorro de más de 26 KB de código en páginas que no requieran widgets de carrusel, resultando en tiempos de carga más veloces.

Además, se ha refinado el manejo de los archivos de CSS para reducir su tamaño. Con ello, cada página optimiza su tiempo de respuesta, mejorando la experiencia general del usuario y contribuyendo a una mejor calificación en herramientas de auditoría web como Lighthouse. Esta labor de limpieza también simplifica el mantenimiento, al disponer de estilos más organizados y fáciles de depurar.

Otro cambio significativo apunta al DOM. Un DOM más ligero implica tiempos de renderizado más ágiles y un mejor rendimiento general. Con esta versión 3.26, se eliminan envoltorios innecesarios y se sustituyen elementos ocultos con etiquetas más eficientes, sin comprometer la accesibilidad. Gracias a ello, la estructura HTML queda más limpia y reduce el riesgo de penalizaciones por parte de buscadores.

[Pro] Detección de AdBlock para Popups

En la versión Pro, Elementor introduce una nueva opción de detección de AdBlock. Según la nota de prensa, esta funcionalidad permite mostrar popups específicos cuando un usuario visita la página con bloqueadores de anuncios activos. Es ideal para comunicar la importancia de desactivar estos bloqueos o explicar al visitante por qué deberían habilitar ciertos contenidos.

Se ha añadido además una etiqueta dinámica llamada Reload Page, la cual posibilita recargar la página después de pulsar un botón en el popup. Con esta característica, si el visitante decide desactivar AdBlock, podrá ver los cambios inmediatamente tras la recarga. Según informes, esta novedad proporciona un método amigable de concienciar a los usuarios sin interrumpir su navegación.

Unificar imágenes de producto con IA

Los sitios de WooCommerce también salen beneficiados con Elementor 3.26, gracias a la función Unify Product Images, que emplea inteligencia artificial para dar un aspecto más profesional a las fotos de tus productos. Según informes, la IA ajusta la posición de cada imagen, añade sombras sutiles y te permite escoger el color de fondo para generar coherencia visual.

Estos retoques se pueden hacer de forma individual o en lote, ahorrando tiempo a los dueños de tiendas online. La capacidad de elegir la tonalidad de fondo garantiza que cada producto coincida con la identidad de marca. Para los emprendedores, esta opción agiliza enormemente la carga de nuevos artículos y mejora la presentación sin requerir un experto en edición fotográfica.

Más novedades en Elementor 3.26

Además de las mejoras mencionadas, la versión 3.26 trae una serie de optimizaciones dirigidas a la accesibilidad y la compatibilidad con diferentes navegadores. Entre ellas, se actualizó el mínimo de Safari a la versión 15.5 para brindar mejor estabilidad y rendimiento. Igualmente, se han hecho ajustes en la representación de bloques de Gutenberg en el front-end, ofreciendo un mayor control visual.

En cuanto a la accesibilidad, se han ajustado atributos y se ha optimizado la navegación por teclado, sobre todo en el uso de carruseles, con el objetivo de cumplir estándares globales y ofrecer una experiencia más inclusiva. Estas mejoras indican que el equipo de Elementor sigue comprometido con crear herramientas útiles para todo tipo de usuarios, impulsando la evolución del diseño web.

En definitiva, Elementor 3.26 fusiona rendimiento, funcionalidad y eficiencia, dotando a los creadores de sitios web con un abanico de herramientas que agilizan el proceso de diseño y mejoran la experiencia del visitante. Desde la implementación de Off-Canvas hasta la detección de AdBlock, esta actualización busca un equilibrio entre estética y operatividad, reafirmando a Elementor como una plataforma en constante evolución.

Fuente: https://elementor.com/blog/elementor-326-off-canvas-loop-grid-performance/


También podría ser de tu interés:

Deja un comentario