Elementor y Elementor Pro 3.10 incluyen nuevas capacidades de diseƱo que desbloquearĆ”n un mundo completamente nuevo de creatividad cuando se trata de diseƱar tus sitios web con Elementos Anidados, e introduce una nueva unidad personalizada en los controles de tamaƱo que te permitirĆ” alcanzar un mayor nivel de precisiĆ³n al diseƱar tus sitios web. Estas versiones tambiĆ©n incluyen una nueva biblioteca basada en contenedores y mejoras de rendimiento.

Nuevos Elementos Anidados Que ElevarƔn el DiseƱo de Tu Sitio Web

Los Elementos Anidados desbloquean una forma completamente nueva de conceptualizar el diseƱo de tu sitio web. Con los Elementos Anidados, puedes colocar cualquier elemento dentro de otro, aprovechando el poder de los Contenedores Flexbox. Similar a cĆ³mo puedes colocar un Contenedor dentro de otro y anidarlos infinitamente, con los Elementos Anidados, puedes colocar cualquier elemento (widget o contenedor) dentro de otro.

Como los Contenedores Flexbox son oficialmente estables, en las prĆ³ximas versiones, introduciremos la capacidad de Anidamiento en varios widgets existentes, como el Carrusel, AcordeĆ³n, PestaƱas y mĆ”s. TambiĆ©n introduciremos nuevos widgets Anidados, como el Mega MenĆŗ.

Presentamos el Renovado Widget de PestaƱas – El primer widget anidado de Elementor, desbloqueando flexibilidad de diseƱo

Con el nuevo widget de PestaƱas, podrĆ”s desatar tu creatividad en el diseƱo y alcanzar un alto nivel de sofisticaciĆ³n. El nuevo widget de PestaƱas estĆ” basado en contenedores e incluye tres mejoras principales en comparaciĆ³n con el widget de PestaƱas original:

  • PestaƱas y TĆ­tulos – Usando el nuevo widget de PestaƱas, podrĆ”s ajustar el diseƱo y la posiciĆ³n de las pestaƱas para determinar dĆ³nde se ubican en relaciĆ³n con el contenido de la pestaƱa – en la parte superior, inferior o en uno de sus lados. AdemĆ”s, tendrĆ”s mĆ”s opciones de estilo, incluyendo la capacidad de agregar Ć­conos al tĆ­tulo de la pestaƱa.
  • Nueva Ɓrea de Contenido – Con el poder de los Contenedores Flexbox, el Ć”rea de contenido de cada PestaƱa se convertirĆ” en un contenedor principal, en el que podrĆ”s colocar cualquier elemento, ajustar su diseƱo y presentar cualquier contenido que desees – como el lienzo en blanco del Editor.
  • Nueva ConfiguraciĆ³n Responsiva – Para mejorar el diseƱo y la experiencia del usuario segĆŗn el tamaƱo del dispositivo, puedes elegir el punto de quiebre en el que la PestaƱa se mostrarĆ” automĆ”ticamente como un AcordeĆ³n. Eso significa que no tendrĆ”s que crear contenido diferente para cada dispositivo, lo que tambiĆ©n mejora el rendimiento.

Como el widget de PestaƱas estƔ basado en contenedores, para usarlo en tu sitio web necesitarƔs asegurarte de que los experimentos de Contenedor Flexbox y Elementos Anidados estƩn activados. Una vez activados, el nuevo widget de PestaƱas reemplazarƔ automƔticamente al existente en el panel de widgets (esto no afectarƔ el diseƱo de las pestaƱas existentes en tu sitio web).

Nuevas Unidades Personalizadas – Elige cualquier Unidad que Quieras, Incluyendo Funciones MatemĆ”ticas CSS

Los controles numĆ©ricos en el Editor estĆ”n recibiendo una actualizaciĆ³n, y ahora puedes elegir cualquier unidad que desees, mezclar unidades numĆ©ricas y ejecutar cĆ”lculos de funciones CSS dentro de ellas. Muchos elementos en el Editor incluyen opciones para tamaƱo, como relleno y mĆ”rgenes, tamaƱo de fuente y mĆ”s. Usar estas unidades de tamaƱo sabiamente puede tener un impacto positivo en la precisiĆ³n del diseƱo y la capacidad de respuesta del sitio web.

