Cómo construir eficientemente sus páginas con Divi 5

Reconstruido desde cero, Divi 5 cuenta con un rendimiento de rayo y presenta nuevas características como variables de diseño para el estilo de todo el sitio, las filas anidadas para la profundidad de diseño infinito y el diseño preestablecido para aumentar su flujo de trabajo. Con un constructor visual moderno y renovado, Divi 5 le permite crear sitios web profesionales con poco esfuerzo, ya sea comenzando desde cero o aprovechando miles de diseños preconstruidos.

En esta publicación, destacaremos las características únicas de Divi 5 y las mejoras de la interfaz de usuario, y cómo lo ayudan a construir sus páginas de manera más eficiente. Desde la configuración de diseños receptivos hasta aprovechar características innovadoras como grupos de módulos y Divi Ai, verá cómo Divi 5 transforma el diseño web en una experiencia más rápida, inteligente y más creativa.

Una nota antes de sumergirnos en: Divi 5 está listo para usarse en nuevos sitios web, pero todavía no recomendamos convertir los sitios existentes en Divi 5.

Dicho esto, vamos a sumergirnos.

Comprender la interfaz de usuario moderna de Divi 5

La interfaz de Divi 5 es una revisión completa de su predecesor, diseñada para la velocidad, la flexibilidad y el diseño intuitivo sin código. Visual Builder ofrece edición frontal en tiempo real con un panel de configuración más limpia, alternar de diseño receptivo y una interfaz de capas anidadas para una navegación perfecta de secciones, filas, columnas y grupos de módulos.

Mejorada por una base más rápida, Divi 5 introduce características únicas como filas anidadas para la profundidad de diseño infinito, grupos de módulos para la gestión de módulos simplificados y variables de diseño para un estilo consistente. Estos avances hacen que Divi 5 sea accesible para principiantes y poderosos para profesionales, transformando cómo se basan en los sitios web en WordPress.

Evolución del constructor visual

Visual Builder de Divi 5 cuenta con una interfaz rediseñada con una experiencia simplificada que es potente y fácil de usar. En comparación con Divi 4, Divi 5 presenta un panel de configuración más limpio e intuitivo que reduce el desorden y organiza opciones lógicamente, lo que hace que los ajustes sean más rápidos.

El nuevo diseño receptivo se alterna le permite cambiar entre varios de escritorio, tabletas y vistas móviles, lo que garantiza que los diseños se vean impecables en todos los dispositivos. Estas mejoras de UI hacen que Divi 5 sea accesible para los principiantes al tiempo que ofrece la demanda de los profesionales de precisión.

Navegación intuitiva

Navegar diseños complejos es fácil con la interfaz de capas de Divi 5. Esta interfaz organiza secciones, filas, columnas, módulos y nuevos grupos de módulos en una estructura clara y jerárquica. Le permite profundizar fácilmente en los elementos de su diseño, ya sea ajustar un solo módulo o reestructurar una sección completa.

La interfaz de arrastrar y soltar las cosas simplifica las cosas, mientras que el modo de estructura alámbrica proporciona una vista de ojo de pájaros de la estructura de su página. Al combinar estas herramientas, Divi 5 hace que construir y editar diseños complejos intuitivos, ahorrar tiempo y reducir la frustración.

Controles de diseño receptivos

Divi 5 presenta puntos de interrupción personalizables para un control preciso sobre cómo se adaptan sus diseños en los dispositivos. Puede elegir entre siete puntos de interrupción predefinidos o establecer valores personalizados para que coincidan con las resoluciones específicas del dispositivo. Esto garantiza diseños perfectos de píxeles sin ajustes CSS manuales.

Este control granular, combinado con unidades avanzadas como Clamp () para la escala de fluidos, garantiza que sus diseños sigan siendo consistentes y visualmente atractivos en todos los tamaños de pantalla.

Construyendo su página con las características únicas de Divi 5

