Divi 5 Características exclusivas (hasta ahora)

Estamos implementando nuevas funciones de Divi 5 a un ritmo rápido, y cada una está diseñada para mejorar el rendimiento, racionalizar su flujo de trabajo y traer potentes capacidades de diseño a sus dedos. ¿Necesita una descripción general? Esta publicación abordará las características exclusivas de Divi 5 que vale la pena visitar. Y esto es solo el comienzo. Tenemos nuevas características emocionantes como Flexbox y The Loop Builder que saldrá pronto. Nuestras actualizaciones abordan puntos de dolor comunes que hemos escuchado de diseñadores y desarrolladores que usan Divi diariamente.

Divi 5 está listo para ser utilizado en nuevos sitios web.

8 características exclusivas de Divi 5 (y cómo funcionan)

Divi 5 presenta actualizaciones innovadoras para el diseño del sitio web y utiliza una variedad de herramientas que reinventan y aceleran las tareas de diseño, lo que las hace más intuitivas. Las siguientes ocho características demuestran el potencial de nuestro Divi recientemente re-vengado:

1. Puntos de interrupción personalizables

Característica lanzada el 6 de febrero de 2025

Divi 5 introduce una flexibilidad mejorada en el diseño receptivo con su sistema de puntos de interrupción personalizables. La mayoría de los constructores de páginas restringen a los usuarios a solo tres vistas estándar, pero Divi 5 permite hasta siete puntos de interrupción únicos, todos los cuales se pueden establecer en valores de píxeles personalizados.

Esto brinda a los usuarios más control que otros constructores populares, que generalmente se adhieren a los tamaños de dispositivos fijos y ofrecen opciones de ajuste limitadas. Si bien muchas plataformas lo obligan a diseñar dentro de los límites rígidos, Divi 5 le permite dirigirse a los anchos de pantalla exactos donde su diseño necesita atención especial.

Más allá del trío estándar

La mayoría de los constructores de sitios web se adhieren al escritorio, la tableta y el trío móvil porque es sencillo. Divi 5 reconoció que esto no coincide con cómo las personas realmente navegan por la web hoy, en docenas de diferentes tamaños de pantalla.

Con Divi 5, puedes establecer puntos de interrupción para:

• Teléfono (<767px)
• Teléfono ancho (<860px) - Perfecto para la visualización móvil de paisajes
• Tableta (<980px)
• Tableta ancha (<1024px): captura tabletas más grandes y dispositivos similares
• Escritorio (> 981px)
• Pantalla panorámica (> 1280px)
• Ultra Wide (> 1440px)

Otros constructores de páginas de WordPress ofrecen un control de punto de ruptura, pero ninguno coincide con la precisión y la facilidad de uso de Divi 5. El sistema sigue siendo intuitivo, con los mismos controles Divi familiares aplicados en todos los puntos de interrupción.

Manejo del punto de interrupción visual

Divi 5 introduce la escala de lienzo, una característica que la diferencia de la mayoría de los otros constructores. En lugar de limitarse a cambiar entre las avances de dispositivos fijos, puede arrastrar el borde del lienzo para ver su diseño en cualquier ancho que desee.

Este enfoque le brinda comentarios inmediatos y realistas, casi como trabajar directamente dentro de un navegador web. Al diseñar puntos de interrupción más amplios que su ventana actual, el lienzo se ajusta proporcionalmente, por lo que aún obtiene una mirada precisa a su diseño, incluso en pantallas más pequeñas.

La experiencia se mantiene consistente a medida que avanza entre los puntos de interrupción. Los controles se comportan de la misma manera, y su diseño no cambia inesperadamente. Esta confiabilidad reduce las conjeturas y la resolución de problemas del diseño receptivo, que puede ser un dolor de cabeza en otros constructores de páginas.

Obtenga más información

2. Presets del grupo de opciones

Característica lanzada el 11 de marzo de 2025

