Come modificare rapidamente gli stili del pacchetto di layout con Trova e sostituire

L'aggiornamento del design di un pacchetto di layout completo sembra semplice fino a quando non ti rendi conto di dover cambiare gli stessi stili su cinque o sei pagine diverse. Poiché questi stili vengono applicati come valori statici, anche un piccolo aggiornamento, come la modifica del carattere o la regolazione dell'imbottitura della sezione, richiede tempo quando faceva la pagina per pagina.

E se potessi aggiornare tutti quegli stili ripetuti in pochi clic? Questo è esattamente ciò che Find and Sostituisci fa in Divi 5. Che si tratti di scambiare caratteri, sostituire i colori o regolare la spaziatura, questa funzione ti aiuta a apportare istantaneamente le modifiche a livello di layout. Ti mostreremo come usarlo per ripulire e ripristinare un intero pacchetto di layout.

Cosa è trovare e sostituire in Divi 5

Trova e sostituire è una funzione in Divi 5 che consente di aggiornare rapidamente i valori di stile ripetuti attraverso il layout. Che si tratti di un carattere, un codice a colori, imbottitura o anche un effetto ombra, ora puoi cambiare quel valore una volta e applicarlo su più elementi.

Allora, come funziona davvero? Inizia con qualsiasi modulo nel Builder Visual. Passa il mouse su un campo di stile come il colore del testo o le dimensioni del carattere e vedrai un'icona a tre punti. Fai clic su quello (o fai clic con il tasto destro del campo) e seleziona Trova e sostituisci .

Questo apre un pannello in cui si definisce quale valore sostituire, quale dovrebbe essere il nuovo valore e dove applicare la modifica. Puoi tenerlo concentrato su quel modulo, espanderlo all'intera sezione o andare a livello di layout attraverso la pagina.

Una volta sperimentato questo flusso di lavoro, capirai perché è uno strumento così utile. Invece di cacciare dozzine di moduli per cambiare lo stesso colore o carattere, si effettua un aggiornamento mirato e lo guardi su per l'intero layout in pochi secondi. Ma per sbloccare davvero il potenziale di ricerca e sostituire, devi vedere come funziona con le variabili di design, il che cambia tutto.

Come Find and Sostituisci aiuta ad aggiornare gli stili di layout più velocemente

Cammineremo attraverso due scenari: prima, un'operazione di ricerca e sostituire di base, quindi lo stesso compito usando le variabili di design (questa è l'arma segreta).

Usando trova e sostituisci in Divi 5

Il processo è semplice: attivarlo da qualsiasi campo di stile, scegliere cosa sostituire e applicare la modifica su più moduli. Passiamo attraverso di esso con un vero esempio.

Supponi di voler aumentare le dimensioni del carattere di tutte le vostre intestazioni. Inizia facendo clic su qualsiasi modulo di intestazione all'interno del Visual Builder. Vai su Impostazioni> Design> Testo di intestazione> Testo di intestazione Dimensione del carattere H1. Fare clic con il pulsante destro del mouse o passare il mouse per trovare l'opzione Find & Sostituisci tra gli altri.

Questo apre il pannello Find and Sostituisci con molte opzioni:

• (1) Elemento sorgente: questo definisce l'impostazione che si prevede, come dimensione del testo, colore o imbottitura. Viene automaticamente selezionato in base a dove hai aperto il pannello.
• (2) Trova valore: il valore corrente utilizzato attraverso il layout. Questo potrebbe essere una dimensione del carattere come 30px, un codice colore come #000000 o qualsiasi altra impostazione del design. Questo viene aggiunto automaticamente.
• (3) Sostituisci il valore: il nuovo valore che si desidera applicare. Divi cerca il valore di corrispondenza e lo sostituisce con questo.
• (4) Trova e sostituire nella posizione: scegli dove deve essere applicata la modifica. Puoi limitarlo a un singolo modulo, alla sua sezione o all'intera pagina.
• (5) Trova e sostituire nel tipo di elemento: decidere a quali moduli dovrebbe influenzare la modifica. Puoi applicarlo a tutti i moduli o solo tipi specifici come pulsanti, testo o sfocatura.
• (6) Sostituisci solo campi identici: accendi questo per aggiornare solo campi che corrispondono esattamente al valore di ricerca. Questo aiuta a evitare le modifiche accidentali agli elementi non correlati.

Ad esempio, stiamo sostituendo la dimensione del carattere da 30px a un morsetto fluido (20px, 4vw, 50px). Abbiamo selezionato l'intera pagina e tutti gli elementi poiché vogliamo aggiornare tutte le intestazioni sulla pagina.

