Come creare un formato griglia in Divi 5 (passo passo passo)

Il nuovo dispositivo Grid Format di Divi apre infinite possibilità per layout artistici in crescita. Per molti, nonostante il fatto che, questo è un territorio nuovo, e avvolgere le proprie idee in modo sferico un paio di questi nuovi input possibili scelte potrebbero diventare difficili. Ecco perché illustreremo in modo semplice il modo migliore per assemblare un layout a griglia utilizzando i nuovi controlli di Divi 5.

Non molto tempo fa, abbiamo introdotto un pacchetto di 8 layout di griglia predefiniti. Utilizzando la griglia n. 4 di quel pacchetto come ispirazione progettuale, la ricostruiremo passo dopo passo.

Se questa è la tua prima incursione in CSS Grid, questo tutorial è un ottimo punto di partenza perché non utilizzeremo alcuna regola di offset per far sì che ciò accada.

Come creare un layout di griglia

Il servizio è terminare questo tutorial con questo come risultato finale.

Passaggio 1. Impostazione della griglia

Il primo passo è svelare lo sviluppo elementare richiesto per creare questa griglia. Vogliamo chiederci: “quali contenitori da imballaggio desideriamo?”. Supponendo che stiamo costruendo il layout della griglia sul contenitore riga e utilizzando le colonne come elementi della griglia, saremo in grado di svelare che desideriamo 5 colonne.

Questo informa ciò che vogliamo aggiungere alla pagina web Internet. Aggiungi una sezione completamente nuova, scorri l’intero metodo fino alle possibili scelte della griglia e seleziona la selezione della griglia multiriga 5&occasions;2.

Questo probabilmente ci permetterà di ottenere sempre più le nostre 5 colonne (più altre 5). Elimina le 5 colonne extra.

Ora avrai una riga impostata su un layout a griglia e 5 colonne in posizione per la costruzione.

Passaggio 2. Configura il layout della riga madre o padre

CSS Grid ha due livelli numero uno di impostazioni: impostazioni eseguite sul contenitore mamma o papà e impostazioni eseguite sugli elementi figlio. La prima cosa che potremo fare è posizionarci sopra il contenitore di mamma o papà in modo che, una volta seguite le impostazioni della griglia dei prodotti per bambini, abbiano senso.

Inizieremo circondando gli spazi orizzontali e verticali. Desideri utilizzare le variabili di progettazione corrette proprio qui e puoi utilizzare i valori clamp(), quindi di nuovo per rendere semplice questo tutorial, li imposteremo su 20px ciascuno.

Successivamente, vogliamo mostrare ulteriori impostazioni della griglia di Divi. Per provarlo, scorri l’intero metodo fino al menu a discesa per “Larghezze delle colonne” E “Altezze delle righe.”

Industria la selezione della larghezza delle colonne da “Colonne di larghezza identica” a “Colonne larghezza guida.” In modo simile, scambia “Altezze riga” da “Righe altezza automatica” a “Righe di altezza guida.” Questo probabilmente ci consentirà sempre più di inserire una larghezza specifica e i valori superiori in cui vogliamo che la griglia si adatti agli elementi secondari.

L’impostazione delle scelte possibili su “Guida” ci fornisce ciascuna due scelte possibili aggiuntive, consentendoci di impostare valori personalizzati. Ora inseriremo i valori delle unità:

• Inserisci “3fr 3fr 2fr” nel file Modello di colonna della griglia per creare due colonne estese e una colonna snella.
• Inserisci “3fr 2fr 2fr” nel file Modello di riga della griglia per rendere la fila principale più alta delle altre.

Vedrai che il contorno sta iniziando a prendere forma anche supponendo che non ci siano materiali di contenuto, argomenti o stili.

Passaggio 3. Impostazioni della griglia di colonne

A questo punto, ora abbiamo la configurazione completa del layout, quindi ora vogliamo impostare le scelte possibili specifiche della griglia individuale nella fase della parte figlio. Tieni presente che ora abbiamo 5 colonne, ciascuna con impostazioni diverse.

Colonna 1

La colonna 1 è sottostimata. Elimineremo tutte le impostazioni predefinite del dimensionamento della griglia in modo che la colonna 1 si trovi naturalmente all’interno della prima cella della griglia.

Colonna 2

Fare clic su nella Colonna 1 e andare alla scheda Progettazione > Dimensionamento. Imposta Inizio colonna su 2, Estensione riga su 2 e Inizio riga su 1.

Questo crea un’alta colonna all’interno del cuore che si estende attraverso le due file.

Colonna 3

Fortunatamente per te, anche la Colonna 3 è semplice e non richiede modifiche alle impostazioni predefinite. In questo modo la colonna verrà posizionata nella successiva casa disponibile all’interno della riga superiore.

Colonna 4

Fare clic su nella colonna 4 e aprire Design > Dimensionamento. Imposta l’estensione della riga su 2.

Questa colonna si estende verso il basso e copre due righe verticalmente.

Colonna 5

Fare clic su nella colonna 5 e aprire Design > Dimensionamento. Imposta l’estensione della colonna su 2, l’inizio della colonna su 2, l’estensione della riga su 2 e l’inizio della riga su 2.

Questo crea un grande blocco che riempie l’angolo in basso a destra della griglia, causando una certa sovrapposizione con la Colonna 2.