Option Group Presets es una de las nuevas características más emocionantes en Divi 5, ampliando sus capacidades de construir un sistema de diseño que funcione para usted. Los preajustes del grupo de opciones son los bloques de construcción de su diseño. Mientras que los preajustes de elementos lo encierran en el estilo de un elemento en particular, los preajustes del grupo de opciones de Divi 5 funcionan en cualquier tipo de elemento.

Puede crear estilos reutilizables para propiedades de diseño específicas, como tipografía, bordes, sombras o fondos, y mezclar estos estilos en diferentes elementos. Por ejemplo, puede crear un preajuste para su estilo de encabezado, otro para el estilo de botones y un tercero para las sombras de caja.

Una vez configurado, puede aplicar estos estilos a cualquier elemento compatible con un clic, independientemente de si se trata de un módulo de texto, propaganda, llamada a la acción o incluso contenedores como secciones y filas.

Por qué esto importa para su flujo de trabajo

Este es un ahorro de tiempo cuando necesita actualizar su diseño. Digamos que decide cambiar el radio fronterizo en elementos en todo su sitio. En lugar de cazar cada botón, imagen y sección, simplemente edite el preajuste de la frontera una vez, y cada elemento utilizando ese preajuste actualizas automáticamente.

La capacidad de trabajar en diferentes tipos de elementos hace que los preajustes de los grupos de opciones de Divi 5 sean realmente útiles. El mismo estilo de borde puede aplicarse a un módulo, columna, fila o sección. Esta compatibilidad de elementos cruzados ahorra horas de trabajo de estilo repetitivo.

Esta flexibilidad va un paso más allá. Los preajustes del grupo de opciones de Divi se extienden más allá de las opciones de estilo básico. También cubren características basadas en script como pantallas condicionales, videos de fondo HTML y efectos de desplazamiento. Esto le brinda un control constante sobre el estilo estático y los comportamientos interactivos en su sitio.

Obtenga más información

3. Unidades avanzadas

Lanzado el 19 de marzo de 2025

Divi 5 ha mejorado su manejo de las unidades CSS, lo que facilita mucho el diseño.

Ahora, puede acceder a la gama completa de unidades CSS necesarias para el diseño web de hoy directamente dentro del constructor. Eso significa que puede usar píxeles (PX), porcentajes (%), EMS (EM), EMS de raíz (REM), unidades de ventanas gráficas (VW, VH, VMIN, VMAX) e incluso opciones más avanzadas como el ancho de caracteres (CH) o las unidades fraccionales (FR) para las cuadrículas.

Esto puede parecer una actualización menor al principio, pero en realidad le brinda mucha más flexibilidad para construir diseños receptivos.

Por qué importan diferentes unidades

Cuando construye sitios que desea verse bien en teléfonos, tabletas y escritorios, usar solo píxeles puede crear dolores de cabeza. Un elemento ancho de 300 px se ve bien en el escritorio, pero puede romper su diseño en el móvil.

Con unidades avanzadas como la ventana gráfica, puede establecer ese mismo elemento en 80VW (80% del ancho de la ventana gráfica), y se escalará perfectamente en todos los dispositivos. O use unidades REM para mantener el texto proporcional al tamaño de su fuente base, lo que facilita mucho los ajustes de accesibilidad.

Ahora, combine unidades con funciones CSS como calc (), min (), max () y sujeción () y vea la verdadera magia. Divi 5 admite todo esto, permitiéndole crear diseños verdaderamente fluidos que se adapten a cualquier tamaño de pantalla.

Por ejemplo, puede establecer una altura de sección en Calc (80VH - 60px) para que ocupa la mayor parte de la pantalla mientras deja espacio para un encabezado. O use Clamp (16px, 4VW, 22px) para texto que crece con la pantalla pero permanece dentro de los límites legibles.

La flexibilidad de la pinza ()

La función Clamp () merece una atención especial porque resuelve muchos problemas de diseño receptivos. Le permite establecer los tamaños mínimos, preferidos y máximos de una sola vez, haciendo que la Funcionar Clamp () sea una característica favorita de muchos diseñadores web.

