Creazione di un sistema di spaziatura basato su gap con Divi 5

La spaziatura coerente è la base di un sito Web lucido e professionale. Invece di gestire i margini su singoli elementi uno per uno, puoi fare affidamento su un singolo sistema che mantiene i layout puliti ed equilibrati sul tuo sito.

Con le nuove variabili di design di Divi 5 e le funzionalità Flexbox, ora è possibile creare un sistema di spaziatura basato su GAP direttamente nel Visual Builder, non è richiesta la codifica personalizzata. Diamo un'occhiata!

Perché i metodi di spaziatura tradizionali non sono all'altezza

I margini e l'imbottitura sembrano abbastanza semplici. Aggiungi un po 'di spazio qui, regola l'imbottitura lì. Ma questo approccio può facilmente diventare disordinato. Ecco come si svolge in pratica:

Si imposta un margine 30px su un blocco di testo. Quindi hai bisogno di spazio attorno a un pulsante, quindi aggiungi 20px.

Un altro modulo ha bisogno di respiro, quindi scegli 40px. Ogni decisione si sente bene nel momento, ma stai costruendo una casa di carte.

Passa al cellulare e tutto potrebbe sembrare sbilanciato. Questi valori di pixel scelti con cura non si traducono. La tua spaziatura sembra perfetta sul desktop, ma fuori equilibrio su dimensioni dello schermo più piccole. Quindi crei valori specifici per dispositivi mobili, quindi valori di tablet.

Ora stai gestendo tre diversi sistemi di spaziatura. Questo approccio diviso rende duro il mantenimento di un ritmo visivo coerente sul tuo sito.

Come le proprietà di gap rendono semplice la spaziatura

Le proprietà gap funzionano in modo diverso dai margini tradizionali. Non si applica la spaziatura a ciascun elemento singolarmente. Invece, imposti regole di spaziatura sul contenitore principale. Il contenitore gestisce automaticamente la spaziatura tra tutti gli elementi figlio.

Con Flexbox abilitato, ottieni due controlli GAP: orizzontale e verticale. Imposta il divario orizzontale su 24px e tutti gli elementi figlio ottengono 24px di spazio tra loro orizzontalmente. Imposta il divario verticale su 15px e gli elementi impilati ottengono 15px di spazio verticale.

Funziona per qualsiasi contenuto all'interno del contenitore Flexbox. Moduli di testo, immagini, pulsanti, divisori e qualsiasi altra cosa tu metti lì, ottengono la stessa spaziatura coerente. Non dovrai scavare attraverso singoli moduli e regolare i loro margini separatamente; Le proprietà gap gestiscono la spaziatura matematica.

Il metodo tradizionale fa scelte di spaziatura casuali: 10px qui, 20px lì, 40px da qualche altra parte. Questi valori sparsi causano incoerenze e rendono difficile sapere quale spaziatura si applica. Le proprietà gap rimuovono le congetture usando una regola coerente per tutti gli elementi.

Questo approccio ha ancora limitazioni. Devi ancora ricordare ogni valore che hai usato e applicarlo manualmente ovunque ne abbia bisogno. Devi indovinare quali valori funzionano dove. Una volta impostato quei valori, cambiare idea significa trovare ciascuno e sostituirlo manualmente, lasciando spazio a errori e incoerenze.

Un sistema di spaziatura basato su GAP con Flexbox e variabili di design è un approccio molto migliore.

Come impostare il sistema Gap in Divi 5

Costruire un sistema di spaziatura basato su gap suona complesso, ma Divi 5 lo rende sorprendentemente semplice. Non hai bisogno di conoscenze di codifica o framework esterni. Visual Builder gestisce tutto attraverso variabili di design e controlli Flexbox. Ti guideremo attraverso ogni passaggio, dalla creazione delle tue variabili di spaziatura al salvataggio di preset riutilizzabili.

1. Crea variabili di spaziatura

Divi 5 può archiviare i valori di gap all'interno del Visual Builder usando le variabili di design. Si costruisce il tuo sistema di spaziatura una volta e applicano quei valori che compaiono i controlli Flexbox, non sono necessarie funzioni CSS personalizzate.

Il gestore variabile può essere trovato nella barra laterale sinistra del tuo costruttore visivo. Fai clic su quell'icona, quindi apri la scheda Numeri in cui è possibile aggiungere variabili di spaziatura.

Qui, creerai valori che possono essere utilizzati in tutto il sito anziché pixel con codice rigido. Sono disponibili diverse variabili di design; Non ci copriamo quelli in questo post, ma abbiamo una guida eccellente.

Inizia con la tua unità di spaziatura di base. La maggior parte dei designer lavora con 8-12px come fondazione, ma puoi scegliere 4px, 10px o qualsiasi altra cosa si adatta al ritmo del tuo design. Puoi usare unità avanzate qui, oltre a soli pixel. Ad esempio, stiamo iniziando con REM anziché pixel (supponendo il browser predefinito 1rem = 16px):