Divi 5 presenta herramientas innovadoras que redefinirán cómo usa Divi. Las filas anidadas permiten anidar la hilera infinita para diseños complejos, mientras que los grupos de módulos simplifican el estilo y la gestión de múltiples módulos como una sola unidad. Las variables de diseño permiten la consistencia en todo el sitio para colores, fuentes y más, y las unidades avanzadas admiten funciones CSS dinámicas como Clamp () y Calc () para diseños receptivos. Diseño basado en el preajuste con el grupo de opciones Presets Styling en los elementos, y Divi Ai acelera la creación de contenido. Juntas, estas características permiten a los usuarios crear sitios web profesionales y receptivos de manera eficiente.

A continuación, detallamos cómo usar estas herramientas para crear una página web.

1. Variables de diseño para un estilo eficiente

Las variables de diseño son configuraciones globales que se pueden usar para colores, fuentes, números, imágenes, texto y enlaces que se pueden aplicar en todo el sitio. Puede definir variables haciendo clic en el icono de variables globales en Visual Builder.

El beneficio de usar variables de diseño es que puede actualizarlas una vez para actualizar todas las instancias de esa variable, asegurando la consistencia y el ahorro de tiempo. Por ejemplo, si establece valores de números para asignar cálculos de Clamp () a los encabezados, establece una jerarquía global para el texto en todo su sitio web. Si necesita hacer un cambio rápido, cualquier módulo de encabezado o texto con las variables aplicadas se actualizará en su sitio, lo que le permitirá hacer cambios de diseño rápido que llenen a lo largo de cada instancia.

Cómo usar variables de diseño

Para maximizar el potencial de las variables de diseño, incorpéngalas temprano en su proceso de diseño. Establecer variables al principio crea un marco consistente, liberándole para concentrarse en la creatividad en lugar de las tareas repetitivas. Comience haciendo clic en el icono del Administrador de variables en Visual Builder.

Cuando aparece el cuadro de diálogo, puede agregar variables para crear la base de su diseño. Por ejemplo, puede usar variables numéricas para establecer una tipografía receptiva.

Las variables numéricas también se pueden usar para el espacio. Por ejemplo, puede establecer un espacio estándar para todas las columnas y filas en su sitio web. El uso de una fórmula calc (), como Calc (80% - 60px) establece el ancho de un elemento de diseño como el 80% del contenedor, al tiempo que agrega 30px de relleno a cualquiera de los lados. Seleccione Calc en el menú desplegable para aplicar la fórmula.

Ingrese la fórmula Calc () en el campo Valor . Haga clic en el botón Guardar variables para agregarlo al administrador de variables.

Una vez que se guardan sus variables, Divi facilita la aplicación de ello a lo largo de su diseño. Para usar el espacio, haga clic en una fila, columna o módulo, navegue hasta la pestaña de diseño y busque el campo de ancho.

Finalmente, haga clic en Insertar icono de contenido dinámico para seleccionar la variable de espaciado global.

Como se señaló anteriormente, la aplicación de una variable de diseño garantiza la consistencia en su sitio. Actualización de sus propiedades en el administrador variable sincroniza instantáneamente todas las instancias, ahorrándole horas de ajustes manuales.

Consejos para usar variables de diseño

• Organice sus variables cuidadosamente: nombre variables descriptivamente para facilitarlas identificar en proyectos complejos.
• Aproveche los preajustes: Combine las variables de diseño con los preajustes globales de Divi para crear plantillas de estilo reutilizables para módulos, reduciendo el tiempo de configuración para nuevas páginas.
• La capacidad de respuesta de la prueba: Vista previa de diseños basados ​​en variables en los dispositivos en el Visual Builder para garantizar que todas las variables funcionen como se esperaba.

2. Diseño basado en preajuste con preajustes de grupos de opciones

El sistema de diseño basado en el preajuste de Divi 5 revoluciona el estilo con dos herramientas potentes: presets de elementos y preajustes de grupos de opciones. Estas características le permiten guardar y reutilizar configuraciones, asegurando la consistencia y racionalización del flujo de trabajo de su proyecto.

Divi 5 elementos preestablecidos

Los preajustes de elementos le permiten guardar la configuración de un módulo, que incluye texto, colores, tipografía, espaciado y efectos de desplazamiento, para reutilizar en su sitio web. Por ejemplo, puede crear un módulo de botón totalmente de estilo con una fuente específica, fondo de gradiente y una animación de desplazamiento. Una vez guardado como un elemento preestablecido, puede aplicarlo a cualquier botón de su sitio con un solo clic, manteniendo un estilo idéntico. Si actualiza el preajuste, como cambiar el fondo a un color sólido, cada instancia de ese botón se actualiza automáticamente, eliminando ediciones repetitivas y garantizando un aspecto unificado.

