8 layout di griglia CSS per Divi 5 (download gratuito!)

La nuova macchina per il formato Grid di Divi 5 semplifica la costruzione di sezioni reattive in stile editoriale che rimangono completamente allineate a ogni punto di interruzione. In questo pacchetto sciolto troverai 8 progetti di fase CSS Grid preimpostati, ognuno realizzato per la costruzione vuota, una solida gerarchia e modifiche rapide. Inseriscili in qualsiasi pagina web e cambia il materiale del contenuto.

Anteprima

Diamo un’occhiata a tutte le 8 sezioni della griglia in questo pacchetto. L’ottenimento è aggiuntivo in basso.

Iscriviti al nostro canale Youtube

Ottieni 8 sezioni della griglia CSS per Divi 5

Ottieni tutte le 8 sezioni della griglia senza alcun costo. Quelle sono sezioni preimpostate progettate per apparire belle fuori dal campo. Importali nella tua libreria Divi e caricali su qualsiasi pagina web.

Cosa è integrato (9 esportazioni)

Quando ottieni e decomprimi la cartella, troverai tutte le 9 esportazioni di formato organizzate in modo intelligente come singole sezioni e un pacchetto completo “Tutte le sezioni”.

Prestyled – Sezioni di persone particolari (8) → Disegni realizzati in posizione.
Prestyled – Tutte le sezioni (1) → Pacchetto completo di tutti i design.

Come utilizzare i disegni della griglia

Tieni chiusa la cartella dei download per iniziare a caricarli sulla tua pagina web Divi.

1. Importa sezioni nella libreria Divi

Innanzitutto, vorremo importare i layout sulla tua pagina web Divi. Passa a Divi → Biblioteca Divi. Fare clic su Importa ed esporta pulsante nella parte superiore del display.

Quando il Importa ed esporta layout sembra modale, fai una selezione Importare scheda e fare clic su Fai una scelta Segnala per trovare le informazioni JSON per il tuo PC.

Fai una scelta il Prestyled – Sezioni della griglia CSS (tutte) registrare e fare clic su di esso per importarlo.

Non appena il record viene caricato, fare clic su Importa layout Divi Builder inserirli.

Non appena importati, tutti gli 8 layout della griglia CSS appariranno nella Libreria Divi.

2. Carica una fase della griglia su una pagina Web

Vai a Pagine → Tutte le pagine. Apri una pagina web all’interno di Visible Builder (o creane una nuova).

Fare clic su nero “+” all’interno del costruttore visibile. Quando viene visualizzata la modalità Inserisci fase, fare clic su Carica dalla libreria scheda.

Scegli la fase della Griglia che desideri inserire.

Fare clic su Usa questa fase per caricarlo.

Nonostante tutto, salva la pagina web facendo clic su Secure Draft all’altezza corretta di Visible Builder.

Personalizzazione delle griglie

Tali sezioni vengono inviate con formati, spaziatura e tipi di tipografia già pronti. In alternativa, puoi comunque modificare il resto nella fase di fase, riga, colonna o modulo per adattarla meglio al tuo logo.

I controlli Grid di Divi 5 forniscono la regolazione del formato effettivo proteggendo al contempo l’intero lotto reattivo.

1. Modifica le tracce della griglia (colonne e righe)

Apri il Griglia impostazioni del contenitore (riga). Fare clic su Progetto scheda. Amplifica il Formato menu per visualizzare le impostazioni.

Potrai alternare la scelta delle colonne per vari punti di interruzione — Desktop, PillolaE Telefono.

Potrai utilizzare i breakpoint reattivi personalizzabili di Divi 5 o l’editor reattivo per cambiare la scelta delle colonne all’interno della griglia. In questo caso, 4 su Desktop, 4 su Pillola e un paio su Telefono.

Potrai regolare le impostazioni di colonne e righe e anche la fase Colonna. Fai clic su una delle colonne più presenti nella Griglia e vai alla scheda Progettazione.

Amplifica il Dimensionamento menu. Trova la casella Intervallo colonne. Aumentando o abbassando il volume della casa la Colonna dovrà occupare orizzontalmente.

Potrai inoltre regolare il numero di righe del file Colonna dovrà estendersi verticalmente. In questa istanza è impostato su 2tuttavia sarai in grado di aumentare o diminuire la quantità per cambiare il Colonna esclusivamente le abitudini.

Inoltre, potrai alternare il Orizzontale E Foro verticale alla tua griglia per regolare lo spazio orizzontalmente e verticalmente.

2. Utilizzare modelli compatibili con Auto-Are

Consenti l’adattamento automatico del luogo in modo che le carte da gioco si avvolgano in modo intelligente in ogni punto di interruzione. Ciò aiuta a mantenere le righe bilanciate senza ridisposizioni della guida. Mentre all’interno del Griglia contenitore (riga), scorrere fino a Colonne automatiche della griglia e assicurati che sia scelto Auto.

Garantisce che ulteriori colonne vengano aggiunte meccanicamente quando i pezzi della griglia vengono posizionati oltre la griglia delineata, servendo a regolare la larghezza di quelle ulteriori colonne.

Ora, delineiamo la scala per le righe aggiunte create meccanicamente quando i pezzi della griglia vengono posizionati oltre la griglia impostata. Righe automatiche della griglia controlla il picco delle file di overflow, molto simile all’atmosfera per cui vale la pena Colonne automatiche della griglia garantisce che vengano aggiunte ulteriori colonne e che le loro larghezze siano controllate correttamente.

