Construyendo su marco de diseño con Divi 5

Si alguna vez has trabajado con marcos CSS como Bootstrap, obtienes por qué es tan popular. Un marco de diseño le brinda una base reutilizable para diseñar diseños rápidos y consistentes, por lo que no está construyendo desde cero cada vez que diseñe una página.

Aunque la mayoría de los marcos dependen de las clases preescritas, todavía esperan que escriba CSS personalizado para una personalización más profunda, lo que los hace complicados para los no codificadores. Ahí es donde Divi 5 difiere.

Toma un enfoque visual primero, reemplazando a CSS con herramientas como variables de diseño, preajustes de grupos de opciones y preajustes de elementos. Obtiene toda la potencia de un marco, sin escribir una sola línea de CSS. En esta publicación, le mostraremos cómo construir un marco de diseño sin código visual utilizando Divi 5.

Divi 5 está listo para usarse en nuevos sitios web , pero aún no recomendamos migrar los existentes.

Cómo Divi 5 le permite construir un marco de diseño sin código

Divi 5 se reconstruye desde cero para hacer que el diseño web avanzado sea accesible para todos. No importa su nivel de codificación, le permite construir diseños modernos y personalizados visualmente. Construir un marco de diseño no es diferente.

Suscríbete a nuestro canal de YouTube

Las variables de diseño le permiten definir valores de diseño global

Las variables de diseño le permiten definir valores repetibles como los colores, las fuentes, el espacio de su marca y más en un lugar central. Una vez guardado, puede reutilizar estos valores en su sitio web para darle una apariencia visual consistente y de marca.

Dentro del Visual Builder, busque el Administrador de variables para definir y almacenar diferentes tipos de variables (números, texto, imágenes, enlaces, colores y fuentes) de manera organizada.

