Nel capitolo precedente abbiamo costruito le variabili di design in Divi 5: colori, caratteri, misure, immagini, testi e link salvati una volta sola e riutilizzati in tutto il sito. Ora arriva il passaggio successivo. Dobbiamo prendere quei valori e trasformarli in elementi che non richiedano ogni volta venti minuti di impostazioni.

È qui che entrano in gioco i preset Divi 5. Possiamo usarli per raccogliere singoli gruppi di opzioni, salvare lo stile completo di un modulo e persino combinare più preset sullo stesso elemento. In pratica, invece di ricostruire sempre la stessa scheda, lo stesso pulsante o la stessa spaziatura, prepariamo un sistema e poi lo riutilizziamo.

L'obiettivo non è creare preset per qualsiasi cosa si muova nel builder. Sarebbe solo un nuovo modo, molto elegante, di fare confusione. L'obiettivo è salvare le decisioni che si ripetono davvero e organizzarle in modo che tra sei mesi si capisca ancora a cosa servono.

Perché i preset vengono dopo le variabili

Le variabili e i preset fanno lavori diversi. Le prime conservano i valori di base, come un colore, una misura o un font. I preset prendono quei valori e li applicano a un gruppo di impostazioni oppure a un elemento completo.

La gerarchia più utile da tenere a mente è questa:

1. Variabili di design: contengono i valori fondamentali.
2. Preset dei gruppi di opzioni: salvano una parte dello stile, per esempio tipografia, bordo o spaziatura.
3. Preset degli elementi: raccolgono lo stile completo di uno specifico modulo.
4. Preset impilati: combinano più preset sullo stesso elemento.

Questo ordine rende il sistema più facile da aggiornare. Se cambi il colore principale dentro la variabile, quel valore si aggiorna nei preset che lo utilizzano. Se modifichi un preset di spaziatura, la correzione arriva negli elementi che lo richiamano. Non devi inseguire il valore pagina per pagina, sperando di ricordarti dove lo avevi infilato.

Aprire il Gestore dei preset

Apri una pagina con il Visual Builder. Nella barra laterale del builder trovi l'icona del Gestore dei preset. Se hai bisogno di orientarti tra barre, pannelli e modalità di visualizzazione, prima puoi ripassare la guida all'interfaccia di Divi 5.

Da qui puoi creare, modificare, duplicare, eliminare, riordinare e impostare come predefiniti i preset. L'interfaccia è divisa in due aree principali: Elementi e Gruppi di opzioni.

Quando la libreria cresce, ricerca e filtri evitano di aprire un elenco dopo l'altro. Sembra un dettaglio, ma diventa importante appena inizi ad avere preset per titoli, testi, pulsanti, bordi, spaziature e componenti diversi.

Espandendo un tipo di elemento puoi vedere i preset già associati. Se un modulo usa un preset, il suo nome compare anche vicino al titolo del modulo nel pannello delle impostazioni.

Per modificare un preset usa l'icona della matita. Si apre l'anteprima, dalla quale puoi controllare il risultato prima di salvare. Qui bisogna fare attenzione: la modifica è globale. Tutti gli elementi che usano quel preset riceveranno il cambiamento.

Creare i preset dei gruppi di opzioni

I preset dei gruppi di opzioni, chiamati anche Option Group Presets, salvano lo stile di una sola famiglia di impostazioni. Puoi quindi creare un preset per il testo, uno per la spaziatura, uno per i bordi e uno per i pulsanti, poi combinarli in base al contesto.

Questa modularità è il loro vantaggio principale. Se salvassi subito una scheda completa con sfondo, bordo, tipografia e padding, avresti un blocco rigido. Separando le decisioni puoi riutilizzare lo stesso bordo con spaziature diverse, oppure la stessa tipografia su componenti con sfondi differenti.

Il procedimento di base è sempre uguale:

