En esta nueva píldora de Divi 5 quiero hablarte sobre una función que, aunque puede parecer pequeña, representa una mejora muy significativa para quienes trabajamos a nivel técnico o avanzado con Divi: el nuevo sistema de atributos personalizados. Si antes usabas las secciones de Custom CSS Class o Custom ID dentro de los módulos para agregar tus propios selectores o identificadores, ahora con Divi 5 podrás ir mucho más allá, ya que Elegant Themes ha rediseñado por completo esta función para ofrecer una forma más flexible, moderna y poderosa de agregar atributos personalizados (Custom Attributes) a cualquier módulo o elemento del constructor.

Como diseñador y desarrollador que ha trabajado con Divi durante años, debo decir que esta actualización me parece una de las más útiles para los que combinamos diseño visual con desarrollo funcional, porque simplifica mucho la forma de conectar Divi con código, integraciones o animaciones personalizadas.

Qué es el nuevo sistema de atributos personalizados en Divi 5

En versiones anteriores de Divi (como Divi 4), teníamos dos campos principales para añadir clases o identificadores a los módulos: Custom CSS Class y Custom CSS ID. Eran útiles, pero limitados, porque solo podíamos agregar esos dos tipos de atributos, sin posibilidad de extenderlos a otros valores o personalizaciones más específicas.

En Divi 5, eso cambia por completo. El nuevo sistema de atributos personalizados nos permite crear cualquier tipo de atributo HTML que queramos, no solo clases o IDs. Esto quiere decir que ahora puedes agregar atributos completamente personalizados con el nombre y valor que necesites, según el tipo de funcionalidad o integración que estés desarrollando.

Por ejemplo, puedes crear un atributo llamado data-producto="destacado" o role="button" o incluso un atributo personalizado para integraciones con JavaScript o frameworks externos. En resumen, ya no estás limitado a las opciones que Divi traía por defecto; ahora puedes etiquetar o extender la información de tus módulos de forma completamente libre.

⭐️ Consejo profesional: usa nombres de atributos claros y consistentes. Si estás trabajando en un proyecto grande con varios desarrolladores o diseñadores, mantener una convención de nombres te ahorrará muchos dolores de cabeza cuando tengas que identificar elementos en el código.

Cómo funciona el sistema de atributos personalizados paso a paso

La implementación de los nuevos atributos personalizados en Divi 5 es muy sencilla, pero ofrece un gran poder cuando se usa correctamente. Aquí te explico paso a paso cómo aprovecharla:

Paso 1: Abre la configuración del módulo

Selecciona el módulo, fila o sección donde quieras aplicar el atributo personalizado. Puede ser una imagen, un botón, un texto o cualquier otro elemento dentro del constructor visual.

Paso 2: Accede a la pestaña de “Advanced” (Avanzado)

Dentro de las opciones del módulo, haz clic en la pestaña “Advanced”, donde tradicionalmente encontrabas los campos de CSS ID & Classes.

Paso 3: Crea un nuevo atributo personalizado

En lugar de los campos tradicionales, ahora verás una sección llamada Custom Attributes. Haz clic en el botón para agregar un nuevo atributo.

Paso 4: Define el tipo y valor del atributo

Aquí puedes elegir qué tipo de atributo deseas crear. Por ejemplo:

• Si quieres añadir una clase, puedes escribir class como tipo de atributo y luego asignarle el valor imagen-principal.
• Si deseas crear un atributo de datos, puedes escribir data-id y darle el valor promo01.
• También puedes definir un id, un role, o cualquier otro atributo HTML válido.

El sistema acepta prácticamente cualquier nombre de atributo y valor, lo que lo hace muy flexible para proyectos avanzados.

Paso 5: Usa el atributo en tu código o CSS

Una vez guardes los cambios, ese atributo quedará aplicado directamente en el HTML del elemento. A partir de ahí, puedes llamarlo desde tu hoja de estilos CSS o desde un script JavaScript.

Por ejemplo, si creaste un atributo de clase llamado imagen-principal, podrías usarlo en tu CSS así:

.imagen-principal {
  border-radius: 12px;
  transition: all 0.3s ease;
}

O si creaste un atributo data-popup="abrir", podrías usarlo con JavaScript para lanzar una animación o un modal:

document.querySelector('[data-popup="abrir"]').addEventListener('click', () => {
  abrirPopup();
});