3. Posizione e estensione dei pezzi

Persona specifica I pezzi della griglia (colonne) possono anche essere posizionati esattamente nel punto in cui desideri averli. All’interno del Formato menu all’interno della colonna Progetto scheda, troverai Colonna Inizia E Finitura colonna. Questi ti aiutano a regolare la posizione orizzontale della tua merce all’interno della griglia, rendendola versatile per layout personalizzati.

Colonna Inizia seleziona la linea verticale nel punto in cui inizia la merce della griglia sul lato sinistro. Inserisci una quantità favorevole, come 1per allinearlo all’estrema sinistra, o 2 per saltare la colonna principale e iniziare dalla seconda. La scelta di Auto indica alla griglia di posizionarsi meccanicamente in linea con il suo galleggiante a base di erbe, senza che tu voglia specificare una quantità precisa di linea.

Finitura colonna unità la linea verticale nel punto in cui la merce della griglia termina nella sfaccettatura corretta. Come Colonna Iniziaquei valori possono anche essere certi o distruttivi.

Riga Inizia E Fine riga i dipinti in modo simile ai numeri opposti della colonna, tuttavia regolano il posizionamento verticale dei pezzi della griglia. Riga Inizia unisce la linea orizzontale in cui inizia l’oggetto in altezza, permettendoti di selezionare un punto da cui iniziare.

Tuttavia, Fine riga definisce il punto in cui l’oggetto si ferma sul retro, permettendogli di estendersi su più righe. Usa determinati numeri per il posizionamento effettivo o negativi per sovrapposizioni ingegnose e la griglia si adatterà dinamicamente mentre modifichi.

4. Allinea e distribuisci

Nella griglia CSS di Divi 5 sarai in grado di ottimizzare il modo in cui sono organizzati i pezzi della griglia. Percorso della griglia significa che puoi trasferirti tra layout basati su righe o basati su colonne, determinando il float principale dei tuoi pezzi della griglia. Densità della griglia regola la spaziatura tra le linee della griglia, permettendoti di rendere il tuo formato davvero più stretto o più distanziato.

Utilizzo Giustificare il contenuto E Allinea il materiale del contenuto per regolare l’intera distribuzione delle cose attorno alla Griglia. Per una regolazione più effettiva, utilizzare Allinea i pezzi per regolare l’allineamento all’interno di ogni singolo mobile (colonna), assicurandosi che l’intero lotto si sistemi in modo intelligente su tutte le file per uno sguardo sofisticato.

5. Attiva/disattiva reattivi coerenti con il punto di interruzione

Personalizza le colonne, gli spazi e gli intervalli del tuo formato in ogni punto di interruzione per assicurarti uno sguardo sofisticato su tutti i gadget. Ad esempio, utilizza meno colonne e spazi più piccoli sulla cella e ingrandiscili per i desktop.

Regola le dimensioni dei caratteri con gadget CSS come massimo per gestire la chiarezza e impostare larghezza massima sui titoli per evitare che il contenuto testuale venga disposto in modo scomodo su schermi più piccoli.

6. Carica, replica o riordina i pezzi della griglia

Organizza il tuo formato includendo, duplicando o riordinando i pezzi della griglia in Divi 5. Replica una carta (colonna) per gestire uno stile costante in tutto il tuo progetto. Basta replicare un prodotto presente e modificarlo come desiderato. Trascina i pezzi per riordinarli, organizzando i tuoi contenuti nella raccolta più semplice.

Togli i pezzi indesiderati per mantenere vuota la tua griglia se qualcosa non funziona. Per verificare le righe ordinate, mantieni la scelta dei pezzi allineati insieme alla presunta colonna, combattendo spazi vuoti o traboccamenti scomodi.

7. Utilizzare variabili di progettazione, preimpostazioni e attributi di allungamento

Accelera il tuo flusso di lavoro sfruttando le variabili di progettazione, le preimpostazioni e gli attributi di allungamento. Colori e spaziatura dei collegamenti ipertestuali alle variabili di progettazione per uno sguardo coerente e semplice da sostituire a livello globale.

Salva i tuoi tipi di carte preferiti come predefiniti per riutilizzarli temporaneamente e mantenere costante la tua sfida.

Con Extend Attributes, sarai in grado di seguire immediatamente una metamorfosi da una carta all’altra, risparmiando tempo sugli aggiornamenti collettivi. Per modifiche rapide al mondo, puoi utilizzare Trova e sostituisci per regolare i colori, le dimensioni dei caratteri o la spaziatura su tutta la griglia con un unico movimento.

Inizia a costruire con la griglia CSS in Divi 5

Quelle 8 sezioni della griglia preimpostate sono una strategia scattante per accelerare le tue build Divi 5. Ottienili, inseriscili in qualsiasi pagina web e personalizzali in base ai tuoi contenuti. La nuovissima macchina Grid gestisce la costruzione in modo che tu possa concentrare l’attenzione sul design.

Il post su 8 CSS Grid Layouts For Divi 5 (download gratuito!) è apparso per primo sul blog di Elegant Themes.

Piani di manutenzione wordpress | hosting wordpress

Per saperne di più