Cómo construir un sitio web con Divi 5 (únete temprano y avanza)

Piense en cuando se dio cuenta por primera vez de lo rápido que podría reunir un hermoso sitio web con Divi. Se sintió como el equilibrio perfecto entre la creatividad y la simplicidad. Divi 4 dio a todos las fantásticas herramientas de diseño y un constructor visual suave, pero nosotros en temas elegantes no íbamos a establecer.

Hemos escuchado estrechamente sus comentarios y trabajamos duro para mejorar Divi. Divi 5 toma todo lo que amaste y lo hace más rápido, más suave y más poderoso. Está diseñado para ayudarlo a crear con menos esfuerzo y más posibilidades y estar listo para el futuro.

Si desea ver qué hay de nuevo o comenzar su próximo sitio, esta guía lo ayudará a construir un sitio web nuevo, paso a paso con Divi 5 y, en el camino, compartir consejos prácticos sobre cómo aprovecharlo al máximo. ¡Vamos!

Divi 5 está listo para usarse en nuevos sitios web, pero no completamente listo para migrar los existentes.

¿Qué hace que Divi 5 sea diferente?

Divi 5 representa el mayor cambio en nuestro constructor de páginas desde que lo lanzamos por primera vez. Lo hemos reconstruido desde cero con los estándares web modernos en mente. Esto no es solo un estiramiento facial. Hemos repensado por completo cómo se deben construir sitios web con Divi.

La Web continúa evolucionando, con la navegación móvil en crecimiento y las expectativas de los usuarios aumentan. Divi siempre se ha adaptado a estos cambios, y Divi 5 continúa esta tradición al adoptar los últimos estándares.

Al abrir Divi 5, podrías pensar: "Esto parece fresco". Luego comienzas a construir, y ahí es cuando lo notas.

"Espera, ¿esa sección se cargó al instante?"

Sí, lo hizo. Y ese es solo el comienzo.

Divi 5 mantiene lo que funcionó en Divi 4, pero arregla las frustraciones con las que probablemente ha aprendido a vivir. Lo construimos porque ya lo suficientemente bueno ya no era lo suficientemente bueno, no para nosotros, y ciertamente no para usted. Los sitios que construye hoy necesitan hacer más y cargarse más rápido.

Exploremos los aspectos más destacados de lo que el alfa actual de Divi 5 se envía:

Desde códigos cortos hasta estructura basada en bloques

Divi 4 almacenó sus diseños como códigos cortos: esos bits de código en los soportes cuadrados que WordPress lee para crear sus páginas. Trabajaron, pero no eran perfectos.

En Divi 5, hemos reconstruido cómo se almacena su contenido. ¡No más códigos cortos escondidos en su base de datos! Ahora usamos un enfoque limpio a base de bloque que se adapta mejor a la dirección de WordPress.

Sentirás la diferencia cuando editas páginas. Haga clic en algo y responde de inmediato. No hay retraso, no hay esperanza de que procesen los códigos cortos. Tus cambios simplemente suceden.

Si bien hemos cambiado casi todo debajo del capó, no necesitará volver a aprender cómo construir. La experiencia visual se mantiene familiar. Acabamos de hacer lo que sucede detrás de escena mucho más aerodinámico y moderno.

La nueva interfaz Divi 5

Divi 5 presenta una interfaz más limpia que vuelva a enfocar en su trabajo de diseño. El Visual Builder ahora cuenta con paneles laterales en lugar de cajas flotantes que solían cubrir su contenido. Este cambio hará una gran diferencia en cómo trabaja con Divi.

La barra de herramientas se ha reorganizado. Las acciones comunes ahora están a su alcance, mientras que las herramientas especializadas siguen siendo accesibles sin abarrotar su espacio de trabajo.

Los recolectores de color, los controles de tipografía y los ajustes de espaciado aparecen contextualmente cuando es necesario.

La edición de texto se siente más natural en esta versión. Puede formatear contenido directamente en la página con controles simples que aparecen cuando selecciona texto. Este enfoque directo acelera considerablemente el proceso de escritura y formato.

También hemos mejorado cómo se organizan la configuración. Las opciones relacionadas se agrupan lógicamente, reduciendo su tiempo buscando a través de pestañas y menús. Todo el sistema se siente más cohesivo y decidido. Además, las opciones de modo claro y oscuro son toques reflexivos que hacen que las sesiones de diseño largas sean más cómodas en sus ojos.

Estas mejoras de interfaz pueden parecer sutiles inicialmente, pero después de construir algunas páginas, notará cuánto más rápido puede trabajar cuando las herramientas se mantienen fuera de su camino.

Espacio de trabajo de múltiples paneles

