Elementor 3.10 ha llegado e incluye una variedad de características y herramientas anticipadas que lo ayudarán a alcanzar nuevos niveles de diseño.

Desde elementos anidados hasta nuevas unidades personalizadas en el control de tamaño, esta actualización lo ayudará a desbloquear su creatividad para diseñar sitios web.

Elementos anidados

Los elementos anidados abren un enfoque completamente nuevo para pensar en el diseño de su sitio web. Al usar Flexbox Containers, Nested Elements le permite anidar cualquier elemento dentro de otro. Con elementos anidados, cada elemento (widget o contenedor) se puede anidar infinitamente, de la misma manera que puede anidar un contenedor dentro de otro.

Tan pronto como los contenedores Flexbox se consideren estables, Elementor comenzará a agregar la función de anidamiento a una variedad de widgets ya existentes, incluidos el carrusel, el acordeón, las pestañas y más. Además, se presentarán nuevos widgets anidados como Mega Menu.

Widget de pestañas renovado

El nuevo "widget de pestaña" basado en contenedores lo ayudará a liberar su creatividad y potencial de diseño. Este widget incluye tres mejoras principales en esta nueva versión:

• Pestañas y títulos: ahora es posible ajustar el diseño y la posición de las pestañas para determinar su ubicación en relación con el contenido de la pestaña (a los lados, arriba o abajo). Además, estarán disponibles más opciones de estilo y la posibilidad de agregar iconos en los títulos.
  
• Nueva área de contenido: gracias a los nuevos contenedores Flexbox, todas las áreas de contenido que agregue se convertirán en un contenedor principal donde puede colocar cualquier elemento, hacer ajustes o agregar cualquier contenido que desee.
  
• Nueva configuración receptiva: el widget de pestaña renovado ahora le permitirá definir el punto de interrupción en el que cambiará la pestaña, mostrándose como un acordeón. Esta función te evitará la necesidad de crear contenido diferente para cada dispositivo, teniendo que ocultar/mostrar cada uno de ellos a diferentes resoluciones. Esto también ayudará a mejorar el rendimiento.

El widget de pestañas funciona junto con los contenedores. Para utilizar esta herramienta, debe asegurarse de que tanto Flexbox Container como Nested Elements estén activados. Recuerde que, en realidad, estas dos funciones solo están disponibles en la sección de experimentos, por lo que deben activarse para que estén disponibles. Después de activar esta función, el widget de pestañas reemplazará al existente en el panel de widgets, aunque no afectará las pestañas existentes en su sitio.

Kits, plantillas y bloques, ahora basados en contenedores

Junto con la adición de Flexbox Containers, era necesario que Elementor proporcionara algunos kits y plantillas de sitios web completos basados en contenedores. Estos kits actualizados funcionarán perfectamente con su experimento Flexbox Containers una vez que lo haya habilitado en la configuración de Elementor.

Docenas de los kits de sitios web completos más populares se han adaptado a los nuevos contenedores Flexbox y los encontrará en la biblioteca de plantillas.

Nuevas unidades personalizadas

En este parche también hay una mejora en los controles numéricos que aparecen en casi cualquier elemento de este constructor. Ahora es posible elegir cualquier unidad que desee, mezclar unidades numéricas y ejecutar cálculos de funciones CSS dentro de ellas. La edición de elementos como rellenos, márgenes y tamaño de fuente impacta de forma creativa y única en sus diseños.

En versiones anteriores, solo había un tipo de unidad que podía elegir para todos los lados. Después del parche 3.10, Elementor te permitirá elegir el tipo de unidad que necesitas para cada lado por separado. Por ejemplo, podrá usar px (píxeles) para establecer los valores laterales de un contenedor y % (porcentaje) para definir los lados superior e inferior.

Al seleccionar la opción Personalizada, también puede realizar cálculos para la medición de un valor dentro del campo de entrada de valor, mejorando la capacidad de respuesta y la precisión de su diseño.

Si elige la opción personalizada en los controles de tamaño de tipografía, por ejemplo, podrá utilizar la abrazadera() Función CSS para ajustar el tamaño de su tipografía a diferentes tamaños de dispositivos, o la calcular() Función CSS para calcular y establecer un valor que mezcle unidades, y más.

Los controles de Contenedores, Secciones, Columnas y Tipografía obtendrán opciones personalizadas para ajustar el tamaño de los controles como parte de esta nueva versión. Las nuevas áreas se actualizarán en las próximas versiones.

Deshabilitar las fuentes de Google

Si bien es una fuente popular y estable de fuentes web sobre diseño web, se ha descubierto que Google Fonts, en algunos casos, infringe el RGPD y las normas de privacidad.

Si tiene la intención de mantenerse fuera del riesgo, Elementor le permitirá deshabilitar todas las fuentes de Google de su sitio web. Sin las fuentes de Google, tendrás 7 fuentes a tu disposición con Elementor. En caso de que haya utilizado una fuente de Google en sus diseños y proceda a deshabilitarlos, Elementor predeterminará las disponibles. Considere también que al usar la versión Elementor Pro, puede cargar cualquier fuente que desee con la función Fuentes personalizadas.

Widget de cuenta regresiva: fecha de vencimiento dinámica

Las etiquetas dinámicas son una gran herramienta para automatizar todo tipo de widgets, por ejemplo, botones, títulos, extractos y, desde el lanzamiento de Elementor 3.10, el widget de cuenta regresiva.

Además, podrá entregar un sitio web solicitado por el cliente y dejar que ajuste la fecha de vencimiento en WordPress sin tener que enviarlo al editor, donde podría cambiar su diseño.

Mejoras en Accesibilidad y Rendimiento

Elementor 3.10 trae actualizaciones de accesibilidad y rendimiento. A continuación, presentamos una lista de estas mejoras:

Google Maps de carga diferida

Elementor le permite agregar un widget de Google Map en cualquier lugar donde desee compartir diferentes ubicaciones. Con esta mejora, los mapas se cargarán después de la carga de la página, por lo que esta carga inicial será más rápida que nunca.

Lazy loading imágenes con tamaños personalizados

Aunque la carga diferida de imágenes ha sido posible durante un tiempo, ahora también será posible configurar la carga diferida para imágenes con tamaños personalizados en su biblioteca de medios.

Controlar la precarga de videos autohospedados

Los videos también obtienen su propia carga diferida en Elementor 3.10. Este tipo de contenido multimedia marca una gran diferencia en cuanto a los tiempos de carga de cualquier página, incluso más que las imágenes. Ahora es posible que elija cuándo se cargará este contenido, lo que permite que su sitio web cargue videos alojados automáticamente cuando los usuarios interactúan con ellos. Tenga en cuenta que los enlaces externos (como YouTube, Vimeo y otros) no tendrán la capacidad de carga diferida.

Pensamientos finales

Elementor 3.10 desbloquea una amplia variedad de herramientas para mejorar su creatividad y aumentar el rendimiento de su sitio web. El nuevo widget de pestañas que aprovecha la nueva capacidad de elementos anidados permitirá a los diseñadores crear nuevos elementos interactivos con solo arrastrar y soltar. La activación del experimento Flexbox Container desbloqueará estas funciones junto con un conjunto de kits basados en contenedores incluidos con Elementor Pro y listos para usar.