Introducción de variables de diseño para Divi 5

Estoy emocionado de introducir variables de diseño para Divi 5, una nueva característica que mejorará significativamente el flujo de trabajo de diseño de Divi y les dará a los usuarios de Divi una ventaja grave sobre otros constructores.

Puede definir variables para cualquier cosa, como colores, fuentes, números, imágenes y texto, y enchufarlas a elementos Divi y preajustes. Cuando actualiza una variable, el diseño y el contenido de su sitio web cambian.

La sinergia entre las variables y el nuevo sistema de diseño basado en el preajuste de Divi es fantástica. Déjame mostrarte cómo funciona.

Mira el siguiente video para ver la nueva función en acción.

Divi va "global" con gestión variable

Gracias al sistema de color global de Divi, es posible que ya esté familiarizado con el concepto de una variable de diseño. Un color global es un tipo de variable de diseño. ¡Con esta actualización, sin embargo, estamos presentando todo global! Además, administrar su configuración global es más fácil que nunca, gracias a un nuevo administrador de variables.

Creando nuevas variables

El icono de variables en la barra lateral izquierda abrirá el administrador de variables de su sitio web. Agregue una nueva variable, dale un nombre y valor, y luego puede conectar esa variable a configuraciones relevantes en cualquier página. Divi actualmente admite seis tipos de variables que cubren todos los campos de entrada nativos de Divi:

• Colores : los colores son esenciales para cada sitio web; La mayoría de los sitios web solo usan de tres a cuatro colores primarios. Definir variables de color y usarlas a través de su sitio web significa que puede ajustar la paleta de colores de su sitio web en segundos.
• Fuentes : La era de trabajar con fuentes estáticas ha terminado. Además, ya no está limitado a la configuración de fuente global en el personalizador de temas. Puede definir las fuentes de su sitio web como variables y administrarlas todas en un solo lugar.
• Números : puede usar variables numéricas para diseñar el sistema de tamaño de su sitio web. Por ejemplo, puede usar un tamaño estándar de radio fronterizo en todos los elementos. Convertir eso en una variable le permitirá ajustar el tamaño de sus esquinas redondeadas editando una sola variable. Otros usos cotidianos incluyen definir los tamaños de texto y las alturas de línea de su sitio web, los anchos de contenedores y el espacio, y todo lo demás.
• Imágenes : ¿Utiliza la misma imagen en varias páginas? Por ejemplo, puede tener una imagen de fondo estándar que sirve como un motivo de marca familiar. Si lo convierte en una variable, actualizar su marca en el futuro es fácil.
• Texto : las variables no se limitan al diseño; También puede definir variables de texto. Por ejemplo, si convierte el número de teléfono y la dirección de su empresa en variables de texto, no tendrá que buscar todos los lugares que utilizó esas variables cuando cambian los detalles de su negocio.
• URLS : También arrojamos variables de URL, porque ¿por qué no? Es posible que desee tener su enlace de llamado principal a la acción en diferentes páginas durante diferentes épocas del año (cambiándolo durante una venta, por ejemplo). En lugar de actualizar esa URL en todas partes, actualice la variable única.

Usar variables en elementos y preajustes

Haga clic en la configuración del icono de variables anterior para elegir entre una lista de variables relevantes y contenido dinámico de su sitio web.

El sistema de contenido variable y dinámico de Divi se ha extendido a todos los campos, donde anteriormente solo estaba disponible en los campos de contenido. Eso significa que puede asignar variables y contenido dinámico a campos numéricos, campos de fuentes, etc.

Ejemplos de variables de diseño

Las variables de diseño son instrumentales y se convertirán rápidamente en un componente central del flujo de trabajo de diseño Divi. Pero si el concepto no ha hecho clic, déjame darte algunos ejemplos.

Ejemplo uno: administrar fuentes globales

¿Cómo puede usar variables de diseño para mejorar su flujo de trabajo? Primero, consideremos las variables de fuentes.

La mayoría de los sitios web usan de dos a tres fuentes. Probablemente haya pasado tiempo configurando sus fuentes de texto y de texto deseadas en varios elementos y preajustes.