El Divi 5 renovado trae una nueva versión de cómo interactúa con sus diseños. Mientras que Divi 4 nos dio una interfaz de usuario intuitiva, el nuevo diseño de panel en Divi 5 los organiza de manera que se sientan más naturales para el trabajo de diseño.

Configuración ahora atraca perfectamente a lo largo de los lados de su pantalla, lo que le brinda una vista sin obstáculos de su página. Puede ver que los cambios ocurren en tiempo real sin necesidad de cerrar paneles o moverlos. Esta visión clara hace que la precisión funcione mucho más fácilmente al ajustar el espacio o la alineación.

La nueva configuración de múltiples paneles le permite mantener sus herramientas repartidas pero aún al alcance.

Puede abrir su configuración de texto en un lado mientras ajusta el espacio en el otro. No necesitará cerrar una cosa para trabajar en otra.

Las migas de pan lo ayudan a navegar entre elementos rápidamente. Haga clic para saltar de un botón a su fila o sección de padres. Esto guarda innumerables clics cuando está profundamente en editar diseños complejos.

Algunos diseñadores prefieren la configuración a la derecha y otros a la izquierda. No tiene que conformarse con la opción que no prefiere. Divi 5 te permite elegir lo que se siente más cómodo. También puede apilarlos en pestañas, lo que ayuda a hacer malabares con muchos elementos.

Esto puede no parecer significativo, pero podría ser conveniente al construir diseños complejos como encabezados, donde debe cambiar entre configuraciones de logotipo, estilo de menú y propiedades de botones.

Diseñamos los paneles para formar parte de su espacio de trabajo, no interrupciones para él. Con la interfaz de usuario de Divi 5, puede concentrarse donde pertenece: en su lienzo de diseño web.

Transición de filas fijas a filas anidadas

En Divi 4, cuando intentas construir algo complejo, de repente golpeas paredes con la estructura de columna de fila de sección y tienes que depender de secciones especializadas o CSS personalizados. Divi 5 arregla este dolor de cabeza con filas anidadas. Puede sonar simple, pero este cambio abre completamente lo que puede crear sin piratear soluciones.

Ahora puede hacer clic dentro de cualquier fila y agregar una nueva estructura de fila allí, sin necesidad de secciones especializadas o escribir CSS personalizados para agrupar su contenido lógicamente.

Este sistema de fila anidada es solo el comienzo de nuestro motor de diseño mejorado. Estamos trabajando en controles FlexBox y nuevas plantillas de fila que harán que las secciones especializadas sean obsoletas. Pronto, la implementación de FlexBox hará que los diseños receptivos sean aún más sencillos, al tiempo que le brinda un mejor control sobre cómo el contenido se alinea y se distribuye en las pantallas.

Otras características notables

Más allá de los principales cambios estructurales, Divi 5 tiene nuevas características que hacen que la construcción de sitios web sea más suave e intuitiva. Veamos algunas adiciones destacadas en el alfa actual que cambiará la forma en que trabaja:

• Las variables de diseño centralizan sus opciones de estilo y hacen que los cambios en todo el sitio sean muy fáciles. Defina colores, fuentes, tamaños, imágenes y otros elementos una vez, luego aplíquelos en todo su sitio. ¿Necesita actualizar los colores de su marca? Cambie la variable, y cada instancia se actualiza automáticamente.
• La edición de un solo clic hace que interactuar con su contenido sin esfuerzo. Simplemente haga clic en cualquier módulo para editarlo. No más caza de pequeños iconos de equipo o botones de configuración. Este pequeño cambio guarda innumerables clics durante toda su jornada laboral.
• La escala de lienzo le permite ver cómo se ve su diseño en diferentes tamaños de pantalla sin cambiar de vista. Arrastre el borde del lienzo para cambiar el tamaño y observa que su diseño se adapta en tiempo real, perfecto para verificar el comportamiento receptivo sin el cambio constante de pestañas.
• El soporte de unidades avanzadas abre nuevas posibilidades para diseños precisos y receptivos. Use funciones CSS como calc (), clamp () y min ()/max () directamente en los campos de configuración de Divi para crear diseños de fluidos que se adapten perfectamente a cualquier tamaño de pantalla.
• Mejora del rendimiento evitando la carga de scripts y módulos innecesarios
• Los puntos de interrupción personalizables se expanden desde solo tres (escritorio, tableta, móvil) a siete opciones ajustables. Este control ajustado te ayuda a crear diseños perfectos para todo, desde teléfonos pequeños hasta monitores ultraes.

Construyendo un sitio web con Divi 5: una guía paso a paso