1. imposta lo stile su un elemento di prova;
2. apri il gruppo di opzioni che vuoi salvare;
3. clicca l'icona dei preset accanto al nome del gruppo;
4. crea un nuovo preset dagli stili correnti;
5. assegna un nome che descriva funzione o ruolo, non l'umore del momento.

Preset tipografici

La tipografia compare praticamente ovunque, quindi è un buon punto da cui partire. Nel progetto di esempio possiamo creare preset per i diversi livelli di titolo, per il testo normale, per un testo piccolo e per una variante chiara o scura.

Apri o crea un modulo Sommario. Nella scheda Design espandi Testo del titolo, imposta il livello corretto e collega altezza della riga e dimensione alle variabili preparate nel capitolo precedente. Per un titolo H5, per esempio, userai la variabile numerica dedicata all'H5 e la variabile dell'interlinea dei titoli.

Passa sul campo della dimensione e usa l'icona per inserire un contenuto dinamico. Da lì puoi richiamare le variabili globali invece di scrivere un valore fisso.

Nel pannello dei numeri globali seleziona la variabile H5. Il campo resta collegato al valore centrale, quindi una modifica futura della variabile si rifletterà anche qui.

Quando lo stile è pronto, torna all'intestazione del gruppo Testo del titolo. Passando sul titolo compare l'icona dei preset.

Scegli l'opzione per creare un nuovo preset dagli stili correnti.

Chiamalo, per esempio, Titolo 5. Prima di salvare controlla le proprietà incluse: un preset dovrebbe contenere soltanto le decisioni che vuoi davvero condividere. Se dentro resta un margine aggiunto durante una prova, quel margine inizierà a comparire anche dove non te lo aspetti.

Il nuovo preset appare nel Gestore dei preset sotto il gruppo corrispondente.

Puoi ripetere il procedimento sul testo del corpo. Un preset Testo piccolo può richiamare la variabile dedicata alla dimensione ridotta e alla relativa interlinea.

Una variante Testo scuro può invece raccogliere colore, dimensione e altezza della riga. La cosa importante è che i valori arrivino dalle variabili, non da numeri e colori incollati nel preset.

Preset per la spaziatura

Le spaziature incoerenti si moltiplicano in fretta: 24 pixel in una scheda, 30 in quella accanto, 32 in un'altra perché a occhio sembrava meglio. Poi cambi layout e nessuno sa più quale fosse la regola.

Crea pochi preset basati sulla scala definita nelle variabili. Puoi partire da Padding medio e Padding grande. Nel gruppo Spaziatura collega i quattro lati alla stessa variabile oppure usa valori diversi solo quando il componente lo richiede davvero.

Salva quindi il gruppo come preset. Da quel momento puoi applicare la stessa regola a sezioni, righe, colonne, gruppi e moduli che espongono le opzioni di spaziatura.

Preset per i bordi

Lo stesso principio vale per i bordi. Imposta raggio, spessore e colore usando le variabili del progetto. Nel caso mostrato, il bordo ha un raggio di 8 pixel, uno spessore di 1 pixel e un nero con opacità ridotta.

Puoi salvarlo come Contorno scuro. Il nome descrive l'effetto, mentre i valori restano gestiti dalle variabili. Se il bordo del sistema cambia, non sei costretto a rinominare tutto o a modificare ogni scheda.

Preset per i pulsanti

I pulsanti non esistono soltanto nel modulo Pulsante. Li trovi anche nei moduli per moduli di contatto, iscrizioni, prezzi e call to action. Per questo conviene salvare prima lo stile del gruppo Pulsante e poi richiamarlo negli elementi completi.

Imposta almeno questi valori con le rispettive variabili:

• colore di sfondo;
• colore e dimensione del testo;
• raggio e spessore del bordo;
• padding verticale e orizzontale.

Salva una variante con un nome come Pieno colore principale. In seguito potrai creare le versioni su fondo scuro, su fondo chiaro o soltanto testuali senza duplicare decisioni a caso.

