DivI 5 Caratteristiche esclusive (finora)

Stiamo lanciando nuove funzionalità Divi 5 a un ritmo rapido e ognuno è progettato per migliorare le prestazioni, semplificare il flusso di lavoro e portare potenti capacità di design a portata di mano. Hai bisogno di una panoramica? Questo post affronterà le funzionalità esclusive Divi 5 che vale la pena dare un'occhiata. E questo è solo l'inizio. Abbiamo nuove entusiasmanti funzionalità come Flexbox e il Loop Builder uscirà presto. I nostri aggiornamenti affrontano punti deboli comuni che abbiamo sentito da designer e sviluppatori che usano Divi ogni giorno.

Divi 5 è pronto per essere utilizzato su nuovi siti Web.

8 caratteristiche esclusive di Divi 5 (e come funzionano)

Divi 5 introduce aggiornamenti innovativi alla progettazione del sito Web e utilizza una serie di strumenti che reinventano e accelerano le attività di progettazione, rendendoli più intuitivi. Le seguenti otto caratteristiche dimostrano il potenziale della nostra Divi di recente ripensamento:

1. Breakpoint personalizzabili

Funzione pubblicata il 6 febbraio 2025

Divi 5 introduce una maggiore flessibilità nella progettazione reattiva con il suo sistema di breakpoint personalizzabili. La maggior parte dei costruttori di pagine limita gli utenti a solo tre viste standard, ma Divi 5 consente fino a sette punti di interruzione unici, che possono essere impostati su valori di pixel personalizzati.

Ciò offre agli utenti più controllo rispetto ad altri costruttori popolari, che di solito si attengono alle dimensioni fisse del dispositivo e offrono opzioni di regolazione limitate. Mentre molte piattaforme ti costringono a progettare in confini rigidi, Divi 5 ti consente di indirizzare le larghezze esatte dello schermo in cui il tuo design ha bisogno di particolare attenzione.

Oltre il trio standard

La maggior parte dei costruttori di siti Web si attacca al desktop, al tablet e al trio mobile perché è semplice. Divi 5 ha riconosciuto che questo non corrisponde al modo in cui le persone sfogliano effettivamente il web oggi, su dozzine di dimensioni dello schermo diverse.

Con Divi 5, puoi impostare i punti di interruzione per:

• Telefono (<767px)
• Telefono largo (<860px) - perfetto per la visualizzazione mobile del paesaggio
• Tablet (<980px)
• Tablet largo (<1024px) - cattura tablet più grandi e dispositivi simili
• Desktop (> 981px)
• Widescreen (> 1280px)
• Ultra Wide (> 1440px)

Altri costruttori di pagine WordPress offrono un certo controllo di Breakpoint, ma nessuno corrisponde alla precisione e alla facilità d'uso di Divi 5. Il sistema rimane intuitivo, con gli stessi familiari controlli Divi applicati in tutti i punti di interruzione.

Gestione del punto di interruzione visiva

Divi 5 introduce il ridimensionamento della tela, una caratteristica che lo differenzia dalla maggior parte degli altri costruttori. Invece di essere limitato al passaggio tra le anteprime fisse del dispositivo, è possibile trascinare il bordo della tela per vedere il layout a qualsiasi larghezza desiderata.

Questo approccio ti dà un feedback immediato e realistico, quasi come lavorare direttamente all'interno di un browser web. Durante la progettazione di punti di interruzione più ampi rispetto alla finestra corrente, la tela si regola in modo proporzionale, in modo da ottenere ancora uno sguardo accurato al tuo design, anche su schermi più piccoli.

L'esperienza rimane coerente mentre ti muovi tra i punti di interruzione. I controlli si comportano allo stesso modo e il tuo layout non si sposta inaspettatamente. Questa affidabilità riduce le congetture e la risoluzione dei problemi dal design reattivo, che può essere un mal di testa in altri costruttori di pagine.

Saperne di più

2. Preset del gruppo di opzioni

Funzione pubblicata l'11 marzo 2025

Option Group Preset è una delle nuove più interessanti funzionalità di Divi 5, ampliando le tue capacità di costruire un sistema di progettazione che funzioni per te. I preimpostazioni del gruppo di opzioni sono i blocchi del tuo design. Mentre i preset di elementi ti blocca nello stile di un particolare elemento, i preimpostazioni del gruppo di opzioni di Divi 5 funzionano su qualsiasi tipo di elemento.

