Come sostituire gli stili statici con le variabili di design di Divi 5

Se hai mai modificato i colori, l'imbottitura o i caratteri di un modulo alla volta, probabilmente ti sei reso conto di quanto possano essere i cambiamenti di stile manuale lenti, soggetti a errori e noiosi.

Divi 5 introduce un modo più intelligente per gestirlo. Con variabili di progettazione e trova e sostituire, è possibile aggiornare gli stili statici attraverso il layout e creare un sistema di progettazione riutilizzabile in pochi minuti. Vediamo come.

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

Cosa sono gli "stili statici"?

Quando si importa un layout Divi o si utilizza una sezione pre-progettata, tutto, come caratteri, colori, spaziatura e bordi, viene già impostato. Se un layout non utilizza preset, noterai che questi valori vengono applicati a livello di elemento.

Un'intestazione potrebbe avere la dimensione del carattere digitata manualmente, un pulsante potrebbe utilizzare un codice colore specifico e l'imbottitura o la spaziatura potrebbero utilizzare numeri fissi. Questi valori applicati direttamente sono chiamati stili statici.

E mentre all'inizio sembrano innocui, possono rapidamente diventare un problema quando si desidera apportare modifiche. Il problema con gli stili statici è che impiegano più tempo per gestire. Se vuoi cambiare il colore di tutti i tuoi pulsanti o regolare la spaziatura tra le sezioni, devi modificarne manualmente ciascuno. È lento e frustrante.

Ora, immagina di aggiornare manualmente un marchio del sito Web completo o di lavorare su un layout complesso pieno di stili ripetuti. Molti designer hanno condiviso quanto possa essere frustrante questo processo. Ma per anni non c'era un modo affidabile per risolverlo. Ecco perché abbiamo costruito una soluzione più intelligente in Divi 5.

Come Divi 5 semplifica la sostituzione di stili statici

Uno dei nostri obiettivi con Divi 5 è rendere il flusso di lavoro di progettazione più veloce e meno ripetitivo. Per aiutarti, abbiamo aggiunto due potenti funzionalità: Variabili di progettazione , che ti consentono di centralizzare i tuoi stili e trovare e sostituire , che ti consente di aggiornarli immediatamente attraverso il layout. Capiamoli in dettaglio.

Le variabili di design ti consentono di definire i tuoi stili globali

Con Divi 5, puoi finalmente costruire visivamente il tuo framework di design e utilizzarlo per modificare rapidamente gli stili del tuo marchio.

Invece di applicare manualmente lo stesso colore, carattere o spaziatura su ogni modulo, Divi 5 ora ti consente di salvare quei valori come variabili di design. Questi sono valori riutilizzabili a cui puoi fare riferimento in tutto il tuo sito per rendere il tuo design più coerente e più facile da mantenere.

All'interno del Visual Builder, il gestore variabile consente di creare e organizzare variabili in sei tipi diversi: colori, caratteri, numeri (come spaziatura o dimensioni), testo, immagini e collegamenti.

È possibile salvare ogni variabile con un nome chiaro, come l'imbottitura della sezione, quindi trovarla e riutilizzarlo è più facile. A differenza della scrittura manualmente delle variabili CSS, l'interfaccia di Divi ti consente di gestire questi valori visivamente senza toccare il codice.

Anche l'applicazione di queste variabili salvate è più semplice. Durante la personalizzazione di un modulo, vai su Impostazioni, individua l'icona di Gestione variabili e scegli la variabile dall'elenco.

Vedrai il vero vantaggio quando è il momento di apportare modifiche. Diciamo che vuoi cambiare l'imbottitura ovunque. Invece di modificare dozzine di moduli, basta aggiornare i valori una volta in Variable Manager e si aggiorna sul tuo sito.

Si noti che i valori che cambiano in tempo reale nei campi di impostazione applicati? Questo è il potere di un sistema di progettazione globale.