Se lavori spesso sui form, puoi estendere lo stesso sistema a campi, stato focus e pulsanti. Nel sito trovi anche un approfondimento sui preset dei campi dei form in Divi 5.

Una libreria iniziale sensata

Non serve partire con cinquanta preset. Per un sistema nuovo, questa base copre già buona parte del lavoro:

Aggiungi un preset quando risolve una ripetizione reale. Se lo stai creando soltanto perché l'opzione esiste, lascialo stare. Un sistema utile deve ridurre le scelte, non aggiungere un archivio da mantenere.

Creare i preset degli elementi

I preset degli elementi salvano lo stile completo di un tipo preciso di modulo: Pulsante, Sommario, Immagine, Sezione, Riga, Colonna, Gruppo e così via. Sono più ampi dei preset di gruppo e possono includere al loro interno i preset modulari creati prima.

Qui sta la differenza fondamentale:

• un preset di gruppo salva una categoria di impostazioni riutilizzabile in contesti diversi;
• un preset di elemento salva la configurazione completa di un elemento specifico.

La soluzione più solida è annidare i preset di gruppo dentro quelli degli elementi. In questo modo applichi un componente completo con un clic, ma continui a controllare tipografia, bordi e spaziature da livelli separati.

Preset di un pulsante principale

Aggiungi un modulo Pulsante e applica al suo gruppo di opzioni il preset Pieno colore principale.

Nel gruppo Spaziatura collega padding verticale e orizzontale alle variabili dedicate. Anche se il preset del gruppo Pulsante contiene già parte dello stile, controlla che il modulo completo non conservi valori locali inattesi.

Quando il pulsante è pronto, usa l'icona dei preset nell'intestazione del modulo e crea un preset di elemento dagli stili correnti. Puoi mantenere lo stesso nome del preset di gruppo se il contesto lo rende chiaro, oppure specificare che si tratta del pulsante principale.

Da questo momento le modifiche al preset di gruppo annidato possono propagarsi ai pulsanti che usano il preset di elemento. Il modulo resta completo, ma non diventa un monolite impossibile da aggiornare.

Preset di un modulo di iscrizione

Apri il modulo Iscrizione email. Crea o applica i preset di gruppo per titolo, descrizione e pulsante. Nel gruppo Campi collega il raggio del bordo alla relativa variabile.

Applica, per esempio, Titolo 2 al titolo, Testo scuro alla descrizione e Pieno colore principale al pulsante. Qui si vede bene il vantaggio dell'annidamento: il modulo raccoglie più decisioni, ma ciascuna resta gestibile nel proprio preset.

Salva infine il modulo completo come preset di elemento. Un nome come Iscrizione scura funziona se descrive davvero la variante e non entra in conflitto con altri componenti.

Preset di un Gruppo

I Gruppi sono utili per componenti composti, come schede di servizio, testimonianze, box informativi o blocchi di prezzo. Inserisci i moduli necessari nel Gruppo e imposta lo sfondo usando una variabile colore.

Applica poi i preset di gruppo per spaziatura e bordo. Una combinazione semplice può usare Padding medio e Contorno scuro.

Salva il Gruppo come preset di elemento, per esempio Contenuto chiaro. Ora puoi riutilizzare quella base per schede diverse senza ricostruire ogni volta sfondo, bordo e padding.

I preset di elemento iniziali più utili dipendono dal progetto. In genere conviene partire da titoli, pulsanti, immagini, testi, colonne o gruppi contenitore e dai componenti che ricorrono davvero nelle pagine. Non devi trasformare ogni modulo in una collezione di varianti.

Combinare i preset impilati

I preset impilati permettono di applicare più preset allo stesso elemento. Sono utili quando ogni preset ha una responsabilità distinta. Un Sommario può ricevere una variante tipografica, una versione più densa e un trattamento specifico dello sfondo senza richiedere un unico preset gigantesco.