È possibile creare stili riutilizzabili per proprietà di progettazione specifiche, come tipografia, bordi, ombre o sfondi e mescolare questi stili in diversi elementi. Ad esempio, potresti creare un preimpostazione per il tuo stile di intestazione, un altro per lo stile dei pulsanti e un terzo per le ombre della scatola.

Una volta impostati, è possibile applicare questi stili a qualsiasi elemento compatibile con un clic, indipendentemente dal fatto che si tratti di un modulo di testo, di un blurb, di inviti all'azione o persino a contenitori come sezioni e righe.

Perché questo è importante per il tuo flusso di lavoro

Questo è un risparmio di tempo quando è necessario aggiornare il tuo design. Dì che decidi di cambiare il raggio del confine su elementi in tutto il tuo sito. Invece di cacciare ogni pulsante, immagine e sezione, si modifica semplicemente il bordo predefinito una volta e ogni elemento che utilizza quel preimpostazione aggiorna automaticamente.

La possibilità di lavorare su diversi tipi di elementi rende davvero utili i preset del gruppo di opzioni di Divi 5. Lo stesso stile di bordo può applicarsi a un modulo, colonna, riga o sezione. Questa compatibilità incrociata risparmia ore di lavoro di stile ripetitivo.

Questa flessibilità fa un ulteriore passo avanti. I preset del gruppo di opzioni di Divi si estendono oltre le opzioni di styling di base. Coprono anche funzionalità basate su script come display condizionali, video di sfondo HTML ed effetti di scorrimento. Questo ti dà un controllo costante sullo stile statico e sui comportamenti interattivi sul tuo sito.

Saperne di più

3. Unità avanzate

Funzione pubblicata il 19 marzo 2025

Divi 5 ha migliorato la sua gestione delle unità CSS, rendendo molto più semplice il design reattivo.

Ora puoi accedere all'intera gamma di unità CSS necessarie per il web design di oggi direttamente all'interno del costruttore. Ciò significa che è possibile utilizzare pixel (PX), percentuali (%), EMS (EM), root EMS (REM), unità di visualizzazione (VW, VH, VMIN, VMAX) e scelte ancora più avanzate come la larghezza del personaggio (CH) o le unità frazionarie (FR) per le griglie.

All'inizio potrebbe sembrare un minore aggiornamento, ma in realtà ti dà molta più flessibilità per la costruzione di layout reattivi.

Perché le diverse unità contano

Quando costruisci siti che vuoi avere un bell'aspetto su telefoni, tablet e desktop, usando solo i pixel possono creare mal di testa. Un elemento largo 300px sembra a posto sul desktop ma potrebbe rompere il layout sul cellulare.

Con unità avanzate come ViewPort, è possibile impostare lo stesso elemento su 80VW (80% della larghezza di Viewport) e si ridimensionerà perfettamente su tutti i dispositivi. Oppure usa le unità REM per mantenere il testo proporzionale alla dimensione del carattere di base, rendendo molto più semplice le regolazioni dell'accessibilità.

Ora, combina le unità con funzioni CSS come calc (), min (), max () e clamp () e vedere la vera magia accadere. Divi 5 supporta tutti questi, permettendoti di creare layout veramente fluidi che si adattano a qualsiasi dimensione dello schermo.

Ad esempio, è possibile impostare un'altezza della sezione su CALC (80VH - 60px) per farla prendere la maggior parte dello schermo lasciando spazio a un'intestazione. Oppure usa un morsetto (16px, 4vw, 22px) per il testo che cresce con lo schermo ma rimane entro limiti leggibili.

La flessibilità del morsetto ()

La funzione CLAMP () merita un'attenzione speciale perché risolve molti problemi di progettazione reattivi. Ti consente di impostare dimensioni minime, preferite e massime in una sola andata, rendendo il funzionamento del morsetto () una caratteristica preferita di molti web designer.

Potresti volere intestazioni che crescono con le dimensioni dello schermo ma rimani leggibile. In un modulo di intestazione, è possibile impostare la dimensione del testo su un morsetto (36px, 5VW, 72px). L'intestazione non sarà inferiore a 36px o più grande di 72 px, ma tra quelle dimensioni, si ridimensionerà al 5% della larghezza del viewport.