E questo non è limitato agli stili di progettazione. Per gestire in modo efficace contenuti ripetuti, puoi anche salvare testo, immagini e collegamenti, come un indirizzo, e -mail o slogan aziendale, come variabile di contenuto. Non è più necessario copiare incollati, inserirlo come contenuti dinamici e rimarrà coerente sul tuo sito.

Impara tutto sulle variabili di design

Trova e sostituire consente di passare dagli stili statici a quelli globali

La funzione di Find and Sostituzione di Divi 5 consente di aggiornare rapidamente i valori di stile attraverso il layout senza modificare ogni modulo singolarmente. È progettato per aiutarti a cambiare valori statici come colori, caratteri, spaziatura o qualsiasi altra impostazione che si ripete tra le sezioni da un singolo punto di partenza con pochi clic.

Per usarlo, fai clic con il tasto destro su qualsiasi campo di stile all'interno del Builder Visual o passa e fai clic sui tre punti. Vedrai l'opzione Find & Sostituisci nel menu a discesa.

Questo apre un nuovo pannello di ricerca e sostituzione . Qui, puoi apportare le modifiche desiderate e applicarle alla rinfusa.

• (1.) Elemento sorgente: l'impostazione che stai prendendo di mira (ad esempio, testo, colore o spaziatura). Apri il menu a discesa e noterai che in realtà è la gerarchia dei livelli.
• (2.) Trova valore: il valore esatto che si desidera sostituire, come un carattere specifico o un codice colore.
• (3.) Sostituire il valore: il nuovo valore o la variabile che si desidera applicare invece.
• (4.) Trova e sostituisci nella posizione: scegli dove applicare la modifica. Questo modulo, la sezione o l'intera pagina.
• (5.) Trova e sostituisci nel tipo di elemento: decidere se la modifica dovrebbe essere applicata a tutti gli elementi o solo tipi di moduli specifici.
• (6.) Sostituire solo campi identici: quando abilitato, le sostituzioni si verificano solo se sia l'impostazione che il valore corrispondono esattamente.

Ecco come funziona. Supponiamo che tu voglia cambiare il carattere dell'intestazione utilizzato attraverso la pagina. Invece di andare modulo per modulo, utilizzeremo il pannello Trova e sostituire.

Quando lo apri dalle impostazioni di un'intestazione, l' elemento di origine viene selezionato automaticamente, quindi non devi sempre sceglierlo manualmente.

(È inoltre possibile fare clic su diversi elementi e le opzioni del pannello si regoleranno automaticamente.)

Nel valore di ricerca, immettere il valore da sostituire. Per il nostro esempio, è Medula 1, la corrente applicata. Nel valore di sostituzione , scegli il nuovo valore che desideri applicare. Selezioniamo Aclonica.

Quindi selezionare se si desidera aggiornare tutte le istanze nell'intera pagina o solo nella colonna, riga o sezione nella posizione Trova e sostituire in posizione. Mantieni la ricerca e la sostituzione nel tipo di elemento come tutti gli elementi poiché vogliamo di targeting per tutti i moduli di intestazione.

E questo è tutto. Basta premere Trova e sostituire e in pochi secondi vengono aggiornate 20 istanze di intestazione. Si noti che i caratteri del testo e dei pulsanti del corpo rimangono intatti? Questo perché usano valori diversi. Ed è così preciso il sistema.

Divi applica solo modifiche in cui trova una corrispondenza esatta. Ciò significa che puoi ripulire gli stili statici con sicurezza, senza incasinare disegni che non devono cambiare. Ma come si adattano le variabili di design qui?

Sono come la ciliegina sulla torta. È inoltre possibile utilizzare le variabili di progettazione nel campo Valore Sostituisci . Passa il mouse su di esso, fai clic sull'icona del gestore delle variabili e inserisci una variabile salvata.

Questo collega i tuoi stili a un sistema riutilizzabile a livello globale che è molto più semplice ed efficiente da aggiornare. Questo è esattamente il modo in cui sostituiremo tutti i nostri valori statici con le variabili di progettazione al nostro sito Web a prova di futuro per aggiornamenti più facili.

