Cómo convertir estilos de paquete de diseño en valores predeterminados globales con Divi

La nueva actualización de valores predeterminados globales de Divi le ayuda a aplicar ciertos estilos de diseño a elementos en todo su sitio web. Le ahorra tiempo, le ayuda a mantener una visión general de su sitio web y le permite diseñar cada configuración global de la forma en que está acostumbrado; dentro del propio Divi Builder.

Ahora, cuando está utilizando un paquete de diseño para su sitio web, es probable que desee convertir los estilos del paquete de diseño en valores predeterminados globales, para no tener que ir y venir. Pero, ¿cuál es la mejor manera de hacerlo? Se lo mostraremos en el tutorial de casos de uso de esta semana. Usaremos el paquete de diseño de seguridad cibernética para demostrarlo, pero tenga la seguridad de que la técnica se aplica a cualquier paquete de diseño que utilice.

¡Hagámoslo!

1. Cree una página nueva para cada diseño en el paquete de diseño

Si planea convertir el estilo de un paquete de diseño en valores predeterminados globales, lo primero que deberá hacer es crear una página separada para cada diseño que viene con el paquete de diseño. Tener una página separada para cada uno de los diseños lo ayudará con el segundo paso; escanear en busca de elementos de diseño que se utilizan en todo el paquete de diseño y convertirlos en valores predeterminados globales.

2. Detecte los módulos utilizados en todos los diseños y conviértalos en globales

Una vez que haya creado una página separada para cada diseño, puede comenzar a escanear las páginas para encontrar los diferentes módulos que se utilizan. Estamos omitiendo deliberadamente la configuración de sección, fila y columna porque dependen del tipo de sección que esté creando. Y para la mayoría de las secciones y filas, el equipo de diseño decide utilizar la configuración predeterminada de Divi para que le resulte más fácil configurar sus propios valores predeterminados globales.

Seguimos adelante y detectamos los módulos más utilizados en Cyber ​​Security Layout Pack que contienen estilos personalizados. Estos módulos también son algunos de los módulos más populares de Divi y se pueden encontrar en casi cualquier paquete de diseño:

• Módulo de texto
• Módulo de botón principal
• Módulo divisor
• Módulo Optin de correo electrónico
• Módulo de formulario de contacto

Convierta la configuración del cuerpo y encabezado del módulo de texto en valores predeterminados globales

¡Es hora de empezar a convertir los estilos de los módulos en valores predeterminados globales! Deberá hacer este módulo por módulo. Comenzaremos con el Módulo de texto. Las únicas configuraciones que recomendamos que sean globales son las configuraciones de encabezado y texto del cuerpo. Es muy probable que estos dos grupos de opciones sigan siendo los mismos, independientemente del diseño que esté creando. Las otras configuraciones, como el espaciado y el tamaño, generalmente dependen de cómo su Módulo de texto se ve influenciado por el resto del diseño y se modifican a lo largo del camino. Pasaremos por el proceso de establecer valores predeterminados globales para este módulo en particular. Luego, continuaremos enumerando las configuraciones que recomendamos convertir en valores predeterminados globales para los otros módulos.

A lo largo de los diseños, se utilizan tres títulos de módulo de texto; H1, H2 y H3. Convertiremos estos tres encabezados y la configuración del texto del párrafo en valores predeterminados globales. Si desea ir más allá de H3, puede diseñarlos manualmente en la configuración de texto global de H3.

En la página de destino, encontrará todas estas configuraciones distribuidas en diferentes módulos de texto. El primer módulo de texto en la sección héroe contiene la copia H1. Abra la configuración, vaya a la configuración de texto H1, haga clic derecho en el elemento H1 y haga clic en 'Hacer estilos predeterminados'.

Busque un módulo de texto con algún contenido de párrafo a continuación. Vaya a la configuración de texto, haga clic derecho y haga clic en 'Hacer estilos predeterminados'.

El último módulo de texto que abriremos contiene los estilos de texto H2 y H3. Haga clic con el botón derecho en cada uno de los elementos de encabezado individualmente y haga clic en 'Hacer estilos predeterminados'. Una vez que haya seguido estos pasos, ¡sus módulos de texto estarán listos para funcionar!

Deberá repetir estos pasos para cada uno de los módulos recurrentes de su sitio web. Pasemos a los demás.

