Utilizzando i preset predefiniti di Divi 5 per modellare l'intero sito

L'arrivo di Option Group Preset ha aperto così tante nuove possibilità all'interno di Divi 5. Nick ha detto che questa è stata la caratteristica più importante per colpire Divi da anni e, mentre li testri, vedrai esattamente perché l'ha detto .

Sei già abituato ai preset di elementi, ma i preset di gruppi di opzioni aggiungono un livello completamente nuovo di controllo del design che non smetterai mai di utilizzare. Tuttavia, entrambi i tipi di preset supportano " preset predefiniti ". Questo è quello che voglio mostrarti nel corso delle seguenti 2000 parole.

Cosa sono i preset predefiniti in Divi 5?

I preset predefiniti sono i primi preset che vorresti modificare sui tuoi siti Web. In molti modi, questi sono una sostituzione totale per il personalizzatore del tema.

Hai due tipi di preset predefiniti con cui puoi lavorare immediatamente al momento della modifica di una pagina : preset di elementi predefiniti e preset del gruppo di opzioni predefinite . Copriamo prima i preimpostazioni degli elementi perché è più familiare, ma ti consigliamo di iniziare tutti i tuoi progetti con i preimpostazioni del gruppo di opzioni.

Preset di elementi predefiniti

I preset di elementi rendono un rapido lavoro di progettazione di un elemento che utilizzerai molte volte sul tuo sito Web. Con i preset di elementi, è possibile prendere un modulo come il modulo Blurb e modificare il preimpostazione predefinita del modulo. Una volta modificato il preimpostazione predefinita, utilizza quegli stessi stili quando si aggiunge un nuovo modulo Blurb al tuo sito (perché i nuovi elementi utilizzano le impostazioni predefinite).

Come modificare un preimpostazione dell'elemento predefinito

La modifica di un preimpostazione predefinita è semplice. Fai clic sull'elemento per cui si desidera modificare le impostazioni predefinite (in questo caso un modulo di testo). In alto a destra, fare clic sul selettore preimpostata.

Dovresti vedere almeno un preimpostazione nel menu a discesa: il preimpostazione predefinita per quell'elemento. Trova le impostazioni (icona del marcia) e fai clic su di esso per modificare le opzioni Impostazioni dall'elemento pagina specifico alle opzioni Impostazioni per il preimpostazione predefinita.

Saprai che stai modificando un preimpostazione quando il pangrattato (mostrando la posizione nidificata dell'elemento su cui stavi lavorando) scompaiono e la parola " preimpostazione " appare nella parte superiore sinistra del pannello delle impostazioni. Noterai anche che il selettore preimpostato dice " predefinito predefinito " e diventa blu. Da qui, vai al gruppo di opzioni elementi che desideri modificare. In questo caso, ho deciso di andare alla scheda Design> Testo> Dimensione del testo per modificare la dimensione del contenuto di testo per questo modulo.

Fai clic su "Salva preimpostazione" per far sì che le modifiche prendano Hold Sitewide.

Nel caso in cui non lo sapessi
Se sei stato in giro a Divi per un po ', conosci i preset del modulo . I preset di elementi sono uguali ai preimpostazioni del modulo, ma chiamarli preimpostazioni del modulo era confuso perché i preset possono essere utilizzati anche su elementi non moduli come sezioni e righe.

Vista wireframe di una pagina in Divi 5. Nota come questa riga ha preset senza adattarsi ai criteri per essere un modulo ma piuttosto un contenitore.

I preimpostazioni degli elementi predefiniti possono essere "sovrascritti" semplicemente applicando un diverso elemento personalizzato predefinito al modulo (più su questo di seguito) o applicando gli stili direttamente a un modulo o elemento specifico. Divi, come CSS, lavora con regole di specificità e, in questo caso, le impostazioni applicate direttamente a un modulo sono più specifiche delle impostazioni applicate a un preimpostazione dell'elemento predefinito.

Ma c'è un nuovo preset sul blocco con cui dovresti progettare i tuoi siti Web Divi per primi.

Preset del gruppo di opzioni predefinite

I nuovi preset del gruppo di opzioni di Divi consentono di creare stili predefiniti che abbracciano vari moduli ed elementi che possono utilizzare gruppi di opzioni simili. Tutto questo è fatto con i preset del gruppo di opzioni "predefiniti" . Se sei confuso sui dettagli di questo nuovo concetto di gruppi di opzioni, puoi saperne di più nel nostro post, il che ti dice tutto ciò che devi sapere su di loro.

Scopri i preset del gruppo di opzioni

In breve, diversi moduli hanno composizioni diverse (vedere la tabella seguente per un esempio che confronta quattro diversi elementi).

Quando le caratteristiche composite di un elemento si sovrappongono a quella di un altro, possono condividere stili a livello di gruppo di opzioni, il che significa che si risparmia tempo durante la progettazione di motivi simili su diversi moduli ed elementi (come il testo del titolo su molti moduli). Soprattutto con titoli, testo del corpo, ombre, animazioni, funzionalità appiccicose, bordi, spaziatura e pulsanti, progetterai siti Web molto, molto più velocemente.

Come modificare un gruppo di opzioni predefinito

Per modificare un preimpostazione del gruppo di opzioni predefinite, visitare un modulo o un pannello di impostazioni di riga/sezione. Passa il mouse sui gruppi di opzioni disponibili (testo, testo del titolo, pulsante, sfondo, ecc.). I gruppi di opzioni che supportano i preset riveleranno un'icona preimpostata sul lato destro di quel campo OG quando si sono spostati. Fai clic sull'icona dei preset per mostrare il predefinito e qualsiasi preset personalizzato per quel gruppo di opzioni.

Ecco un video che dimostra la differenza tra modificare un aspetto particolare di un singolo modulo e modificare lo stesso aspetto con un gruppo di opzioni preimpostata.

Sai che stai modificando un gruppo di opzioni preimpostato quando l'interfaccia utente cambia da luce al buio (a meno che tu non fossi in modalità buio, nel qual caso è l'opposto) solo per il gruppo di opzioni che stai attualmente modificando. È necessario salvare le modifiche affinché possano avere effetto.