Ahora, vamos a la carne de esta guía: un tutorial práctico que lo lleva desde el lienzo en blanco hasta el sitio web terminado utilizando las potentes características de Divi 5. Desglosaremos cada fase del proceso en pasos manejables que se construyen entre sí

1. Instalación de Divi 5

Obtener Divi 5 corriendo solo toma unos pocos pasos. Descargue la última versión alfa del área de su miembro, cárguela a WordPress a través de la sección del tema y activela como lo haría normalmente.

2. Personalización de su espacio de trabajo

Lo primero que notará al abrir el constructor visual de Divi 5 es lo limpio y despejado que se siente. Los paneles flotantes no bloquearán su vista como antes. En cambio, encontrará un diseño más reflexivo con paneles acoplables que se mantienen fuera de su camino. Tómese unos minutos para configurar su espacio de trabajo como usted le gusta.

Puede alternar entre el modo de luz y oscuro en función de su preferencia o su tiempo de trabajo.

Creando un espacio de trabajo que funcione para ti

Divi 5 ofrece más que solo paneles en movimiento. Puede agrupar paneles relacionados en pestañas, lo que mantiene su espacio de trabajo organizado incluso al manejar configuraciones complejas.

Abra dos paneles de configuración diferentes y arrastre uno a otro. Se combinarán en un diseño con pestañas, lo que le permitirá cambiar entre ellos con un clic.

Si prefiere una configuración clásica, aún puede flotar paneles en cualquier lugar de su pantalla. Arrastre un panel lejos de los bordes para separarlo y colocarlo donde desee.

Para proyectos más grandes, el modo de rayos X desde la barra de herramientas izquierda puede ser útil. Describe cada elemento con un borde sutil, lo que hace que sea más fácil detectar dónde comienzan y terminan las secciones y los módulos. Esta guía visual lo ayuda a mantenerse orientado cuando trabaja con diseños detallados.

Acelerando tu flujo de trabajo

Los atajos de teclado pueden acelerar dramáticamente su proceso de diseño en Divi 5. Presione la opción (?) Para acceder al menú Ayuda, donde encontrará una lista completa de atajos. Aprender solo unas pocas combinaciones clave puede afeitarse horas de los proyectos más grandes.

Al editar elementos anidados (como un botón dentro de una fila dentro de una fila), las migas de pan muestran su posición exacta en la jerarquía. Haga clic en cualquier parte del sendero de pan de pan para saltar directamente a la configuración de ese elemento sin cazar a través de capas.

Haga clic en el icono del panel Capas en la barra de herramientas izquierda para aprovecharlo. Le brinda una vista de toda la estructura de su página como una lista anidada, lo que hace que sea mucho más fácil seleccionar elementos específicos cuando trabaje con diseños complejos.

2. Configuración de variables dinámicas

Variables de diseño en Divi 5 Cambie cómo administra los elementos visuales de su sitio web. Le dan un lugar central para controlar el diseño de su sitio y simplificarlo actualizándolo. Piense en ellos como atajos que puede usar en su sitio web.

Para comenzar a usar las variables de diseño, abra el Visual Builder y busque el icono del Administrador de variables en la barra lateral izquierda. Cuando haga clic en él, verá opciones para crear diferentes tipos de variables: colores, fuentes, números, imágenes, texto y enlaces.

Configuración de colores globales

Primero, configure algunas variables de color. Haga clic en la pestaña Colores, agregue sus colores y nombres algo memorable como "azul de marca" o "color primario". Haga clic en Guardar y ha creado su primera variable.

Haga lo mismo para sus colores secundarios, tonos de fondo y colores de texto. Tener todos los colores de su marca guardados como variables significa que nunca tendrá que recordar los códigos hexadecimales nuevamente.

Creación de variables de fuentes y números

A continuación, establezcamos su sistema de tipografía. Debajo de la pestaña Fuentes, cree variables para su encabezado y fuentes corporales. Esto mantiene su texto consistente en todo el sitio.

Para las variables numéricas, piense en medidas comunes como:

• Relleno estándar (tal vez 30px para secciones)
• Radio de borde (si quieres esquinas redondeadas)
• Anchos máximos para contenedores de contenido
• Tamaños de fuente

Crear estas variables lleva unos minutos por adelantado pero ahorra horas. Cuando los clientes quieren cambios, no necesitará cazar a través de cada página, ajustando cada elemento. Simplemente actualice la variable una vez.

También debe crear variables de texto para contenido que pueda cambiar más adelante, como su número de teléfono, horario comercial o eslogan de la empresa.

Cree variables de enlace con URL que pueda reutilizar en todo su sitio, que son perfectas para manejar enlaces de uso común, como perfiles de redes sociales, URL afiliadas o un botón de "ponerse en contacto".

