Presets Globales de Divi

Presets Globales de Divi

Aprende cómo crear presets de Divi y aplicarlos a módulos en todo tu sitio web.





Una visión general de la función de presets globales de Divi

Un reemplazo poderoso para los valores predeterminados globales


Los presets globales de Divi son una versión avanzada de los valores predeterminados globales que mejoran las configuraciones y estilos de manera significativa.

A diferencia de los valores predeterminados globales, que permiten solo una configuración predeterminada para un elemento, los presets globales te permiten usar múltiples presets para cualquier elemento en Divi.

Esta función ofrece una forma más potente y flexible de crear y administrar un diseño coherente en todo tu sitio web.

Ejemplo: Supongamos que tienes un sitio web con tres diseños principales de botones que se usan en todo el sitio. Puedes asignar un preset global a cada uno de estos tres diseños de botón (por ejemplo, preset de botón 1, preset de botón 2 y preset de botón 3).

Ahora, cada vez que crees un botón nuevo, puedes elegir uno de esos presets globales.

divi global presets

Actualizar el diseño de un preset ahora actualiza todas las instancias de ese preset en todo el sitio, facilitando el proceso de diseño tanto a nivel local como global.


El menú desplegable de configuración de presets

Accede a los presets globales para un elemento de Divi abriendo sus configuraciones y haciendo clic en el menú desplegable de presets bajo el encabezado.
divi global presets

Dentro del menú desplegable, puedes crear un nuevo preset o actualizar el preset predeterminado actual.


divi global presets

Lado local vs lado de preset global

Cuando quieres actualizar los presets globales para un elemento en Divi, puedes usar el modal de Configuración de Preset Global específico para ese elemento. El encabezado de este modal será gris, lo que facilita distinguir que estás modificando opciones de presets globales, en lugar de opciones que solo aplican localmente al elemento.
divi global presets

Los modales de configuración local y global ahora tienen un menú desplegable y opciones idénticas. Esto facilita la actualización de presets globales sin importar desde qué lado estés trabajando.


divi global presets
El menú desplegable de presets globales

Por defecto, el menú desplegable de presets globales incluirá solo el preset predeterminado, que ya estará seleccionado.
divi global presets

Lista de presets

Una vez que se agregan más presets, el menú desplegable mostrará los presets globales disponibles para ese elemento. El preset global predeterminado permanecerá listado en la parte superior junto con el nombre del preset en el que se basa.
divi global presets

Iconos de estrella y marca de verificación

Junto a ciertos presets en la lista, notarás iconos de estrella y marca de verificación. El icono de estrella identifica el preset usado como preset predeterminado. El icono verde de marca de verificación identifica el preset activo (o el preset que actualmente usa el elemento).
divi global presets

Botones para crear nuevos presets

También incluidos en el menú desplegable de presets están dos botones principales. Haz clic en el botón Crear nuevo preset desde estilos actuales para iniciar el preset con los diseños activos en el elemento. O haz clic en el botón Agregar nuevo preset para añadir un preset nuevo desde cero.
divi global presets

Menú de ítem de preset global

Al pasar el cursor sobre un preset global individual dentro del menú desplegable, el ítem se pondrá azul y aparecerá un menú con opciones adicionales.

divi global presets

Este menú incluye las siguientes opciones:
  • Editar

  • Configuraciones

  • Actualizar preset con estilos actuales

  • Duplicar

  • Eliminar

  • Asignar como predeterminado


divi global presets

Editar estilos del preset

El ícono de editar desplegará el lado de preset global del elemento (con una animación de giro). Allí puedes actualizar el diseño de ese preset global en particular.

divi global presets

Configuración del preset

El ícono de engranaje abrirá las configuraciones del preset, donde puedes editar el nombre del preset o asignarlo como predeterminado.

divi global presets

Actualizar preset con estilos actuales

El ícono de actualización permite actualizar el preset global con los estilos actuales del elemento. Esta es una manera rápida de aplicar el diseño en el que estás trabajando a un preset existente. Y dado que esto afectará a todos los elementos que usan ese preset global en todo el sitio, aparecerá una notificación de “¿Estás seguro?” antes de aplicar la actualización.
divi global presets

Duplicar preset