Questo crea transizioni fluide tra le dimensioni dello schermo senza punti di interruzione. Il testo è troppo grande su tablet o troppo piccolo su monitor di grandi dimensioni non sarà un problema. La tua tipografia respira con il layout.

Comprendiamo anche che diversi elementi di design necessitano di unità diverse, motivo per cui le unità avanzate di Divi 5 funzionano in modo malle, non solo con la tipografia, ma i margini, l'imbottitura e altri valori di spaziatura:

• Per il testo, le unità REM mantengono tutto in proporzione. Se si imposta il testo del corpo su 1Rem e le intestazioni su 2,5REM, la modifica della dimensione del carattere di base aggiorna tutto proporzionalmente.
• Per i layout, puoi provare a miscelare unità fisse e fluide. Una barra laterale potrebbe funzionare meglio a 300px, mentre il contenuto principale potrebbe utilizzare CALC (100% - 350px) per riempire lo spazio rimanente.
• Per la spaziatura, le unità EM creano imbottitura che si ridimensiona con la dimensione del testo. Ciò mantiene le proporzioni di progettazione coerenti anche quando le dimensioni del testo cambiano.

Gioca anche bene con altre caratteristiche discusse

La cosa particolarmente bella è che non è necessario scrivere CSS personalizzati per usare queste unità. Sono costruiti direttamente nell'interfaccia visiva. Puoi sperimentare valori diversi e vedere i risultati istantaneamente, rendendo la curva di apprendimento molto più delicata che codificare queste soluzioni a mano.

Queste unità sono integrate con altre funzionalità in Divi 5. È possibile archiviare il tuo valore, utilizzando qualsiasi unità che preferisci, come variabili di progettazione, quindi applicarle a livello di sito tramite preset del gruppo di opzioni. Questo crea una reazione a catena di un buon design che scorre attraverso l'intero sito. Per esempio:

• Crea una variabile numerica come la dimensione dell'intestazione: morsetto (26px, 5vw, 82px); Per le tue intestazioni H1. Applicare questa variabile al preimpostazione del testo di intestazione. Le vostre intestazioni ora si ridimensionano tra 26px su dispositivi mobili e 82px su desktop, con un calcolo di 5VW fluido tra tali dimensioni.
• Impostazione di una variabile numerica su un morsetto (20px, 5vw, 80px) e quindi utilizzandola come margini, si dispone di una spaziatura stretta sul cellulare e generosa spazio di respirazione sul desktop, con una transizione regolare tra.
• Imposta una spaziatura di base utilizzando unità di spazio variabile numero: 20px e usalo con calc () nei preset di layout. Ad esempio, applicare CALC (var (–Ispace-Unit) * 2) per lacune più grandi e calc (var (–unit-space-unit) / 2) per spazi più stretti. Quando si aggiorna il valore di base, tutta la spaziatura derivata si regola in modo proporzionale.

Questo graffia solo la superficie. Mescolando queste configurazioni, è possibile creare siti Web che sfruttano la semplicità di Divi e le nuove funzionalità.

Saperne di più

4. Variabili di progettazione

Funzione pubblicata il 3 aprile 2025

La maggior parte dei costruttori di siti Web ha modi per impostare colori e caratteri globali. Divi 5 prende questa idea e corre con essa. Puoi creare variabili non solo per colori e caratteri, ma anche per numeri, immagini, testo normale e persino collegamenti Web.

Pensa a questo: la maggior parte dei costruttori ti consente di impostare un colore primario che si aggiorna ovunque. E se vuoi cambiare il tuo numero di telefono su più pagine? O scambiare un'immagine ricorrente utilizzata in tutto il tuo sito? Divi 5 gestisce queste situazioni con facilità.

Tutte le tue variabili vivono in un semplice pannello nella barra laterale del Visual Builder. È pulito, facile da trovare e mette tutto in un punto.

Una corrispondenza perfetta con i preset

Le variabili di progettazione e i preset (entrambi i preset del gruppo di opzioni e preset di elementi) lavorano insieme per realizzare un design mantenibile e scalabile. Puoi creare preset che fanno riferimento alle tue variabili, creando un sistema di progettazione flessibile.