Presets del grupo de opciones Divi 5

Por el contrario, los preajustes de los grupos de opciones se centran en grupos de estilo reutilizables, como tipografía, bordes o sombras, que pueden aplicarse a diferentes elementos para diseños cohesivos. Por ejemplo, puede crear un grupo de opciones preestablecido para un borde negro de 1px con un radio de 5px y usarlo en botones, imágenes y filas.

Si luego ajusta el preajuste a un borde de 2px, todos los elementos vinculados se actualizan al instante, ahorrando tiempo y manteniendo la consistencia. Este enfoque modular le permite mezclar y combinar grupos de estilo en los elementos, ofreciendo flexibilidad sin sacrificar el control.

Cómo usar presets de manera efectiva

Los presets de elementos ya están presentes al comenzar con un sitio de inicio o un diseño prefabricado. Sin embargo, al crear un sitio web desde cero, primero deberá crearlos. La creación de estos preajustes le permite acelerar el proceso de diseño diseñando instantáneamente módulos similares en todo su sitio web.

Creando un elemento preestablecido

Para crear un elemento preestablecido, diseñe un módulo con la configuración deseada. Luego, haga clic en el menú preestablecido en la esquina superior derecha de la configuración del módulo.

Haga clic en el nuevo preajuste de los estilos actuales para crear un nuevo preajuste.

Dé un nombre al preajuste, elija si lo asigna como valor predeterminado y guárdelo. Si lo elige como el preajuste predeterminado, cada acordeón que agregue a su sitio se diseñará de manera idéntica, lo que facilita la construcción de sus páginas web de manera más rápida y eficiente.

Crear un grupo de opciones preestablecido

El proceso de crear un grupo de opciones preestablecido es ligeramente diferente. En lugar de aplicar un preajuste a un módulo, puede asignar presets a aspectos de un módulo que se puede llevar a otros tipos de módulos, columnas, filas o incluso secciones. Los preajustes de los grupos de opciones son excelentes para diseñar bordes, agregar controles de transformación, filtros, sombras de caja y más, lo que le permite mantener consistentes elementos más pequeños en todo momento.

Por ejemplo, desea crear un estilo de borde para imágenes y columnas. Seleccione un módulo de imagen, navegue hasta la pestaña de diseño y pasee el tiempo sobre la configuración del borde hasta que aparezca el icono de preajuste de un grupo .

A continuación, haga clic en Agregar nuevo preajuste .

Estille el borde, nombre y guarde el preajuste.

Consejos para usar presets basados ​​en el diseño de Divi 5

La combinación de preajustes de elementos y los preajustes de los grupos de opciones le permite construir un sistema de diseño escalable. Aquí hay algunos consejos para usarlos de manera efectiva para crear una página web con Divi 5:

• Úselos para la eficiencia: cree preajustes de elementos u preajustes de grupos de opciones para acelerar la construcción de páginas, especialmente para sitios web grandes. Este método le ahorra del estilo repetidamente un módulo, fila o sección. Creas estilos por adelantado y los aplicas donde sea necesario.
• Establecer consistencia de diseño: los preestablecidos aseguran un estilo uniforme entre los elementos, reforzando la identidad de su marca y el esmalte profesional.
• Editar presets cuando su sitio requiere cambios de diseño: los preajustes le permiten actualizar los estilos globales sin editar elementos individuales manualmente, lo que los hace ideales para iteraciones de diseño o revisiones de clientes.
• Úselos para la escalabilidad: puede combinar presets con variables de diseño para crear un marco robusto para sitios que a menudo requieren actualizaciones. ¿Necesita agregar una página en el futuro? Los preajustes le permiten hacer esto más rápido y de manera más eficiente.

3. Filas anidadas para diseños flexibles

Las filas anidadas en Divi 5 reemplazan las secciones especializadas de Divi 4 con un sistema más flexible e infinitamente nido. A diferencia de las filas tradicionales, las filas anidadas se pueden colocar dentro de las columnas, lo que le permite apilar filas, módulos o filas anidadas adicionales en prácticamente cualquier configuración.