Del mismo modo, agregue variables de imagen para imágenes de uso común, como logotipos.

Usar variables con unidades avanzadas

Divi 5 se vuelve aún más poderoso cuando combina variables de diseño con unidades CSS avanzadas. Cree una variable número utilizando funciones CSS como Clamp () para la tipografía receptiva que escala entre los tamaños de pantalla.

Por ejemplo, cree una variable de tamaño de encabezado con: Clamp (36px, 5VW, 72px).

Esto establece su texto al menos 36 px en pantallas pequeñas, escala fluida en pantallas medianas y tapa a 72 px en pantallas grandes. Aplique esto a sus módulos de encabezado para el texto que siempre se ve proporcional independientemente del dispositivo.

La combinación de variables y unidades avanzadas elimina gran parte del tedioso trabajo de diseño receptivo. Su texto y espaciado se ajustan automáticamente sin configurar múltiples puntos de interrupción manualmente.

3. Páginas y plantillas de construcción con divi

Ahora que ha personalizado su espacio de trabajo y ha creado sus variables de diseño, es hora de construir su primera página con Divi 5. El Visual Builder le brinda varias formas de comenzar a crear contenido.

Opción 1: Cree su sitio web con Divi AI

Con Divi Quick Sites + Divi AI, puede crear instantáneamente un sitio web que funcione con múltiples páginas, diseños de constructor de temas, configuraciones de diseño universal, una barra de navegación preparada y configuraciones optimizadas de WordPress al proporcionar un mensaje de texto básico.

Al construir un sitio web con Divi AI, vaya a su tablero de WordPress y haga clic en el icono Divi en el menú. Busque el cuadro de sitios rápidos Divi y presione el botón "Generar un nuevo sitio".

Seleccione la opción "Generar su sitio con IA" y proporcionar información detallada sobre su negocio. Cuantos más detalles incluya sobre sus servicios, estilo y audiencia, mejores resultados obtendrán. Recuerde que necesitará una suscripción Divi AI para usar esta función.

Si tiene productos para vender, consulte la opción Instalar wooCommerce durante la configuración, y Divi creará automáticamente sus páginas de tiendas con todos los componentes necesarios.

Para las imágenes, puede elegir la opción Divi Quick Sites para acceder a la colección de Unsplash, dejar que Divi cree imágenes personalizadas basadas en la descripción de su negocio o seleccione "Usar el marcador de posición" si planea agregar sus propias fotos más adelante.

Luego podrás personalizar los colores y las fuentes. Puede seleccionar manualmente los colores y la tipografía de su marca si tiene requisitos específicos, o dejar que Divi cree combinaciones complementarias.

Después de que Divi construye su página, reemplace los valores de color fijos con sus variables de diseño. Esto vincula sus secciones generadas por IA directamente a su sistema de diseño. Si su cliente quiere un azul más oscuro más tarde, solo tiene que actualizarlo una vez.

Si no se ha conformado con los colores de la marca y deja que Divi elija para usted, y le gusta el resultado, asegúrese de convertir esos colores en variables de diseño. Además, cree preajustes de opciones globales a partir de estos colores. De esta manera, sus páginas se mantienen flexibles y cohesivas y siempre coinciden con el estilo visual de su sitio.

Una vez que esté satisfecho con sus selecciones, presione el botón "Generar y publicar" y espere unos minutos mientras Divi trabaja su magia. Su nueva página de inicio aparecerá, lista para dar la bienvenida a los visitantes a su sitio.

Agregar nuevas secciones a sus páginas usando AI

Use el botón "Generar la sección con AI" para generar una nueva sección rápidamente. Puede describir lo que necesita para Divi AI, y generará una sección para usted.

Refinamiento de secciones generadas por IA

Una vez que Divi crea su contenido, puede adaptarlo fácilmente para satisfacer sus necesidades. Cada parte de su sitio sigue siendo totalmente personalizable a través de las herramientas DIVI habituales. Cambie cualquier texto, intercambie imágenes, ajuste el espacio y use los colores de su marca con variables de diseño.

Estos diseños le dan un punto de partida fuerte, siguiendo los estándares actuales de diseño web. En lugar de comenzar con una página vacía, está trabajando desde una plantilla bien construida que solo necesita su entrada única. Esto ahorra tiempo y esfuerzo en las opciones de diseño al tiempo que le permite mantener el control total sobre el aspecto y la sensación.

Con las funciones de edición mejoradas de Divi 5 y el poder de la IA, construir un sitio web se vuelve más rápido y simple. Obtiene resultados de calidad rápidamente y aún tiene la libertad de personalizar todo, lo que lo hace ideal para lanzar sitios profesionales en menos tiempo.