Ad esempio, è possibile creare una variabile di progettazione per il carattere di intestazione principale, quindi utilizzare quella variabile nella preimpostazione della tipografia intestazione. Se decidi di cambiare il carattere in seguito, devi aggiornare la variabile solo una volta, non il preimpostazione stessa. Questo crea un altro livello di controllo che la maggior parte dei costruttori semplicemente non offre.

Questo approccio a due strati ti dà più controllo di altri costruttori. Separare l'aspetto di qualcosa (variabili) da dove appare (preset).

È possibile utilizzare le variabili numeriche con funzioni CSS come Calc () e CLAMP () per creare design reattivi che si adattino perfettamente a diverse dimensioni dello schermo. Imposta una variabile per il ritmo di spaziatura del tuo sito e applicalo in tutto il layout per proporzioni coerenti che si ridimensionano magnificamente.

Quando si cambia una variabile, tutto utilizzandola si aggiorna subito. Questo trasforma quelle che potrebbero essere ore di lavoro in pochi secondi di clic.

Come questo aiuta a creare un design mantenibile

Diamo un'occhiata ad alcuni esempi pratici di variabili di design in azione:

• Mantieni il tuo marchio lo stesso ovunque: imposta variabili per i tuoi colori, caratteri e spaziatura. Usali in preset attraverso il tuo sito per un aspetto coerente.
• Esegui una vendita di vacanze: crea variabili di immagine per grafica della campagna e variabili di testo per una copia promozionale. Quando la stagione termina, aggiornali una volta per aggiornare l'intero sito.
• Stili di confine: crea una variabile numerica per il raggio del bordo, come 10px, e applicalo su tutti i preset di pulsanti, moduli di immagine e schede. Se la direzione del design cambia, un aggiornamento influisce sugli angoli a tutto tondo in tutto il sito.
• Rendi facili gli aggiornamenti dei clienti: quando si costruisce i cantieri per i clienti che dovranno fare aggiornamenti, le variabili di progettazione brillano. Imposta variabili per i contenuti che cambieranno spesso, come informazioni di contatto o orario di lavoro. Possono aggiornarli senza toccare le impostazioni di progettazione.

Le variabili di design funzionano anche con il costruttore di temi di Divi. Ciò significa che le tue intestazioni, piè di pagina e modelli utilizzano lo stesso pool variabile delle tue pagine. A differenza di altri sistemi che ti bloccano in schemi rigidi, le variabili di Divi 5 mantengono le cose flessibili mentre ti aiutano a rimanere organizzato.

Saperne di più

5. Righe nidificate

Funzione pubblicata il 17 aprile 2025

Divi 5 introduce righe nidificate, il che ti dà un maggiore controllo sui layout. Questa aggiunta consente di posizionare le righe all'interno delle colonne, creando layout complessi che non erano possibili nelle versioni precedenti senza codice personalizzato.

Con le righe nidificate, è possibile creare layout a griglia avanzati, blocchi di contenuti in stile caricatore e progetti basati su carte con molto meno sforzo. Hai bisogno di una sezione con colonne che contengono i loro layout multi-colonna? Ora puoi farlo direttamente nel costruttore.

Costruire con profondità

L'aggiunta di una fila nidificata funziona proprio come aggiungere qualsiasi modulo. Seleziona una sezione, fai clic sul pulsante Plus e scegli "Row" dalle opzioni. Da lì, puoi aggiungere una riga per creare una riga nidificata e riempirla di contenuti.

Questo cambiamento apparentemente semplice apre molte possibilità di progettazione. È possibile creare widget della barra laterale con le proprie strutture di colonna, costruire vetrine di prodotti con gallerie nidificate o tabelle di confronto delle funzionalità di progettazione con layout complessi.

La parte migliore è quanto naturalmente si adatta al tuo flusso di lavoro. Non c'è niente di nuovo da imparare. Stai solo usando le righe in più posti. Se sai come costruire con Divi, sai già come utilizzare le righe nidificate.

Le righe nidificate risolvono problemi reali per i costruttori di siti. Vuoi creare una sezione di servizi in cui ogni servizio ha il suo layout a due colonne? In precedenza, avresti bisogno di CSS personalizzati o soluzioni complesse. Ora è costruito proprio dentro.