• Gap XS: 0.75Rem (~ 12px per relazioni strette per colonne con solo icona e testo)
• Gap S: 1.25Rem (~ 20px per colonne con blocchi di testo)
• Gap M: 2Rem (~ 32px per caselle di funzionalità, colonne di servizio)
• Gap L: 3Rem (~ 48px per sezioni di contenuto principale, layout della barra laterale)

Queste etichette non sono fisse; Tu e la tua squadra potete rinominarli secondo necessità. Puoi anche aggiungere più variabili di gap. Le unità REM sono in scala con le impostazioni del carattere del browser, quindi i visitatori che aumentano le dimensioni del testo ottengono una spaziatura proporzionale. Questo migliora l'accessibilità.

Usa i morsetti per creare lacune scalabili

Possiamo anche usare il clamp (). Spiegheremo brevemente se non sai cosa sia un morsetto (). Ma prima, considera di aggiungere quanto segue anche alle variabili numeriche:

• Gap della colonna orizzontale: morsetto (16px, 2vw, 32px) (per lacune orizzontali tra carte, caratteristiche, ecc.)
• Gap della colonna verticale: morsetto (16px, 1,5VW, 32px) (per lacune verticali tra carte, caratteristiche, ecc.)

Clamp () è un'unità CSS sicura da utilizzare. Dai tre valori: min, preferito e max. Il browser prova il valore preferito, ma se è troppo piccolo, usa il min e se è troppo grande, usa il massimo.

Ad esempio, Gap della colonna orizzontale: morsetto (16px, 2vw, 32px). Il divario si ridimensiona con larghezza dello schermo (2VW = 2% di Viewport). Non andrà al di sotto di 16 px su piccoli schermi o sopra 32px su schermi di grandi dimensioni. Ciò mantiene la spaziatura equilibrata senza punti di interruzione o domande sui media.

È possibile utilizzare qualsiasi valori. Abbiamo scelto questo metodo perché è facile da mantenere, si adatta ai cambiamenti e produce risultati più coerenti.

2. Abilita il layout Flexbox sulle tue sezioni

Le nuove sezioni utilizzano Flexbox per impostazione predefinita. Per siti più vecchi, converti una sezione facendo clic sull'icona delle impostazioni, aprendo la scheda Design, scegliendo lo stile di layout nella scheda Layout e selezionando "Flex". Fai lo stesso per le righe e le colonne.

Dopo aver abilitato Flex, ottieni opzioni come giustificare il contenuto per l'allineamento e la distribuzione. Allinea i controlli degli articoli consentono di impostare il modo in cui gli articoli si comportano quando lo spazio si esaurisce in orizzontale.

Qui, puoi individuare i controlli Gap, che hanno cursori orizzontale e verticale separati per impostare la spaziatura tra colonne o moduli all'interno di una riga.

3. Applicare i valori di gap usando le tue variabili

Dopo aver impostato le variabili GAP nel gestore variabile di Divi, applicarle alle impostazioni di Gap Flexbox diventa semplice attraverso il sistema di contenuti dinamici. Passare alle impostazioni del layout e passare le etichette nei campi di gap orizzontale o verticale per rivelare l'icona del contenuto dinamico.

Fare clic sull'icona del contenuto dinamico per aprire la finestra di dialogo Selezione variabile. Le tue variabili di gap salvate vengono visualizzate in questo menu.

Come avrai notato, abbiamo aggiunto due serie di lacune in base al contesto in cui verrebbero utilizzati. Facciamo un'immersione più profonda per capire perché:

Gacchette di morsetti: tra le colonne flessibili

Le lacune del morsetto funzionerebbero a livello di "contenitore" attraverso le impostazioni di Flexbox di Divi.

Applicare il gap della colonna orizzontale [morsetto (16px, 2vw, 32px)] quando si dispone di colonne disposte fianco a fianco, come tre schede di servizio in una riga. Una volta selezionato, Divi lo applica automaticamente all'impostazione GAP. Il campo visualizzerà il nome della variabile, confermando la connessione. Ciò crea una spaziatura orizzontale proporzionale tra la colonna 1, la colonna 2 e la colonna 3 quando la direzione del layout è impostata come riga.

Applicare il gap della colonna verticale [morsetto (16px, 1,5VW, 32px)] quando la direzione del layout è impostata sulla colonna, impilando gli elementi in verticale. Questo spazzerà gli elementi proporzionalmente dall'alto verso il basso quando la direzione del layout è impostata come colonna.

Quando le colonne con direzione della riga avvolgono più righe, come sei carte disposte in tre colonne per riga, applicare entrambe le lacune. Uno spazio orizzontale spazi all'interno di ogni riga, mentre uno spazio verticale spazi le file stesse.

Gap di base: contenuto all'interno delle righe

I tuoi spazi di base controllano le relazioni tra i contenuti all'interno di ogni colonna. Quando un'intestazione è seguita da un paragrafo e un pulsante nella stessa colonna, prendi in considerazione l'applicazione di Gap XS (0,75REM) tra di loro.

Prendi in considerazione l'utilizzo di Gap S (1.25REM) per gruppi di contenuti con più elementi di testo o Gap L (3REM) se hai bisogno di una spaziatura significativa tra due colonne, specialmente se la direzione del layout della colonna è impostata su una riga.

Le variabili di design vantaggio