Impara tutto su Trova e sostituisci

Entrambe queste funzionalità (e molte altre) sono disponibili all'interno di Divi 5. Il costruttore è stato reinventato per offrire prestazioni più veloci, flussi di lavoro più intelligenti e maggiore controllo. Onestamente, leggere su di loro è eccitante, ma noterai il vero cambiamento quando sperimentate queste funzionalità per te stesso.

Come sostituire gli stili statici con variabili salvate

Ora che sai quali strumenti useremo, è tempo di vederli in azione.

Per guidarti attraverso il processo, ho importato il layout della pagina di destinazione del negozio di torte come esempio. I dettagli di progettazione di questo layout, come caratteri, colori e spaziatura, sono stati applicati come stili statici. Il modo tradizionale richiede di personalizzarlo modulo per modulo. Ma in questo tutorial, li sostituiremo passo dopo passo usando il flusso di lavoro che abbiamo appena coperto.

Ma prima di immergerti, prenditi un momento per scansionare il layout per i modelli. Cerca stili ripetuti, come lo stesso colore usato tra i pulsanti, dimensioni di carattere simili nelle intestazioni, una spaziatura costante tra sezioni o impostazioni di bordo identiche. Questi valori ripetuti sono i migliori candidati per le variabili di progettazione, soprattutto se è probabile che tu li cambini in seguito.

1. Salva le variabili di design

Dopo aver analizzato il layout del negozio di torte, ho identificato alcuni valori che appaiono costantemente attraverso la pagina e vorrei aggiornarli con i miei stili preferiti. Questi includono:

• Larghezza del bordo della riga
• Imbottitura dei pulsanti
• Testo di testa
• Testo del corpo
• Colore del testo del corpo

In questo momento, sono applicati come stili statici. Quindi, invece di ripetere manualmente le stesse impostazioni, le convertirò in variabili di design. Questo mi dà un framework semplice e riutilizzabile per aggiornare gli stili di pagina con pochi clic.

Cominciamo con la larghezza del bordo sulle file. Per creare e salvare una variabile, aprire il gestore variabile e scegliere il tipo. Per la larghezza del bordo di una riga, sceglierò la variabile numerica . Quindi, nomina la tua variabile e assegnalo un valore. Fai clic su Salva variabili.

Una volta salvata, questa variabile è pronta per essere riutilizzata con un clic. Verrà visualizzato ovunque la larghezza del confine possa essere impostata. Seguirò lo stesso processo per il testo di intestazione, il carattere del corpo, il colore del testo e l'imbottitura dei pulsanti. Queste variabili salvate ora formano le basi del linguaggio di progettazione del mio layout. Fai lo stesso.

In questo modo, se decidi di modificare la spaziatura dei pulsanti o cambiare il carattere in seguito, non dovrai aggiornare tutti i moduli uno per uno. Basta aggiornare la variabile e il resto si aggiornerà da solo.

2. Utilizzare Trova e sostituire per cambiare gli stili statici alle variabili

Con le nostre variabili di progettazione pronte, il passaggio successivo è sostituire i valori statici attraverso il layout usando Trova e sostituire. Cominciamo con l'imbottitura del pulsante.

In questo momento, ogni pulsante utilizza imbottitura inserita manualmente: 6px per l'opzione e il basso e 1px per sinistra e destra. Per portare coerenza e semplificare gli aggiornamenti, ho creato due variabili:

• Button-T = 12px per imbottitura superiore e inferiore.
• Button-L = 32px per imbottitura sinistra e destra.

Per applicarli, aprirò le impostazioni di tutti i pulsanti, vai su Design> Spacing> Implementazione , fai clic con il pulsante destro del mouse sul valore di imbottitura e scegli Trova e sostituisci dalle opzioni.