Es posible que desee encabezados que crezcan con el tamaño de la pantalla pero que permanezcan legibles. En un módulo de encabezado, puede establecer el tamaño de texto en sujeción (36px, 5VW, 72px). El encabezado no será menor que 36px o más de 72 px, pero entre esos tamaños, escalará al 5% del ancho de la ventana de la ventana gráfica.

Esto crea transiciones suaves entre los tamaños de pantalla sin puntos de interrupción. El texto que es demasiado grande en tabletas o demasiado pequeño en monitores grandes no será un problema. Su tipografía respira con el diseño.

También entendemos que los diferentes elementos de diseño necesitan diferentes unidades, por lo que las unidades avanzadas de Divi 5 cuentan con funciona malignamente, no solo con tipografía, sino márgenes, relleno y otros valores de espaciado:

• Para el texto, las unidades REM mantienen todo en proporción. Si establece el texto de su cuerpo en 1REM y encabezan los encabezados a 2.5REM, cambiar el tamaño de fuente base actualiza todo proporcionalmente.
• Para los diseños, puede intentar mezclar unidades fijas y fluidas. Una barra lateral podría funcionar mejor a 300 px, mientras que el contenido principal podría usar Calc (100% - 350px) para llenar el espacio restante.
• Para el espacio, las unidades EM crean relleno que se escala con el tamaño del texto. Esto mantiene sus proporciones de diseño consistentes incluso cuando cambian los tamaños de texto.

También juega bien con otras características discutidas

Lo que es particularmente agradable es que no necesita escribir CSS personalizados para usar estas unidades. Están incorporados directamente en la interfaz visual. Puede experimentar con diferentes valores y ver los resultados al instante, haciendo que la curva de aprendizaje sea mucho más suave que codificar estas soluciones a mano.

Estas unidades están integradas con otras características en Divi 5. Puede almacenar su valor, utilizando cualquier unidad que prefiera, como variables de diseño, y luego aplicarlas en todo el sitio a través de preajustes de grupos de opciones. Esto crea una reacción en cadena del buen diseño que fluye a través de todo su sitio. Por ejemplo:

• Cree una variable de número como el tamaño del encabezado: Clamp (26px, 5VW, 82px); para tus encabezados H1. Aplique esta variable a su preajuste de texto de encabezado. Sus encabezados ahora escalarán suavemente entre 26px en dispositivos móviles y 82px en el escritorio, con un cálculo fluido de 5 VW entre esos tamaños.
• Configuración de una variable de número en sujetar (20px, 5VW, 80px) y luego usarlo como márgenes, tiene un espaciado ajustado en el móvil y el generoso espacio para respirar en el escritorio, con una transición suave entre.
• Establezca un espaciado base utilizando una unidad de espacio variable numérica: 20px, y úselo con calc () en su diseño presets. Por ejemplo, aplique Calc (var (–space-unit) * 2) para espacios más grandes y calc (var (–space-unit) / 2) para espacios más estrictos. Cuando actualiza el valor base, todo el espacio derivado se ajusta proporcionalmente.

Esto solo rasca la superficie. Al combinar estas configuraciones, puede crear sitios web que aprovechen la simplicidad de Divi y las nuevas capacidades.

Obtenga más información

4. Variables de diseño

Característica lanzada el 3 de abril de 2025

La mayoría de los constructores de sitios web tienen formas de establecer colores y fuentes globales. Divi 5 toma esta idea y corre con ella. Puede crear variables no solo para colores y fuentes, sino también para números, imágenes, texto sin formato e incluso enlaces web.

Piense en esto: la mayoría de los constructores le permiten establecer un color primario que se actualice en todas partes. Pero, ¿qué pasa si desea cambiar su número de teléfono en varias páginas? ¿O intercambiar una imagen recurrente utilizada en todo su sitio? Divi 5 maneja estas situaciones con facilidad.

Todas sus variables viven en un panel simple en la barra lateral del Visual Builder. Es limpio, fácil de encontrar y pone todo en un solo lugar.

Una combinación perfecta con preajustes

Las variables de diseño y los ajustes preestablecidos (ambos preajustes de los grupos de opciones y los preajustes de elementos) trabajan juntas para hacer un diseño mantenible y escalable. Puede construir preajustes que hacen referencia a sus variables, creando un sistema de diseño flexible.