Qual è la differenza tra predefiniti predefiniti e personalizzati?

I preset predefiniti sono gli stili applicati automaticamente a eventuali nuovi elementi (moduli/sezioni/righe) posizionati su una pagina o modello. Non importa quale, ogni elemento e ogni gruppo di opzioni all'interno di Divi avrà un preimpostazione predefinita. Vedi sotto da dove provengono gli stili predefiniti.

I preset personalizzati sono ulteriori preset che sono facili da gestire e applicare come preset predefiniti ma che non verranno utilizzati automaticamente (è necessario applicare questi preset personalizzati al posto del valore predefinito). Sono utilizzati in situazioni speciali, come sezioni scure, barre laterali e display di contenuti densi, qualunque cosa il tuo design abbia bisogno.

Ogni sito Web dovrebbe essere progettato utilizzando il predefinito del gruppo di opzioni predefinito per quanto possibile. Quindi, dovrebbero essere creati ulteriori preimpostazioni di gruppi di opzioni personalizzate per gestire situazioni simili per le specifiche di progettazione. Qualunque cosa non sia coperta da tali preset OG può essere progettato con preset di elementi predefiniti e preset di elementi personalizzati. È possibile applicare direttamente gli stili ai singoli moduli per i casi di bordo rimanenti che devono ancora essere progettati.

Divi è in una fase entusiasmante con tutte le nuove funzionalità che stanno lanciando. Quando le unità avanzate e le variabili di progettazione scendono, è possibile impostare le variabili CSS con tutte le unità e le funzioni CSS. Da lì, puoi utilizzare quelle variabili CSS su tutti i tuoi preset, rendendo il flusso di lavoro di progettazione circa 10 volte più coerente e più veloce.

C'è anche una funzione pianificata per consentire i preimpostazioni del gruppo di opzioni di nidificazione all'interno dei preset di elementi, consentendo di creare preset di elementi con la logica dei preset del gruppo di opzioni integrati in essi. Ciò significa che quando si modifica un preimpostazione OG, modificherebbe anche i preset di elementi correlati (e viceversa in una certa misura).

Il futuro è luminoso per designer e sviluppatori su Divi 5!

Come trasformare un preset personalizzato in un preimpostazione predefinita

Abbiamo preset predefiniti e abbiamo anche preset personalizzati. Abbiamo visto come applicare un preset personalizzato invece di uno predefinito, ma cosa succede se ci piace così tanto che vogliamo renderlo il nostro predefinito?

Bene, è facile. Vai alle preset di elementi o al menu a discesa del gruppo di opzioni . Passa il mouse sopra il preset personalizzato che desideri creare il tuo predefinito e fare clic sull'icona stella . Quindi salva le modifiche . Il tuo preimpostazione è ora il preimpostazione predefinita in tutto il tuo sito Web.

Da dove vengono gli stili all'interno dei preset predefiniti?

I preset predefiniti non modificati ereditano semplicemente i valori di stile trovati nel personalizzatore del tema. Quasi tutti i temi WordPress usano ancora alcuni aspetti del personalizzatore del tema (anche temi di blocco), sebbene Divi lo abbia fatto in modo che sia connesso ma non è necessario utilizzare . Probabilmente sostituiremo il personalizzatore ad un certo punto in futuro, ma per ora è una reliquia riportata dal nucleo di WordPress che è una stranezza di temi di WordPress anche moderni .