Opción 2: Cree su sitio web utilizando diseños prefabricados

Para agregar uno de los 2000+ diseños listos para su página, presione el botón Azul Plus en la esquina superior izquierda de su pantalla y elija "Diseño premiado". Aparecerá una ventana mostrando todas sus opciones.

Elija un paquete de diseño que le guste. Para encontrar algo más rápido, use los filtros o escriba lo que necesita en el cuadro de búsqueda. Haga clic en cualquier paquete que le llame la atención, luego elija qué estilo de página desea. Puede desplazarse a la izquierda para ver el diseño completo antes de decidir.

Cuando haya encontrado "el indicador", haga clic en "Use este diseño". Es posible que vea un mensaje preguntando sobre la importación de esquemas de color. Simplemente desmarque esto si no lo quieres.

El único inconveniente? Tendrá que repetir esto para cada página que construya. Pero hay una mejor manera. Con sitios rápidos de Divi (no se necesita AI), puede acelerarlo significativamente. La mejor parte es que cada usuario de Divi puede acceder a sitios rápidos y todos sus diseños de inicio sin pagar más por una suscripción de IA.

Mirar nuestra colección de sitios de inicio vale su tiempo. Cada uno presenta fotos y obras de arte únicas que no verá en otro lugar.

Simplemente diríjase a Divi, haga clic en la pestaña Sitios rápidos, presione "Genere un nuevo sitio" y elija "Use el sitio de inicio prefabricado" esta vez. Explore los diseños hasta que vea uno que coincida con su visión. Agregue su información, elija sus colores y fuentes, y deje que el sistema funcione su magia.

Después de aplicar un diseño ...

Después de solicitar o importar un diseño prefabricado, si no seleccionó los colores de su marca y solo usó los colores y fuentes predeterminados que vienen con el diseño, pase por el diseño y reemplace los códigos de color fijos con sus variables de diseño y sus preajustes de grupos de opciones.

Si ha seleccionado los colores y las fuentes pero aún no ha creado los preestablecidos, convierta esos colores en variables de diseño también. Además, cree preajustes del grupo de opciones de estos colores.

Esto garantiza que todo el contenido del diseño siga sus estilos preestablecidos, por lo que elementos como botones permanecen consistentes en cada página. Del mismo modo, obtienes la conveniencia de diseños preparados que se pueden mantener fácilmente y se alinean con el lenguaje visual de tu marca.

Tendrá un sitio web terminado listo en minutos. Todo encaja perfectamente: colores, fuentes, todo el paquete. Después de que salga, puede ajustar lo que desee, al igual que con cualquier sitio de Divi.

Opción 3: Cree su sitio web desde cero

Cuando abra una nueva página, verá un lienzo limpio con una sección predeterminada agregada. Al igual que Divi 4, puede hacer clic en el botón verde (+) para agregar una nueva fila y comenzar a construir desde cero.

Al igual que Divi 4, hay una colección de módulos listos para usar con Divi 5.

La característica de filas anidadas es invaluable para diseños complejos. ¿Necesita una sección de tres filas dentro de una fila de un diseño de dos filas? Ningún problema. Haga clic dentro de su fila, agregue una fila y elija su estructura de fila. Divi 5 maneja esta anidación sin sudar, lo que le brinda posibilidades de diseño prácticamente ilimitadas.

Veamos cómo esto podría funcionar para un diseño de blog. Comience con una configuración estándar de dos filas: área de contenido ancho y una barra lateral más estrecha. En la fila principal, suelte el módulo de su blog.

¿Necesitas publicaciones destacadas en una cuadrícula por encima de las publicaciones regulares? Simplemente anide otra fila en la parte inferior con una sola fila con opción de comunicación de correo electrónico y luego una estructura de tres filas para cuadros de información. La misma estructura habría requerido código personalizado en Divi 4.

Para su barra lateral, es posible que desee diferentes widgets apilados con diferentes fondos. Con filas anidadas, cada elemento de barra lateral obtiene su propia fila con un estilo personalizado. Promociones en una mirada, introducción del autor en otro y, un testimonio en el tercero, todo perfectamente contenido en la fila de la barra lateral.

Esta nueva libertad estructural cambia la forma en que aborda los diseños por completo. Muestra de productos con filas de texto/imagen alterna, luego una sección de características de tres filas, coronada con testimonios de ancho completo? Todo en un contenedor fluido sin luchar contra el constructor.

Crear preajustes de grupo de opciones