Para crear una fila anidada, simplemente agregue uno a una columna, o debajo de un módulo dentro de una columna, a través del Visual Builder y llénelo con módulos o más filas anidadas.

Esta característica le permite crear diseños complejos en capas. Por ejemplo, en una sección sobre, puede colocar una fila anidada de 3 columnas en un módulo de texto para agregar botones para guiar a los usuarios a diferentes páginas.

Los próximos controles de Flexbox en Divi 5 mejorarán las opciones de posicionamiento, ofreciendo una alineación y espaciado precisos para diseños intrincados como tablas de precios, carteras o secciones de contenido de niveles múltiples.

Cómo usar filas anidadas

Para aprovechar el poder de las filas anidadas, siga estos pasos en el Visual Builder:

Comience insertando una fila estándar en el diseño de su página. Esto servirá como la base. A continuación, haga clic en la pestaña nueva fila para revelar las opciones de columna para su nueva fila anidada.

A continuación, elija el módulo para la primera columna. Para este ejemplo, una imagen.

En la segunda columna, agregue otra imagen. Puede crear preajustes de grupos de opciones para bordes, sombras de caja y transformar efectos desde allí.

Puede agregar filas anidadas a la otra columna o debajo de la primera. Las posibilidades son infinitas.

Puede crear diseños avanzados que sean múltiples niveles de profundidad. Por ejemplo, puede hacer una tabla de precios con una fila anidada para presentar dos botones de lado a lado, una característica que carece de versiones anteriores de Divi. Hay varias formas de usar filas anidadas , lo que las convierte en una característica versátil al construir una página web con Divi. Son perfectos para construir secciones de héroes, páginas de equipo, encabezados, pies de página y más.

Consejos para usar filas anidadas

• Planifique su diseño primero: antes de agregar filas anidadas, dibuje el esquema de la estructura de su página para determinar dónde agregarlas proporciona valor, como para secciones de héroes de varias capas, tablas de precios o cuadrículas de equipo.
• Use para diseños modulares: cree filas anidadas para componentes reutilizables, como una fila con una imagen y texto para testimonios, luego duplique o guárdelos para un estilo constante en todo su sitio web.
• Combine con grupos de módulos: empareje filas anidadas con grupos de módulos para organizar diseños complejos.
• Utilice los puntos de interrupción receptivos de Divi: pruebe las filas anidadas a través de los siete puntos de interrupción de Divi 5 utilizando alternativos receptivos para garantizar que los elementos anidados se alineen correctamente en todos los dispositivos.

4. Grupos de módulos para contenido organizado

Los grupos de módulos actúan como contenedores en Divi 5 que le permiten agrupar múltiples módulos dentro de una columna. Puede peinarlos, moverlos o duplicarlos como una sola unidad. Pueden simplificar su flujo de trabajo, especialmente para diseños complejos, y preparar el escenario para el próximo soporte de FlexBox, desbloqueando opciones de posicionamiento aún más precisas.

A partir de ahí, puede agregar módulos de diseño y filas anidadas o aplicar preajustes del grupo de opciones al grupo para crear diseños de estilo que pueda duplicar o guardar fácilmente en la biblioteca Divi o la nube Divi.

Cómo usar grupos de módulos

Para crear un grupo de módulos, agregue una nueva fila y seleccione una estructura de columna. Seleccione el módulo de grupo de las opciones disponibles de Divi 5.

Dentro del grupo de módulos, puede agregar módulos, como texto, imágenes, botones o incluso filas anidadas. Por ejemplo, puede crear un grupo que contenga un encabezado, texto, una imagen y un botón para una sección de llamadas a la acción.

Una vez diseñado, puede guardar o duplicar el grupo de módulos haciendo clic en el menú de ellipsis en la esquina superior derecha del grupo.

Los grupos de módulos pueden crear secciones de miembros del equipo, secciones de llamadas a la acción, encabezados de página interior y más. Pero lo más importante, los grupos de módulos serán extremadamente útiles una vez que se liberen características como Flexbox y The Loop Builder.

Consejos para usar grupos de módulos

