Presentazione della griglia CSS per Divi 5

Questo è grande. Abbiamo costruito il miglior costruttore di griglia CSS ed è disponibile per Divi 5 oggi. È meglio di Elementor. È meglio dei mattoni. Sia che tu voglia padroneggiare la griglia o semplicemente utilizzare i nuovi modelli di griglia di Divi, adorerai questo aggiornamento.

Guarda il seguente video per vedere la nuova funzionalità in azione.

Griglia CSS per tutti

Divi 5 è molto lontano dal suo predecessore. Abbiamo trasformato Divi in ​​una potenza di web design, con nuove funzionalità come Flexbox, unità avanzate, preset e variabili di design. CSS Grid è il prossimo grande passo avanti.

Allo stesso tempo, non vogliamo che gli utenti esistenti si sentano persi o sepolti in nuove impostazioni. Abbiamo raggiunto il giusto equilibrio tra dare agli utenti avanzati gli strumenti necessari, rendendo accessibili i layout della griglia ai principianti.

Modelli di griglia per ogni occasione

Se non hai mai sentito parlare della griglia CSS e non hai voglia di imparare i dettagli dei layout della griglia, non preoccuparti, non è necessario. Goditi i nuovi modelli di griglia pre-costruiti!

La bellezza dell'utilizzo dei modelli di griglia è che la griglia è controllata a livello del contenitore e, man mano che aggiungi nuovi articoli, si conformano automaticamente alla griglia. È molto più intuitivo e sblocca una nuova varietà di design.

Divi ha modelli di griglia per ogni situazione e applicarli ai contenuti esistenti è facile.

Controllo completo per gli esperti della griglia

Se sei un esperto di griglia CSS esperto, le opzioni della griglia di Divi non ti trattengono. Puoi arrivare direttamente al punto, definire manualmente modelli di griglia di colonna e riga e creare vari layout della griglia usando la modifica offset, che toccherò più tardi.

Naturalmente, è possibile rinunciare all'interfaccia e applicare le regole della griglia utilizzando anche il pannello CSS personalizzato; Qualunque cosa funzioni meglio per te.

Opzioni di griglia intuitive per gli assemblatori Web

Se sei da qualche parte nel mezzo, allora il costruttore della griglia di Divi 5 brilla davvero.

Abbiamo trasformato i parametri della griglia CSS in impostazioni per creare griglie verticali o orizzontali, personalizzare le dimensioni della colonna e delle righe, la direzione della griglia, l'allineamento e la giustificazione degli elementi e altro ancora.

Inoltre, il gruppo di opzioni di dimensionamento include nuove opzioni di colonna e riga che consentono di regolare la larghezza, l'altezza e la posizione di una singola griglia nella griglia.

Editing offset griglia

Uno degli aspetti più unici di Divi 5 Grid Builder è l'editor di offset, che è possibile utilizzare per creare motivi a griglia non simmetrici ripetuti a livello di contenitore. Lascia che ti faccia un esempio nel mondo reale.

Ho creato un modello di blog nel video qui sotto usando il costruttore Loop di Divi 5; Ogni colonna è un elemento ad anello pieno di contenuto dinamico. Quando abilito lo stile di layout della griglia sul contenitore genitore, le colonne si conformano automaticamente alla griglia.

Posso regolare il numero di colonne, immettere i modelli di colonna o riga personalizzati, modificare le dimensioni del gap e fare molte altre cose.

Inoltre, posso utilizzare l'editor offset per applicare regole su elementi specifici nella griglia.

Invece di un modello di colonna standard che si ripete su ogni riga, posso creare modelli di offset, ad esempio, avendo ogni 4 ° elemento che attraversa due colonne, a partire dal secondo e terzo elemento. Questi modelli di offset danno così tanta varietà ai modelli di riga pre-costruita di Divi 5.

Demo della griglia CSS (download gratuito)

È possibile creare layout spettacolari usando la griglia CSS che non è mai stato possibile prima. Se vuoi ispirazione, guarda questi splendidi layout creati dal nostro team di progettazione utilizzando l'ultima versione di Divi 5.

Puoi scaricarli gratuitamente e testarli da solo.

Prova Divi 5 oggi

La griglia CSS per Divi 5 è disponibile oggi ed è una delle tante caratteristiche che arrivano a Divi quest'anno.

Puoi seguire mentre progrediamo attraverso la versione finale di Divi 5 e oltre, con aggiornamenti ogni due settimane. A seconda delle tue priorità, puoi usare Divi 5 ora per costruire nuovi siti Web o attendere fino a quando non aggiungiamo più funzionalità, qualunque cosa funzioni meglio per te.

Come indicato nel programma di rilascio multi-fase originale di Divi 5, l'Alpha pubblico Divi 5 è come "Divi 5 Lite". Mancano alcune funzionalità e potrebbe non essere adatto per i siti Web esistenti, ma è pronto per essere utilizzato su nuovi siti Web se si preferisce l'esperienza a Divi 4.

Vogliamo che tu lo provi e, se lo ami, lo usi; Quando tutti lo adorano, lo renderemo ufficiale.

Hai provato gli attributi personalizzati per Divi 5?

Nel caso in cui l'avessi perso, abbiamo recentemente rilasciato i nuovi attributi personalizzati, che ti consentono di aggiungere qualsiasi attributo, come ALT, Titolo, Rel e Aria-Label, agli elementi e alla maggior parte degli elementi secondari.

Divi ha avuto supporto per attributi specifici, come classe e ID, ma ora puoi aggiungere qualsiasi attributo a qualsiasi elemento. Ciò è particolarmente importante per l'accessibilità, permettendoti, ad esempio, aggiungi il testo alt a immagini e ruoli e etichette a elementi non semantici come un pulsante basato su icona.

Guarda questo video per tutti i dettagli.

Altri aggiornamenti di Divi 5 sono in arrivo

2025 è l'anno di Divi 5 . Il lavoro noioso è dietro di noi. Abbiamo costruito la Fondazione Super Bast e ora è tempo che Divi torni.

Se sei qui per il ritorno Divi, facci un enorme favore e facci sapere amando questo video e lasciando un commento. Significa molto per noi vederti incoraggiare Divi ed è essenziale alimentare l'algoritmo e spargere la voce.

Non dimenticare di seguirci su YouTube e iscriviti alla newsletter Divi in ​​modo da non perdere mai un aggiornamento. Ci vediamo presto per un altro annuncio di Divi 5, che prometto che sarà dietro l'angolo.