Molti pensano che lavorare sul responsive dentro un builder sia sempre la solita storia: clicchi tra desktop, tablet e mobile, perdi il filo, ti dimentichi dove hai cambiato cosa… e alla fine lasci tutto “più o meno a posto”.
Onestamente, come obiezione ha senso.
Ma è proprio qui che entra in gioco l’editor responsive di Divi 5: uno strumento che serve a vedere, modificare e reimpostare in modo rapido le impostazioni per i vari dispositivi.

In pratica, Divi unisce due approcci:

Da una parte c’è la modifica contestuale, quindi le modifiche fatte in una certa visualizzazione si propagano automaticamente nel modo previsto.

Dall’altra c’è l’editor adattivo (o responsive), che ti permette di intervenire su tutti gli stati in qualsiasi momento, senza dover saltare continuamente da una schermata all’altra.

Editor Adattivo in Divi

In Divi non devi attivare la modalità adattiva opzione per opzione. Ti basta cambiare visualizzazione — da desktop a tablet o smartphone — e tutte le modifiche vengono applicate automaticamente al dispositivo selezionato.

Quindi sì, ci sono meno passaggi inutili e l’interfaccia risulta più pulita.

Questa semplificazione, però, si è portata via anche un aiuto visivo che tornava comodo. Prima, accanto a ogni opzione, compariva un simbolo che segnalava la presenza di valori personalizzati in altre visualizzazioni.

Per esempio, se impostavi una dimensione del testo diversa per lo smartphone, un’icona te lo ricordava anche mentre lavoravi sulla versione desktop.

Adesso quel riferimento visivo non c’è più.

Il Nuovo Editor Adattivo

Il nuovo editor adattivo risolve tutti e due questi punti. Non devi più portare il mouse fino in cima allo schermo per cambiare modalità di visualizzazione e poi fare le modifiche adattive.

Basta cliccare sull’icona del nuovo editor adattivo per regolare i valori su tutte le modalità di visualizzazione nello stesso momento.

È una funzione particolarmente comoda quando sai già quali valori vuoi usare. Cosa che succede spesso se stai lavorando con il sistema di variabili di design di Divi.

Identifica e modifica i valori rapidamente

Con l’editor adattivo puoi vedere a colpo d’occhio tutti i valori applicati a una certa impostazione, senza cambiare scheda ogni volta.

Quando un’impostazione ha valori modificati per dimensioni di schermo specifiche, come smartphone o tablet, l’icona dell’editor adattivo diventa blu.

Ecco perché è facile individuare al volo le impostazioni con valori alternativi. E poi modificarle o reimpostarle rapidamente, direttamente dall’editor adattivo.

Suggerimento Rapido: Filtro delle Impostazioni Modificate

Ecco un trucco utile per trovare subito i valori modificati nelle impostazioni adattive: attiva il filtro delle impostazioni modificate, poi cambia la modalità di visualizzazione tra desktop, tablet o mobile.

In questo modo vedi solo le opzioni che hai già cambiato, senza dover scorrere tutto il pannello.

Inizia a usare l'Editor Responsive di Divi

Prima di considerare il lavoro finito, conviene fare un controllo rapido su ogni dispositivo con una piccola checklist:

• I moduli si ridimensionano correttamente su computer, tablet e smartphone?
• I valori personalizzati per ogni schermo sono applicati senza conflitti?
• I testi restano leggibili e le spaziature rimangono proporzionate su tutti i dispositivi?
• Le immagini e i contenuti visivi mantengono le proporzioni corrette?
• Gli elementi nascosti per schermi specifici evitano di creare spazi vuoti indesiderati nell’impaginazione?

Quindi, se stai iniziando un nuovo progetto, questo è un buon momento per mettere alla prova l’editor adattivo di Divi 5 e capire se si adatta davvero al tuo modo di lavorare.

Se hai dubbi su come configurarlo o vuoi confrontarti su un caso pratico, scrivimi: ti do volentieri una mano a trovare la configurazione più adatta al tuo progetto.

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