Per i siti pesanti di contenuti, è possibile creare layout in stile riviste con larghezze di colonne miste e aree di contenuto nidificate. Ogni articolo o funzionalità può avere una propria struttura di colonna mantenendo il layout della pagina.

Solo il primo passo

Le righe nidificate sono solo l'inizio dell'evoluzione del layout di Divi 5. Il team sta lavorando per un sistema di layout basato su flexbox completo per rendere Divi ancora più flessibile.

Gli aggiornamenti futuri introdurranno ulteriori controlli di layout, offrendo ancora più opzioni per creare progetti complessi senza codice personalizzato. Questo approccio metodico garantisce che ogni nuova funzionalità funzioni perfettamente prima di passare alla successiva.

Invece di correre fuori dal cofano, il team di sviluppo Divi sta costruendo una solida base per il futuro del design del layout. Ogni passaggio si basa sull'ultimo, creando un sistema che sia sia a prova di futuro che facile da usare.

Saperne di più

6. Gruppi di moduli

Funzione rilasciata il 1 maggio 2025

Costruire siti Web spesso significa creare ripetutamente gli stessi modelli di contenuti. Progetti una carta membro del team perfetta, quindi trascorri venti minuti a ricreare per la prossima persona. I gruppi di moduli risolvono questo problema consentendo di impacchettare elementi correlati insieme in unità riutilizzabili.

Ecco quali cambia: invece di trattare ogni pezzo separatamente, lavori con blocchi completi. Una scheda di prodotto diventa una cosa che ti muovi, non sei moduli diversi che devi selezionare individualmente. Quando è necessario regolare la spaziatura su cinquanta schede di prodotti, si aggiorna il modello di gruppo una volta invece di modificare manualmente ciascuna carta.

Il vero vantaggio si presenta su siti più grandi. I progetti clienti con dozzine di membri del team, cataloghi di prodotti o elenchi di servizi diventano gestibili. Non stai facendo un lavoro di assemblaggio ripetitivo: ti stai concentrando sul contenuto e sulla messa a punto.

Creazione di combinazioni di moduli personalizzati

I gruppi di moduli aprono possibilità che i singoli moduli non possono di solito gestire. Costruisci una scheda di servizio in cui hai bisogno di un'immagine di sfondo, un'icona sovrapposta, un titolo, una descrizione e due pulsanti di azione: "Scopri di più" e "Ottieni citazione".

Con i gruppi di moduli, metti a strati questi elementi esattamente come li vuoi. Ciò diventa utile per i contenuti che non si adattano ai modelli standard.

Per le tabelle dei prezzi, è possibile utilizzare tre righe nidificate all'interno di un gruppo di moduli: un'intestazione nella prima riga, i dettagli del prezzo nella seconda e un elenco di funzionalità nel terzo. Questo ti dà il controllo individuale su caratteri, colori e spaziatura che il modulo del tavolo dei prezzi integrato non offre.

Lo stesso approccio funziona per le testimonianze utilizzando i moduli icona, immagine, intestazione e testo disposti all'interno della struttura del gruppo. Ottieni più flessibilità del layout rispetto al modulo di testimonianza standard mantenendo tutto gestibile come una singola unità.

Il vantaggio chiave è la combinazione del controllo del layout dell'edificio da zero con la comodità di trattare più elementi come un unico pezzo.

Costruire librerie di componenti riutilizzabili

Dopo aver creato gruppi di moduli efficaci, salvali come elementi globali. Questo crea una libreria di componenti che cresce con ogni progetto. Quando perfezi lo stile, i tuoi aggiornamenti di layout di testimonianze su venti pagine e la vetrina del tuo prodotto rimane coerente mentre iterite sul design.

Invece di iniziare da zero ogni volta che costruisci una pagina, inizi con layout coerenti e li adatti a nuove pagine e requisiti di layout.

Abbraccia la facilità dell'integrazione di Divi Cloud. Con questo strumento, i componenti possono passare senza sforzo da un progetto all'altro. Supponiamo che tu sviluppi un solido set di gruppi di moduli per un determinato sito client; Ora puoi sfruttarli come base per i prossimi incarichi. In questo modo, ogni progetto ottiene il vantaggio di soluzioni precedenti ma mantiene la sua estetica distinta.

Funziona perfettamente con il sistema di progettazione di Divi 5

