Uso de los preajustes predeterminados de Divi 5 para diseñar todo su sitio

La llegada de los preajustes del grupo de opciones ha abierto tantas posibilidades nuevas dentro de Divi 5. Nick dijo que esta era la característica más importante para llegar a Divi en años, y mientras las pruebas, verás exactamente por qué dijo eso .

Ya está acostumbrado a los preajustes de elementos, pero los preajustes del grupo de opciones agrega una capa completamente nueva de control de diseño que nunca dejará de usar. Sin embargo, ambos tipos de preajustes admiten " preajustes predeterminados ". Eso es lo que quiero mostrarte en el transcurso de las siguientes 2000 palabras.

¿Cuáles son los presets predeterminados en Divi 5?

Los preajustes predeterminados son los primeros preajustes que querrá editar en sus sitios web. En muchos sentidos, estos son un reemplazo total para el personalizador del tema.

Tiene dos tipos de preajustes predeterminados con los que puede trabajar inmediatamente después de editar una página : presets de elementos predeterminados y preajustes de grupos de opciones predeterminados . Primero cubramos los preajustes de elementos porque es más familiar, pero querrá comenzar todos sus diseños con preajustes de grupos de opciones.

Presets de elementos predeterminados

Los presets de elementos hacen un trabajo rápido de diseñar un elemento que utilizará muchas veces en su sitio web. Con los preajustes de elementos, puede tomar un módulo como el módulo de la propaganda y editar el preajuste predeterminado del módulo. Una vez que se edita el preajuste predeterminado, utiliza esos mismos estilos al agregar un nuevo módulo de blurb a su sitio (porque los nuevos elementos usan la configuración predeterminada).

Cómo editar un elemento predeterminado preestablecido

Editar un preajuste predeterminado es sencillo. Haga clic en el elemento para el que desea cambiar la configuración predeterminada (en este caso, un módulo de texto). En la derecha superior, haga clic en el selector de preajuste.

Debería ver al menos un preajuste en el menú desplegable: el preajuste predeterminado para ese elemento. Encuentre la configuración (icono de engranajes) y haga clic para cambiar las opciones de configuración del elemento de página específico a las opciones de configuración para el preajuste predeterminado.

Sabrá que está editando un preajuste cuando las migas de pan (que muestran la posición anidada del elemento en el que estaba trabajando) desaparece y la palabra " preajuste " aparece en la parte superior izquierda del panel de configuración. También notará que el selector preestablecido dice " preajuste predeterminado " y se vuelve azul. Desde aquí, navegue hasta el grupo de opciones de elementos que desea editar. En este caso, he decidido ir a la pestaña Design> Texto> Tamaño de texto para editar el tamaño del contenido de texto para este módulo.

Haga clic en "Guardar preajuste" para que sus cambios tomen retención en todo el sitio.

En caso de que no lo supieras
Si has estado cerca de Divi por un tiempo, sabes sobre los presets de módulos . Los preajustes de elementos son los mismos que los presets de módulos, pero llamarlos preajuste de módulos fue confuso porque los preajustes también se pueden usar en elementos que no son de módulos, como secciones y filas.

Vista de estructura alámbrica de una página en Divi 5. Observe cómo esta fila tiene preestablecidos sin ajustar los criterios para ser un módulo, sino un contenedor.

Los presets de elementos predeterminados se pueden "anular" simplemente aplicando un elemento personalizado diferente preset al módulo (más sobre esto a continuación) o aplicando estilos directamente a un módulo o elemento específico. Divi, como CSS, funciona con reglas de especificidad, y en este caso, la configuración aplicada a un módulo directamente es más específica que la configuración aplicada a un elemento predeterminado preestablecido.

Pero hay un nuevo preajuste en el bloque con el que debe diseñar sus sitios web de Divi primero.

Presets de grupo de opción predeterminado

Los nuevos preajustes del grupo de opciones de Divi le permiten crear estilos predeterminados que abarcan varios módulos y elementos que pueden usar grupos de opciones similares. Todo esto se realiza con preajustes del grupo de opciones "predeterminado" . Si está confuso en los detalles de este nuevo concepto de grupos de opciones, puede leer más sobre esto en nuestra publicación, lo que le dice todo lo que necesita saber sobre ellos.

Aprenda sobre los preajustes del grupo de opciones

En resumen, diferentes módulos tienen diferentes composiciones (consulte la tabla a continuación para ver un ejemplo que compare cuatro elementos diferentes).