Por ejemplo, puede crear una variable de diseño para su fuente principal de encabezado, luego usar esa variable en su preajuste de tipografía de encabezado. Si decide cambiar su fuente más tarde, solo necesita actualizar la variable una vez, no el preajuste en sí. Esto crea otra capa de control que la mayoría de los constructores simplemente no ofrecen.

Este enfoque de dos capas le brinda más control que otros constructores. Se separa de cómo se ve algo (variables) de donde aparece (preajustes).

Puede usar variables numéricas con funciones CSS como Calc () y Clamp () para crear diseños receptivos que se adapten perfectamente a diferentes tamaños de pantalla. Establezca una variable para el ritmo de separación de su sitio y aplíquelo a lo largo de su diseño para proporciones consistentes que se escalen maravillosamente.

Cuando cambia una variable, todo lo que lo usa de inmediato. Esto convierte lo que podría ser horas de trabajo en unos segundos de clic.

Cómo esto ayuda a crear un diseño mantenible

Veamos algunos ejemplos prácticos de variables de diseño en acción:

• Mantenga su marca como la misma en todas partes: configure variables para sus colores, fuentes y espacios. Úselos en presets en su sitio para un aspecto consistente.
• Ejecute una venta de vacaciones: cree variables de imagen para gráficos de campaña y variables de texto para una copia promocional. Cuando termine la temporada, actualice una vez para actualizar todo su sitio.
• Estilos de borde: cree una variable numérica para el radio de borde, como 10px, y aplíquelo a todos los presets, módulos de imagen y tarjetas de botones. Si su dirección de diseño cambia, una actualización afecta todas las esquinas redondeadas en todo su sitio.
• Facilitar las actualizaciones del cliente: cuando cree sitios para clientes que necesitarán realizar actualizaciones, brillan las variables de diseño. Configure las variables para el contenido que cambiarán a menudo, como la información de contacto o las horas hábiles. Pueden actualizarlos sin tocar la configuración de diseño.

Las variables de diseño también funcionan con el constructor de temas de Divi. Esto significa que sus encabezados, pies de página y plantillas usan el mismo grupo de variables que sus páginas. A diferencia de otros sistemas que lo encierran en patrones rígidos, las variables de Divi 5 mantienen las cosas flexibles mientras lo ayudan a mantenerse organizado.

Obtenga más información

5. Filas anidadas

Característica lanzada el 17 de abril de 2025

Divi 5 presenta filas anidadas, lo que le brinda más control sobre los diseños. Esta adición le permite colocar filas dentro de las columnas, creando diseños complejos que no eran posibles en versiones anteriores sin código personalizado.

Con filas anidadas, puede construir diseños de cuadrícula avanzados, bloques de contenido estilo revista y diseños basados ​​en tarjetas con mucho menos esfuerzo. ¿Necesita una sección con columnas que contengan sus propios diseños de múltiples columnas? Ahora puedes hacerlo bien en el constructor.

Edificio con profundidad

Agregar una fila anidada funciona al igual que agregar cualquier módulo. Seleccione una sección, haga clic en el botón Plus y elija "Row" de sus opciones. A partir de ahí, puede agregar una fila para crear una fila anidada y llenarla con contenido.

Este cambio aparentemente simple abre muchas posibilidades de diseño. Puede crear widgets de barra lateral con sus propias estructuras de columna, construir exhibiciones de productos con galerías anidadas o tablas de comparación de características de diseño con diseños complejos.

La mejor parte es cómo naturalmente se ajusta a su flujo de trabajo. No hay nada nuevo que aprender. Solo estás usando filas en más lugares. Si sabe cómo construir con Divi, ya sabe cómo usar filas anidadas.

Las filas anidadas resuelven problemas reales para los constructores de sitios. ¿Quiere crear una sección de servicios donde cada servicio tenga su propio diseño de dos columnas? Anteriormente, necesitaría CSS personalizado o soluciones complejas. Ahora está construido directamente.

