🚀Guía para usar Divi Presets

Se ha anunciado una nueva característica de Divi, los Divi Presets. Una nueva funcionalidad que nos permite crear estilos prediseñados y que podamos aplicar fácilmente a cualquier elemento de nuestro diseño. Es una nueva funcionalidad de Divi basada en clases CSS y esto nos permitirá aumentar nuestras posibilidades y ahorrar tiempo en los diseños.

También te puede interesar:
La Guía más completa para usar Divi Theme Builder
Curso de Diseño Web con Divi
¡Divi 4 Ya ha llegado! Todas las novedades aquí
¿Qué es Elementor? Todo sobre Elementor Page Builder

¿Qué son los Divi Presets?

Los Divi Presets son diseños preestablecidos que podemos guardar bajo un nombre o seudónimo. De esta manera, podemos reutilizarlos en otras partes de nuestra web con solo un clic.

Cuando diseñamos una sección, fila o módulo podemos guardarlo como un Divi Preset. Y después aplicar ese conjunto de estilos a otra sección, fila o módulo. En este caso, la ventaja es que no se trata solo de copiar y pegar estilos, sino que puedes guardar ese conjunto de estilos bajo un nombre y poder utilizarlo cuando quieras.

 

También, cuando ya tienes asignado ese Divi Preset a varios componentes de tu diseño, si modificas el Divi Preset, todos los componentes se verán afectados al mismo tiempo. Por eso, esta nueva funcionalidad Divi nos permite ahorrar mucho tiempo de diseño.

¿Cómo se utilizan?

Los Divi Presets, o ajustes preestablecidos, se pueden utilizar desde los paneles de configuración, bajo el nombre de dicho panel en la parte superior.

Para ello, lo primero que tenemos que hacer es agregar un nuevo ajuste. Le damos un nombre. Y personalizamos nuestro diseño. Guardamos los cambios. Y veremos que ya aparece nuestro nuevo Divi Preset en el desplegable de los ajustes preestablecidos, y el diseño del módulo se actualizará con lo que hayamos configurado.

Crear un Divi Preset a partir de un diseño ya realizado

También podemos crear un Divi Preset a partir de un diseño que ya tengamos. Solo tenemos que irnos al panel de configuración, y a la hora de crear un Divi Preset nuevo, elegir a partir del diseño existente (from current styles).

 

Modificar un Divi Preset ya creado

Si necesitamos modificar un Divi Preset existente, solo tenemos que seleccionarlo, modificarlo pulsando el icono del lápiz y darle a guardar.

Todos los elementos que usen ese Divi Preset se verán modificados.

 

Establecer un Divi Preset por defecto

Si queremos que un Divi Preset sea el predeterminado

A diferencia del editor de valores predeterminados globales donde podemos establecer un valor predeterminado para cada módulo Divi, con los Divi Presets podemos establecer varios diseños del mismo módulo Divi además de mantener el valor predeterminado de éste.

Para establecer un Divi Preset por defecto solo tenemos que irnos al panel de configuración del módulo Divi en cuestión y en Divi Presets seleccionar el Divi Preset y pulsar sobre la estrella para hacerlo por defecto.

Si vas a actualizar Divi a la última versión para disponer de esta funcionalidad, los valores predeterminados globales actuales se migrarán a su nuevo valor predeterminado.

Eliminar un Divi Preset

Para eliminar un Divi Preset es muy sencillo. Solo hay que seleccionarlo desde el panel de configuración, y pulsar el icono de la papelera.

Ahora veremos en más detalle la interfaz de Divi Presets para que podáis tener información más detallada de cada una de las opciones que tenemos para trabajar con Divi Preset.

Descripción de la interfaz de Divi Preset

Todos los ajustes preestablecidos de Divi se pueden personalizar desde Divi Presets. Veamos cómo es la interfaz de Divi Preset para conocerla mejor y ver todas las opciones que nos ofrece.

Menú desplegable de preajustes (listado de presets): aquí puedes ver el preajuste activo de tu módulo. Si haces clic en el menú desplegable puedes administrar la biblioteca de presets configurados.

1. Valor predeterminado: este es el valor predeterminado de este módulo. Si seleccionas la estrella harás que estos sean los valores predeterminados de este módulo.
2. Preset por defecto asignado: esta estrella indica qué Preset es el por defecto. Si haces clic en este icono de estrella dentro de cualquier valor predeterminado para convertirlo en el valor predeterminado.
3. Preset seleccionado: la marca de verificación verde indica qué preset está asignado actualmente al módulo que está editando. Los estilos base del módulo están controlados por el preajuste seleccionado.
4. Editar el Preset seleccionado: si haces clic en este icono de lápiz puedes editar el diseño del preset seleccionado. Cuando editas el diseño de un preset, todos los módulos que usan ese preset tomarán la nueva apariencia.
5. Configurar el Preset seleccionado: aquí puedes cambiar el nombre del preset para organizarlo mejor dentro de su biblioteca de Presets.
6. Refrescar el preset con los estilos actuales: esto refrescará el preset para que coincida con el diseño actual del módulo que se está editando.
7. Duplicar Preset: puedes duplicar cualquiera de sus Presets existentes. Esta es una excelente manera de crear diferentes variaciones sin tener que comenzar desde cero.
8. Eliminar un Preset: al eliminar un preset, se eliminará de su biblioteca. Todos los módulos que usan ese valor predeterminado cambiarán al valor predeterminado.
9. Crear nuevo preset a partir de estilos actuales: esto creará un nuevo preset para que coincida con el diseño del módulo que está editando actualmente. Si tienes elementos prediseñados que te gustaría reutilizar en tu sitio web, puedes convertirlos rápidamente en presets.
10. Crear un Preset nuevo: esto creará un preset nuevo en blanco. Después tendrás que personalizarlo desde la configuración de diseño disponible en el módulo.

Descarga Gratis ejemplos de Presets de Divi

Desde el lanzamiento de esta nueva funcionalidad de Divi ya se está publicando descargas gratuitas de presets de Divi para que tengamos algunos diseños listos para usar.

Pincha en el siguiente enlace para descargar gratis ejemplos de Divi Presets.

5 Global Presets para optimizar tu Divi Menú

Recientemente han publicado 5 global presets de Divi con el que puedes optimizar tu menú superior de Divi.

Aquí puedes descargar los 5 divi menu presets