Cuando el compuesto de un elemento se superpone con los de otro, pueden compartir estilos en el nivel de grupo de opciones, lo que significa que ahorra tiempo al diseñar motivos similares en diferentes módulos y elementos (como el texto del título en muchos módulos). Particularmente con los encabezados, el texto del cuerpo, las sombras, las animaciones, la funcionalidad pegajosa, los bordes, el espacio y los botones, diseñará sitios web mucho, mucho más rápido.

Cómo editar un grupo de opciones predeterminado Preset

Para editar un grupo de opciones predeterminado preestablecido, vaya a un módulo o un panel de configuración de fila/sección. Descubra los grupos de opciones disponibles (texto, texto de título, botón, fondo, etc.). Los grupos de opciones que admiten preajustes revelarán un ícono preestablecido en el lado derecho de ese campo OG cuando se desplace. Haga clic en el icono de los presets para mostrar el predeterminado y cualquier preetos personalizado para ese grupo de opciones.

Aquí hay un video que demuestra la diferencia entre editar un aspecto particular de un solo módulo y editar ese mismo aspecto con un grupo de opciones preestablecido.

Sabes que estás editando un grupo de opciones preestablecido cuando la interfaz de usuario cambia de luz a oscura (a menos que estuvieras en modo oscuro, en cuyo caso es lo contrario) solo para el grupo de opciones que está editando actualmente. Debe guardar los cambios para que entren en vigencia.

¿Cuál es la diferencia entre preestablecidos predeterminados y personalizados?

Los preajustes predeterminados son los estilos aplicados automáticamente a cualquier elemento nuevo (módulos/secciones/filas) colocados en una página o plantilla. No importa qué, cada elemento y cada grupo de opciones dentro de Divi tendrán un preajuste predeterminado. Vea a continuación de dónde provienen los estilos predeterminados.

Los preajustes personalizados son ajustes preestablecidos adicionales que son tan fáciles de administrar y aplicar los preajustes predeterminados, pero no se utilizarán automáticamente (debe aplicar estos preestablecidos personalizados en lugar del valor predeterminado). Se utilizan en situaciones especiales, como secciones oscuras, barras laterales y pantallas densas de contenido, lo que sea que necesite su diseño.

Cada sitio web debe diseñarse utilizando presets de grupo de opciones predeterminados en la medida de lo posible. Luego, se deben crear preajustes de grupos de opciones personalizados adicionales para manejar situaciones similares según sus especificaciones de diseño. Lo que sea que no esté cubierto por esos presets OG se puede diseñar con presets de elementos predeterminados y presets de elementos personalizados. Puede aplicar directamente estilos a los módulos individuales para los casos de borde restantes que aún deben diseñarse.

Divi está en una etapa emocionante con todas las nuevas características lanzadas. Cuando las unidades avanzadas y las variables de diseño caen, puede establecer variables CSS con todas las unidades y funciones CSS. A partir de ahí, puede usar esas variables CSS en todos sus presets, lo que hace que su flujo de trabajo de diseño sea más consistente y más rápido.

También hay una característica planificada para permitir los preajustes de los grupos de opciones de anidación dentro de los preajustes de elementos, lo que le permite crear preajustes de elementos con la lógica de los preajustes del grupo de opciones integrados en ellos. Eso significa que cuando edita un preajuste OG, también modificaría los presets de elementos relacionados (y viceversa hasta cierto punto).

¡El futuro se ve brillante para diseñadores y desarrolladores en Divi 5!

Cómo convertir un preajuste personalizado en un preajuste predeterminado

Tenemos preajustes predeterminados y también tenemos preajustes personalizados. Vimos cómo aplicar un preajuste personalizado en lugar de uno predeterminado, pero ¿qué pasa si nos gusta tanto que queremos que sea nuestro valor predeterminado?

Bueno, eso es fácil. Vaya a los preajustes del elemento o al grupo de preajuste del grupo de opciones . Pase el preajuste personalizado que desea hacer su valor predeterminado y haga clic en el icono de estrella . Luego guarde sus cambios . Su preajuste es ahora el preajuste predeterminado en todo su sitio web.

¿De dónde vienen los estilos dentro de los presets predeterminados?

Los preajustes predeterminados no editados simplemente heredan los valores de estilo que se encuentran en el personalizador del tema. Casi todos los temas de WordPress todavía usan algún aspecto del personalizador del tema (incluso los temas de bloque), aunque Divi lo ha hecho para que esté conectado pero no es necesario usarlo . Es probable que reemplacemos el personalizador en algún momento en el futuro, pero por ahora, es una reliquia de WordPress Core que es una peculiaridad de temas modernos de WordPress .