Supponiamo che io abbia usato il sito di avviamento del consulente finanziario (come esempio concreto). Nel personalizzatore del tema, la dimensione del testo dell'intestazione è impostata su 30px .

Riesco a vedere lo stesso valore (30px) utilizzato nei preset predefiniti andando nell'editor visivo per una pagina, facendo clic sul " predefinito predefinito " per un modulo di intestazione o di testo e controllando sotto il testo di design> per l'elevazione H1.

Un valore grigio in un campo Divi 5 significa che è un valore ereditato, in questo caso, ereditato dal personalizzatore del tema

Ma questo è semplicemente il set predefinito da questo sito di avviamento. Se hai utilizzato i preset da un pacchetto di layout importato o hai iniziato da zero, i diversi valori predefiniti verrebbero impostati nel personalizzatore del tema.

Come utilizzare i preset predefiniti per creare un sito Web

Ti consiglio di avviare le tue build con un paio di pagine di wireframe. Dispondi tutto su alcune pagine con quello che sai che dovrai avere progettato.

Prova a fare affidamento sui moduli più semplici per svolgere il lavoro e ripetere l'uso dello stesso set di moduli quando possibile. Considera come è possibile utilizzare i moduli di intestazione, testo, blurb, menu, immagine, fisarmonica/levetta e moduli video per costruire la maggior parte dei wireframe della tua pagina. Aggiungi altri moduli secondo necessità, ma attenersi a un set di moduli core per la maggior parte delle cose renderà molto più veloce l'utilizzo sia dei preset predefiniti del gruppo di opzioni che dell'elemento.

Questa pagina utilizza sezioni, righe, colonne, testo, blurb, immagine, pulsante e moduli di menu. Mantenendo le cose più semplici possibile per questa particolare pagina, riduco il numero di gruppi di opzioni con cui devo progettare.

Successivamente, ti consigliamo di iniziare a progettare le tue modifiche più ampie con i preset del gruppo di opzioni predefiniti. Per la maggior parte dei design, questo sarà:

1. Spaziatura della sezione : includere margini superiore/inferiore, margini sinistra/destra e qualsiasi imbottitura richiesta.
2. Sezione Colori di sfondo : creare un gruppo di opzioni predefinito che si desidera utilizzare nella maggior parte dei casi e un gruppo di opzioni personalizzato preimpostata per un colore di sfondo alternativo/contrasto. Ricorda che i preset predefiniti sul gruppo di opzioni di sfondo possono essere applicati anche sullo sfondo delle colonne.
3. Tipografia : inizia con i tuoi H1-H6S. A seconda dell'utilizzo del modulo, ti consigliamo di avviarli nei preimpostazioni del gruppo di opzioni predefinite sotto il testo di intestazione per i moduli di intestazione e di testo e il testo del titolo per cose come i moduli Blurb. Quindi, lavora sul testo normale, concentrandosi sul gruppo di opzioni di testo nei moduli di testo e nei gruppi di opzioni di testo del corpo che si trovano in cose come il modulo Blurb.
4. Altre impostazioni di design : creare preimpostazioni del gruppo di opzioni per bordi, ombre box, filtri (se si sta accontentando le immagini) e animazioni. Per questi, tendo a non utilizzare preset predefiniti ma creo preset personalizzati che posso applicare selettivamente agli elementi di pagina.
5. Impostazioni avanzate : questo è simile al passaggio sopra, ma creo preset di gruppi di opzioni per cose come transizioni ed effetti di scorrimento. Tendo inoltre a non utilizzare preset predefiniti ma creo preset personalizzati che posso applicare selettivamente agli elementi di pagina.

La creazione di preimpostazioni di gruppo di opzioni predefinite in questo modo inizierà automaticamente ad applicare i tuoi stili sul tuo sito. Ogni volta che viene aggiornato un OG predefinito, gli elementi pertinenti sui tuoi siti Web accettano automaticamente tali modifiche.

I preset predefiniti ti salveranno le ore

I preset predefiniti, sia l'elemento che la varietà del gruppo di opzioni, ti risparmieranno enormi quantità di tempo. Non vedo l'ora che tu inizi a costruire i siti con queste funzionalità usando il costruttore di Blazing Fast di Divi 5. E questa non è nemmeno la fine delle nuove funzionalità che si estendono in Divi 5.

Con le nuove e pianificate funzionalità di Divi, avrai un vero sistema di design a portata di mano. Hai provato a modificare un sito utilizzando prima i preset predefiniti? Come è andato? Facci sapere nel commento qui sotto e condividi come usi queste funzionalità.

Scarica Divi 5 Impare tutto su Divi 5 Prova la demo Divi 5