Fai clic sul pulsante Trova e sostituisci e guarda cosa succede. Tutte le intestazioni con dimensioni del carattere 30px ora hanno un valore di morsetto fluido ().

Gli altri titoli sono rimasti invariati perché Divi aggiorna solo i valori che corrispondono esattamente nell'ambito selezionato. Nessun editing manuale richiesto e nemmeno modifiche accidentali a elementi non correlati. Questa precisione lo rende perfetto per la pulizia degli stili predefiniti nei pacchetti di layout.

Impara tutto sulla ricerca e sostituisci di Divi

Utilizzando le variabili di progettazione in Find and Sostituisci

Trova e sostituire diventa ancora più potente se abbinato a variabili di design. Invece di sostituire un valore statico con un altro valore statico, è possibile sostituirlo con una variabile salvata dal gestore delle variabili. Questo crea un sistema di progettazione coerente che è facile da aggiornare in seguito.

Continuiamo con lo stesso esempio, aggiornando tutte le dimensioni dei caratteri. Ma questa volta, invece di sostituire 30px con un valore di morsetto diretto, lo sostituiremo con una variabile denominata dimensione del carattere H3.

Innanzitutto, crea la variabile. Apri il gestore variabile dalla barra laterale sinistra e vai alla colonna numerica . Nomina la tua variabile, assegna un valore e salva.

Questo rende la variabile disponibile in tutti i campi di dimensioni del carattere. Ora arriva la magia: è possibile usarlo direttamente nel pannello Trova e sostituito per assegnare la variabile salvata a tutte le dimensioni dei caratteri integrati contemporaneamente.

Apri il pannello Find and Sostituisci come prima. Nel campo Sostituisci valore , passa sopra l'ingresso e fai clic sull'icona del gestore delle variabili . Seleziona la variabile salvata, la dimensione del carattere H3 e continua con le stesse impostazioni.

Fai clic su Trova e sostituisci per applicare la modifica. Tutte le intestazioni che utilizzano 30px ora faranno riferimento alla variabile della dimensione del carattere H3 anziché a un numero fisso.

Ecco dove diventa interessante. Hai bisogno di regolare questa dimensione del carattere in seguito? Vai a Variable Manager , apri la variabile della dimensione del carattere H3 e modifica il valore. Aggiorna il morsetto su un morsetto (24px, 5vw, 60px) e ogni intestazione utilizzando automaticamente questi aggiornamenti variabili.

Non è necessario ripetere la ricerca e la sostituzione. Con un aggiornamento, il layout regola ovunque viene utilizzata la variabile.

Questa combinazione di variabili di ricerca e sostituzione e di progettazione rende l'aggiornamento di interi pacchetti di layout così efficienti e seguiremo questo processo in questo tutorial. Definirai le tue variabili di progettazione una volta, quindi usa Trova e sostituirai per passare dai valori statici alle variabili salvate su tutte le pagine. Dopodiché, l'aggiornamento diventa senza sforzo.

Impara tutto sulle variabili di design di Divi

Pronto a metterlo in pratica? Avrai bisogno di Divi 5 per utilizzare sia la ricerca che la sostituzione e la progettazione di variabili. Il costruttore è stato completamente ricostruito per prestazioni più veloci e flussi di lavoro più intelligenti.

Come sostituire gli stili attraverso un pacchetto di layout

Ora che sai come Find and Sostituisci funziona e come abbinarlo alle variabili di design, mettiamolo in azione su un vero pacchetto di layout. Per il nostro esempio, importeremo il sistema di gestione dell'apprendimento, che include più pagine come Home, About, Contact, Course Landing e prezzi.

Ogni pagina utilizza gli stessi caratteri, colori e spaziatura, ma tutti come valori statici. Nel tutorial seguente, lo aggiorneremo su tutte le pagine, le trasformeremo in variabili e collegheremo tutto a un sistema di progettazione centrale.

1. Audit gli stili di progettazione del layout

Prima di iniziare a sostituire qualsiasi cosa, prenditi qualche minuto per rivedere il tuo pacchetto di layout. Apri ogni pagina e elenca rapidamente tutti gli stili di progettazione che si ripetono, come le dimensioni dei caratteri, i colori dei pulsanti, la spaziatura del testo, l'imbottitura della sezione e gli stili di bordo. Ecco cosa ho trovato dopo aver esaminato il layout LMS:

• Dimensioni dei caratteri: 30px viene utilizzato per tutte le intestazioni H3 e 48px per H2s su più pagine
• Fonti: Poppins viene utilizzato costantemente per tutte le intestazioni
• Pulsante primario: il colore di sfondo è #4449E0 con testo bianco
• Imbottitura: la maggior parte delle sezioni utilizza la parte superiore e inferiore 60px
• Icone Blurb: la dimensione dell'icona è impostata su 24px
• Blurb Borders: nessun bordo viene applicato ai moduli Blurb
• Sfondi della sezione: il colore verde #47Be68 appare nella sezione piè di pagina di quasi ogni pagina

Questi sono tutti inseriti manualmente come valori statici all'interno di ciascun modulo. Ad esempio, il modulo Blurb utilizza #4449E0 per il colore dell'icona e una larghezza di 24px.

Una volta identificati stili ripetuti come questi, saprai esattamente cosa convertire in variabili di design.

Questo passaggio di audit crea le basi per tutto ciò che segue. Ti aiuta a creare un approccio sistematico che mantenga il layout coerente e mantenebile.

2. Salva le variabili di design

Dopo aver verificato il layout e notato gli stili ripetuti, il passaggio successivo è la creazione di variabili di progettazione dei valori preferiti. Questo ti consente di trasformare gli stili con codice rigido in token riutilizzabili, rendendo il layout più facile da aggiornare in seguito. Dopo aver salvato tutti i nostri valori, sostituiremo quelli attuali con i nostri.

Creazione di una variabile di colore

Nell'esempio in precedenza, ho scoperto che le icone Blurb usano il colore #4449E0, ma voglio passare al colore del mio marchio principale, #6C012A. Per farlo, creerò una variabile di colore.

Vai alla variabile gestore dalla barra laterale sinistra, quindi apri la colonna di colore .

Scorri verso il basso e fai clic sull'opzione + aggiungi il colore globale . Nomina la tua variabile e inserisci un valore. Fai clic su Salva variabili e è fatto.

Creazione di una variabile numerica

Successivamente, voglio aggiungere un bordo da 2 px attorno alle sfocature, quindi avrò bisogno di una variabile numerica . Il processo è simile, ma in una colonna diversa. Vai alla colonna numerica . Fare clic su + Aggiungi numero globale, nomina la variabile, assegna un valore e salva.

Creazione di una variabile di carattere

Voglio anche cambiare tutti i caratteri intestati in Askhar, il mio carattere del marchio. Ciò richiede una variabile di carattere . Passa alla colonna del carattere , crea una nuova variabile, assegna un nome, scegli un carattere e salva.

È fatto. Questo carattere sarà ora selezionabile in tutti i campi di testo integrati durante il layout.

Segui lo stesso processo per il resto dei risultati dell'audit, come imbottitura a sezione, altre dimensioni dell'intestazione o colori aggiuntivi del marchio. Ogni stile ripetuto dal layout può (e dovrebbe) diventare una variabile.

In questo modo, non devi ricordare codici esagonali, nomi di carattere o valori specifici. Vivono nel tuo gestore variabile e ti seguono attraverso moduli e pagine. E soprattutto, puoi usare Trova e sostituire per applicarli a livello di layout, cosa che faremo dopo.

3. Usa Trova e sostituisci per applicare le variabili

Ecco la parte più interessante che stavamo aspettando. Con le nostre variabili salvate, cambiare gli stili di tutto questo layout è veloce e facile. Vediamo come.

Cambiare i colori delle icone

Innanzitutto, cambiamo il colore delle icone nella nostra variabile di colore del marchio primario salvato. Passare alle impostazioni del Blurb> Design> Immagine e icona. Ora, passa sopra l'opzione Color Icon e fai clic sui tre punti. Scegli Trova e sostituisci .

Sul pannello Find and Sostituisci, tutto ciò che devi fare è passare il mouse per individuare l'icona del gestore delle variabili e selezionare la variabile.

E proprio così, tutte le icone hanno un nuovo colore. Avrei potuto anche farlo nell'altro modo, assegnando il colore del mio marchio come valore statico invece di salvare una variabile di progettazione, ma abbiamo aggiunto un passo in più per semplificare gli aggiornamenti futuri.

Come? Immagina di aver modificato tutte le tue pagine di layout ma vuoi cambiare il colore del tuo marchio. Non c'è bisogno di sentirsi sopraffatto dal rivisitare tutte le pagine o di farlo modulo per modulo. Dato che hai già salvato una variabile di design del colore del marchio, devi solo modificare il valore per aggiornarlo in tutto il sito.

Cambiare il carattere di tutte le intestazioni