Anteriormente, si estabas ajustando el relleno o los mĆ”rgenes, por ejemplo, tenĆ­as que elegir uno de los siguientes tipos de unidad: PX, EM, REM, %, o VW. Con esta actualizaciĆ³n, tambiĆ©n podrĆ”s elegir la opciĆ³n personalizada, para ser mĆ”s especĆ­fico con tus elecciones de unidad. Por ejemplo, podrĆ­as elegir PX para los lados y % para la parte superior e inferior. AdemĆ”s, con esta actualizaciĆ³n, las etiquetas de unidad se han movido a una lista desplegable, para acomodar la nueva opciĆ³n personalizada.

Elegir la opciĆ³n Personalizada tambiĆ©n te permitirĆ” ejecutar cĆ”lculos para la mediciĆ³n de un valor dentro del campo de entrada de valor, de esa manera, podrĆ”s lograr una mayor precisiĆ³n en el diseƱo y soporte responsivo.

Por ejemplo, al elegir la opciĆ³n personalizada en los controles de tamaƱo de tipografĆ­a, podrĆ”s usar la funciĆ³n `clamp()` de CSS para ajustar el tamaƱo de la tipografĆ­a a diferentes tamaƱos de dispositivos, o la funciĆ³n `calc()` de CSS para calcular y establecer un valor que mezcle unidades, y mĆ”s.

Como parte de esta versiĆ³n, los siguientes controles de tamaƱo obtendrĆ”n opciones personalizadas:

  • Contenedores, Secciones y Columnas – en todas partes posibles, incluyendo ancho personalizado, borde, etc.
  • Controles de tipografĆ­a – altura de lĆ­nea, espaciado de letras y espaciado de palabras.

Ɓreas adicionales tambiƩn se actualizarƔn en el futuro.

Kits de Sitios Web Completos Basados en Contenedores, Plantillas y Bloques

Con los Contenedores Flexbox marcados como beta, haciĆ©ndolos estables y listos para usar, era importante proporcionarte kits de sitios web completos basados en contenedores y plantillas. En las Ćŗltimas semanas, el equipo de la Biblioteca ha trabajado para crear una biblioteca completa basada en contenedores, para que puedas iniciar el proceso de creaciĆ³n y diseƱo de tu sitio web, al habilitar el experimento de Contenedor Flexbox, utilizando las tendencias de diseƱo mĆ”s actualizadas.

Ahora, cuando actives el experimento de Contenedor Flexbox en tu sitio web, tendrƔs una biblioteca completamente nueva de kits y plantillas. Las actualizaciones tambiƩn incluyen docenas de los kits de sitios web completos y plantillas de pƔgina mƔs populares que se han convertido del diseƱo basado en secciones a Contenedores Flexbox, asƭ como nuevos Kits de Sitios Web y Plantillas de pƔgina.

Con la nueva biblioteca, hay dos actualizaciones adicionales notables. La primera es que introdujimos algunas mini-tiendas, un kit de sitio web completo de una pĆ”gina para sitios web de comercio electrĆ³nico, incluyendo botones de PayPal y Stripe para la recolecciĆ³n de pagos. La segunda es que todos los Bloques anteriores (como Contacto, 404, etc.) han sido reemplazados con diseƱos completamente nuevos.

[Pro] Fecha de Vencimiento DinƔmica en el Widget de Cuenta Regresiva

El Widget de Cuenta Regresiva, una gran herramienta para crear FOMO y aumentar la conversiĆ³n, ahora tiene un control de etiqueta dinĆ”mica en la fecha de vencimiento. Con esta actualizaciĆ³n, podrĆ”s usar campos personalizados nativos de WordPress, asĆ­ como campos personalizados de ACF y PODS para poblar dinĆ”micamente la fecha de vencimiento en cada pĆ”gina.

Con los nuevos controles de etiquetas dinĆ”micas, podrĆ”s usar el widget de Cuenta Regresiva en la plantilla de PublicaciĆ³n ƚnica, por ejemplo, y agregar un campo personalizado en WordPress a cada una de tus publicaciones que incluya la fecha de vencimiento que deseas incluir en cada publicaciĆ³n. Esto tambiĆ©n te permitirĆ” entregar un sitio web a un cliente, permitiĆ©ndole actualizar la fecha de vencimiento en WordPress, sin enviarlo al Editor, donde podrĆ­a alterar tu diseƱo.