Para los sitios de contenido pesado, puede crear diseños de estilo de revista con anchos de columnas mixtas y áreas de contenido anidado. Cada artículo o característica puede tener su propia estructura de columna mientras mantiene el diseño de la página.

Solo el primer paso

Las filas anidadas son solo el comienzo de la evolución del diseño de Divi 5. El equipo está trabajando hacia un sistema de diseño completo basado en FlexBox para hacer que Divi sea aún más flexible.

Las actualizaciones futuras introducirán controles de diseño adicionales, brindándole aún más opciones para crear diseños complejos sin código personalizado. Este enfoque metódico garantiza que cada nueva característica funciona perfectamente antes de pasar a la siguiente.

En lugar de apresurarse a las características a medias, el Equipo de Desarrollo de Divi está construyendo una base sólida para el futuro del diseño del diseño. Cada paso se basa en el último, creando un sistema que es a prueba de futuro y fácil de usar.

Obtenga más información

6. Grupos de módulos

Característica lanzada el 1 de mayo de 2025

Construir sitios web a menudo significa crear los mismos patrones de contenido repetidamente. Diseñas una tarjeta de miembro del equipo perfecta, luego pasa veinte minutos recreándola para la próxima persona. Los grupos de módulos resuelven esto permitiéndole empacar elementos relacionados en unidades reutilizables.

Esto es lo que cambia: en lugar de tratar cada pieza por separado, trabaja con bloques completos. Una tarjeta de producto se convierte en una cosa que mueve, no seis módulos diferentes que debe seleccionar individualmente. Cuando necesite ajustar el espacio en cincuenta tarjetas de producto, actualiza la plantilla de grupo una vez en lugar de editar cada tarjeta manualmente.

El beneficio real aparece en sitios más grandes. Los proyectos del cliente con docenas de miembros del equipo, catálogos de productos o listados de servicios se vuelven manejables. No estás haciendo un trabajo de ensamblaje repetitivo: te estás centrando en el contenido y el ajuste.

Creación de combinaciones de módulos personalizados

Los grupos de módulos abren posibilidades que los módulos individuales generalmente no pueden manejar. Construya una tarjeta de servicio donde necesite una imagen de fondo, un ícono superpuesto, un titular, una descripción y dos botones de acción: "Aprenda más" y "Obtenga cotización".

Con grupos de módulos, coloca estos elementos exactamente cómo los quieres. Esto se vuelve útil para el contenido que no se ajusta a las plantillas estándar.

Para las tablas de precios, puede usar tres filas anidadas dentro de un grupo de módulos: un encabezado en la primera fila, detalles de precios en el segundo y una lista de características en el tercero. Esto le brinda control individual sobre fuentes, colores y espacios que el módulo de mesa de precios incorporado no ofrece.

El mismo enfoque funciona para los testimonios utilizando los módulos de icono, imagen, encabezado y texto dispuestos dentro de la estructura de grupo. Obtiene más flexibilidad de diseño que el módulo testimonial estándar mientras mantiene todo manejable como una sola unidad.

La ventaja clave es combinar el control de diseño del edificio desde cero con la comodidad de tratar múltiples elementos como una sola pieza.

Construyendo bibliotecas de componentes reutilizables

Una vez que cree grupos de módulos efectivos, guárdelos como elementos globales. Esto crea una biblioteca de componentes que crece con cada proyecto. Cuando refina el estilo, sus actualizaciones de diseño testimonial en veinte páginas, y su exhibición de productos se mantiene consistente mientras itera en el diseño.

En lugar de comenzar desde cero cada vez que construye una página, comienza con diseños consistentes y los adapta a nuevas páginas y requisitos de diseño.

Abrace la facilidad de la integración de la nube Divi. Con esta herramienta, los componentes pueden pasar sin esfuerzo de un proyecto a otro. Supongamos que desarrolla un conjunto robusto de grupos de módulos para un sitio de cliente en particular; Ahora puede aprovecharlos como base para las próximas tareas. De esta manera, cada proyecto tiene la ventaja de soluciones anteriores, pero conserva su estética distinta.