Nel pannello Trova e sostituito, sostituirò il valore statico esistente con la variabile salvata dal gestore variabile.

Dopo aver fatto clic su Trova e sostituire , tutte e cinque le istanze del pulsante attraverso la pagina Aggiorna istantaneamente per utilizzare i nuovi valori di imbottitura.

Puoi seguire gli stessi passaggi per qualsiasi altro stile statico che abbiamo identificato in precedenza. Usa Trova e sostituisci per scambiare ognuna con le tue variabili salvate e finirai con un layout completamente connesso al tuo sistema di progettazione globale.

3. Converti i tuoi stili preferiti in preset (opzionale)

Questo passaggio è facoltativo per l'ambito di questo articolo, ma è un modo potente per estendere il tuo sistema di progettazione.

Una volta sostituiti gli stili statici con variabili, puoi salvare quei moduli come preset del gruppo di opzioni. Ad esempio, dopo aver assegnato una variabile salvata per la larghezza del bordo a una riga, ho salvato quella riga come preimpostazione del bordo di riga.

L'uso di variabili all'interno dei preset significa eventuali aggiornamenti futuri al tuo sistema di progettazione, come la modifica del valore di una variabile, rifletterà automaticamente su tutti i moduli utilizzando quel preimpostazione. Non è necessario riapplicare o aggiornare nulla manualmente.

Quindi, non solo abbiamo aggiornato l'intera pagina con un nuovo marchio in pochi clic, ma abbiamo anche creato un sistema flessibile che rende gli aggiornamenti futuri più veloci, più facili e completamente connessi. Come funziona in un vero layout? È ora di vederlo in azione.

L'aggiornamento degli stili di pagina è più facile che mai

Il motivo per cui passiamo dagli stili statici alle variabili di progettazione è semplice: rendono più facili gli aggiornamenti. Con le variabili di design in atto, la modifica del layout diventa incredibilmente semplice.

Se mai vuoi cambiare il carattere di intestazione sul tuo sito Web, non devi modificare ogni modulo uno per uno. Basta aprire il gestore variabile, aggiornare il valore del carattere salvato in precedenza e la modifica si applica ovunque quella variabile.

I preimpostazioni del gruppo di opzioni si aggiorneranno anche automaticamente se utilizzano variabili di progettazione. Questo mantiene i tuoi stili connessi, quindi non devi ripetere le stesse modifiche su moduli o pagine diversi.

Quando ho personalizzato il layout del negozio di torte in precedenza, non ho regolato manualmente ogni pulsante o intestazione. Ho semplicemente modificato le mie variabili salvate. Il carattere, l'imbottitura e i colori che ho definito in precedenza applicato automaticamente attraverso la pagina. Il layout ha seguito il sistema che avevo già costruito.

Certo, la modifica dell'imbottitura o cambiare un colore in un modulo non è difficile. Ma quando stai aggiornando dozzine di stili in un intero sito, la differenza è enorme. Non è solo più veloce, è più pulito, più affidabile e molto meno incline all'errore.

Questo è il valore reale del passaggio alle variabili: l'intero design diventa più facile da gestire. E quando il tuo cliente chiede un rapido cambio di branding il prossimo mese? Avrai finito prima che finiscano il loro caffè.

Rendi facili le modifiche all'ingrosso con Trova e sostituire

Non devi iniziare da zero ogni volta che il tuo design cambia. Con il sistema di Divi 5 in atto, gli aggiornamenti sembrano meno un lavoro ingrato e più un semplice passo avanti.

Questo flusso di lavoro non è solo utile durante la configurazione. È ciò che semplifica i futuri aggiornamenti. Sia che il tuo cliente richieda un nuovo carattere o che tu voglia testare un colore del marchio diverso, puoi apportare la modifica una volta e vederlo riflesso ovunque.

Divi 5 è progettato per supportare il modo in cui le persone reali progettano siti Web. E ora, il tuo sistema di progettazione può essere flessibile quanto le tue idee.