Passaggio 4. Progetta ogni colonna

Per quanto riguarda il layout della griglia, in realtà sei finito all’80% nel modo più semplice. Se vuoi creare il tuo design da qui, sarai in grado di assemblare qualcosa di unico pur mantenendo lo stesso sviluppo della griglia. D’altra parte continuiamo e dipingiamo con tratti enormi. Aggiungiamo colore e immagini a queste colonne. Avrai diritto di accesso alle immagini importando i layout a cui si fa riferimento all’inizio di questo testo (ricorda che stiamo utilizzando la Griglia n. 4).

La griglia è abbastanza accartocciata. Per risolvere questo problema, vogliamo aggiungere alcuni moduli alle colonne. Nella colonna 1, aggiungi un modulo di intestazione e un modulo di pulsanti. Passare alla Colonna stessa e alla scheda Progettazione, per trovare le possibili scelte di Spaziatura e aggiungere l’imbottitura interna utilizzando il mio (40px, 10%) per tutti e 4 gli aspetti.

La colonna 2 è simile in quanto otterrà un riempimento di min (40px, 10%) su ciascun lato. Inoltre ha un modulo Immagine, Intestazione e Testo. D’altra parte, vai alle Impostazioni di progettazione della colonna> Disposizione. Per cercare il “Giustificare il materiale del contenuto” icona delle scelte possibili e seleziona la terza, “FINE.” Ciò spinge i moduli nella parte inferiore della colonna.

Poi, sempre nella Colonna 2, vai alla scheda Sofisticati > Posizione. Aggiungi un indice z di 10 per potenziarlo sopra la colonna 5 sovrapposta.

Introdurremo inoltre il raggio del bordo in tutte le nostre colonne. Nella colonna 2, aggiungi 20px raggio del bordo a tutti gli angoli, quindi usa gli attributi Allunga per offrire a tutte le colonne all’interno della riga madre o padre un raggio del bordo identico. Una volta terminato, imposta il raggio del bordo del tipo in basso a destra su 10v.

Per creare un effetto cavo curvo sul lato inferiore destro della colonna 2, aggiungeremo un’ombra a forma di riquadro. Utilizzo Scatola Ombra #4Periodo di diffusione di 20px (imposta tutti gli altri valori su 0), Colore ombra di bianco (#ffffff al 100%) e la posizione dell’ombra della casella di “Ombra esterna.”

La colonna 4 fornisce l’immagine Divi 5 “5” al suo interno (per riferimento, è impostata su 80% larghezza.

Ora, tutto ciò che resta da fare è dare alla rete un po’ di respiro in più. Per provarlo, vai nella riga mamma o papà e vai su Design > Dimensionamento. Assegna alla riga una larghezza di 100% con una larghezza massima di nessuno.

E ora ce l’abbiamo: una griglia moderatamente difficile con due colonne, molte delle quali si estendono su periodi aggiuntivi (ciascuna verticale o orizzontale). Utilizziamo un uso accattivante dell’ombra di un riquadro per creare l’apparenza di uno spazio vuoto, quando in realtà si tratta di due elementi della griglia sovrapposti.

Scarica 8 sezioni della griglia CSS per Divi 5

Ottieni 8 sezioni della griglia totalmente gratuite. Quelle sono sezioni preimpostate progettate per sembrare fantastiche fuori dalla sfera. Importali nella tua libreria Divi e aggiungili a qualsiasi pagina Web Internet. Quello che abbiamo utilizzato in tutto questo tutorial è il n.4.

Assembla i tuoi layout di griglia in Divi 5 al momento

Hai semplicemente ricostruito una griglia complicata dal più basso verso l’alto. Ora che conosci il modo in cui la griglia di Divi 5 inserisce le immagini, puoi iniziare a sperimentare con i tuoi layout: scambiando intervalli, regolando gli spazi vuoti e impilando i contenuti in nuovi modi. Più segui, più vedrai quanto flessibile e veloce può essere questo sistema rispetto al precedente ordinamento a blocchi.

Ora che hai semplicemente creato questo layout fondamentale, perché non fare un ulteriore passo avanti?

• Dai un’occhiata a valori diversi: Cosa succede se cambi il modello della colonna della griglia con 1fr 4fr 1fr?
• Riorganizzare le campate: Puoi fare in modo che la Colonna 4 si estenda orizzontalmente invece che verticalmente?
• Scopri le impostazioni reattive: Utilizza i controlli reattivi di Divi per scambiare completamente lo sviluppo della griglia su farmaci e dispositivi mobili per un’esperienza ottimizzata.
• Dai un’occhiata all’uso degli offset: Non abbiamo toccato gli offset della griglia, tuttavia sono un’opzione utile per riorganizzare la griglia per tenere conto dei layout asimmetrici.

Il layout che abbiamo costruito negli ultimi tempi è solo una delle tante probabilità. Usa le nuove competenze come trampolino di lancio per la tua creatività. Non aspetteremo di vedere cosa assemblerai!

Adesso non su Divi 5 però? Effettua il passaggio negli ultimi tempi e inizia la costruzione dei layout in modo più intelligente e veloce.

Il post Come creare un formato a griglia in Divi 5 (Step-Through-Step) è apparso per la prima volta sul blog Sublime Topics.

Progettazione Web wordpress

[ continue ]