• Plan de grupos de módulos estratégicamente: use grupos de módulos para componentes reutilizables, como CTA, testimonios, miembros del equipo o tarjetas de producto. Ayudan a optimizar el proceso de construcción y mantener la organización.
• Combine grupos de módulos con preajustes: aplique los preajustes de los grupos de opciones a los grupos de módulos para un estilo consistente, como sombras uniformes o bordes, en múltiples grupos.
• Use Divi Cloud: guarde los grupos de módulos utilizados con frecuencia en Divi Cloud para acceso rápido en todos los proyectos, especialmente para clientes con necesidades de diseño similares.

Usando grupos de módulos, puede crear diseños modulares y organizados que sean fáciles de administrar y escalar, lo que los hace ideales para construir páginas web simples o más complejas.

5. Unidades avanzadas para el diseño dinámico

La característica de unidades avanzadas de Divi 5 admite una gama más amplia de unidades CSS (PX, VW, REM, %, etc.) y funciones como Calc (), Clamp (), Min () y Max () dentro de un solo campo de entrada, permitiendo diseños dinámicos y receptivos. Por ejemplo, puede establecer el ancho de una sección en Calc (100% - 40px) o la abrazadera (20px, 3VW, 40px) para la tipografía de fluidos que escala en función del tamaño de la visión.

Las unidades avanzadas también se pueden utilizar como variables de diseño para establecer reglas globales y mantener los diseños consistentes en todo su sitio.

Cómo usar unidades avanzadas

Hay un par de formas de usar unidades avanzadas, pero la forma más efectiva es combinarlas con variables de diseño para la consistencia del diseño. Sin embargo, puede haber casos en los que desee asignarlos a nivel de módulo.

Un buen ejemplo es con texto. Claro, puede establecer fórmulas Clamp () en el Administrador de variables para controlar el tamaño en todo su sitio, pero ¿qué pasa si desea que un encabezado sea más impactante agregando espacio para que se destaque mejor? Ahí es donde entran las unidades avanzadas.

Para demostrar, haga clic para agregar un módulo de encabezado a su página web. En la pestaña Diseño, navegue al campo de tamaño.

Junto al campo de ancho, haga clic en el icono - para revelar las opciones de unidad avanzada.

En el menú desplegable, seleccione VW (ancho de la visión) e ingrese 50 . Esto le dirá al encabezado que ocupe el 50% del ancho de la ventana gráfica. La ventana gráfica es el área visible de la ventana del navegador web. Entonces, independientemente de cuán ancha sea la ventana del navegador, siempre será la mitad del ancho de la ventana del navegador.

Cuando obtenga una vista previa de cómo se verá el titular en otros tamaños de pantalla, notará que el encabezado permanece del mismo ancho, independientemente.

Consejos para usar unidades avanzadas

• Comience simple: comience con unidades básicas como PX o % para diseños sencillos, luego experimente con Clamp (), Calc (), VH o VW para efectos receptivos.
• Use la abrazadera para la tipografía: aplique Clamp () a los tamaños de fuente o el espacio para crear diseños fluidos y accesibles que se adapten a cualquier tamaño de pantalla sin puntos de interrupción manuales.
• Combine con las variables de diseño: almacene unidades de uso frecuente para encabezados y texto del cuerpo como variables de diseño para mantener la consistencia y simplificar las actualizaciones.

Las unidades avanzadas le brindan la precisión de los CSS personalizados dentro de la interfaz sin código de Divi, lo que facilita la creación de páginas web dinámicas y profesionales que se adaptan a cualquier dispositivo.

6. Integración de divi ai

Divi AI mejora el proceso de diseño generando texto, imágenes, código o secciones y diseños completos basados ​​en indicaciones de lenguaje natural. Funciona dentro del Visual Builder en Divi 5, facilitando la ayuda de un pequeño diseño o ayuda de redacción cuando sea necesario.

Por ejemplo, puede usar un mensaje como "Crear una sección de héroe moderna con un titular, un botón y una imagen de fondo". Divi AI producirá un diseño totalmente de estilo, que puede refinar manualmente para que coincida con su visión.

Con Divi Ai, puede acelerar el proceso de diseño, superar el bloqueo del escritor o obtener un poco de impulso creativo cuando sea necesario.

Cómo usar divi ai

