Los ajustes predefinidos de Divi aceleran enormemente tu proceso de diseño al permitirte tomar el diseño de cualquier elemento y aplicarlo a otros módulos.

Divi es altamente personalizable, permitiéndote hacer que los módulos y otros elementos de Divi luzcan como desees.

Ejemplo: puedes tomar cualquier módulo de texto destacado y añadir un color de fondo, ajustar el tamaño, fuente y color del título, agregar animación o asignar una imagen o ícono.

Los ajustes predefinidos de Divi mejoran la experiencia de diseño al permitirte tomar las configuraciones de diseño de ese texto destacado y aplicarlas a cualquier otro texto destacado en tu sitio guardando esas configuraciones como un ajuste predefinido.

Cuando usas los ajustes predefinidos de Divi, puedes crear una configuración de diseño global para el módulo de texto destacado o cualquier otro módulo de Divi y guardar esas configuraciones para usarlas en el futuro en todo tu sitio web.

Cómo funcionan los ajustes predefinidos de Divi: resumen breve

Ejemplo: si estás construyendo un sitio nuevo y quieres usar un paquete de diseño de Divi, puedes crear ajustes predefinidos de esos elementos para usarlos en otras páginas que crees.

Los ajustes predefinidos de Divi pueden aplicarse a cualquier elemento, incluyendo:

• Módulos

• Secciones

• Filas

• Columnas

Por ejemplo, si creas una sección destacada con un color de fondo y un patrón aplicado, puedes guardar esa sección como un ajuste predefinido para usarla en otras secciones de tu sitio web.

Nota: Los ajustes predefinidos son específicos para cada tipo de elemento. No puedes usar un ajuste predefinido de un tipo de módulo en otro diferente.

Interfaz de ajustes predefinidos de Divi

• Menú desplegable de ajustes predefinidos – Muestra el ajuste predefinido activo de tu módulo. Haz clic para gestionar tu biblioteca de ajustes predefinidos.

• Ajuste predefinido por defecto – Es el ajuste predeterminado. Selecciónalo para activar la apariencia predeterminada del módulo.

• Ajuste predefinido por defecto asignado – La estrella indica cuál es tu ajuste predefinido por defecto. Todos los módulos básicos usarán este ajuste como apariencia predeterminada. Haz clic en esta estrella dentro de cualquier ajuste para hacerlo predeterminado.

• Ajuste predefinido seleccionado – La marca verde indica qué ajuste está asignado al módulo que estás editando. Los estilos base del módulo son controlados por el ajuste seleccionado.

• Editar un ajuste predefinido – Haz clic en el ícono de lápiz para editar el diseño de un ajuste predefinido. Cuando lo editas, todos los módulos que usan ese ajuste mostrarán el cambio.

• Gestionar configuración del ajuste predefinido – Cambia el nombre del ajuste para organizar mejor tu biblioteca.

• Actualizar ajuste con estilos actuales – Actualiza el ajuste para que coincida con el diseño actual del módulo que estás editando.

• Duplicar ajuste predefinido – Puedes duplicar cualquiera de tus ajustes predefinidos. Es una excelente forma de crear variaciones sin empezar desde cero.

• Eliminar ajuste predefinido – Eliminar un ajuste lo quita de tu biblioteca. Todos los módulos que usaban ese ajuste volverán al ajuste predeterminado.

• Crear nuevo ajuste desde estilos actuales – Crea un nuevo ajuste que coincida con el diseño del módulo que estás editando. Si quieres reutilizar elementos pre-diseñados en tu sitio, puedes convertirlos rápidamente en ajustes predefinidos.

• Agregar nuevo ajuste predefinido – Añade un nuevo ajuste vacío para personalizarlo luego con las opciones de diseño del módulo.

Cuándo crear ajustes predefinidos de Divi

Así, puedes configurar todo desde el principio, ahorrándote mucho tiempo. A medida que agregues páginas, tus ajustes predefinidos pueden aplicarse a nuevos módulos.

No tendrás que preocuparte por anotar códigos hexadecimales, configuraciones de margen y relleno, tamaños y familias de fuentes, u otros elementos de diseño.

Aplica un ajuste predefinido y sigue con el siguiente elemento que quieras construir.

Agregar un nuevo ajuste predefinido

• Añade un elemento