Apri un modulo Sommario e seleziona il preset Testo scuro dall'elenco associato al modulo.

Apri poi le opzioni del preset applicato e aggiungi una seconda variante, per esempio Denso. Divi combina i due livelli sullo stesso modulo.

Puoi impilare preset di spaziatura, bordo, tipografia e sfondo, ma serve una regola: ogni livello deve avere un compito riconoscibile. Se due preset modificano la stessa proprietà, l'ordine di applicazione può cambiare il risultato e rendere più difficile capire da dove arrivi un valore.

Quando una combinazione torna spesso, valuta se trasformarla in un preset di elemento. Se invece serve soltanto in un contesto particolare, mantenerla come pila di preset può essere più flessibile.

Organizzare i preset senza creare una giungla

Controlla l'anteprima prima di salvare

L'anteprima permette di provare il preset con contenuti e sfondi diversi. Usala soprattutto prima di modificare un preset già applicato in molte pagine. Un cambiamento globale fatto senza controllo è molto efficiente, sì, ma nel modo sbagliato.

Imposta i predefiniti con criterio

Puoi indicare un preset come predefinito usando l'icona a forma di stella. I nuovi moduli di quel tipo partiranno già con lo stile scelto.

È comodo per il pulsante principale, per il testo normale o per gli elementi che devono quasi sempre rispettare la stessa base. Evita invece di impostare come predefinita una variante molto specifica: correggerla ogni volta annullerebbe il vantaggio.

Usa nomi comprensibili

Il nome deve aiutarti a scegliere, non raccontare la storia di come hai creato il preset. Per le decisioni riutilizzabili funzionano nomi basati sul ruolo, come Titolo 2, Testo scuro o Padding medio. Per i componenti completi sono più utili nomi come Contenuto chiaro, Pulsante principale o Iscrizione scura.

Evita nomi come Nuovo, Prova 2, Definitivo o Definitivo davvero. Oggi li capisci. Tra tre mesi avrai cinque Definitivo e nessuna intenzione di aprirli uno per uno.

Esporta una copia del sistema

Quando la libreria è stabile, esportala. L'esportazione crea un backup e può aiutarti a trasferire una base di lavoro su un altro sito. Prima di importarla altrove, però, controlla le dipendenze: se i preset richiamano variabili che nel nuovo progetto non esistono, il sistema non potrà comportarsi come previsto.

La checklist prima di costruire le pagine

Prima di passare alla homepage o ai template del Theme Builder, controlla che il sistema sia davvero pronto:

• le variabili fondamentali esistono e hanno nomi coerenti;
• i preset non contengono valori locali entrati per errore;
• tipografia, spaziature, bordi e pulsanti hanno una base riutilizzabile;
• i preset di elemento annidano quelli di gruppo quando ha senso;
• i preset impilati non si sovrascrivono in modo ambiguo;
• i predefiniti rappresentano davvero la scelta più comune;
• la libreria usa nomi che capirà anche chi lavorerà sul sito dopo di te;
• esiste una copia esportata del sistema stabile.

A questo punto non hai soltanto una raccolta di stili. Hai una struttura che riduce le decisioni ripetute e rende più prevedibili gli aggiornamenti. Quando inizierai a costruire le pagine, potrai concentrarti sul contenuto e sul layout invece di decidere per la trentesima volta quanto spazio mettere dentro una scheda.

Se devi applicare questo sistema a un progetto già avviato e le impostazioni sono sparse ovunque, la parte più delicata non è creare i preset: è capire cosa conservare, cosa unificare e cosa eliminare senza rompere il sito. Se vuoi farlo insieme, puoi descrivermi il progetto e vediamo da dove ha senso iniziare.

Questo articolo è stato scritto sulla base di questo articolo su Elegant Themes. Anche gli screenshot e i video dimostrativi presenti nel tutorial provengono dalla stessa fonte.