Una vez que diseñe su primera página, es imperativo duplicar estas opciones de estilo en cada página de su sitio web. Sin embargo, eso podría ser muy lento y, lo que es más importante, molesto. Divi 5 presenta preajustes de grupos de opciones para ayudar a acelerar su proceso de diseño. Funcionan como fragmentos de estilo reutilizable que puede aplicar en cualquier lugar de su sitio. Veamos cómo configurarlos y usarlos.

Comience haciendo clic en cualquier módulo que haya agregado a su página. Cuando esté en el panel de configuración, mire las opciones de diseño. Cosas como fronteras, tipografía o sombras. Casta cerca de la esquina superior derecha de estos bloqueos de configuración, y verás aparecer un pequeño icono preestablecido.

Haga clic en ese icono preestablecido y elija "Nuevo preajuste de los estilos actuales". Dale un nombre que tenga sentido para ti. Algo como "esquinas redondas" para un preajuste fronterizo o "gran titular" para el estilo de texto.

El panel cambiará de color para mostrar que está trabajando en un preajuste ahora, no solo en el elemento actual. Esto te ayuda a realizar un seguimiento de lo que estás haciendo. Si este es un estilo que usará con frecuencia, marque el cuadro "Asignar como predeterminado" para que los nuevos elementos lo usen automáticamente.

¡Cuando guarda, ha creado su primer grupo de opciones preestablecido! La belleza es que puede aplicar este mismo estilo exacto a cualquier elemento que use ese grupo de opciones: módulos de texto, imágenes, botones o incluso secciones completas.

Combinando preajuste de grupos de opciones con variables de diseño

Aquí es donde Divi 5 se vuelve realmente poderoso. Al crear preajustes, no solo use colores o tamaños estáticos, use sus variables de diseño.

Digamos que está haciendo un preset de botón. En lugar de elegir un color específico, haga clic en el icono de variables en el selector de color y seleccione su variable "Azul de marca". Ahora su preajuste siempre usará el color de su marca, y si cambia ese color más tarde, todos los botones que usan este preajuste se actualizarán automáticamente.

Lo mismo ocurre con cada tipo de variable que ha creado. ¿Necesitas un espacio diferente? Solo toma tus números de espaciado guardados. Aplicando fuentes? Sus variables de tipografía están allí esperando. Su sitio se mantiene consistente.

Cuando sea necesario, simplemente actualice la variable una vez, y actualizará cada instancia por sí solo, sin el dolor de cabeza de cazar por cada elemento cuando el cliente quiere que "ese azul sea un poco más oscuro".

Divi 5 también le permite incluir unidades avanzadas en el campo de cualquier tamaño. ¿Quiere una sección que nunca sea más amplia que 1200px pero se encoge en el móvil? Escriba "min (1200px, 90%)" en el cuadro de ancho. Hecho. El contenedor permanecerá en 90% de ancho hasta que exceda los 1200 px, luego deje de crecer. No se necesita CSS personalizado. Estas unidades avanzadas también se pueden aplicar a variables dinámicas.

Presets de elementos de construcción

Después de configurar los preajustes del grupo de opciones, querrá crear preajustes de elementos para guardar módulos, filas o secciones totalmente de estilo. Piense en estos como paquetes de diseño completos que puede reutilizar en su sitio.

Para crear uno, diseñe completamente un módulo, y cuando se vea perfecto, haga clic en el icono preestablecido en el encabezado del módulo (no dentro de un grupo de opciones específico). Seleccione "Nuevo preajuste de los estilos actuales", dale un nombre como "Tarjeta de entidad" o "Biografía de equipo" y guarda.

Al agregar nuevos módulos, simplemente haga clic en el menú desplegable preestablecido en el encabezado del módulo para aplicar su diseño guardado al instante. Todas las configuraciones se aplicarán con un solo clic.

Construya otras páginas basadas en su sistema de diseño (variables y preajustes)

Una vez que haya establecido su sistema de diseño con variables y preajustes, crear páginas adicionales se vuelve mucho más eficiente. Con Divi 5, sus bases están en su lugar, ahora puede expandir su sitio web mientras mantiene una consistencia perfecta.

Comience creando una nueva página y activando el Visual Builder. Cuando agrega módulos a esta página nueva, notará inmediatamente cómo se acelera el sistema de su preajuste. En lugar de diseñar elementos desde cero, simplemente aplique sus presets de elementos guardados.

Por ejemplo, al agregar un nuevo módulo de texto, haga clic en el menú desplegable preestablecido en el encabezado del módulo y seleccione su preajuste de "texto del cuerpo". Todo el estilo, incluidas las opciones de fuentes, los tamaños y los colores, se aplica al instante. Lo mismo ocurre con botones, imágenes, testimonios o cualquier otro elemento para el que haya creado presets.