El ícono de duplicar clonará el preset y abrirá las configuraciones del preset duplicado para que puedas darle un nombre apropiado o asignarlo como predeterminado. Esta es una excelente opción para crear un preset nuevo sin empezar el diseño desde cero.
divi global presets

Eliminar preset

El ícono de eliminar borrará el preset. La notificación “¿Estás seguro?” te recordará que estás eliminando un preset que afecta a todo el sitio. Y si el preset eliminado es el que se usa como predeterminado, otro preset tomará su lugar como preset predeterminado para ese elemento.
divi global presets

Asignar un Preset como Predeterminado

Como se mencionó anteriormente, el ícono de estrella indica el preset predeterminado. Hacer clic en el ícono de estrella dentro del menú del preset asignará ese preset como predeterminado.
divi global presets

Agregar Nuevos Presets

Divi te ofrece varias opciones para agregar un nuevo preset global. Estas incluyen crear un preset desde cero, crear un preset usando los estilos actuales del elemento o duplicar un preset existente.
  • Desde cero:
    Selecciona el botón Agregar Nuevo Preset desde el menú desplegable de presets para crear un preset desde cero. Actualiza la configuración del preset (nombre del preset y/o asignar como predeterminado).
    Luego, usa el menú del nuevo preset para hacer cambios adicionales como editar estilos o actualizar el preset con los estilos actuales del elemento.

divi global presets

  • Desde estilo actual:
    Si ya tienes un elemento estilizado, puedes convertirlo en un nuevo preset global haciendo clic en el botón Crear Nuevo Preset desde Estilos Actuales.
    Esto es más conveniente cuando trabajas con diseños existentes y quieres acelerar la creación de un nuevo preset.

divi global presets

  • Duplicar otro preset:
    Como se mencionó antes, puedes usar el ícono de duplicar para clonar un preset existente y tener un punto de partida para diseñar uno nuevo.

divi global presets


Actualizar Presets Existentes

Existen varios métodos para actualizar el diseño de un preset global existente en Divi, lo que te da más control para actualizar el diseño de la manera que más te convenga.

  • Editar la configuración del preset:
    La forma más directa es hacer clic en el ícono de editar en el menú del preset. Esto abrirá la ventana modal del preset global del elemento, donde podrás actualizar la configuración de ese preset específico.

divi global presets

  • Actualizar preset con estilos actuales:
    Puedes usar el ícono de actualizar para aplicar los estilos actuales del elemento al preset global existente. Es una forma rápida de aplicar el diseño en el que estás trabajando a un preset ya creado.

divi global presets


Otras Opciones (o clic derecho)
Editar estilo del preset:
  • Además de las opciones del menú de presets, puedes usar el menú de otras configuraciones o clic derecho para editar un estilo de preset existente. Al abrir el menú, haz clic en Editar estilo del preset para abrir la ventana modal del preset global asignado a ese elemento

divi global presets

  • Aplicar estilos al preset actual:
    Este menú también incluye la opción Aplicar estilos al preset activo, que es básicamente lo mismo que actualizar el preset con los estilos actuales. Esta opción puede ser más conveniente si no quieres abrir la configuración del elemento para aplicar el cambio.

divi global presets

  • Aplicar grupo de opciones al preset actual:
    Puedes aplicar el estilo de un grupo específico de opciones o un interruptor al preset activo desde este menú.

divi global presets

  • Aplicar opción única al preset actual:
    También puedes aplicar una única opción al preset activo.
    Ejemplo: ajustar el tamaño del texto para un preset particular. Para hacerlo, abre el menú de otras configuraciones junto a la opción y selecciona Aplicar estilo al preset activo.

divi global presets


Elegir Presets Diferentes

Cuando hay varios presets disponibles para un elemento, puedes elegir fácilmente otro preset haciendo clic en el preset deseado dentro de la lista.
divi global presets

Lógica Condicional en Presets Globales

Normalmente, algunas opciones solo están disponibles basadas en lógica condicional al actualizar la configuración de un elemento.
Ejemplo: los estilos de icono solo están disponibles cuando se selecciona usar un icono en lugar de una imagen para el módulo resumen.
Esta función limpia la interfaz al no mostrar opciones que no aplican al diseño.

