Preselecciones Divi : La función que mejora su productividad

Divi Presets es una característica disponible en el Divi Builder. Pocos usuarios lo conocen, pero puede mejorar su productividad al crear sus sitios. ¿Lo conoces? ¿Lo utilizas?

¡Lo explico todo en este artículo tutorial y también en vídeo 🎥!

Aviso: este artículo contiene enlaces de afiliación que reconocerá fácilmente. Los enlaces clásicos están en púrpura y los enlaces patrocinados están en rosa.

1 - Divi Presets, ¿qué es 👀 ?

Si eres diseñador gráfico o de páginas web y utilizas PhotoShop, Sketch o Affinity Designer, puede que conozcas formas de mejorar tu productividad, especialmente con la funcionalidad de los elementos sincronizados. Esto permite, por ejemplo, crear un diseño con un estilo que se puede modificar en 1 clic y que afecta a todos los elementos a los que se ha asignado el estilo.

El constructor visual Divi también ofrece esta característica, llamada Divi Presets. Se trata de una "función oculta" porque no es visible a primera vista... Hay que saber qué es y qué hace.

Así que para responder a la pregunta: Divi Presets le permite guardar el estilo de un módulo como un estilo preestablecido para su uso futuro. Esto le ahorra un tiempo valioso a la hora de diseñar los diseños. Si hay que cambiar el estilo, basta con editarlo y el cambio se aplicará a todo el sitio.

Descubra las explicaciones detalladas en el artículo oficial de ElegantThemes

2 - Ejemplo de uso en los módulos de "resumen"

Para entender mejor cómo funcionan los Presets de Divi, vamos a tomar el ejemplo en un módulo de resumen.

Como puede ver en la imagen anterior, el objetivo es aplicar los estilos del primer módulo de resumen de la izquierda a los otros 3 módulos de resumen de la derecha. Para este ejemplo, se trata simplemente de añadir una sombra y esquinas redondeadas.

Esto es lo que tienes que hacer:

1. Edite el módulo de resumen que contiene los estilos a guardar. Haga clic en el icono de la rueda dentada de este módulo. En la parte superior verás "Preset: Default". Haga clic en él para abrir una ventana emergente.
2. Haga clic en "Crear un nuevo preajuste a partir de los estilos actuales". Esto significa que creará un nuevopreajuste a partir de los estilos actuales.
3. Dale un nombre a tu estilo para que puedas recordarlo la próxima vez que lo uses.
4. Guarde sus acciones hasta que se cierren todas las ventanas emergentes (3 veces).

Así podrás llamar a este preajuste siempre que lo necesites:

5. Abrir la configuración del módulo a modificar (icono de rueda dentada)
6. Haga clic en "Preset: Default".
7. Seleccione el estilo a aplicar, para mi ejemplo es blurb-style-1.
8. Confirme los cambios.
9. En 3 clics, los otros módulos de resumen han recuperado los estilos definidos en el preset Divi en cuestión.

3 - Preselecciones de Divi disponibles en todos los módulos ✅.

Te he mostrado un ejemplo con el módulo Resumen pero, en realidad, los Presets de Divi están disponibles para cualquier módulo.

Tomemos otro ejemplo con el módulo de botonesEl enfoque es el mismo:

1. Edite el módulo Button que contiene los estilos a guardar. Haga clic en el icono de la rueda dentada y, a continuación, en "Preset: Default".
2. Haga clic en "Crear un nuevo preajuste a partir de los estilos actuales" para crear un nuevo preajuste.
3. Dale un nombre a tu estilo para que puedas recordarlo la próxima vez que lo uses.
4. Guarde los cambios.

5. Abra la configuración del módulo de botones que va a modificar (icono de rueda dentada) y haga clic en "Preset: Default".
6. Seleccione el estilo a aplicar, para mi ejemplo es botón-estilo-naranja.
7. Confirme los cambios.

Ya está, su nuevo botón ha sido estilizado en 1 clic y corresponde exactamente a su carta gráfica. Te has ahorrado muchos minutos de configuración.

8. Edite la configuración del módulo de botones y haga clic en "Preset".
9. Seleccione el preajuste que desea modificar haciendo clic en el icono del lápiz.
10. Haga los cambios necesarios, por ejemplo: cambie el color del botón.
11. Guarde los cambios.

Ahora todos los botones de su sitio que utilizaron este Preset Divi han sido cambiados. Para eso está esta función... No sólo aplicas un estilo rápidamente, sino que puedes aplicar los cambios a todo el sitio y ahorrar mucho tiempo.

👉 Nota: hay muchas formas de mejorar tu productividad con Divi. Por ejemplo, descubra cómo importar/exportar un diseño Divi o cómo importar/exportar una plantilla desde el Theme Builder.

4 - No confundir "Divi Presets" y "Extend Styles

Puede que te preguntes, con razón, si esta función de Divi Presets es redundante con la función "Extend Styles".

De hecho, estas dos características son similares, pero hay algunas sutilezas que las diferencian:

1. Al pasar el ratón por encima de un módulo, aparecen opciones: haga clic en "Otros parámetros del módulo" (icono de los 3 puntos pequeños).
2. Haga clic en Extender Estilos
3. Elija hasta dónde quiere extender estas personalizaciones: a través de la página, a través de la sección, a través de la fila o a través de la columna.
4. Confirme su elección haciendo clic en Ampliar.
5. Este es el resultado: todos los módulos de resumen han recuperado todos los estilos del módulo inicial, incluido el color.
6. Mientras que al utilizar los Presets de Divi, sólo se copiaron los estilos generales.

Pero sobre todo, lo que es importante recordar aquí es que es imposible extender los estilos a todo el sitio con la funcionalidad "Extender estilos". Además, no puede utilizarlos en una nueva página y no puede realizar cambios en modo "sincronizado".

¿Sabías que puedes probar Divi gratis? Ir a esta página y haga clic en "PRUEBA GRATUITA

5 - No confundir con la función "Elemento global".

Lo mismo ocurre con la función de elemento global. Puede parecer que es similar a los Presets de Divi porque el cambio de un elemento global también afecta a todo el sitio.

Un elemento global es un módulo, línea o sección que se ha guardado en la biblioteca de Divi y que se puede utilizar siempre que se necesite. Sin embargo, si registra un botón como elemento global y cambia el enlace (URL) del botón, ese enlace también se cambiará en todas las páginas del sitio que utilicen ese botón global. Puede que esto no sea lo que quieres. En este caso, los Presets de Divi son esenciales.

Para entender mejor esto funcionalidad del elemento global, lea este tutorial detallado.

6 - Videotutorial de presets de Divi 🎬

Para una explicación más vívida de esta característica de Divi Presets, vea el resumen de este artículo en este video explicativo:

O vea la presentación de Nich Roach:

7 - Algunos recursos adicionales 🤩

¿Qué te parece esta función? Me gustaría saber (en los comentarios) si lo usas y si encuentras que realmente te ahorra tiempo.

Mientras tanto, aquí hay algunos recursos adicionales:

• 7 características ocultas del Constructor Divi
• Lanzamiento de Presets Divi
• Documentación oficial de Elegant Themes sobre Divi Presets
• Recuperación gratuita a Guía de estilo listo para usar (ver vídeo más abajo)

Para saber más sobre cómo utilizar los presets de Divi, vea este vídeo que le muestra cómo se pueden utilizar estos presets para sus textos y fuentes :