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, lo ayuda a mantener una visión general de su sitio web y a diseñar cada configuración global de la forma en que está acostumbrado; dentro del Divi Builder mismo.

Ahora, cuando usa 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, de modo que no tenga que ir y venir. ¿Pero cuál es la mejor manera de hacerlo? Te mostraremos en el tutorial de casos de uso de esta semana. Utilizaremos 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. Crear nueva página 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; buscar elementos de diseño que se utilizan en todo el paquete de diseño y convertirlos en valores predeterminados globales.

estilos de paquete de diseño

2. Detecta los módulos utilizados en todos los diseños y hazlos 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 las configuraciones 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 seguir la configuración predeterminada de Divi para facilitarle la configuración de sus propios valores predeterminados globales.

Seguimos adelante y detectamos los módulos más utilizados en el Paquete de diseño de seguridad cibernética 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 primario
  • Módulo divisor
  • Módulo Optin de correo electrónico
  • Módulo de formulario de contacto

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

¡Es hora de comenzar a convertir los estilos del módulo en valores predeterminados globales! Tendrá que hacer este módulo por módulo. Comenzaremos con el Módulo de texto. Las únicas configuraciones que recomendamos que se vuelvan globales son las configuraciones de encabezado y texto del cuerpo. Es 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 está influenciado por el resto del diseño y se ajustan en el camino. Revisaremos 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 encabezados del Módulo de texto; H1, H2 y H3. Vamos a convertir 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 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 de 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".

estilos de paquete de diseño

estilos de paquete de diseño

Localice 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".

estilos de paquete de diseño

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 del encabezado individualmente y haga clic en "Hacer que los estilos sean predeterminados". Una vez que haya seguido estos pasos, ¡sus módulos de texto estarán listos!

estilos de paquete de diseño

Tendrá que repetir estos pasos para cada uno de los módulos recurrentes en su sitio web. Pasemos a los otros.

1. Módulo de botón primario

estilos de paquete de diseño

Configuraciones de botones

estilos de paquete de diseño

Relleno

estilos de paquete de diseño

2. Módulo de publicidad

estilos de paquete de diseño

Configuración de iconos (cuando sea necesario)

estilos de paquete de diseño

Configuraciones de texto

estilos de paquete de diseño

Configuración del texto del título

estilos de paquete de diseño

Configuración de texto del cuerpo

estilos de paquete de diseño

3. Módulo divisor

estilos de paquete de diseño

Configuraciones de línea

estilos de paquete de diseño

Configuraciones de tamaño

estilos de paquete de diseño

4. Módulo Optin de correo electrónico

estilos de paquete de diseño

Módulo completo excepto: Margen + Dimensionamiento + Transforma la configuración

estilos de paquete de diseño

5. Módulo de formulario de contacto

estilos de paquete de diseño

Módulo completo excepto: Margen + Dimensionamiento + Transforma la configuración

estilos de paquete de diseño

3. Guardar elementos recurrentes como elementos (globales) para su reutilización

Ahora, una vez que haya configurado 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 CTA
  • Secciones de pie de página
  • Características del paquete de diseño: Módulos de imagen con divisores de sección / Módulos Blurb de estilo diferente / …

Le recomendamos guardar estos elementos en su biblioteca Divi y reutilizarlos a medida que avanza. Ayuda a guardar algunos de ellos como elementos globales en lugar de elementos normales, como pies de página y secciones de CTA. Se recomienda guardar elementos como botones o módulos de difusión de estilo diferente sin ser globales, para que pueda realizar cambios específicos en la copia y el diseño cuando sea necesario.

Puede guardar un elemento en la Biblioteca Divi al pasar el mouse sobre él, hacer clic en el icono Guardar en la biblioteca, asignarle un nombre al elemento de la biblioteca, elegir si desea globalizarlo y hacer clic en "Guardar en la Biblioteca".

estilos de paquete de diseño

4. Crear paleta de colores por defecto en las opciones del tema Divi

Una vez que haya configurado sus valores predeterminados globales y guarde los elementos recurrentes en su Divi Library, estará casi listo para comenzar a construir nuevas páginas desde cero utilizando los valores 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 abra y lo ayudarán a cambiar los colores sin tener que copiar y pegar constantemente códigos de colores. 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

estilos de paquete de diseño

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

Una vez que haya configurado sus valores predeterminados globales, guarde los elementos de su biblioteca y haya 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, deberá volver 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 de un módulo manualmente, también deberá eliminarlo manualmente para que se muestren los valores predeterminados globales. Afortunadamente, también puede usar la función de estilos extendidos que Divi le brinda para extender los estilos de reinicio 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 regalos Divi, asegúrese de Suscríbete a nuestro boletín de correo electrónico y Canal de Youtube así que siempre serás una de las primeras personas en conocer y obtener beneficios de este contenido gratuito.