Funciona sin problemas con el sistema de diseño de Divi 5

Los grupos de módulos se vuelven realmente interesantes cuando las usas con variables de diseño y preajustes de grupos de opciones. Digamos que construye un grupo de testimonios: cita, nombre del autor, empresa y foto.

En lugar de establecer colores fijos, hace referencia a las variables de color de su marca. Para el estilo de cotización, crea un grupo de opciones preestablecido para la tipografía que incluye su fuente personalizada, tamaño y altura de línea. Para el nombre del autor, aplica un grupo de opciones de rumbo diferente preestablecido.

Ahora guarde ese grupo de módulos como un elemento global. Estos grupos de opciones preestablecidos conectan todos los testimonios en su sitio a su sistema de diseño. Si el cliente quiere un gris más oscuro, cambie la variable una vez, y todos los módulos de grupo testimonial se actualizarán. Si necesita ajustar el estilo de cotización, edite el grupo de opciones de tipografía preestablecido una vez; Cada cita testimonial cambiará al instante.

Esto supera la gestión de módulos individuales dispersos en todas partes. Sus grupos de módulos usan preajustes de grupos de opciones para bordes, fondos y estilo de texto, por lo que actualizar cualquier flujo de preajuste a través de todos sus elementos agrupados automáticamente.

Obtenga más información

7. Administrador de atributos

Característica lanzada el 16 de mayo de 2025

Has diseñado un botón en un módulo de llamada a acción. Los colores funcionan, y los efectos de flotar se ven bien. Ahora desea esos mismos estilos de botón en un formulario de contacto, pero no desea el titular o los antecedentes de la CTA.

La copia regular de la copia no funcionará aquí: obtendrá todo o nada. Divi 5 le permite copiar solo las partes del botón gracias a su función de gestión de atributos. Haga clic con el botón derecho en el CTA, elija qué copiar,

Luego pegue solo esos estilos de botón en el formulario de contacto.

Elija y elija lo que viaja

Divi 5 divide cada elemento en diferentes tipos de atributos. Eliges cuáles copiar:

• Todos los atributos: todo se copia
• Atributos de diseño: colores, espaciado, preajustes, pero sin texto ni imágenes
• Atributos de estilo: solo sus cambios personalizados
• Atributos de contenido: solo texto e imágenes
• Presets - Asignaciones preestablecidas solamente

Digamos que quieres el estilo de un botón pero no su texto. Copiar atributos de diseño. ¿Quieres el preajuste de antecedentes de una sección pero no su relleno? Copiar presets solamente.

Funciona entre diferentes módulos

Puede copiar atributos de un tipo de módulo y pegarlos en un tipo diferente. Por ejemplo, puede copiar de un módulo de llamada a acción y pegarlo en un formulario de contacto. Divi 5 descubre qué configuraciones funcionan en ambos módulos e ignora el resto.

Esto ayuda a construir sitios que necesitan el mismo estilo en diferentes tipos de módulos. No tiene que recrear los colores de su botón para cada forma, testimonio u otro módulo que use botones.

Atajos a nivel de grupo

El sistema de atributos es más profundo con la gestión de grupos selectivos. Omita los paneles de configuración por completo. Haga clic derecho y aplique grupos de atributos específicos directamente desde el menú contextual.

¿Ha copiado un módulo con el presagio de botón perfecto? Puede pegar solo ese botón preestablecido a otros elementos a través del menú selectivo. No hay caza de pestañas y no hay buceo.

La misma precisión funciona para restablecer. Limpie todos los atributos de diseño mientras mantiene intacto el contenido. O restablezca solo preestablecidos mientras preserva las anulaciones de estilo personalizado.

Velocidad a través de atajos

Cada acción recibe atajos de teclado que aparecen justo en los menús de contexto. Aprenda algunas combinaciones clave y el estilo acelera. Los atajos se mantienen consistentes en todos los tipos de atributos, por lo que sus dedos aprenden los patrones rápidamente.