Successivamente, passiamo tutti i caratteri di direzione sul carattere del mio marchio. Accedi a Eventuali Impostazioni di Intestazione> Design> Testo del titolo. Abbassante il carattere del titolo e apertura Trova e sostituire . Nella colonna Valore Sostituisci , assegnare la variabile del carattere intestazione del marchio .

Aggiornamento della larghezza del bordo di tutti i moduli Blurb

Per l'aggiornamento della larghezza del bordo, userò la mia variabile del modulo Blurb . Il processo rimane coerente. Passa alle impostazioni del bordo di qualsiasi Blurb, Apri trova e sostituisci, scegli la variabile e applica.

Dopo aver cambiato tutti i valori statici con le tue variabili di design, avrai collegato gli stili di layout direttamente alle variabili. Ciò significa che se mai vuoi cambiare il colore del marchio, modificare la tipografia o regolare le larghezze del bordo, non dovrai rifare i sostituti. Basta aggiornare la variabile e tutti gli elementi collegati si regoleranno immediatamente.

Passaggio bonus: creare e salvare i preset (opzionale)

Mentre le variabili di ricerca e sostituzione e di progettazione offrono una solida base, c'è un passaggio opzionale che si basa ancora su questo sistema. I preset ti consentono di confezionare gli stili completi e riutilizzarli ovunque con un solo clic.

Una volta che sei soddisfatto delle tue variabili di base, puoi fare un passo più in profondità e creare preset per uno stile più granulare. Questo non è necessario per il processo di base che abbiamo appena attraversato, ma vale la pena esplorare se si desidera la massima efficienza.

Supponiamo che ti piaccia aggiungere un effetto ombra a tutte le tue sfocature, quindi hai progettato lo stile ombra perfetto per il tuo modulo Blurb. Invece di copiare manualmente questo stile ogni volta, puoi salvarlo come preset.

Fatto. Questo preimpostazione ora appare nel menu a discesa dei preset di ogni modulo. Puoi applicarlo ad altri moduli istantaneamente; Non è necessario rifare spaziatura, bordi, ombre o qualsiasi altra modifica del design.

Ciò che rende i preset ancora più potenti è la loro flessibilità. È possibile creare gruppi preimpostati per combinazioni di impostazioni diverse per una migliore ottimizzazione del flusso di lavoro e controllo granulare. Ad esempio, potresti avere un gruppo di preimpostazioni per stili di bottoni con variazioni come la luce primaria, la luce primaria e la luce primaria, ognuna contenente diverse combinazioni di sfondi, bordi e spaziatura.

In questo modo, mantieni coerenza pur avendo opzioni per contesti diversi. I preset sono particolarmente utili quando il layout ha 10+ moduli usando lo stesso stile. Invece di fare affidamento sulla memoria o sulle modifiche manuali, standardizzi tutto in anticipo.

Impara tutto sui preset del gruppo di opzioni di Divi

Dopo aver applicato tutte le variabili di design salvate, ecco come appaiono le versioni prima e dopo:

4. Applicare lo stesso processo ad altre pagine

Una volta impostate le variabili e i preset di progettazione, l'aggiornamento del resto del pacchetto di layout diventa molto più veloce.

Prendi la pagina di destinazione del corso, per esempio. Vedrai gli stessi valori statici usati qui, con caratteri diretti, colori dei pulsanti, bordi blurb, colori delle icone e altro ancora. Ancora una volta, invece di modificare manualmente ogni impostazione, aprire il modulo pertinente, trigger trova e sostituisci e assegna la variabile di progettazione corrispondente.

Ripeti questo processo per ogni stile ripetuto su tutte le tue pagine. Quando hai finito, l'intero pacchetto di layout sarà collegato a variabili e preset, rendendo le modifiche future quasi senza sforzo.

Pagina di destinazione del corso aggiornato utilizzando le variabili Trova e sostituite di Divi

Fai modifiche a livello di layout in secondi con Find and Sostituisci

La configurazione delle variabili di progettazione e dell'apprendimento Trova e sostituire in Divi 5 potrebbe richiedere un po 'di tempo in anticipo. Ma una volta che l'hai fatto per un pacchetto di layout, non vorrai mai tornare a fare clic manualmente attraverso dozzine di moduli.

Abbiamo trasformato un intero pacchetto di layout da valori statici sparsi a un sistema di progettazione connesso. Ciò che ci ha impiegato minuti con Find & Sostituzione avrebbe impiegato ore a farlo al vecchio modo, modulo per modulo, pagina per pagina.

Non si tratta solo di risparmiare tempo su questo progetto. Stai costruendo un sistema di progettazione che renderà ogni futuro progetto Divi più veloce e coerente.