Le variabili di progettazione hanno diversi vantaggi rispetto ai valori di digitazione manualmente. Poiché le etichette possono essere contestuali, mantengono la spaziatura coerente senza memorizzare i valori di pixel o REM.

Quando si modifica la filosofia di spaziatura, aggiorna una variabile nel gestore variabile per aggiornare ogni divario utilizzato in tutto il sito.

Questo metodo visivo evita anche gli errori di spaziatura quando i membri del team inseriscono valori diversi. Le variabili di gap creano un linguaggio comune per la spaziatura, mantenendo i layout allineati con gli standard di progettazione che hai impostato. Ciò è particolarmente utile per grandi progetti con molti collaboratori o dopo la consegna dei clienti quando i clienti modificano o aggiungono pagine.

4. Imposta lacune reattive

I telefoni cellulari hanno uno spazio orizzontale limitato. Il tuo layout di servizio a tre colonne sembra eccezionale sul desktop, ma diventa angusto e rigido da leggere su uno schermo telefonico a 360px.

Divi 5 offre sette punti di interruzione personalizzabili con cui lavorare: telefono, telefono, tablet, tablet, desktop, widescreen e ultra larghi. Ogni punto di interruzione funziona in modo indipendente. È possibile modificare la direzione del layout, scambiare variabili di gap o regolare l'allineamento sul cellulare senza incasinare il desktop. Questo ti consente di indirizzare le larghezze esatte dello schermo in cui il layout deve cambiare.

Passa al punto di interruzione del telefono e modifica la direzione del layout da "riga" a "colonna". Cancella l'opzione Ga

Il divario verticale a base di morsetto si riduce e cresce automaticamente man mano che la larghezza del vista cambia. Su una piccola schermata del telefono, 2VW è uguale a circa 7px, ma il morsetto non supererà il minimo di 16px. Su uno schermo più grande, 2VW potrebbe significare 18px e su uno schermo ancora più grande, 20px.

La spaziatura cresce senza intoppi tra questi limiti man mano che la dimensione dello schermo cambia. Senza impostare valori diversi manualmente, si ottiene una spaziatura stretta su una spaziatura mobile e generosa sul desktop.

Le lacune di base potrebbero essere ancora necessarie modifiche manuali per breakpoint. Gap M potrebbe sentirsi troppo stretto sul cellulare. Passa al punto di interruzione mobile e applica Gap L invece dell'opzione Gap verticale.

Puoi anche creare variabili specifiche per dispositivi mobili, come "Gap Mobile S" o "Gap Mobile L" e applicarle ai punti di interruzione del telefono e dei tablet. Tuttavia, nella maggior parte dei casi gli spazi di base e morsetti funzionano bene.

5. Salva la configurazione come preimpostazione

Il tuo sistema di gap funziona bene ora. Le variabili di progettazione ti danno il controllo sulla spaziatura attraverso l'interfaccia visiva con cui hai lavorato. Ma l'impostazione delle configurazioni Flexbox più e più volte diventa veloce. È necessario regolare la direzione del layout, l'allineamento e le impostazioni di avvolgimento. Quindi applichi le tue variabili di gap su ogni nuova sezione. Questo processo mangia tempo.

I preset del gruppo di opzioni risolvono questo problema. Memorizza la configurazione completa Flexbox, tra cui direzione del layout, allineamento, avvolgimento, giustificazione e lacune orizzontali e verticali che fanno riferimento alle variabili di progettazione.

Una volta configurate tutte le impostazioni Flexbox, si librano sul pannello in stile layout. Vedrai l'icona del gruppo di gruppi di opzioni.

Fai clic su di esso e seleziona "Crea preimpostazione dagli stili correnti." Nominalo in base a ciò che fa il layout: "Grid a tre colonne", "Grid dei servizi" o "Display di carte".

Il preimpostazione trasporta la configurazione Flexbox a qualsiasi contenitore. Non copia colori di sfondo, caratteri o altri styling visivi.

Applica la preimpostazione della "griglia a tre colonne" su qualsiasi riga. Imposta automaticamente la stessa spaziatura, allineamento e comportamento di avvolgimento. Ogni riga o colonna mantiene il suo aspetto visivo mentre si utilizza la stessa struttura di layout.

Trascorri meno tempo a ricreare configurazioni che hai già perfezionato. L'identità visiva rimane unica per ogni sezione. La fondazione strutturale rimane coerente in tutto il sito. Il tuo sistema GAP rimane veloce all'implementazione e i tuoi modelli di layout comprovati vengono riutilizzati in modo efficiente.

Ottieni una spaziatura perfetta ogni volta con Divi 5

Con la nuova Flexbox e le variabili di design di Divi 5, la spaziatura coerente diventa senza sforzo. GAP Controlla i layout di bilanciamento tra i dispositivi, mentre le variabili assicurano che gli aggiornamenti riflettano in tutto il sito con una singola modifica.

Invece di correzioni costanti, ottieni un sistema chiaro di cui ti puoi fidare. Imposta la tua spaziatura una volta, riutilizzarla ovunque e concentrati sulla progettazione di grandi esperienze per i tuoi visitatori.