Las variables de diseño son como una versión sin código de las propiedades personalizadas de CSS, pero tienen mucha más flexibilidad. Por ejemplo, generalmente declara variables CSS como : Root {–Primary-Color: #1A73E8; } , pero con las variables de diseño de Divi, solo guarda el color como color primario .

Verá su verdadero poder mientras realiza actualizaciones. No hay necesidad de pasar por su hoja de estilo; Simplemente modifique el valor variable guardado una vez en Variable Manager para actualizar cada instancia en todo el sitio web. Le permiten visualizar rápidamente sus ideas sin cazar a través de varias reglas de estilo.

Además, puede definir elementos de contenido comúnmente repetidos, como dirección, correo electrónico, enlaces, motivos de fondo, etc., como variables de contenido. No tiene que insertarlos manualmente varias veces; Un clic y estos elementos aparecen en su página. Por ejemplo, guarde y use la dirección de su empresa como una variable de texto.

Para aplicar una variable de diseño, pase la opción y busque el icono de contenido dinámico.

Aprenda todo sobre variables de diseño

Guardar combinaciones de estilo común con preajustes de grupos de opciones

Los preajustes del grupo de opciones le permiten guardar y reutilizar la configuración de diseño utilizada con frecuencia, como espaciamiento, bordes, sombras, estilos de texto y fondos, sin tener que reconstruirlos cada vez. Se centran en un grupo específico de opciones dentro de un módulo, por lo que puede diseñar solo esa parte y aplicarla en cualquier lugar con un solo clic.

Por ejemplo, supongamos que siempre usa el mismo acolchado de 40px y el margen de 10 px en todas sus secciones de testimonios. Guarde esas configuraciones como un espaciado preset. Cuando agrega un nuevo módulo testimonial, seleccione el preajuste y está hecho.

Lo que hace que los preajustes de los grupos de opciones fueran potentes es que puede mezclarlos con variables de diseño . Si su color primario se guarda como una variable, puede usarlo dentro de un preajuste de fondo, por lo que si el color de la marca alguna vez cambia, todo el preajuste se actualiza con él. Los fondos en todas sus páginas cambian con un solo clic.

Los preajustes del grupo de opciones no anulan todo su módulo, solo se aplican al grupo de estilo que elija. Pero siempre puede anular presets con configuraciones específicas del módulo para personalizar módulos específicos. Esto le permite mantener su diseño y contenido únicos al tiempo que asegura un estilo visual constante en su sitio.

Aprenda todo sobre los preajustes del grupo de opciones

Guardar elementos totalmente diseñados con presets de elementos

Si ha sido un usuario de Divi, ya está familiarizado con los presets de elementos. Le permiten guardar todos los estilos personalizados de un módulo, incluido el texto, el espacio, los colores, los íconos, los efectos del desplazamiento, como un elemento preestablecido, por lo que puede reutilizarlo en cualquier lugar sin construir desde cero. Básicamente, estás creando una versión lista para llevar de tus módulos más utilizados.

Aquí hay un caso de uso rápido: personalice y guarde un preajuste de propaganda, luego aplíquelo a otras desenfoque sin estilo para diseñarlos rápidamente.

Cómo se reflejan estas herramientas en el HTML frontend

Divi 5 puede parecer una herramienta sin código, pero en realidad está escribiendo código limpio y estructurado en segundo plano. Cuando ajusta la configuración visualmente, como elegir un espaciado preestablecido o aplicar los colores de su marca desde el administrador de variables, no solo está diseñando un módulo. También estás escribiendo el código.

Cada decisión de diseño que tome se traduce en una salida frontend adecuada. Divi maneja la parte de codificación mientras te enfocas en el diseño.

Para mostrarle cuán poderoso es esto, compararemos el flujo de trabajo visual primero en Divi 5 con un enfoque manual utilizando un marco CSS tradicional como Bootstrap.

Primer bootstrap:

Construir un sistema de diseño manualmente con código en bootstrap

Para nuestro ejemplo, he usado una configuración de WordPress con el tema subterráneo instalado.

En un flujo de trabajo típico basado en el código, comenzará definiendo sus valores de diseño globales como variables CSS. Aquí están los nuestro:

:root {
 --primary-color: #e91e63;
 --border-radius: 6px;
 --box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
}

Digamos que estamos creando un diseño de página de contacto simple con un formulario de contacto y un botón de estilo personalizado. Para mantener todo consistente y reutilizable, usaremos una mezcla de clases de utilidad de Bootstrap y nuestras propias variables CSS.

Primero, agregamos código personalizado para un formulario de contacto utilizando las clases de formulario incorporadas de Bootstrap para manejar el diseño y el estilo de entrada.

Luego agregamos el código para nuestro botón de estilo. Aquí, combinamos clases de utilidad de arranque con nuestras variables CSS personalizadas para fondo, radio de borde y sombra. Esto nos da un control total sobre la apariencia y la sensación. Si queremos hacer cambios, podemos actualizar nuestras variables.

Como puede ver, es genial y eficiente, pero todo está construido manualmente. Definimos las variables, aplicamos las clases y escribimos todo el código por nosotros mismos. Y este es un diseño simple, ¡imagine construir páginas complejas utilizando este enfoque!

Ahora, construamos la misma página usando Divi 5 sin codificar.

Recreando la misma página visualmente con Divi 5

Comenzamos definiendo nuestras variables de diseño globales que se convierten en parte de nuestro sistema de diseño en todo el sitio. Primero, vas a Variable Manager> Colores . Luego, escriba el código hexadecimal para el color primario (#E91E63) y guarde.

Del mismo modo, también puede guardar las variables numéricas para el radio de borde {6px} y el espacio. A continuación, agrego el módulo de formulario de contacto y personalizo el botón Enviar a mi estilo preferido:

Ahora guardo estas configuraciones de botones como un preset de botón para su uso posterior.

Si agrego otro botón y selecciono el botón Preset , ¿vea qué sucede? Se llama automáticamente.

Para aplicar un grupo de opciones preestablecido, pasee sobre la configuración y busque el icono de configuración .

Además, ¿notó cómo aplicamos múltiples estilos personalizados a un botón en un solo clic sin tocar una sola línea de código? Esto es lo que queremos decir cuando decimos que guarda sus preferencias de diseño visualmente. Es el tipo de flujo de trabajo que Divi 5 está construido. Es rápido, consistente y completamente visual.

Lo que sucede detrás de escena es mágico. Divi no es solo apilar estilos a ciegas. Cada variable de diseño, preajuste y configuración que aplica se organiza en un código limpio y eficiente en la parte delantera.

La fuente de página de la página de diseño Divi anterior muestra que el color primario se guarda en la sección de la raíz, al igual que las variables CSS:

Y en el frontend, los preajustes de su grupo de opciones se guardan y salen automáticamente como CSS limpio dirigido a las clases apropiadas (.ET_PB_BUTTON, .ET_PB_CONTACT_SUBMIT).

Ambas páginas se ven iguales, pero la forma en que fueron construidas y mantenidas es completamente diferente.

En Bootstrap, nos beneficiamos de sus clases de utilidad, pero aún teníamos que escribir código. Pero con Divi 5, logramos el mismo resultado sin tocar una línea de código, solo utilizando sus potentes características como variables de diseño y preajustes de grupos de opciones.

Cada cambio se aplicó en unos pocos clics, sin riesgo de inconsistencias y, sin embargo, el código frontend permaneció limpio. Divi almacena sus estilos en un formato estructurado y reutilizable sin agregar marcado innecesario o estilo en línea.

Cómo construir su marco de diseño con Divi 5

Divi 5 le ofrece todas las herramientas para construir un sistema de diseño escalable, pero al igual que en el desarrollo tradicional, el orden en el que utiliza estas herramientas es importante. Caminemos por los escalones y, lo que es más importante, entendamos por qué:

1. Defina sus variables de diseño global

Antes de diseñar una página, comience definiendo sus variables de diseño globales. Estos son los valores centrales en los que todo su sitio dependerá, como sus colores, fuentes, tamaños, unidades de espacio, etc. Una vez que defina los bloques de construcción de su sitio, puede reutilizarlos en todas partes para mantener todo consistente, limpio y fácil de administrar.

En Divi 5, tiene el gerente variable para crearlos y organizarlos.

Así es como los tipos de variables resaltados juegan un papel:

• Colores: guarde los colores primarios, secundarios y acentos de su marca para que no tenga que escribir códigos hexadecimales o matrices de combinar. Guarde sus variables de color y aplíquelas con un solo clic.
• Fuentes: defina las fuentes exactas que usa para encabezados, texto del cuerpo o testimonios. En lugar de volver a seleccionar Poppins Bold cada vez que crea un H2, guárdelo como una variable de fuente . Podrá reutilizar ese mismo estilo a través de los módulos fácilmente.
• Números: almacene sus valores de diseño de referencia, como un radio de borde de 8px para tarjetas o relleno de 32 px para módulos de imagen, como variables numéricas . También puede usar unidades avanzadas dentro de las variables de número para hacer diseños dinámicos.

Una vez que se establezcan sus variables principales, cada preajuste y página que construya confiará en ellas. Y si su dirección de diseño cambia más tarde (por ejemplo, desea ajustar su espacio base) , solo necesita actualizar la variable en un solo lugar.

Después de definir las variables de diseño correctamente, no es necesario cazar y modificar cada instancia. Simplemente cambie el valor una vez en el administrador variable en sí.

2. Guardar contenido recurrente globalmente

Usando Variable Manager , también puede guardar valores de contenido como enlaces, texto e imágenes que a menudo se repiten en su sitio. Normalmente copiaría y pegaría estos valores cada vez, pero Divi 5 le permite definirlos una vez y reutilizarlos en cualquier lugar.

Esto es especialmente útil para guardar los enlaces de redes sociales, los datos de contacto de su empresa y otro contenido recurrente que debe agregarse manualmente.

Puede guardar el contenido a través de las tres variables restantes:

• Texto: supongamos que la dirección de su empresa aparece en el pie de página, en la página de contacto y en la sección de héroes de su página de inicio. Guarde como una variable de texto y seleccione donde desee que aparezca la dirección.
• Enlaces: guarde las URL en su página Acerca de, colecciones de productos, perfiles sociales o términos y condiciones como variables de enlace.
• Imágenes: si usa el logotipo de su marca o una imagen de fondo en varias páginas, guárdelo como una variable de imagen . ¡Imagine reemplazar las imágenes de marcadores de posición en las plantillas con clics!

Divi 5 le permite tratar el texto, los enlaces e imágenes como bloques de construcción reutilizables. Estas variables de contenido pueden sentirse pequeñas, pero impactan en gran medida la velocidad, la precisión y el mantenimiento a largo plazo. Ahorra tiempo, reduce los errores y mantiene su sitio constantemente actualizado.

3. Crear y guardar estilos de núcleo con preajustes de grupos de opciones

Una vez que sus variables de diseño están en su lugar, su próximo paso es definir los patrones de estilo central de su sitio utilizando preajustes de grupos de opciones. Guarde la configuración de diseño comúnmente utilizada como preajustes y reutilícelos en cualquier módulo.

Aquí le mostramos cómo aprovechar al máximo los preajustes del grupo de opciones:

1. Guardar presets para estilos comunes

Comience guardando presets para la configuración que utiliza con mayor frecuencia, como el radio de borde, los colores de fondo o el espacio. Digamos que siempre uso el acolchado superior de 40px y el margen inferior de 10 px para testimonios, por lo que guardé esos valores como un espaciado preestablecido.

Puedo aplicar instantáneamente ese espacio a mis testimonios (y otros módulos si quiero) . Haga esto para cada grupo de configuración que reutilice constantemente: bordes, sombras de caja, fondos de botones, etc., para que pueda reutilizarlos al construir páginas.

2. Combinar variables de diseño con preajustes

Luego, fortalezca su marco combinando variables de diseño con preajustes de grupos de opciones. Supongamos que guardó un radio de borde de 6px como una variable de número y la usó mientras creaba su grupo de opciones preestablecido. Si cambia la variable más adelante, sus preajustes también se actualizarán en todo el sitio automáticamente.

Del mismo modo, puede crear tipografía de fluido con un valor de pinza () para el texto receptivo. Guarde eso dentro de un preajuste H1 y aplíquelo constantemente a los encabezados a lo largo de su diseño. Esta combinación de preajustes y variables es donde su marco visual realmente comienza a volverse modular, escalable y fácil de mantener.

También puede guardar los preajustes del grupo de opciones como los valores predeterminados , lo que significa que los estilos también se aplican automáticamente a nuevos módulos. Aplique los valores predeterminados en sus presets comunes para que ni siquiera tenga que seleccionar un preajuste cada vez.

4. Crear presets de elementos

Los presets de elementos completan su marco de diseño. Después de guardar sus estilos preferidos como preajustes, también debe guardar los estilos de módulos como presets de elementos.

Esto es especialmente útil para los módulos que usa a menudo, como CTA, testimonios, borrones y formas de contacto. Por ejemplo, si ha diseñado un botón CTA con el color de su marca, una sombra suave y un relleno específico, puede guardar todo ese diseño como un preajuste llamado Luz primaria. Más tarde, aplíquelo instantáneamente a cualquier botón nuevo con un clic.

Establecer presets de elementos como predeterminados

También puede establecer cualquier elemento preestablecido como el valor predeterminado, por lo que cada nuevo módulo de ese tipo sigue automáticamente los estilos de diseño guardados. Guardar el botón de luz primario anterior como predeterminado, verá el nuevo botón heredando su estilo:

Los valores predeterminados aceleran su flujo de trabajo, y aún puede anularlos si es necesario. Pero en la mayoría de los casos, tener preajustes bien definidos reduce el trabajo repetitivo y elimina las conjeturas de diseño. Con estas tres características combinadas, sigue un marco de diseño basado en el preajuste que hace que la construcción del sitio web sea completamente sin código.

Diseño de nuevas páginas basadas en su marco de diseño

Ahora que he guardado todas mis variables de diseño preferidas, preajustes de grupos de opciones y preajustes de elementos, probemos nuestro marco.

Construir nuevas páginas se ha convertido en una experiencia mucho más rápida y más fácil. No necesito comenzar desde cero o reponer manualmente cada módulo. Todo lo que necesito ya está configurado.

Como puede ver, he aplicado múltiples cambios de diseño en solo unos pocos clics. Sí, importé un diseño de Divi prefabricado, pero lo personalicé en segundos con mi marco guardado en su lugar.

En lugar de seleccionar fuentes, ajustar el espacio o ajustar los colores manualmente, simplemente apliqué mis preajustes guardados. El diseño del botón, los tamaños de texto, los estilos de fondo y los bordes de imagen siguieron la configuración del marco que construí anteriormente.

Aplicar esos estilos manualmente a un módulo podría no ser un gran problema. Pero cuando está personalizando una página completa, la diferencia es clara. Puede notar la facilidad y la velocidad con la que hice todos esos cambios. Este es el beneficio real de crear un marco de diseño: acelera su flujo de trabajo sin sacrificar la calidad o la consistencia.

La mejor parte llega al hacer actualizaciones. Si mis valores globales cambian alguna vez, solo necesito modificar mis variables de diseño guardadas a través del Administrador de variables. También puedo modificar mi grupo de opciones y los presets de elementos haciendo clic en el icono de configuración pequeña.

Este es el poder que Divi 5 te trae. Le permite crear, guardar y personalizar todo su marco de diseño sin tocar una sola línea de código.

Construyendo su marco de diseño sin código visualmente

Crear un marco de diseño ya no es solo para desarrolladores. Con las herramientas adecuadas, cualquiera puede hacerlo, incluso si nunca antes ha tocado código. Como ha visto a lo largo de esta publicación, todo lo que se necesita son algunos pasos inteligentes para crear su propio sistema de diseño. ¿Cómo? Usando Divi 5.

Divi 5 te ofrece las herramientas para que suceda

Divi 5 maneja la complejidad y le brinda el control total a través de sus características avanzadas. Puede construir más rápido, mantenerse consistente y realizar actualizaciones globales sin dejar al Visual Builder. Genial, ¿verdad? Pero esa es solo la punta del iceberg, ¡y estamos comenzando!

Tenemos muchas más características sorprendentes alineadas para su lanzamiento, y no podemos esperar a que las pruebes. Descargue el Alpha Public Alpha hoy y cree su propio marco de diseño sin restricciones de codificación.

Divi 5 está listo para usarse en nuevos sitios web , pero aún no recomendamos migrar los existentes.