⭐️ Consejo rápido: aprovecha los atributos data- para integraciones dinámicas. Son ideales para almacenar información personalizada o activar funciones sin alterar el HTML base del sitio.

Ventajas del nuevo sistema de atributos personalizados

1. Mayor flexibilidad: puedes crear cualquier tipo de atributo, no solo clases o IDs.
2. Más control sobre el código: te permite identificar y manipular elementos desde CSS, JavaScript o librerías externas.
3. Compatibilidad con frameworks: facilita la integración con herramientas como GSAP, AOS, jQuery o librerías de popups, sin depender de código extra o plugins.
4. Diseños más limpios: ya no necesitas forzar clases dentro de otros campos o recurrir a hacks.
5. Optimización del flujo de trabajo: al poder etiquetar directamente los elementos desde el constructor, reduces la necesidad de editar el HTML fuera del entorno de Divi.

Ejemplo práctico: creando una imagen con atributo personalizado

Supongamos que estás construyendo una galería de imágenes y quieres aplicar un efecto hover diferente a una imagen en particular.

1. Abres el módulo de imagen dentro del constructor de Divi.
2. En la pestaña “Advanced”, creas un atributo de tipo class con el valor imagen-hover-especial.
3. Guardas los cambios y agregas en tu CSS:

.imagen-hover-especial:hover {
  transform: scale(1.05);
  filter: brightness(1.1);
}

Con esto, solo esa imagen específica tendrá el efecto hover sin necesidad de crear una clase global o un módulo duplicado.

Ahora imagina que quieres que esa imagen lance un popup al hacer clic. Puedes crear un atributo data-trigger="popup1" y usarlo para disparar un script personalizado de interacción.

De esta forma, puedes tener diseños mucho más dinámicos y personalizados directamente dentro del entorno visual de Divi, sin tocar código HTML.

Cuándo te será más útil esta función

Aunque esta función puede pasar desapercibida para usuarios principiantes, los atributos personalizados son extremadamente útiles en escenarios donde necesitas precisión o integración técnica:

• Cuando trabajas con animaciones personalizadas o scripts JavaScript.
• Cuando usas plugins externos que requieren etiquetas o clases específicas.
• Cuando desarrollas sitios con interacciones avanzadas, como menús dinámicos, sliders personalizados o efectos en scroll.
• Cuando necesitas aplicar estilos exclusivos a un solo elemento sin afectar a otros módulos iguales.

⭐️ Consejo extra: si no estás familiarizado con HTML o CSS, puedes comenzar aplicando clases simples y observando cómo afectan tu diseño. Con la práctica, descubrirás que esta herramienta abre un mundo de posibilidades dentro de Divi.

Recomendaciones finales

1. Usa atributos con propósito: no crees atributos solo por crearlos. Cada uno debe tener una función clara.
2. Mantén una nomenclatura estándar: usa prefijos, por ejemplo, ux- o dv- para identificar tus clases personalizadas.
3. Documenta tus atributos personalizados: si trabajas con otros diseñadores o desarrolladores, guarda una lista de los atributos creados para evitar confusiones.
4. No abuses de los IDs: recuerda que los IDs deben ser únicos en la página; para estilos repetitivos, es mejor usar clases.

Cursos recomendados en UXDivi

Si quieres aprender cómo aprovechar esta nueva funcionalidad y otras novedades de Divi 5, te recomiendo los siguientes cursos disponibles en uxdivi.com/cursos:

• Curso de Divi 5 en fase de desarrollo: donde analizamos y ponemos en práctica cada nueva función de Divi 5, incluyendo los atributos personalizados.

Conclusión

El nuevo sistema de atributos personalizados en Divi 5 representa un paso adelante hacia un entorno más profesional y flexible. Ya no estamos limitados a agregar solo clases o IDs; ahora podemos construir estructuras semánticas y técnicas mucho más precisas.

Para los que trabajamos con proyectos avanzados, esta actualización significa menos limitaciones, menos plugins y más control directo desde el constructor. Y lo mejor es que todo esto se hace sin salir del entorno visual de Divi, manteniendo la filosofía de trabajo rápido, ordenado y eficiente.

Si aún no has probado esta nueva funcionalidad, te invito a hacerlo. Una vez que empieces a usar los atributos personalizados, verás que tus posibilidades de diseño y desarrollo con Divi se multiplican.