Construye tus plantillas

Con el creador de temas de Divi, puede crear y personalizar cada rincón y rincón de su sitio web. Encabezados, pies de página, plantillas de publicación, plantillas de tipo de publicación personalizadas, páginas de tiendas, lo que sea.

Accede al constructor de temas de Divi navegando a través de su Panel de WordPress: Divi → Builder de temas. En la parte superior, encontrará su plantilla predeterminada: esta plantilla administra el aspecto general de todo su sitio web. Haga clic en la sección Agregar encabezado Global y elija "Construir encabezado global" para abrir su espacio de trabajo. Del mismo modo, puede seleccionar Agregar pie de página global para diseñar los pies de página de su sitio web.

Con filas, encabezados y pies de página anidados, la construcción se vuelve mucho más fácil. ¿Necesita ese encabezado elegante con diferentes diseños de fila en cada sección? Agregue una fila dentro de otra fila, elija su diseño de fila y siga construyendo.

Crear plantillas de tipo de contenido personalizadas

Más allá de los encabezados y los pies de página, puede diseñar plantillas especializadas para diferentes tipos de contenido utilizando temas.

Al igual que cómo las publicaciones de blog difieren de los perfiles de miembros del equipo o páginas de productos, cada una merece su propio diseño optimizado.

Cree una plantilla para publicaciones de blog con un espacio adecuado para la legibilidad, la colocación de imágenes destacadas e información del autor. Las páginas de productos pueden necesitar diseños de galería y tablas de precios.

La belleza de este sistema es que una vez que estas plantillas se asignan a sus respectivos tipos de contenido, se aplican automáticamente. Por ejemplo, si agrega una nueva publicación de blog, la plantilla maneja el formato al instante. Esto elimina el trabajo repetitivo y mantiene todo conectado visualmente.

Al construir estas plantillas, aproveche su grupo de opciones ajustados y variables de diseño. La configuración de tipografía que estableció anteriormente garantiza que los encabezados y el texto del cuerpo sigan siendo consistentes. Sus variables de color mantienen la identidad de la marca en todos los tipos de plantillas.

Uso de divi ai para el diseño de plantillas

Divi AI corta el tiempo de construcción de plantillas de horas a minutos. En temas constructor, elija lo que necesita: un encabezado, pie de página, diseño de blog o página de productos.

Presione el botón Azul + en Visual Builder y seleccione "Generar la sección con AI".

Tu descripción es más importante. Sea específico sobre lo que necesita:

• Encabezado: Limpie el encabezado con logotipo alineado a la izquierda, un menú de navegación horizontal (inicio, sobre, blog, tienda) y un botón de contacto claro a la derecha. Responde con un icono de hamburguesa para dispositivos móviles.
• Pie de página: pie de página de tres columnas: información de la empresa e íconos sociales, enlaces útiles y datos de contacto (dirección, teléfono, correo electrónico). Clear los encabezados de la sección, diseño simple.
• Plantilla de blog: diseño de una sola publicación con una gran imagen destacada, título de publicación, fecha, área de contenido y una barra lateral derecha con publicaciones y categorías recientes.
• Página de la tienda: Pantalla de productos con galería de imágenes, nombre del producto, precio, descripción, selector de cantidad y un botón de compra prominente. Productos relacionados que se muestran a continuación.

Cuantos más detalles, más feliz los resultados. Después de que Divi crea su plantilla, tómese un minuto para reemplazar todos los valores codificados con su grupo de opciones preestablecidos para elementos como botones, bloques de texto y bordes. Esto integra contenido generado por IA con su sistema preestablecido, por lo que sus botones se ven idénticos en todas las páginas, ya sea construida manualmente o con IA.

Este método le brinda plantillas preparadas que se sienten a medida, mientras mantienen todo vinculado al lenguaje visual de su sitio. Cuando los cambios de diseño vienen más tarde, sus secciones construidas por IA se actualizan junto con todo lo demás.

Ahorre tiempo con funciones de plantilla avanzada

Las plantillas se vuelven aún más potentes cuando agrega lógica condicional. ¿Quieres diferentes encabezados para tus páginas de tiendas en comparación con tu blog? Establezca condiciones de visualización que apliquen plantillas basadas en categorías de página o patrones de URL.

Recuerde hacer que las plantillas funcionen de la mano con su sistema preestablecido para crear un marco de diseño integral que haga que la construcción del sitio web sea más rápida, más consistente y, en última instancia, más profesional.

4. Dominar el diseño receptivo

