Presentazione di variabili di design per Divi 5

Sono entusiasta di introdurre variabili di design per Divi 5, una nuova funzionalità che migliorerà significativamente il flusso di lavoro di progettazione di Divi e darà agli utenti Divi un grave vantaggio rispetto ad altri costruttori.

Puoi definire variabili per qualsiasi cosa, come colori, caratteri, numeri, immagini e testo e collegarli a elementi e preset Divi. Quando si aggiorna una variabile, la progettazione del tuo sito Web e la modifica dei contenuti.

La sinergia tra variabili e il nuovo sistema di design basato su preset di Divi è fantastica. Lascia che ti mostri come funziona.

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

Divi diventa "globale" con una gestione variabile

Grazie al sistema di colore globale di Divi, potresti già avere familiarità con il concetto di variabile di design. Un colore globale è un tipo di variabile di design. Con questo aggiornamento, tuttavia, stiamo introducendo tutto Global! Inoltre, gestire le tue impostazioni globali è più facile che mai, grazie a un nuovo gestore variabile.

Creazione di nuove variabili

L'icona delle variabili nella barra laterale sinistra aprirà il gestore variabile del tuo sito Web. Aggiungi una nuova variabile, dai un nome e un valore, quindi è possibile collegare quella variabile in impostazioni pertinenti in qualsiasi pagina. Divi attualmente supporta sei tipi di variabili che coprono tutti i campi di input nativi di Divi:

• Colori : i colori sono essenziali per ogni sito Web; La maggior parte dei siti Web utilizza solo da tre a quattro colori primari. Definire delle variabili di colore e utilizzarle tramite il tuo sito Web significa regolare la tavolozza dei colori dell'intero sito Web in pochi secondi.
• Fonti : l'era di lavorare con i caratteri statici è finita. Inoltre, non sei più limitato alle impostazioni dei caratteri globali nel personalizzatore del tema. Puoi definire i caratteri del tuo sito web come variabili e gestirli tutti in un unico posto.
• Numeri : è possibile utilizzare le variabili numeriche per progettare il sistema di dimensionamento del tuo sito Web. Ad esempio, è possibile utilizzare una dimensione standard del raggio di confine in tutti gli elementi. Trasformare questo in una variabile ti consentirà di regolare le dimensioni degli angoli arrotondati modificando una singola variabile. Altri usi quotidiani includono la definizione delle dimensioni del testo del tuo sito Web e le altezze della linea, le larghezze dei contenitori e la spaziatura e tutto il resto.
• Immagini : usi la stessa immagine su più pagine? Ad esempio, potresti avere un'immagine di sfondo standard che funge da motivo di marchio familiare. Se lo trasformi in una variabile, aggiornare il tuo marchio lungo la strada è facile.
• Testo : le variabili non sono limitate al design; Puoi anche definire le variabili di testo. Ad esempio, se trasformi il numero di telefono della tua azienda e l'indirizzo in variabili di testo, non dovrai andare a caccia di tutti i luoghi che hai usato quelle variabili quando i dettagli della tua attività cambiano.
• URL : abbiamo anche lanciato variabili URL, perché perché no? Potresti voler avere il collegamento di chiamata all'azione principale su diverse pagine durante i diversi periodi dell'anno (modificarlo durante una vendita, ad esempio). Invece di aggiornare quell'URL ovunque, aggiorna la singola variabile.

Usando variabili in elementi e preset

Fai clic sull'icona delle variabili sopra le impostazioni per scegliere tra un elenco di variabili pertinenti e contenuti dinamici dal tuo sito Web.

Il sistema di contenuti variabili e dinamici di Divi è stato esteso a tutti i campi, dove in precedenza era disponibile solo nei campi di contenuto. Ciò significa che è possibile assegnare variabili e contenuti dinamici a campi numerici, campi di carattere, ecc.

Esempi variabili di progettazione

Le variabili di design sono strumentali e diventeranno rapidamente una componente principale del flusso di lavoro di progettazione Divi. Ma se il concetto non ha fatto clic, lascia che ti dia alcuni esempi.

Esempio uno: gestire i caratteri globali

Come puoi usare le variabili di design per migliorare il tuo flusso di lavoro? Innanzitutto, consideriamo le variabili del carattere.

La maggior parte dei siti Web utilizza da due a tre caratteri. Probabilmente hai trascorso del tempo a configurare i caratteri del tuo corpo e del titolo desiderati in vari elementi e preset.

E se volessi cambiare le cose? Anche se hai progettato il tuo sito Web in modo ottimale con i preset, può richiedere tempo per tornare indietro e cambiare i caratteri. Potresti nemmeno ricordare tutti i luoghi che hai usato un carattere particolare.

Ecco dove arrivano le variabili del carattere.

Ho costruito il sito Web nel video sopra usando tre variabili di carattere: un carattere del titolo, un carattere del corpo e un carattere evidenziato.

L'aggiunta della variabile del carattere del titolo a elementi come il mio preimpostazione Blurb predefinita è facile. Dal momento che non ho mai usato i valori dei caratteri statici ma invece collegati alle mie variabili, i caratteri sul mio sito Web sono del tutto dinamici.

Modificare il carattere del titolo del mio sito Web è facile come l'aggiornamento della variabile del carattere del titolo.

Esempio due: gestire le dimensioni globali

Puoi fare la stessa cosa con le dimensioni del testo.

Per il sito Web nel video qui sotto, ho definito una serie di otto dimensioni di testo per vari livelli di intestazione e stili di testo del corpo. Quando aggiorno il mio preimpostazione Blurb predefinita e assegno la variabile della dimensione del testo di intestazione media, tutti i miei titoli di blurb ereditano il valore da quella variabile.

Dato che baso le dimensioni del testo del mio sito Web sulle variabili, posso gestire le dimensioni del testo del mio sito Web interamente dal gestore delle variabili.

Esempio tre: globalizza l'intero sito Web

Nel video sopra, puoi vedere un sito Web sfruttare la piena potenza delle variabili. Tutti i colori sono variabili, così come i caratteri, le dimensioni del testo, le dimensioni del raggio di confine e i valori di spaziatura nei miei elementi del contenitore.

Non solo, ma ho anche trasformato il contenuto condiviso in variabili. Il nome, il numero di telefono e l'indirizzo della mia azienda sono variabili di contenuto.

Anche l'immagine di sfondo, un motivo familiare del marchio in tutto il sito Web, è una variabile di immagine che posso facilmente cambiare.

Prova Divi 5 oggi

Le variabili di design per Divi 5 sono disponibili oggi ed è una delle tante funzionalità 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.

Sheak PEEK: righe nidificate

Stiamo costruendo caratteristiche velocemente . Ogni volta che finiamo una nuova funzionalità, ne iniziamo una nuova. Ogni volta che iniziamo una nuova funzione, ti do una sbirciatina.

Nel caso in cui te lo avessi perso, dai un'occhiata alla funzione della scorsa settimana, dove ho mostrato righe nidificate. Righe all'interno delle file! È un'idea semplice ma un primo passo essenziale per creare un sistema di layout più flessibile per Divi 5.

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.

Grazie per aver guardato e prima di andare, ho un favore da chiedere. Se sei qui per il ritorno Divi, commenta questo video; Leggerò ogni commento. Mi piacerebbe vedere questo video raggiungere duecento commenti , quindi controlla il conteggio dei commenti e prestandoci una mano se puoi. È un ottimo modo per alimentare l'algoritmo e, soprattutto, ci piace chattare con te.

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.