Ti è mai capitato di avere una pagina “quasi perfetta”… ma poi ti accorgi che mancano quei dettagli che fanno la differenza?

Tipo:

• un pulsante con solo icona che visivamente è chiaro, ma per uno screen reader (il lettore di schermo usato da chi non vede) è praticamente muto;
• un link esterno che vorresti “marcare” nel modo giusto con rel;
• un tracciamento marketing che richiede un data-* per far scattare un evento preciso… senza dover infilare codice ovunque.

Ecco perché gli attributi personalizzati in Divi 5 sono così comodi: ti danno più controllo sugli elementi della pagina senza dover scrivere codice, restando dentro l’interfaccia del builder.

Parliamo di cose molto pratiche:

• Accessibilità (es. aria-label);
• SEO e micro-dettagli (es. title);
• Gestione link (es. rel);
• Tracciamenti e integrazioni (es. attributi data-*).

È una funzione che torna utile a chi lavora davvero coi siti: freelance che curano siti vetrina, piccole aziende che vogliono un sito ordinato e “a norma”, agenzie che devono standardizzare le impostazioni su tanti progetti, e anche e-commerce dove tracking e link puliti non sono un optional.

La differenza rispetto al passato? Prima ti arrangiavi con le sole opzioni Classe CSS e ID. Ora puoi aggiungere qualsiasi attributo HTML a un elemento (e spesso anche a sotto-elementi specifici del modulo) direttamente dall’interfaccia.

Aggiungere qualsiasi attributo a qualsiasi elemento (davvero)

In Divi 5 trovi un nuovo gruppo di opzioni chiamato Attributi dentro la scheda Avanzate di tutti gli elementi. È il punto “centrale” dove gestisci questi valori.

Il flusso è lineare:

1. aggiungi un attributo;
2. scegli dove applicarlo (il target);
3. inserisci nome e valore.

Target qui significa: qual è il pezzo esatto del modulo che deve ricevere l’attributo. In pratica, alcuni moduli hanno più “parti” (contenitore esterno, link interno, immagine, titolo, ecc.). Il target ti fa decidere su quale parte scrivere l’attributo.

Tutti gli elementi supportano gli attributi sul contenitore principale (il wrapper, cioè l’elemento esterno che “contiene” tutto). Inoltre, la maggior parte dei moduli che hanno contenuti nella scheda Contenuto supporta anche attributi su elementi interni: quindi non sei bloccato solo sul contenitore esterno.

Accessibilità: quando gli attributi ti salvano davvero la pagina

Qui gli attributi personalizzati sono oro.

Divi può inserire alcuni attributi base, ma non può sapere che significato avrà ogni elemento nel tuo contesto. Un’icona può essere decorativa… oppure può essere un pulsante fondamentale per chiudere un pop-up. E per chi usa tecnologie assistive questa differenza è enorme.

Due attributi che incontrerai spesso:

• aria-label: è un’etichetta “testuale” letta dai lettori di schermo. Serve quando l’elemento non ha testo visibile (tipo un’icona).
• role: serve a dire che “ruolo” ha quell’elemento. Ad esempio role="button" fa capire alle tecnologie assistive che quell’elemento va trattato come un pulsante.

Esempio super concreto: costruisci un pop-up usando le interazioni di Divi (cioè un sistema di azioni e condizioni per aprire/chiudere elementi senza scrivere codice) e usi un’icona come tasto “X” per chiudere.

Visivamente è perfetto. Ma per l’accessibilità quell’icona potrebbe non essere riconosciuta come un pulsante. Con gli attributi personalizzati puoi sistemare la cosa in 30 secondi.

Esempio step-by-step (freelance / sito vetrina): pulsante solo-icona accessibile

1. Apri la pagina con Divi 5 e seleziona il modulo che contiene l’icona (o il pulsante con sola icona).
2. Vai su Avanzate → Attributi.
3. Aggiungi un attributo con nome aria-label e valore, ad esempio: Chiudi finestra.
4. Se disponibile sul tuo target, aggiungi anche role con valore button.

Risultato: graficamente non cambia nulla, ma l’elemento diventa molto più comprensibile per chi naviga con tecnologie assistive.

Le vecchie impostazioni “Classe CSS e ID” vengono superate (e ordinate meglio)

Il nuovo gruppo Attributi diventa il punto unico per gestire tutto. Le vecchie impostazioni legate agli attributi vengono dismesse e, nella maggior parte dei casi, migrate automaticamente nel nuovo sistema.

Esempio: se prima inserivi una classe o un ID nella sezione legacy Classe CSS e ID, adesso dovresti ritrovare quegli stessi valori come voci nell’elenco dentro Attributi.

Questo, lato lavoro quotidiano, significa soprattutto una cosa: meno caccia al tesoro tra pannelli diversi.