Sin embargo, al editar los presets globales para un elemento, la lógica condicional (que normalmente oculta o muestra opciones) se ignora.
Esto permite diseñar presets globales para todas las opciones, estén o no en uso cuando se añade el elemento al sitio.
Como se muestra en la ilustración, los estilos de icono están disponibles para el preset resumen aunque se use una imagen.

divi global presets

Estados de Historial Global

¿Cometiste un error con los presets? No te preocupes. Puedes controlar los estados de historial para cambios globales con los Estados de Historial Global.
  • Accede al historial de edición haciendo clic en el ícono de reloj en el menú de configuración.

  • Selecciona la pestaña Estados de Historial Global dentro del modal de historial.

  • Allí puedes elegir diferentes estados del sitio para deshacer errores. Cada vez que guardas y confirmas un cambio de preset global en un módulo, fila o sección, se añade un nuevo estado a la lista.

  • Solo selecciona el estado deseado para revertir a estados previos.


divi global presets

Importar Elementos con Presets Globales


Al importar un elemento con presets globales a la biblioteca de Divi, puedes incluir o excluir los presets globales.
  • Navega a Divi → Biblioteca de Divi

  • Haz clic en el botón Importar & Exportar

  • Selecciona la pestaña Importar

  • Selecciona el archivo a importar

  • Marca la casilla Importar Presets

  • Haz clic en el botón importar


divi global presets

El Sufijo Importado

Cuando exportas o importas un elemento con presets globales, los presets globales de los elementos importados se renombrarán automáticamente con el sufijo “importado”.

divi global presets

    • Popular Articles

    • Guía de Negocio para Resellers y Partners

      En esta Guía de Negocio vamos a analizar los 8 puntos más importantes a tener en cuenta si te estás planteando lanzar tu Propio Negocio de Apps: ¿Cuánto puedes ganar con un Negocio de Apps? Demo de Scoreapps: Cómo crear Apps y Monetizarlas ¿Qué ...
    • Ver una Demo de Scoreapps para Resellers

      En este vídeo te explicamos el modelo de negocio, los tipos de Apps que puedes crear y las distintas herramientas que incluye Scoreapps en su Plan de Resellers: Y en este otro vídeo te enseñamos cómo funciona el software por dentro:
    • Proporciona acceso a tus Aplicaciones

      Con el Plan Reseller o Plan Partner puedes otorgar fácilmente a tus clientes o colaboradores acceso a tus aplicaciones. Accede a tu Panel de Apps, y después accede a cualquier Aplicación: Una vez dentro del constructor de Apps, ve a Mi Cuenta - ...
    • Cómo Crear una App de Tienda

      El comercio electrónico desde dispositivos móviles se disparó desde comienzos de 2020 debido a la Pandemia del Covid19 y sigue creciendo a tasas del 45% anual. Hoy en día, contar con una App de Tienda resulta imprescindible para cualquier negocio de ...
    • Cómo diseñar la pantalla de inicio o portada de una App

      En el video que te mostramos a continuación te explicamos cómo diseñar la pantalla de inicio de una App:
    • Related Articles

    • El sistema de gestión de colores de Divi

      Cómo usar las opciones avanzadas de color de Divi. El sistema de gestión de colores de Divi ha evolucionado a lo largo de los años para convertirse en uno de los sistemas de color más robustos en el universo de WordPress. El sistema de colores de ...
    • El Bloque de Diseño Divi

      El Bloque de Diseño Divi te permite cargar diseños de Divi directamente dentro del editor Gutenberg. El Bloque de Diseño Divi El bloque de diseño Divi es un bloque de Gutenberg que te permite insertar o crear diseños de Divi desde cero directamente ...
    • Uso de los ajustes predefinidos de Divi

      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 ...
    • Uso de las Opciones de Borde en Divi

      Las opciones de borde de Divi permiten añadir y estilizar fácilmente bordes en cualquier elemento de la página. Con las Opciones de Borde de Divi, es posible crear diseños verdaderamente únicos para tu sitio web. ¡Puedes aplicar bordes personalizados ...
    • Uso de las Opciones de Sombra de Caja en Divi

      Las opciones de sombra de caja en Divi te permiten darle a cualquier elemento de la página la ilusión de profundidad. Las sombras proyectadas son una forma creativa de dar vida a los elementos de diseño de tu sitio web. Pueden resaltar elementos e ...