I gruppi di moduli diventano davvero interessanti quando li usi con variabili di design e preset di gruppi di opzioni. Dì che costruisci un gruppo di testimonianze: citazione, nome dell'autore, azienda e foto.

Invece di impostare colori fissi, fai riferimento alle variabili di colore del tuo marchio. Per lo styling di citazione, si crea un gruppo di opzioni preimpostato per la tipografia che include il carattere, le dimensioni e l'altezza della linea personalizzate. Per il nome dell'autore, si applica un gruppo di opzioni di intestazione diverso.

Ora salva quel gruppo di moduli come elemento globale. Questi preset del gruppo di opzioni collegano ogni testimonianza sul tuo sito al sistema di progettazione. Se il client desidera un grigio più scuro, modifica la variabile una volta e tutti i moduli del gruppo di testimonianze aggiorneranno. Se è necessario regolare lo styling di preventivo, modifica una volta il gruppo di opzioni di tipografia; Ogni citazione di testimonianze cambierà all'istante.

Questo batte la gestione di singoli moduli sparsi ovunque. I gruppi di moduli utilizzano i preimpostazioni del gruppo di opzioni per bordi, sfondi e stile di testo, quindi aggiornando eventuali flussi preimpostati attraverso tutti gli elementi raggruppati automaticamente.

Saperne di più

7. Attributo Manager

Funzione rilasciata il 16 maggio 2025

Hai disegnato un pulsante in un modulo Call to Action. I colori funzionano e gli effetti hover sembrano buoni. Ora vuoi quegli stessi stili di pulsanti in un modulo di contatto, ma non vuoi il titolo o lo sfondo del CTA.

La copia normale non funzionerà qui: otterresti tutto o niente. Divi 5 ti consente di copiare solo le parti dei pulsanti grazie alla sua funzione di gestione degli attributi. Fare clic con il tasto destro del mouse sul CTA, scegli cosa copiare,

Quindi incolla solo quegli stili di pulsanti sul modulo di contatto.

Scegli cosa viaggi

Divi 5 divide ogni elemento in diversi tipi di attributi. Scegli quali copiare:

• Tutti gli attributi: tutto viene copiato
• Attributi di design: colori, spaziatura, preset, ma nessun testo o immagini
• Attributi di stile: solo le tue modifiche personalizzate
• Attributi del contenuto: solo testo e immagini
• Preset - Solo incarichi preimpostati

Di 'che vuoi uno stile di un pulsante ma non il suo testo. Copia attributi di progettazione. Vuoi una preimpostazione di sfondo di una sezione ma non la sua imbottitura? Copia solo preset.

Funziona tra diversi moduli

È possibile copiare gli attributi da un tipo di modulo e incollarli su un tipo diverso. Ad esempio, è possibile copiare da un modulo Call to Action e incollarlo su un modulo di contatto. Divi 5 capisce quali impostazioni funzionano su entrambi i moduli e ignora il resto.

Questo aiuta quando si costruisce cantieri che richiedono lo stesso stile su diversi tipi di moduli. Non è necessario ricreare i colori dei pulsanti per ogni forma, testimonianza o altro modulo che utilizza i pulsanti.

Scorciatoie a livello di gruppo

Il sistema di attributi approfondisce la gestione del gruppo selettivo. Salta interamente i pannelli delle impostazioni. Fare clic con il pulsante destro del mouse e applicare gruppi di attributi specifici direttamente dal menu di contesto.

Hai copiato un modulo con il preimpostazione del pulsante perfetto? Puoi incollare solo quel pulsante preimpostato ad altri elementi attraverso il menu selettivo. Non c'è caccia a schede e nessuna impostazione di impostazione.

La stessa precisione funziona per il ripristino. Pulisci tutti gli attributi di design mantenendo intatti i contenuti. Oppure ripristina solo preimpostazioni preservando le sostituzioni dello stile personalizzato.

Velocità attraverso scorciatoie

Ogni azione ottiene scorciatoie da tastiera che si presentano proprio nei menu di contesto. Impara alcune combinazioni chiave e lo styling accelera. Le scorciatoie rimangono coerenti in tutti i tipi di attributi, quindi le dita apprendono rapidamente i modelli.

Questo va oltre il salvataggio dei clic. Quando si costruiscono cantieri con centinaia di elementi, queste microefficienza si aggravano in ore di tempo risparmiato. Il lavoro manuale ripetitivo diventa azioni rapide e mirate.