1. Módulo de botón principal

Configuración de botones

Relleno

2. Módulo de propaganda

Configuración de iconos (cuando sea necesario)

Configuración de texto

Configuración del texto del título

Configuración del texto del cuerpo

3. Módulo divisor

Configuración de línea

Configuración de tamaño

4. Módulo Optin de correo electrónico

Todo el módulo excepto: Margen + Tamaño + Configuraciones de transformaciones

5. Módulo de formulario de contacto

Todo el módulo excepto: Margen + Tamaño + Configuraciones de transformaciones

3. Guardar elementos recurrentes como elementos (globales) para reutilizarlos

Ahora, una vez que haya establecido los valores predeterminados globales para los módulos utilizados principalmente, todavía hay algunos otros elementos que podría considerar reutilizar. Estos elementos suelen ser, entre otros, los siguientes:

• Botón secundario
• Botón terciario
• Secciones de CTA
• Secciones de pie de página
• Detalles del paquete de diseño: Módulos de imagen con divisores de sección / Módulos Blurb de estilo diferente /…

Le recomendamos que guarde estos elementos en su biblioteca Divi y los reutilice sobre la marcha. Ayuda a guardar algunos de ellos como elementos globales en lugar de como normales, como pies de página y secciones de CTA. Se recomienda guardar elementos como botones o módulos publicitarios con estilos diferentes sin ser globales, para que pueda realizar cambios específicos en la copia y el diseño donde sea necesario.

Puede guardar un elemento en la biblioteca Divi colocándolo, haciendo clic en el icono guardar en la biblioteca, dando un nombre a su elemento de la biblioteca, eligiendo si desea hacerlo global y haciendo clic en 'Guardar en la biblioteca'.

4. Cree la paleta de colores predeterminada en las opciones del tema Divi

Una vez que haya establecido sus valores predeterminados globales y haya guardado los elementos recurrentes en su Biblioteca Divi, estará casi listo para comenzar a crear nuevas páginas desde cero utilizando los elementos predeterminados globales y los elementos de la biblioteca. Antes de hacerlo, le recomendamos que cambie la paleta de colores predeterminada en sus Opciones de tema Divi. Estos colores aparecerán en cada elemento de diseño que abras y te ayudarán a cambiar los colores sin tener que copiar y pegar códigos de color constantemente. Esto le permite concentrarse en lo que es realmente importante; creando un sitio web hermoso y funcional. Vaya a sus Opciones de tema Divi y asegúrese de incluir los siguientes tipos de color en su paleta de colores:

• Colores de texto
• Colores de fondo
• Colores de acento

5. Restablecer estilos de módulo en páginas existentes

Una vez que haya establecido sus valores predeterminados globales, guardado los elementos de su biblioteca y elegido su paleta de colores predeterminada, puede comenzar a crear nuevas páginas desde cero y ver la diferencia en el enfoque de inmediato. Sin embargo, si tiene páginas existentes que se han modificado antes de elegir los valores predeterminados globales, tendrá que volver atrás y restablecer los estilos de módulo para que se apliquen los valores predeterminados globales. Así es como funcionan los valores predeterminados globales. Si cambia algo acerca de un módulo manualmente, tendrá que eliminarlo manualmente también para que se puedan ver los valores predeterminados globales. Afortunadamente, también puede usar la función de extensión de estilos que Divi le brinda para extender los estilos de restablecimiento a lo largo de toda la página.

Pensamientos finales

En esta publicación, le mostramos cómo usar la nueva actualización de valores predeterminados globales de Divi para convertir los paquetes de diseño en valores predeterminados globales. Aunque hemos utilizado el paquete de diseño de seguridad cibernética, puede hacer que esta técnica funcione en cualquier paquete de diseño que elija. Este tutorial de casos de uso es parte de nuestra iniciativa de diseño Divi en curso, donde tratamos de poner algo extra en su caja de herramientas de diseño cada semana. Si tiene alguna pregunta o sugerencia, ¡no dude en dejarla en la sección de comentarios a continuación!

Si está ansioso por aprender más sobre Divi y obtener más obsequios de Divi, asegúrese de suscribirse a nuestro boletín por correo electrónico y al canal de YouTube para que siempre sea una de las primeras personas en conocer y obtener beneficios de este contenido gratuito.