Pero, ¿qué pasa si quieres cambiar las cosas? Incluso si diseñó su sitio web de manera óptima con preajustes, puede llevar mucho tiempo regresar y cambiar las fuentes. Es posible que ni siquiera recuerde todos los lugares en los que usó una fuente en particular.

Ahí es donde entran las variables de fuentes.

Construí el sitio web en el video de arriba utilizando tres variables de fuentes: una fuente de título, una fuente de cuerpo y una fuente destacada.

Agregar la variable de fuente de título a elementos como mi preajuste de propaganda predeterminado es fácil. Como nunca usé valores de fuentes estáticos, sino que enchufé mis variables, las fuentes en mi sitio web son completamente dinámicas.

Cambiar la fuente de título de mi sitio web es tan fácil como actualizar la variable de fuente de título.

Ejemplo dos: Administrar tamaños globales

Puedes hacer lo mismo con los tamaños de texto.

Para el sitio web en el video a continuación, definí una serie de ocho tamaños de texto para varios niveles de encabezado y estilos de texto del cuerpo. Cuando actualizo mi preajuste de propaganda predeterminado y asigno la variable de tamaño de texto de encabezado medio, todos mis títulos de propaganda heredan el valor de esa variable.

Dado que baso los tamaños de texto de todo mi sitio web en variables, puedo administrar los tamaños de texto de mi sitio web completamente desde el administrador de variables.

Ejemplo tres: Globalizar todo su sitio web

En el video de arriba, puede ver un sitio web que aprovecha toda la potencia de las variables. Todos los colores son variables, al igual que las fuentes, los tamaños de texto, los tamaños de radio fronterizo y los valores de espaciado en los elementos de mi contenedor.

No solo eso, sino que también convertí contenido compartido en variables. El nombre de mi empresa, el número de teléfono y la dirección son variables de contenido.

Incluso la imagen de fondo, un motivo de marca familiar en todo el sitio web, es una variable de imagen que puedo cambiar fácilmente.

Prueba Divi 5 hoy

Las variables de diseño para Divi 5 están disponibles hoy, y es una de las muchas características que llegan a Divi este año.

Puede seguirlo a medida que avanzamos a través del lanzamiento final de Divi 5 y más allá, con actualizaciones cada dos semanas. Dependiendo de sus prioridades, puede usar Divi 5 ahora para crear nuevos sitios web o esperar hasta que agregemos más funciones, lo que sea que funcione mejor para usted.

Como se describe en el cronograma original de lanzamiento de múltiples fases de Divi 5, el Alfa Public Public Divi 5 es como "Divi 5 Lite". Falta algunas características y puede no ser adecuada para los sitios web existentes, pero está listo para usarse en nuevos sitios web si prefiere la experiencia a Divi 4.

Queremos que lo pruebes, y si te encanta, úsalo; Cuando a todos les encanta, lo haremos oficial.

Piseo: filas anidadas

Estamos construyendo características rápidamente . Cada vez que terminamos una nueva característica, comenzamos una nueva. Cada vez que comenzamos una nueva característica, te doy un vistazo.

En caso de que te lo hayas perdido, consulte el Sneak Peek de la semana pasada, donde exhibí filas anidadas. ¡Filas dentro de las filas! Es una idea simple, pero un primer paso esencial para crear un sistema de diseño más flexible para Divi 5.

Mira este video para ver todos los detalles.

Más actualizaciones de Divi 5 están en camino

2025 es el año de Divi 5 . El tedioso trabajo está detrás de nosotros. Construimos la base súper rápida, y ahora es el momento de que Divi regrese.

Gracias por mirar, y antes de que te vayas, tengo un favor para preguntar. Si estás aquí para el regreso de Divi, comenta este video; Leeré todos los comentarios. Me encantaría ver que este video llegue a doscientos comentarios , así que consulte el recuento de comentarios y prestarnos una mano si puede. Es una excelente manera de alimentar el algoritmo y, lo que es más importante, nos gusta charlar contigo.

No olvide seguirnos en YouTube y suscribirse al boletín de Divi para que nunca se pierda una actualización. Te veré pronto para otro anuncio de la función Divi 5, que prometo estará a la vuelta de la esquina.