Uso de variables CSS en Divi 5 para administrar estilos más rápido

Las variables CSS son parte de la actualización de funciones de unidades avanzadas de Divi. Ofrecen una forma rápida y flexible de administrar el aspecto de su sitio, y son especialmente útiles para desarrolladores y diseñadores que trabajan con configuraciones personalizadas.

Con la liberación de variables de diseño en Divi 5, muchos de los mismos resultados ahora se pueden lograr directamente dentro del constructor. Pero aún así, las variables CSS siguen siendo increíblemente útiles en muchos escenarios, especialmente si está utilizando un tema infantil, tienen estilos definidos a nivel mundial o necesitan un control avanzado.

Imagine que ha construido un sitio con docenas de encabezados, botones y reglas de espaciado, luego el cliente dice: "Haga que todo sea un 10% más grande". Sin variables, estás en horas de actualizaciones manuales. Con las variables CSS o las variables de diseño nativas de Divi, un ajuste hace el trabajo.

¡Exploremos cómo funcionan las variables CSS!

Divi 5 está listo para usarse en nuevos sitios web, pero todavía no recomendamos convertir los sitios web existentes en Divi 5.

¿Qué son las variables CSS y cómo funcionan en Divi 5?

Las variables CSS le permiten guardar valores, como colores o tamaños, en un solo lugar y reutilizarlos en cualquier lugar de su sitio. Son como atajos que le ahorran tiempo y mantienen su diseño consistente. Por ejemplo, puede definir una variable como –padding: 20px; Una vez, y luego úselo en todas partes para crear un relleno uniforme en su sitio web.

En Divi 5, las variables CSS se vuelven más fáciles de usar gracias a nuevas herramientas como unidades avanzadas y variables de diseño, que aportan la entrada variable directamente al constructor visual. Ya sea que ajuste los tamaños de fuente, la configuración de los colores o el espacio de ajuste, Divi le permite aprovechar las variables a través de campos de entrada en la configuración del módulo. No es solo para codificar a los magos; Cualquiera que se sienta cómodo con la interfaz de Divi puede comenzar a jugar con ellos. El resultado es una forma más rápida y flexible de administrar fácilmente los estilos de su sitio.

¿Por qué usar variables CSS cuando Divi 5 tiene preajustes?

Si ha estado usando Divi por un tiempo, probablemente le guste su sistema preestablecido y por una buena razón. Los preajustes de Divi 5 son excelentes para acelerar el proceso de diseño. Pero con las variables CSS ahora en la mezcla, ¿por qué usarlas cuando los preestablecidos ya hacen tanto? Veamos y veamos cómo estos enfoques juegan juntos para que su flujo de trabajo sea más suave.

Primero, un repaso rápido de los preajustes. Los preajustes de elementos son su favorito para guardar los diseños de módulos totalmente de estilo, como una propaganda reutilizable con colores, fuentes y efectos de desplazamiento personalizados, listos para caer en cualquier lugar de su sitio. Con solo unos pocos clics, su sitio web logra la consistencia del diseño sin mucho esfuerzo.

Luego hay preajustes del grupo de opciones, que lo llevan un paso más allá. Estos le permiten guardar estilos modulares para estilos específicos, como configuraciones de tipografía o diseños de borde, y mezclarlos y combinarlos en diferentes elementos. Juntos, estos tipos preestablecidos ofrecen una forma rápida y organizada de administrar todos los aspectos recurrentes de su sitio web.

Los preajustes son poderosos para la reutilización, pero son estáticos por naturaleza. Si se construye un preajuste sin hacer referencia a una variable CSS, actualizar un estilo global significa volver a visitar cada preajuste manualmente. Aunque no es un factor decisivo, esto hace que los cambios en todo el sitio sean menos dinámicos. Ahí es donde entran las variables CSS.

Desbloquear el control de todo el sitio con variables CSS

Con las variables CSS, obtendrá un control global que es difícil de superar. Definir algo como –Spacing: 40px; Una vez, úselo en su sitio y cuando sea hora de un cambio, actualice esa línea única de código, y cada instancia se ajusta al instante. También se pueden usar para controlar los tamaños de fuente. Por ejemplo, puede establecer una variable para cada nivel de encabezado (H1-H6) y luego ajustar los valores según sea necesario para actualizar instantáneamente todos los encabezados de su sitio.

Las variables de CSS no reemplazan las nuevas variables de diseño de los presets o Divi 5; las mejoran. Imagine usar variables dentro de sus presets para una configuración híbrida que sea reutilizable y ajustable de una sola vez.

Consejo profesional: las variables CSS no responden automáticamente. Si está administrando estilos receptivos (como cambiar el tamaño de fuente en el móvil), considere combinar variables con consultas de medios en sus opciones de tema.

Configuración de variables CSS en Divi 5

Comenzar es simple. Para que sea fácil de seguir, utilizaremos el sitio de inicio del asesor financiero para Divi.

Cómo definir las variables CSS