• Haz clic en el botón Agregar nuevo ajuste predefinido

• Diseña tu elemento y guárdalo haciendo clic en la casilla verde

• Alternativamente, diseña tu módulo y luego guarda el ajuste predefinido:

  • Haz clic en los ajustes predefinidos en la parte superior de la configuración del elemento

  • Haz clic en la flecha desplegable bajo ajustes predefinidos

  • Selecciona Crear nuevo ajuste desde estilos actuales

Actualizar estilos predeterminados con ajustes predefinidos

Ejemplo: si creas un ajuste para un botón, puedes añadir o cambiar botones existentes en tu página y luego aplicar el ajuste guardado.

Todos tus estilos de diseño se actualizarán al instante con los estilos del ajuste guardado.

Nombrar tu ajuste predefinido

Se te pedirá nombrar tu ajuste predefinido una vez que hagas clic en el botón Crear nuevo ajuste desde estilos actuales. Alternativamente, puedes hacer clic en el botón Agregar nuevo ajuste para guardar y diseñar tu ajuste.

Es importante poner nombres a tus ajustes que reconozcas. De lo contrario, te costará descifrar qué ajuste usar al crear nuevos elementos.

• Para títulos, usa nombres como título principal o título secundario.

• Para el texto del cuerpo, usa texto del cuerpo o algo similar.

• Si usas varios estilos para un mismo elemento, cada uno debe tener un nombre acorde para entender los ajustes creados para el mismo estilo de módulo.

---

Diseñar un ajuste predefinido

Cuando quieras diseñar un ajuste, deberás crear uno nuevo y luego diseñar tu elemento.

• Abre la ventana modal de configuración del módulo.

• Haz clic en la flecha desplegable junto a los ajustes predefinidos. 
  

• Haz clic en el botón Agregar nuevo ajuste predefinido. 
  

• Nombra tu ajuste.

• Haz clic en el botón verde para guardarlo. 
  

• Diseña el elemento como desees.

• Haz clic en el botón verde para guardar el elemento. Aparecerá una ventana modal preguntando si quieres guardar.

• Haz clic en Sí.

• Guarda tu módulo haciendo clic en el botón verde. 
  

---

Aplicar ajustes predefinidos a nuevos módulos

Divi facilita aplicar ajustes predefinidos a nuevos módulos, especialmente útil al crear páginas nuevas a las que quieras aplicar los mismos estilos.

• Haz clic en la flecha desplegable de ajustes predefinidos.

• Selecciona el ajuste que deseas aplicar.

• Recuerda, los ajustes son específicos para cada tipo de módulo. Asegúrate de aplicar el ajuste correspondiente al tipo de módulo. Por ejemplo, módulos de texto deben usar ajustes de texto, módulos destacados deben usar ajustes para destacados, etc.

• Guarda tu módulo haciendo clic en el botón verde.
  

Crear un nuevo ajuste predefinido desde un estilo actual

Puedes crear un nuevo ajuste desde un elemento ya estilizado.

Ejemplo: usando el módulo de precios de Divi. Un elemento estilizado puede guardarse como un ajuste predefinido.

• Haz clic en el menú desplegable de ajustes predefinidos.

• Selecciona el botón Crear nuevo ajuste desde estilos actuales.

• Nombra tu nuevo ajuste.

• Guárdalo.

Para aplicar los estilos a otro módulo de precios:

• Edita el nuevo módulo de precios.

• Selecciona el menú desplegable de ajustes predefinidos.

• Haz clic en el nombre del ajuste que quieres aplicar.

• Guarda el módulo haciendo clic en el botón verde.

Tu nuevo módulo de precios se estilizará al instante con los estilos guardados en el ajuste predefinido.

---

Editar estilos de ajustes predefinidos

Editar estilos existentes es muy fácil.

• Haz clic en cualquier elemento que tenga un ajuste predefinido aplicado.

• Haz clic en la flecha desplegable junto a los ajustes.

• Pasa el cursor sobre el ajuste aplicado.

• Haz clic en el ícono de lápiz.

• Realiza los cambios de diseño que quieras.

• Haz clic en el botón verde para guardar.

Verás que cualquier módulo con ese ajuste aplicado actualizará su diseño automáticamente.

El fondo de la ventana de configuración del módulo cambiará a gris para indicar que estás editando un ajuste predefinido.