Gioca bene con il tuo sistema di progettazione

Il gestore attributi si collega direttamente all'ecosistema preimpostata di Divi 5. Quelle connessioni di sistema viaggiano lungo quando si copiano un modulo utilizzando preimpostazioni del gruppo di opzioni e variabili di progettazione.

Attributi in pasta che includono preset e quei nuovi elementi si collegano immediatamente al sistema di styling globale. Aggiorna un preimpostazione in seguito e ogni elemento copiato riflette automaticamente la modifica. Il tuo sistema di progettazione rimane connesso mentre costruisci rapidamente e duplicano elementi.

Saperne di più

8. Impostazioni Ricerca e filtraggio

Funzione rilasciata il 29 maggio 2025

Costruire siti Web significa modificare le impostazioni. I moduli Divi racchiude dozzine di opzioni nei loro pannelli e la caccia attraverso le schede per quel campo a colori può consumare la giornata. Divi 5 riporta la funzione di ricerca da Divi 4, ma la rende meglio.

Ottieni una barra di ricerca nella parte superiore di ogni pannello delle impostazioni. Digita ciò di cui hai bisogno e Divi mostra solo opzioni di corrispondenza. Cerchi "bordo"? Ogni impostazione legata al confine appare mentre tutto il resto svanisce. Hai bisogno di regolare "imbottitura"? Tutti i controlli di spaziatura compaiono all'istante.

Questo elimina i clic e lo scorrimento che rallenta il tuo lavoro. Invece di aprire le schede e la caccia attraverso i gruppi, puoi trovare ciò di cui hai bisogno in pochi secondi.

Filtra da quello che hai cambiato

Il vero risparmio di tempo è il filtro "modificato". Fai clic su di esso e vedi solo le impostazioni che hai già regolato. Questo aiuta quando prendi un pacchetto di layout o un sito di avviamento e vuoi vedere cosa è stato personalizzato.

Dì che importi un layout aziendale ma vuoi cambiare i colori. Premi il filtro modificato e individua ogni scelta di colore personalizzata senza scavare ogni modulo. Puoi vedere quali caratteri sono stati cambiati, quale spaziatura è stata ottimizzata e quali effetti sono stati aggiunti.

Funziona bene anche per i progetti dei clienti. Quando qualcuno chiede cosa hai personalizzato sul proprio sito, il filtro modificato mostra chiaramente il tuo lavoro.

Opzioni di filtraggio intelligenti

Oltre al filtro modificato, si ottiene l'ordinamento impostando i tipi. Quando si aggiorna la palette, il filtro "Colori" mostra ogni campo di colore contemporaneamente. Quando sono necessari cambiamenti tipografici, i filtri "Font Fongs" e "Font Pwers" rivelano le impostazioni di testo su tutti i moduli.

Il sistema sa quali impostazioni contano di più. Colori e caratteri ottengono i loro filtri perché sono i cambiamenti più comuni che le persone apportano. Le dimensioni vengono raggruppate poiché le regolazioni della spaziatura si verificano frequentemente.

Questi filtri salvano clic quando si apportano modifiche a livello del sito. Invece di aprire ogni modulo singolarmente, si lavora tramite elenchi filtrati delle impostazioni che è necessario modificare.

Saperne di più

Come Divi 5 si imbatte in opzioni popolari

Il mercato dei costruttori di siti Web è affollato di opzioni, ma Divi 5 si distingue grazie ad alcune funzionalità davvero nuove. Ecco uno sguardo a ciò che rende Divi 5 diverso:

Cosa significa per i tuoi progetti

La combinazione di funzionalità di Divi 5 crea un sistema di progettazione che altri costruttori non possono corrispondere. I preset del gruppo di opzioni e i gruppi di moduli da soli hanno messo Divi 5 davanti ai concorrenti.

Quando le variabili di progettazione funzionano con preset e gruppi di moduli, si ottiene qualcosa di versatile. Variabili di riferimento all'interno dei preimpostazioni, applicale a elementi raggruppati e la modifica dei valori aggiorna ogni elemento automaticamente sul tuo sito. Aggiungi le prossime funzionalità Flexbox e Loop Builder al mix e ti ritroverai a creare qualsiasi sito Web senza la necessità di codifica personalizzata.