Nuevo: Deshabilitar Google Fonts Completamente

Google Fonts, una popular biblioteca de fuentes en lĆ­nea, te permite usar una variedad de fuentes en tu sitio web. Sin embargo, en eventos recientes se ha encontrado que Google Fonts, en algunos casos, viola las regulaciones de GDPR y privacidad.

Para eliminar este riesgo, Elementor te permite eliminar todas las fuentes de Google de tu sitio web. Al deshabilitar Google Fonts, ya no podrĆ”s usar la biblioteca de fuentes en lĆ­nea de Google en el Editor, lo que reducirĆ” el nĆŗmero de fuentes disponibles para ti en el Editor a 7 fuentes. Si ya has usado una fuente de Google en tu sitio web, pero decides deshabilitar Google Fonts con esta actualizaciĆ³n, todas las fuentes en tu sitio web se cambiarĆ”n a una de las fuentes disponibles en tu sitio web. Para continuar usando tus fuentes favoritas, puedes subir fuentes alojadas localmente en Elementor usando la funciĆ³n de Fuentes Personalizadas, disponible para usuarios de Elementor Pro.

Mejoras en el Rendimiento y la Accesibilidad

En Elementor 3.10, continuamos introduciendo mejoras en el rendimiento y la accesibilidad. Esta actualizaciĆ³n incluye tres nuevas mejoras de rendimiento y dos mejoras de accesibilidad.

Carga Diferida de Google Maps

El widget de Google Maps de Elementor te permite colocar un mapa en cualquier lugar de tu sitio web, el widget perfecto para usar cuando deseas compartir una ubicaciĆ³n especĆ­fica con los visitantes de tu sitio web. Con esta actualizaciĆ³n, podrĆ”s cargar de forma diferida los iframes de Google Maps, lo que acelera la carga inicial de la pĆ”gina.

Carga Diferida de ImƔgenes con TamaƱos Personalizados

El tamaƱo de la imagen que usas puede tener un impacto significativo en el rendimiento de tu sitio web. En actualizaciones anteriores, agregamos la capacidad de cargar de forma diferida casi todas las imƔgenes subidas a la biblioteca de medios. Con Elementor 3.10, tambiƩn podrƔs cargar de forma diferida imƔgenes de TamaƱo Personalizado.

Controlando la Precarga de Videos Autoalojados

Al igual que las imĆ”genes, los videos tambiĆ©n afectan la velocidad y el rendimiento de tu sitio web, con los videos autoalojados generalmente teniendo mĆ”s impacto que los videos alojados en YouTube, por ejemplo, que aplican tĆ©cnicas de optimizaciĆ³n. Con esta actualizaciĆ³n, en lugar de cargar videos autoalojados durante la carga inicial de la pĆ”gina, puedes elegir si deseas precargar el video, los metadatos del video, o no precargar ninguno de sus contenidos antes de que el visitante presione reproducir.

Mejoras de Accesibilidad para la NavegaciĆ³n de PĆ”ginas

El widget de Cita en Bloque y el widget de Comentarios de Publicaciones, dos widgets de Elementor Pro, recibieron actualizaciones de marcado para hacerlos aĆŗn mĆ”s accesibles para personas con discapacidades que usan tecnologĆ­as de asistencia para navegar por la pĆ”gina.

Disfruta de MƔs Opciones de DiseƱo, MƔs Responsividad y Mejor Rendimiento

Elementor 3.10 desbloquea una variedad de nuevas oportunidades de diseƱo para que uses en tu sitio web. La introducciĆ³n del nuevo widget de PestaƱas, la primera actualizaciĆ³n que aprovecha la capacidad de Elementos Anidados, te permitirĆ” crear diseƱos altamente avanzados y creativos usando todos los widgets de Elementor, de una manera familiar de arrastrar y soltar. Al habilitar Contenedores Flexbox para usar este nuevo widget, tambiĆ©n estarĆ”s expuesto a un kit y una biblioteca de plantillas completamente nuevos basados en Contenedores, para iniciar tu proceso creativo.

AsegĆŗrate de probar Elementor 3.10 y dĆ©janos saber quĆ© piensas en los comentarios a continuaciĆ³n.