Esempio step-by-step (agenzia / PMI): aggiungere rel ai link esterni

rel è un attributo che “spiega” ai motori di ricerca (e ad altri sistemi) che tipo di relazione c’è con il link. Due valori tipici:

• nofollow: in pratica stai dicendo “non passare valore SEO a questo link” (semplificando molto).
• sponsored: utile quando il link è pubblicitario/sponsorizzato.

1. Seleziona il modulo che contiene il link (es. Pulsante o Testo).
2. Vai su Avanzate → Attributi.
3. Scegli come target l’elemento del link (quando disponibile).
4. Aggiungi l’attributo rel con valore nofollow oppure sponsored (in base al caso).

Perché è utile? Perché quando hai molte pagine e magari più persone che mettono mano ai contenuti, avere un punto unico dove standardizzare questi dettagli ti evita errori e incoerenze.

Divi 5 oggi: cosa cambia davvero nella scelta di usarlo

Gli attributi personalizzati in Divi 5 sono già disponibili e fanno parte della direzione che sta prendendo questa versione: più controllo, più precisione, meno workaround (quelle soluzioni “creative” che funzionano ma poi ti presentano il conto).

Il punto pratico è questo:

• se stai partendo con un nuovo sito, ha senso valutare Divi 5 proprio per sfruttare queste opzioni;
• se hai un sito già avviato, conviene valutare con calma in base a compatibilità con tema, plugin e personalizzazioni già presenti.

Esempio step-by-step (piccolo e-commerce): attributi data-* per tracciamenti

Gli attributi data-* sono attributi “personalizzati” pensati apposta per passare informazioni a script e strumenti esterni senza sporcare il contenuto. In pratica: ci metti un’etichetta tecnica, e poi un tool (analytics, tag manager, ecc.) può leggerla.

1. Seleziona un pulsante “Aggiungi al carrello” o “Contattaci” creato con Divi.
2. Vai su Avanzate → Attributi.
3. Aggiungi un attributo tipo data-event con valore click_contatto (o quello che ti serve per il tuo tracciamento).
4. Se usi strumenti di analisi o un tag manager (cioè un sistema che gestisce i codici di tracciamento senza modificare ogni volta il sito), puoi poi leggere questo attributo per attivare eventi in modo più preciso.

Così rendi più pulite le integrazioni senza cambiare i contenuti e senza appesantire la pagina con soluzioni “tirate su”.

Altra novità collegata: il nuovo Editor Responsive

Tra le novità recenti di Divi 5 c’è anche il nuovo Editor Responsive, pensato per gestire più velocemente le varianti dei contenuti in base al dispositivo.

Qui due termini che spesso vengono dati per scontati:

• Responsive: significa che puoi impostare valori diversi per desktop / tablet / smartphone.
• Hover: lo stato “al passaggio del mouse”. Utile per effetti e micro-interazioni su desktop.
• Sticky: quando un elemento resta “attaccato” durante lo scroll (tipo una barra menu che rimane in alto).

Questo editor ti permette di visualizzare, modificare e reimpostare rapidamente questi stati per qualsiasi impostazione, mentre ti trovi in qualunque modalità di visualizzazione.

Tradotto: continui a lavorare per singola vista in modo naturale, ma quando serve puoi fare modifiche rapide su più stati senza impazzire tra pannelli e opzioni.

Altri aggiornamenti di Divi 5: stessa direzione, più controllo

Negli ultimi mesi Divi 5 sta ricevendo aggiornamenti continui: l’obiettivo è rendere l’esperienza più veloce e più precisa, soprattutto quando vuoi controllare dettagli che prima richiedevano scorciatoie.

Gli attributi personalizzati in Divi 5 vanno esattamente in questa direzione: ti danno un livello di controllo in più su accessibilità, link e integrazioni, restando dentro l’editor visuale.

Conclusione (pratica)

Con gli attributi personalizzati puoi aggiungere in modo semplice informazioni “extra” agli elementi di Divi 5: etichette per l’accessibilità, attributi per la gestione dei link e parametri utili a tracciamenti o automazioni.

Se vuoi un approccio concreto, io farei così:

• parti dalle pagine più importanti: home, contatti, pagine prodotto;
• controlla soprattutto pulsanti, icone e immagini;
• aggiungi gli attributi dove servono davvero (non “a tappeto”).

Se non sei sicuro di quali attributi usare, o vuoi una strategia ordinata che tenga insieme accessibilità, SEO e tracciamento eventi, ha senso farsi affiancare da uno sviluppatore Divi di fiducia per impostare tutto in modo pulito e coerente.

Questo articolo è stato tradotto e riscritto partendo da questo articolo su Elegant Themes.