Cosa succederà dopo?

La roadmap Divi 5 mostra continui aggiornamenti che atterranno presto. I nostri sviluppatori, divisi in sette team, lavorano a tempo pieno su funzionalità diverse, spese aggiornamenti almeno ogni due settimane. Ecco un'anteprima di ciò che puoi aspettarti nelle prossime settimane:

Layout Flexbox

La più grande modifica è il sistema di layout Flexbox completo, che è a poche settimane dal completamento. Questo sostituirà completamente il modo in cui si costruiscono layout. Otterrai nuovi modelli di riga, centratura verticale automatica, avvolgimento dei contenuti e distribuzione della spaziatura attraverso controlli visivi anziché CSS personalizzati.

I gruppi di moduli sono appena stati spediti come contenitori che raggruppano i moduli correlati insieme. In combinazione con Flexbox, è possibile creare layout di riviste, vetrine di prodotti con altezze abbinate e allineamenti complessi che in precedenza richiedevano soluzioni alternative. Le sezioni speciali scompaiono una volta che Flexbox arriva.

Loop Builder e WooCommerce Aggiornamenti

Basandosi sul sistema di layout Flexbox e sui gruppi di moduli, il Builder Loop ti permetterà di ripetere qualsiasi cosa: moduli singoli, gruppi o intere sezioni. A differenza di altri costruttori che ti bloccheranno in modelli, definirai ciò che si ripete e lo collegherà a contenuti dinamici. Anche i loop nidificati funzioneranno. Ad esempio, le categorie di blog che si aggireranno attraverso i post, con ogni post che mostra recensioni ad anello.

I moduli WooCommerce verranno ricostruiti da zero usando l'architettura di Divi 5. I moduli attuali funzioneranno attraverso la compatibilità all'indietro ma non interagiranno con preset o variabili. I moduli di nuovi prodotti saranno completati entro poche settimane, mettendo in pista il supporto di WooCommerce per la beta.

Colori avanzati

I colori relativi con tonalità, saturazione e leggerezza (HSL) ti consentono di costruire relazioni matematiche a colori. Imposta il tuo colore primario una volta, quindi genera variazioni automaticamente: "Blu primaria ma 20% più chiara" o tonalità complementari che si aggiornano quando si cambia la base.

Pianificazione beta e migrazione

La beta inizia quando i tre obiettivi sono completi: una migliore compatibilità all'indietro per i siti esistenti, il supporto del modulo WooCommerce completo e le correzioni di bug continue basate sul feedback Alpha.

Se facciamo i progressi attuali, suggerisce una beta in un paio di mesi. Il team sta anche lavorando sul backend in modo che i siti Divi 4 possano migrare senza richiedere modifiche. I moduli di terze parti dal mercato Divi necessitano della piena compatibilità.

Per i nuovi progetti, Divi 5 Alpha offre capacità sufficienti per la maggior parte delle build. I miglioramenti delle prestazioni da soli giustificano lo switch. I siti esistenti traggono beneficio dall'attesa della beta a meno che non siano necessarie nuove funzionalità specifiche.

Quando arriva la beta, si ottiene il set di funzionalità completo più fiducia da test approfonditi. La versione ufficiale segue poco dopo, dando una solida base per progetti futuri.

Pronto a provare Divi 5? Ecco come iniziare

Queste funzionalità esclusive Divi 5 lavorano insieme per creare qualcosa di diverso. Invece di combattere il tuo costruttore per progetti coerenti, imposti sistemi che si mantengono. Invece di ricostruire ripetutamente gli stessi stili, crei una volta e riutilizzo ovunque - e questo è solo l'inizio!

Quindi, vai avanti nella curva oggi costruendo un nuovo sito Web utilizzando Divi 5. È disponibile per tutti i membri Divi gratuitamente. Basta andare all'area del tuo account e prendi una copia.

Una volta installato WordPress, Carica Divi 5 poiché caricare un tema normale: Aspetto> Temi> Aggiungi nuovo> Tema Carica. Attiva il tema, accedi con le tue credenziali e costruisci! La tua prima build ti mostrerà perché abbiamo ricostruito tutto da zero.

Ricorda: usa Divi 5 solo per nuovi siti Web in questo momento. Non raccomandiamo di migrare i siti esistenti durante la fase alfa.