Esto va más allá de guardar clics. Al construir sitios con cientos de elementos, estas microeficiencias se agotan en horas de tiempo ahorrado. El trabajo manual repetitivo se convierte en acciones rápidas y específicas.

Juega bien con su sistema de diseño

El Administrador de atributos se conecta directamente al ecosistema preestablecido de Divi 5. Esas conexiones del sistema viajan cuando copia un módulo utilizando preajustes de grupos de opciones y variables de diseño.

Pegar atributos que incluyen preajustes y esos nuevos elementos se conectan inmediatamente a su sistema de estilo global. Actualice un preajuste más adelante, y cada elemento copiado refleja el cambio automáticamente. Su sistema de diseño permanece conectado a medida que construye y duplica rápidamente elementos.

Obtenga más información

8. Búsqueda y filtrado de configuración

Característica lanzada el 29 de mayo de 2025

Construir sitios web significa ajustar la configuración. Los módulos Divi empacan docenas de opciones en sus paneles, y la caza a través de pestañas para ese campo de un color puede comer su día. Divi 5 trae de vuelta la función de búsqueda de Divi 4, pero lo hace funcionar mejor.

Obtiene una barra de búsqueda justo en la parte superior de cada panel de configuración. Escriba lo que necesita, y Divi muestra solo opciones coincidentes. ¿Buscando "frontera"? Cada entorno relacionado con la frontera aparece mientras todo lo demás se desvanece. ¿Necesita ajustar el "relleno"? Todos los controles de espaciado aparecen al instante.

Esto elimina el clic y el desplazamiento que ralentiza su trabajo. En lugar de abrir pestañas y cazar a través de grupos, puede encontrar lo que necesita en segundos.

Filtrar por lo que has cambiado

El haven real es el filtro "modificado". Haga clic en él y vea solo la configuración que ya ha ajustado. Esto ayuda cuando toma un paquete de diseño o un sitio de inicio y desea ver lo que se ha personalizado.

Digamos que importa un diseño comercial pero quiere cambiar los colores. Presione el filtro modificado y detecte cada opción de color personalizada sin cavar a través de cada módulo. Puedes ver qué fuentes se cambiaron, qué espaciado se ajustó y qué efectos se agregaron.

Esto también funciona muy bien para proyectos de clientes. Cuando alguien pregunta qué personalizó en su sitio, el filtro modificado muestra su trabajo claramente.

Opciones de filtrado inteligente

Más allá del filtro modificado, obtendrá la clasificación de los tipos. Al actualizar su paleta, el filtro "Colors" muestra cada campo de color a la vez. Cuando se necesitan cambios en la tipografía, los filtros de "familias de fuentes" y "pesos de fuentes" revelan configuraciones de texto en todos sus módulos.

El sistema sabe qué configuración es más importante. Los colores y las fuentes obtienen sus filtros porque son los cambios más comunes que hacen las personas. Los tamaños se agrupan ya que los ajustes de espaciado ocurren con frecuencia.

Estos filtros guardan clics cuando realiza cambios en todo el sitio. En lugar de abrir cada módulo individualmente, trabaja a través de listas filtradas de la configuración que necesita modificar.

Obtenga más información

Cómo se compara Divi 5 contra opciones populares

El mercado de Builder Builder está lleno de opciones, pero Divi 5 se destaca gracias a algunas características realmente nuevas. Aquí hay un vistazo a lo que hace que Divi 5 sea diferente:

Lo que esto significa para sus proyectos

La combinación de características de Divi 5 crea un sistema de diseño que otros constructores no pueden igualar. El grupo de opciones preestablecidos y grupos de módulos solo colocó a Divi 5 por delante de los competidores.

Cuando las variables de diseño funcionan con preajustes y grupos de módulos, obtienes algo versátil. Variables de referencia dentro de los preajustes, aplicarlos a elementos agrupados y cambiar los valores actualiza cada elemento automáticamente en su sitio. Agregue las próximas funciones de FlexBox y Loop Builder a la mezcla, y se encontrará creando cualquier sitio web sin la necesidad de codificación personalizada.

¿Qué vendrá después?