Nota: Si editas un ajuste, esos cambios se reflejarán en todos los lugares donde se use ese ajuste.

---

Sobrescribir estilos de ajustes predefinidos

Los estilos de diseño de un ajuste predefinido pueden ser sobrescritos aplicando nuevos estilos desde la pestaña de diseño del módulo.

Ejemplo:
Si un módulo de texto tiene asignado un ajuste que define para el encabezado nivel 1:

• Tamaño del texto: 80px

• Color del texto: naranja

• Espaciado entre letras: 0.05em

El fondo completo de la ventana modal será gris pizarra, indicando que se está editando un ajuste predefinido.

Podemos sobrescribir esos estilos aplicando los mismos ajustes directamente en el módulo desde la pestaña de diseño.

Cuando editamos el módulo, el fondo de la ventana modal será morado, indicando que se está editando el módulo.

---

Importar y exportar diseños con y sin tus ajustes predefinidos

Puedes importar y exportar diseños tanto con como sin los ajustes predefinidos.

Ambas opciones son útiles para incorporar tus diseños en otros sitios Divi. Cuando exportas un diseño, tus ajustes predefinidos se guardan e incluyen automáticamente en la exportación.

---

Exportar un diseño de página con ajustes predefinidos

Al exportar un diseño de Divi, los ajustes predefinidos se guardan junto con el diseño.

• Activa el constructor visual.

• Haz clic en el ícono de tres puntos morados en la parte inferior central de tu pantalla. 

• Haz clic en el ícono de importar/exportar. 
  

• Nombra tu diseño, luego haz clic en el botón Exportar diseño Divi Builder. 
  

Tu diseño se guardará como un archivo .json que puede ser importado en otra página de tu sitio y en otro sitio web con Divi.

---

Importar un diseño de página con presets Divi

Al importar un diseño de página Divi, puedes elegir si deseas incluir o no los presets. Hay varias formas de hacerlo.

La primera es desde el panel de administración del Constructor de Páginas Divi.

1. Haz clic en el ícono de importar/exportar en la parte superior derecha de los ajustes del Constructor de Páginas Divi. 
2. Haz clic en la pestaña Importar.
3. Selecciona el archivo .json que contiene el diseño de página a importar.
4. Elige si quieres incluir los presets marcando la casilla Importar presets. 
   
5. Haz clic en el botón Importar diseño Divi Builder.

La página se refrescará y mostrará que el nuevo diseño ha sido importado.

---

Otra forma de importar tu diseño es usando el Constructor Visual.

1. Puedes arrastrar tu archivo .json a una página nueva, o hacer clic en el ícono de importar/exportar en la barra inferior del Constructor Visual. 
   
2. Elige si quieres incluir los presets marcando la casilla Importar presets.
3. Haz clic en el botón Importar diseño Divi Builder.
   

Al editar un módulo o elemento donde hay un preset aplicado, verás todos los presets disponibles, incluyendo los que fueron importados

Consejos y mejores prácticas para usar presets Divi

Al trabajar con presets, hay algunas cosas que debes considerar. Implementar estos consejos te ayudará a construir un sitio Divi hermoso más rápido y a mejorar tu conocimiento sobre los presets Divi.

---

Crea una guía de estilos para presets Divi

Los presets Divi te permiten trabajar más rápido y eficiente al construir tu sitio web. Crear una guía de estilos para presets es una excelente manera de comenzar tu diseño. Consulta nuestra guía gratuita de estilos para presets y así empezar con buen pie.

---

Usa presets para secciones y filas

Usar presets para secciones y filas ayuda a crear un diseño consistente en tu sitio. Esto es una buena alternativa a las opciones limitadas del personalizador del tema.

Puedes usar tus nuevos presets personalizados para secciones y filas para acelerar y sobreescribir el diseño.

---

Sigue aprendiendo

Ahora que entiendes cómo funcionan los presets Divi, revisa algunas de nuestras publicaciones y recursos gratuitos para estimular tu creatividad:

• Presets globales gratuitos

• Cómo crear cajas de contenido estilizadas en Divi para consejos, información, advertencias y más (Descarga GRATIS)

• Optimización de la imagen del logo de tu sitio Divi con presets globales

• Cómo usar presets globales con bloques de diseño Divi para agilizar el diseño de publicaciones en el blog