El diseño receptivo de Divi 5 introduce mejoras significativas sobre las versiones anteriores. El nuevo sistema proporciona control adicional sobre cómo su sitio web se adapta a diferentes tamaños de pantalla.

Divi 5 presenta un sistema avanzado de punto de interrupción que proporciona un control sin precedentes sobre la capacidad de respuesta del sitio web. Los siete puntos de interrupción personalizables permiten una orientación precisa de diseño en diferentes dispositivos:

• Teléfono: <767px cubre la mayoría de los tamaños de pantalla del teléfono inteligente
• Teléfono Wide: <860px cubre la mayoría de las pantallas del teléfono en modo paisajista
• Tableta: <980px es bueno para la mayoría de las pantallas de tableta en modo retrato
• Buque de tableta: <1024px es estándar para la vista del paisaje en la mayoría de los iPads y tabletas Samsung.
• Pantalla panorámica: > 1280px es un buen ancho para la mayoría de las computadoras portátiles más pequeñas
• Ultrawide: > 1440px cubre pantallas de escritorio más grandes

Estos puntos de interrupción están meticulosamente diseñados para abordar el paisaje diverso de los dispositivos modernos. Este enfoque permite a los diseñadores crear sitios web que se vean perfectos, se vean en un teléfono inteligente compacto o en un monitor expansivo ultra ancho. Cada punto de interrupción no es solo un umbral técnico; Es una oportunidad para elaborar una experiencia de usuario personalizada.

Además, cuando lo necesite, puede ajustar los puntos de interrupción según sus necesidades.

5. Obtén, establece, lanza!

Su sitio web Divi 5 está construido, optimizado y listo para sorprender a los visitantes. Vamos a caminar por los pasos finales para llevar a su sitio en vivo con confianza.

Ejecute un recorrido previo rápido de su sitio en diferentes dispositivos. Las capacidades de diseño receptivas de Divi 5 ya han realizado la mayor parte del trabajo pesado, por lo que esto debería confirmar que todo se ve muy bien. Gracias a los puntos de interrupción personalizables, su diseño se adapta a la perfección de los teléfonos a los monitores ultra ancho.

Vuelva a verificar sus elementos interactivos. Haga clic en los enlaces de navegación, envíe mensajes de prueba a través de formularios de contacto y pruebe cualquier característica especializada que haya agregado. La estructura del código limpio de Divi 5 ayuda a garantizar que estos elementos funcionen de manera confiable.

Toques de pulido final

Revise su contenido con los ojos frescos. Busque errores tipográficos o frases incómodas que pudieran haberse pasado por alto durante el proceso de compilación. En esta etapa, el enfoque debe estar en los pequeños refinamientos, no en cambios importantes. Cuando es necesario, Divi AI está completamente integrado en Divi 5 y se puede usar en cualquier momento para generar, modificar o mejorar cualquiera de los texto o imágenes.

Divi le brinda el poder de crear diseños perfectos para píxeles, así que tómese un momento para apreciar la cohesión de su sitio antes del lanzamiento. El uso constante de sus variables de diseño y los ajustes preestablecidos del módulo deben crear un aspecto pulido y unificado en todo momento.

Después del lanzamiento, Divi 5 continúa ofreciendo ventajas. Las mejoras de velocidad de su marco moderno ayudarán con la visibilidad del motor de búsqueda, y los usuarios apreciarán los tiempos de carga rápidos y las interacciones suaves.

Observe qué páginas obtienen la mayor cantidad de tráfico y compromiso. Use estas ideas para refinar su diseño o ampliar las secciones de contenido populares. La estructura flexible de Divi 5 hace que estos ajustes sean directos.

La combinación de su creatividad con el poderoso marco de Divi 5 produce un sitio web visualmente impresionante basado en los estándares web modernos. Su sitio está listo para ofrecer excelentes experiencias a los visitantes al tiempo que le brinda una base flexible para el crecimiento futuro.

Cree sitios web más rápidos y mejores con Divi 5

Divi 5 marca un nuevo capítulo para los creadores del sitio web. El sistema reconstruido mantiene lo que funcionó al arreglar lo que no. Notará la diferencia desde el primer día: carga más rápida, edición más suave y libertad de diseño que simplemente estaba fuera de alcance antes.

Su próximo sitio web no solo se verá mejor, disfrutará construirlo. Eso es lo que ofrece Divi 5: sitios web que funcionan para usted y sus visitantes, sin los dolores de cabeza.

¿Listo para probarlo? Descargue el Alpha Public Alpha y vea cuál podría ser su próximo proyecto.

Divi 5 está listo para ser utilizado en nuevas compilaciones de sitios web. Espere el lanzamiento completo antes de migrar los sitios existentes.