Presentamos Elementor 3.13: cree diseños de sitios web flexibles y esbeltos con CSS Grid

Mejore sus capacidades de diseño y disfrute de nuevas formas de diseñar su sitio web con Elementor 3.13 para que pueda lograr diseños únicos que mantengan a los visitantes de su sitio web interesados. Esta versión incluye una nueva opción de diseño en Contenedores: CSS Grid, una excelente manera de diseñar diseños de sitios web sofisticados y ligeros, manteniendo un alto nivel de coherencia. Además, esta actualización presenta más opciones de estilo en el widget de menú y agrega nuevas capacidades a la nueva barra superior.

Nuevo – CSS Grid Container – Diseñe diseños ligeros, responsivos y profesionales

Ahora, cuando agrega un Contenedor, puede elegir entre Contenedores Flexbox o Grid. El uso de Grid Containers es ideal para diseños tipo cuadrícula, lo ayuda a mantener la alineación de los elementos en el contenedor y reduce la curva de aprendizaje asociada con la transición del diseño de sección-columna al diseño de contenedor.

Con Grid Containers, puede elegir la cantidad de filas y columnas que desea para componer su cuadrícula, determinar la distancia entre sus columnas y filas usando el control de espacios y elegir si desea que Auto-Flow se base en columna o fila. También puede justificar y alinear el contenido y los elementos, de forma similar a como lo haría con un contenedor Flexbox.

Cada celda de la cuadrícula puede aceptar un elemento, que se puede diseñar y editar como lo haría normalmente. Para lograr un mayor nivel de sofisticación, puede colocar un contenedor Flexbox dentro de la celda de una cuadrícula y colocar tantos elementos como desee dentro del contenedor Flexbox.

Para usar Container Grid, asegúrese de habilitar las funciones de Flexbox Container y Grid Container desde el panel de control de WordPress → Elementor → Configuración → Funciones.

[Pro] Nuevas capacidades de estilo en el widget de menú

En la versión anterior, Elementor introdujo un nuevo widget de menú, que le permite crear menús simples de un solo nivel y menús de contenido desplegable sofisticados, con contenido anidable. Este widget cambia las reglas del juego para la creación de sitios web, lo que le permite diseñar menús hermosos y funcionales para sus sitios web.

Elementor Pro 3.13 presenta dos nuevas capacidades que ahora están disponibles en el widget Menú:

• Íconos en el nivel superior del menú : esta nueva capacidad de diseño le permite mejorar el diseño de sus menús al agregar íconos llamativos que atraen la atención de los visitantes. Con una variedad de íconos para elegir en la biblioteca de íconos, o la capacidad de cargar cualquier SVG, puede personalizar sus menús para que coincidan con el estilo de su sitio web y hacer que se destaquen.

Estado activo para enlaces de anclaje : indique a los visitantes del sitio web en qué parte de la página se han desplazado o en qué han hecho clic cuando su menú incluye enlaces de anclaje. De esa manera, puede mejorar la experiencia de los visitantes ayudándolos a navegar a través de su sitio web.

Mejoras en la barra superior: la renovación de la interfaz de usuario de Elementor continúa

En Elementor 3.12, comenzamos la implementación gradual de los próximos cambios en la interfaz de Elementor. Estos cambios están escritos en React, lo que mejora el rendimiento y permite el crecimiento y la escala del producto en el futuro. Además, estos cambios promueven las mejores prácticas de Elementor, lo que da como resultado una experiencia de usuario mejor y más optimizada.

Uno de los mayores cambios es la nueva barra superior, presentada como un experimento que puede activar desde la página de funciones de Elementor en WordPress (Elementor → Configuración → Funciones → Barra superior del editor). En esta versión, la barra superior incluye dos actualizaciones:

1. Guardar opciones en el botón Publicar : aunque no es una función nueva, esta función no estaba disponible en la primera versión de la barra superior. Ahora, tiene acceso a todas las opciones de guardado disponibles en el Editor: Guardar como borrador, Guardar como plantilla y Mostrar condiciones (cuando corresponda). Esto también significa que la barra superior ahora incluye todas las capacidades disponibles anteriormente en la interfaz de usuario heredada del editor.
2. Navegación de páginas : una nueva característica que agilizará su flujo de trabajo y hará que la transición entre diferentes páginas y partes del tema sea más fluida. Al hacer clic en la indicación de página en el centro de la barra superior, se abrirá un menú desplegable que incluye las últimas cinco páginas/publicaciones/partes temáticas en las que trabajó, y le permitirá redirigir a cualquiera de ellas con un solo clic, sin tener que navegar hacia atrás. al Panel de WordPress.

[Pro] Complete dinámicamente el extracto de su publicación, con el contenido de su publicación

Anteriormente, el uso del widget Post Excerpt o la etiqueta dinámica en WordPress significaba que el contenido se completaría automáticamente a partir del extracto personalizado que insertaste manualmente en WordPress. Sin embargo, con Elementor 3.13, ahora tiene la opción de elegir si desea que el contenido se complete automáticamente desde los primeros caracteres de su publicación o desde el extracto personalizado en WordPress. Esta actualización resuelve una de las principales solicitudes desde la introducción de Loop Builder, y específicamente desde que se puede agregar el widget Post Excerpt dentro de su elemento de bucle.

Nuevo: aproveche Elementor AI, perfectamente adaptado para Elementor

Elementor 3.13 también incluye Elementor AI, que está integrado de forma nativa en el Editor y transformará la forma en que crea sitios web. Esta versión presenta la primera fase de Elementor AI, que le permite crear texto y código con el poder de la IA. Puede usarlo para crear contenido desde cero, mejorar el contenido existente en su sitio web, traducirlo a cualquier sitio web y más. Además, puede usar Elementor AI para escribir código para CSS personalizado o código personalizado (requiere Elementor Pro o hosting) o fragmentos de código HTML. Puede leer más sobre lo que puede hacer con Elementor AI aquí.

Mejoras de rendimiento

En versiones anteriores, las mejoras de rendimiento se centraban en los widgets más habituales de las páginas principales. Con Elementor 3.13, la atención se centró en los widgets que se utilizan principalmente en las páginas internas, donde los visitantes del sitio suelen pasar la mayor parte de su tiempo.

Los widgets Cuadro de autor, Información de publicación y Lista de precios muestran imágenes e imágenes de perfil de usuario, estas imágenes ahora tienen una carga diferida aplicada a ellas. Este cambio debería mejorar la carga de la página inicial de sus páginas internas.

Además, dado que el encabezado aparece arriba de la tapa, siempre debe cargarse inmediatamente después de cargar la página. Por lo tanto, la carga diferida se eliminó de los encabezados para mejorar la experiencia del visitante cuando se utiliza el experimento Imágenes de fondo de carga diferida.

Mejoras de accesibilidad

Elementor 3.13 está lleno de ajustes y correcciones que mejoran la accesibilidad de su sitio web, así como el Editor. En esta versión, nos enfocamos en la navegación por teclado, implementando etiquetas ARIA adicionales, solucionando problemas de cumplimiento de ARIA existentes y aplicando marcado semántico.

Puede leer más sobre estas mejoras de accesibilidad en el blog de desarrolladores.

Disfrute de más opciones de estilo y diseño para experiencias de sitios web atractivas y de alta marca

Eleve el diseño de su sitio web y desbloquee nuevas posibilidades de estilo para personalizar su sitio web con Elementor 3.13. Con CSS Grid Containers, puede crear diseños ligeros, flexibles y similares a una cuadrícula sin problemas, y con las nuevas capacidades de estilo en el widget de menú, puede crear diseños distintivos que cautiven y mantengan a los visitantes de su sitio web interesados.

Esta versión también incluye nuevas capacidades en la función de la barra superior, lo que significa que todas las capacidades disponibles anteriormente en el Editor ahora están disponibles al usar el experimento de la barra superior.

Elementor 3.13 también incluye una prueba gratuita de Elementor AI, que transformará la forma en que crea sitios web al permitirle crear instantáneamente texto original, mejorar el texto existente y codificar para mejorar su sitio web y su diseño.

Pruebe las nuevas funciones de Elementor 3.13 y háganos saber lo que piensa sobre ellas en los comentarios a continuación.