Digamos que utilicé el sitio de inicio del asesor financiero (como un ejemplo concreto). En el personalizador del tema, el tamaño del texto del encabezado se establece en 30px .

Puedo ver el mismo valor (30px) utilizado en preajustes predeterminados yendo al editor visual para una página, haciendo clic en el " preajuste predeterminado " para un módulo de encabezado o texto , y verificando bajo el diseño del encabezado para la elevación H1.

Un valor gris en un campo Divi 5 significa que es un valor heredado, en este caso, heredado del personalizador del tema

Pero ese es simplemente el establecido predeterminado por este sitio de inicio. Si usó presets de un paquete de diseño importado o se inició desde cero, se establecerían diferentes valores predeterminados en el personalizador del tema.

Cómo usar presets predeterminados para crear un sitio web

Recomiendo comenzar sus compilaciones con un par de páginas de wireframes. Presente todo en algunas páginas con lo que sabe que necesitará haber diseñado.

Intente confiar en los módulos más simples para hacer el trabajo y repetir el uso del mismo conjunto de módulos cuando sea posible. Considere cómo puede usar los módulos de encabezado, texto, propaganda, menú, imagen, acordeón/alternativa y video para construir la mayoría de los marcos de alambre de su página. Agregue otros módulos según sea necesario, pero adherirse a un conjunto central de módulos para la mayoría de las cosas hará que sea mucho más rápido usar el grupo de opciones y los preajustes predeterminados de elementos.

Esta página utiliza secciones, filas, columnas, texto, propaganda, imagen, botón y módulos de menú. Al mantener las cosas tan simples como pueden ser para esta página en particular, reduzco la cantidad de grupos de opciones con los que necesito diseñar.

A continuación, querrá comenzar a diseñar sus cambios más amplios con los preajustes de grupos de opciones predeterminados. Para la mayoría de los diseños, esto será:

1. Espacio de sección : incluya márgenes superior/inferior, márgenes izquierdo/derecho y cualquier relleno requerido.
2. Sección de colores de fondo : cree un grupo de opciones predeterminado preestablecido que desea usar en la mayoría de los casos y un grupo de opciones personalizado preestablecido para un color de fondo alternativo/de contraste. Recuerde que los preajustes predeterminados al grupo de opciones de fondo también se pueden aplicar al fondo de las columnas.
3. Tipografía : Comience con sus H1-H6. Dependiendo del uso de su módulo, querrá iniciarlos en el grupo de opciones predeterminado presets en texto de encabezado para el encabezado y los módulos de texto y el texto de título para cosas como módulos de blurbs. Luego, trabaje en el texto normal, centrándose en el grupo de opciones de texto en módulos de texto y grupos de opciones de texto del cuerpo que se encuentran en cosas como el módulo de propaganda.
4. Otras configuraciones de diseño : cree preajustes de grupos de opciones para bordes, sombras de caja, filtros (si está diseñando imágenes) y animaciones. Para estos, tiendo a no usar preajustes predeterminados, sino crear preajustes personalizados que pueda aplicar selectivamente a los elementos de página.
5. Configuración avanzada : esto es similar al paso anterior, pero creo preajustes de grupos de opciones para cosas como transiciones y efectos de desplazamiento. También tiendo a no usar preajustes predeterminados, sino crear preajustes personalizados que pueda aplicar selectivamente a los elementos de página.

La creación de los preajustes del grupo de opciones predeterminados de esta manera comenzará a aplicar automáticamente sus estilos en su sitio. Cada vez que se actualiza un OG predeterminado, los elementos relevantes en sus sitios web aceptan automáticamente esos cambios.

Los presets predeterminados le ahorrarán horas

Los preajustes predeterminados, tanto el elemento como la variedad del grupo de opciones, le ahorrarán grandes cantidades de tiempo. No puedo esperar a que comiences a construir sitios con estas características usando el constructor Blazing-Fast Builder de Divi 5. Y ese ni siquiera es el final de las nuevas características que se implementan en Divi 5.

Con las características nuevas y planificadas de Divi, tendrá un verdadero sistema de diseño a su alcance. ¿Ha intentado editar un sitio utilizando primero los presets predeterminados? ¿Cómo fue? Háganos saber en el comentario a continuación y comparta cómo usa estas características.

Descargar Divi 5 Aprenda todo sobre Divi 5 Prueba la demostración de Divi 5