La hoja de ruta Divi 5 muestra actualizaciones continuas que aterrizarán pronto. Nuestros desarrolladores, divididos en siete equipos, trabajan a tiempo completo en diferentes características, enviando actualizaciones al menos cada dos semanas. Aquí hay un adelanto de lo que puedes esperar en las próximas semanas:

Diseños de FlexBox

El mayor cambio es el sistema de diseño FlexBox completo, que está a unas semanas de finalización. Esto reemplazará completamente cómo construye diseños. Obtendrá nuevas plantillas de fila, centrado vertical automático, envoltura de contenido y distribución de espaciado a través de controles visuales en lugar de CSS personalizados.

Los grupos de módulos recién enviados como contenedores que agrupan módulos relacionados. Combinado con FlexBox, puede crear diseños de revistas, exhibiciones de productos con alturas coincidentes y alineaciones complejas que anteriormente requerían soluciones. Las secciones especializadas desaparecen una vez que llega Flexbox.

Actualizaciones de bucle de bucle y wooCommerce

Sobre la base del sistema de diseño FlexBox y los grupos de módulos, el bucle de bucle le permitirá repetir cualquier cosa: módulos individuales, grupos o secciones completas. A diferencia de otros constructores que lo encerrarán en plantillas, definirá qué repite y lo conectará a contenido dinámico. Los bucles anidados también funcionarán. Por ejemplo, las categorías de blog que recorrerán publicaciones, con cada publicación que muestra revisiones en bucle.

Los módulos de WooCommerce serán reconstruidos desde cero utilizando la arquitectura de Divi 5. Los módulos actuales funcionarán a través de la compatibilidad hacia atrás, pero no interactuarán con presets o variables. Los nuevos módulos de productos se terminarán en unas pocas semanas, poniendo el soporte de WooCommerce en camino de Beta.

Colores avanzados

Los colores relativos con tono, saturación y ligereza (HSL) le permite construir relaciones matemáticas de color. Establezca su color primario una vez, luego genere variaciones automáticamente: "azul primario pero 20% más claro" o tonos complementarios que se actualizan cuando cambia la base.

Planificación beta y migratoria

Beta comienza cuando se completan los tres objetivos: compatibilidad mejorada hacia atrás para los sitios existentes, el soporte de módulo de WooCommerce completo y las correcciones continuas de errores basadas en la retroalimentación alfa.

Si avanzamos por el progreso actual, sugiere una versión beta en un par de meses. El equipo también está trabajando en el backend para que los sitios Divi 4 puedan migrar sin requerir cambios. Los módulos de terceros del mercado Divi necesitan compatibilidad completa.

Para nuevos proyectos, Divi 5 Alpha proporciona suficiente capacidad para la mayoría de las compilaciones. Las mejoras de rendimiento por sí solo justifican el interruptor. Los sitios existentes se benefician de esperar beta a menos que se necesiten nuevas características específicas.

Cuando llega la versión beta, obtienes el conjunto completo de características más la confianza de las pruebas exhaustivas. El lanzamiento oficial sigue poco después, brindándole una base sólida para proyectos futuros.

¿Listo para probar Divi 5? Aquí está cómo comenzar

Estas características exclusivas de Divi 5 trabajan juntas para crear algo diferente. En lugar de luchar contra su constructor por diseños consistentes, crea sistemas que se mantienen. En lugar de reconstruir los mismos estilos repetidamente, creas una vez y reutilizas en todas partes, ¡y esto es solo el comienzo!

Por lo tanto, avance hoy en la curva construyendo un nuevo sitio web usando Divi 5. Está disponible para todos los miembros de Divi de forma gratuita. Simplemente diríjase a su área de cuenta y tome una copia.

Una vez que se instala WordPress, cargue Divi 5, ya que cargaría un tema normal: Apariencia> Temas> Agregar nuevo tema de carga. ¡Active el tema, inicie sesión con sus credenciales y construya! Su primera construcción le mostrará por qué reconstruimos todo desde cero.

Recuerde: use Divi 5 solo para nuevos sitios web en este momento. No recomendamos migrar sitios existentes durante la fase alfa.