Para aprovechar al máximo el divi ai al construir una página web en Divi 5, puede usarla para ayudarlo a escribir copias en la marca, crear imágenes, agregar algunos CSS a los módulos existentes o incluso generar secciones. Divi AI puede ayudarlo a crear hermosas páginas web que resuenen con sus visitantes.

Para usar Divi AI en un módulo de texto existente, pasee sobre el área de texto y haga clic en el icono Divi AI en la pestaña Contenido.

Aparecerá un cuadro de diálogo con múltiples opciones. Puede escribir y reemplazar el contenido existente, alargarlo, acortarlo o simplificarlo, arreglar la ortografía y la gramática, traducirlo o incluso cambiar el tono.

Una vez que elija una opción, Divi AI alterará la copia según el contenido existente. Una vez terminado, puede usar el texto, volver a intentarlo, mejorarlo con IA o refinar el resultado con algunas palabras guía.

Consejos para usar Divi ai

• Sea específico con sus indicaciones: incluya detalles como tono, colores o preferencias de diseño al usar divi ai para crear imágenes o secciones. Lo mismo ocurre con el texto y el código. Cuanto más específico, mejor será la salida.
• Iterar según sea necesario: si la salida inicial no es ideal, refine su mensaje o genere múltiples variaciones para encontrar el mejor ajuste.
• Úselo para inspiración: una de las mejores maneras de usar Divi AI es hacer una lluvia de ideas, como generar conceptos de diseño o lemas, incluso si planea personalizar su página web en gran medida.

Las mejores prácticas para construir páginas web con Divi 5

Adoptar un enfoque estratégico para las características de Divi 5 es esencial para maximizar su potencial. Comience planificando su sistema de diseño por adelantado. Definir variables de diseño de núcleo, como colores primarios y secundarios, enlaces relevantes, configuraciones de tipografía y fuentes.

Al construir su página, establezca preajustes de grupos de opciones para estilos reutilizables como efectos de ondulación, sombras o tipografía, que aceleran su flujo de trabajo y mantienen una estética cohesiva en su sitio.

Pruebas temprano y a menudo también es crucial para resultados positivos. Use los puntos de interrupción receptivos de Divi 5 para obtener una vista previa de unidades avanzadas para asegurarse de que se vean bien en todos los dispositivos. Los atagos receptivos de Divi 5 le brindan siete puntos de interrupción para explorar, dándole una mejor idea de cómo aparecerá su diseño en pantallas de diferentes tamaños.

Combine los preajustes de elementos con los preajustes del grupo de opciones para equilibrar la flexibilidad y la consistencia. Use presets de elementos para módulos específicos, como un módulo CTA de estilo. En contraste, para mantener la uniformidad, aplique preajustes de grupos de opciones para propiedades compartidas, como estilos de borde o sombras. Cuando se necesitan actualizaciones, puede ajustar estos grupos preestablecidos para los cambios globales en lugar de editar elementos individuales manualmente.

Finalmente, mantenga sus diseños fáciles de mantener el rendimiento y la usabilidad. Evite las filas de sobrecarga o confíen en las fórmulas de calc () complejos a menos que sea necesario, ya que pueden complicar la edición. Del mismo modo, cree grupos de módulos para diseños esenciales que planea reutilizar en su sitio web.

Construya páginas web más inteligentes con Divi 5

Divi 5 redefine el diseño web de WordPress, lo que le permite construir fácilmente páginas web impresionantes y receptivas. Su constructor visual moderno, controles intuitivos, características innovadoras y divi ai optimizan el proceso, asegurando resultados profesionales con un esfuerzo mínimo. Independientemente de su nivel de habilidad, estas herramientas hacen que la creación de sitios web efectivos y dinámicos sea más rápido, inteligente y más creativo.

¿Listo para explorar el potencial de Divi 5? Descargue el lanzamiento de Divi 5 Alpha hoy y experimente con sus últimas características para dar vida a su visión. Divi 5 se adapta a los nuevos sitios, pero aún no se recomienda para convertir los existentes.

¡Nos encantaría escuchar tus pensamientos! Comparta sus comentarios comentando a continuación. Mejor aún, publique sobre su experiencia Divi 5 en las redes sociales para ayudar a correr la voz.