Hay dos formas fáciles de establecer variables CSS en Divi 5. Puede colocarlas en las opciones de tema de Divi o la configuración de una página individual. Independientemente del método elegido, sus variables deben estar envueltas en : Root para el alcance global. Por ejemplo, si desea estilos de encabezado unificado para todo su sitio web, puede definirlos navegando a Divi> Opciones de tema> CSS personalizado :

:root {
--text-size-h1: 72px;
--text-size-h2: 60px;
--text-size-h3: 48px;
--text-size-h4: 38px;
--text-size-h5: 30px;
--text-size-h6: 24px;
}

Alternativamente, puede colocar las variables CSS en la configuración de la página en la configuración de la página> Avanzado> CSS personalizado . Las variables definidas aquí solo afectarán a los elementos en esta página específica a menos que se duplique en otro lugar.

Aplicación de variables en Divi 5

Para aplicar estas variables a sus encabezados, abra el Visual Builder y navegue hasta el primer encabezado H1 en la página en el módulo de encabezado de ancho completo de la sección del héroe.

A continuación, navegue a la pestaña de diseño y localice la configuración del texto del título .

En el campo de tamaño de texto del título , agregue var (–Text-size-H1) .

Una vez agregado, el texto se actualizará a 72px, como se define en nuestras variables.

Lo mejor de usar variables CSS para los estilos de su sitio es cuán sin esfuerzo puede actualizarlas sobre la marcha. Por ejemplo, si encuentra que la variable para H2 es demasiado grande, puede revisarla en las opciones de temas de Divi, lo que la actualizará en su sitio.

Esta configuración sienta las bases para una gestión de estilo más rápida y inteligente. Además de asignar variables CSS para sus encabezados, puede combinarlas con preajustes para facilitar aún más los estilos de actualización en su sitio.

Use variables CSS para espaciar

Las variables CSS en Divi 5 pueden controlar más que solo tamaños de fuentes. Por ejemplo, puede usarlo para obtener un relleno o márgenes consistentes en múltiples módulos. Las variables pueden unificar su diseño, y Divi 5 lo facilita. Comience definiendo una variable de espaciado en las opciones de tema de Divi:

:root {
 --spacing: 40px;
}

De vuelta en el Visual Builder en la página de inicio, seleccionaremos una fila, haremos clic en una propaganda, localizaremos la pestaña de diseño y luego los campos de espaciado .

Coloque var (–pacing) en los campos y observe cómo Divi aplica la variable de espaciado a la propaganda.

Ahora que hemos visto variables en acción para el texto y el espacio, tomemos un nivel superior combinándolos con preajustes para una mayor eficiencia.

Combinación de variables CSS con preajustes para la máxima eficiencia

En Divi 5, no tiene que elegir entre presets y variables CSS, puede usar ambos. Al combinar las variables CSS en sus preajustes, obtienes un enfoque híbrido que combina lo mejor de ambos mundos: la reutilización de los preajustes y el control global de las variables.

Pasemos por un ejemplo rápido utilizando el sitio de inicio del asesor financiero para Divi. Comience definiendo una variable en Divi> Opciones de tema> CSS personalizado :

:root {
--text-size: 18px;
}

A continuación, diríjase al Visual Builder, abra el módulo de encabezado FullWidth en la página de inicio y seleccione el elemento principal del asesor financiero Preset para editarlo.

Flotar sobre el preajuste para revelar su configuración. Haga clic en el icono de configuración para cambiarlo.

Cambie a la pestaña Diseño y ubique la configuración del botón Uno . En el campo de tamaño de texto del botón , agregue var (–-text-size).

Una vez agregado, verá el botón en su actualización del módulo de encabezado FullWidth a 18px.

El último paso es hacer clic en el botón Guardar preestablecido para actualizar el preajuste en su sitio web.

Ahora, cuando asigna al Asesor Financiero Preset Preset a otro encabezado de ancho completo en su sitio, el tamaño de la fuente se establecerá en 18px, como se define en la variable en las opciones de temas.

También puede usar variables en todos los presets de su botón, lo que le da a todos los botones de su sitio un aspecto consistente. Si decide actualizar el tamaño de fuente de sus botones en el futuro, simplemente edite el valor de la variable y cada botón de su sitio web se actualizará automáticamente.

Lograr una gestión de estilo más rápida en Divi 5

Las variables CSS en Divi 5 son sobre una gestión de estilo rápida y escalable que se ajusta a su flujo de trabajo. Tampoco solo están solo. Se pueden usar con presets para una configuración potente y flexible. Ya sea que esté ajustando los tamaños de fuentes en su sitio o manteniendo el espacio consistente con una edición rápida, las variables ofrecen una forma amigable para el desarrollador de hacer que el diseño de un sitio Divi sea muy fácil.

Divi 5 está listo para usarse en nuevos sitios web, pero todavía no recomendamos convertir los sitios web existentes en Divi 5. Le recomendamos que descargue el Divi 5 Alpha hoy para experimentar con las variables CSS en su próximo proyecto Divi. Es un pequeño paso que vale la pena, e inmediatamente sentirá la diferencia. Ya sea que prefiera trabajar con preajustes o adoptar un enfoque CSS-First, el soporte de Divi 5 para variables lo convierte en una herramienta poderosa para diseñar sitios web más inteligentes y más rápido.