Come sostituire i caratteri con le variabili di design dei caratteri di Divi 5

Gli aggiornamenti dei caratteri possono essere un mal di testa. Cambia un carattere del titolo e improvvisamente, stai rintracciando ogni punto che appare. Mi manca una voce o due e il tuo design si sente immediatamente fuori. L'aggiornamento manualmente dei caratteri invita l'incoerenza.

Divi 5 risolve questo con variabili e preset. Invece di inseguire ogni istanza, puoi impostare i caratteri una volta e lasciare che il sistema gestisca il resto. La tipografia rimane pulita e unificata, non importa quanti moduli usi. Dai un'occhiata a quanto può essere semplice.

Perché i caratteri statici possono creare problemi

Le configurazioni di carattere statiche creano una rete di complicazioni che peggiorano nel tempo. Quando si aggiungono caratteri direttamente in ciascun elemento, si disperdono le scelte di tipografia in centinaia di luoghi diversi.

Si costruisce un sito utilizzando il display PlayFair per intestazioni e papaveri per il testo del corpo. Qualche mese dopo, vuoi passare a uno stack di carattere più moderno. Ora, caccia attraverso ogni modulo, ogni preimpostazione, ogni impostazione personalizzata per trovare dove vivono quei caratteri. Miss anche una intestazione sepolta in profondità in una sezione di testimonianze e il tuo design può sembrare rotto.

Quando si aggiornano manualmente i caratteri uno per uno, è possibile utilizzare accidentalmente dimensioni o pesi. Aggiorna la maggior parte dei titoli a 32px ma perdi alcuni che rimangono a 28px. Il tuo design un tempo coeso ora sembra sbilanciato.

Questo metodo sparso trasforma semplici cambiamenti di carattere in progetti importanti. Ciò che dovrebbe richiedere minuti si estende in ore di noiosa caccia e aggiornamento. Trascorri più tempo a gestire la tipografia che a progettare effettivamente con esso.

Cosa dovresti usare invece: Variabili e preset di Design di Divi 5

Variabili di progettazione memorizzare le tue impostazioni di design, che puoi riutilizzare ovunque. Imposta un carattere una volta, salvalo come variabile di progettazione, quindi usalo sul tuo sito. Modificare la variabile in seguito e tutti gli elementi utilizzando IT Aggiorna automaticamente.

Divi offre sei tipi variabili: numeri, testo, immagini, collegamenti, colori e caratteri. Due variabili di carattere predefinite sono pronte per l'uso: una per le intestazioni e una per il testo del corpo. Il gestore variabile è nella barra laterale sinistra nell'icona del database.

Queste variabili funzionano in campi che non li supportano, come campi numerici, campi di carattere e impostazioni di spaziatura. Fai clic sull'icona variabile accanto a qualsiasi campo supportato per visualizzare le opzioni.

Quali opzioni fanno i preset del gruppo

I preset di gruppi di opzioni salvano gruppi di stile specifici, come tipografia, bordi o spaziature, non interi moduli. Ad esempio, è possibile creare un preimpostazione solo per i caratteri e le dimensioni della direzione.

Quando si applica un preimpostazione del gruppo di opzioni, cambia solo quell'area di stile. Il resto del tuo modulo rimane lo stesso. Puoi combinare diversi preset su un elemento senza problemi. Mescola le variabili di progettazione con preset di gruppi di opzioni per una maggiore flessibilità. Crea preset che usano le tue variabili. Quando si aggiorna una variabile, anche tutti i preset utilizzano l'aggiornamento.

Guida passo-passo per creare un sistema di carattere dinamico con Divi 5

L'impostazione delle variabili di carattere richiede circa venti minuti. Una volta che lavorano, i cambiamenti di carattere si verificano immediatamente in tutto il tuo sito. Ecco come arrivarci:

1. Crea variabili di carattere per il tuo nuovo sistema

Apri Variable Manager facendo clic sull'icona del database sulla barra laterale sinistra. Vai alla scheda Fonts. Vedrai due variabili predefinite: una per le intestazioni e una per il testo del corpo.

• Imposta i tuoi caratteri principali: fai clic sulla variabile dell'intestazione. Scegli la tua famiglia e il peso dei caratteri, quindi salvalo. Fai lo stesso per il testo del corpo, ma scegli qualcosa di pulito e facile da leggere.
• Aggiungi più caratteri se necessario: alcuni disegni necessitano di caratteri extra per citazioni, testimonianze o testo speciale. Fai clic su "Aggiungi nuova variabile" e dai un nome chiaro.
• Compila tutti i dettagli: ogni variabile contiene la famiglia, il peso, lo stile e altre impostazioni. Usa pesi audaci per titoli, pesi regolari per il testo del corpo e corsivo quando si desidera aggiungere enfasi.
• Mantieni i tuoi nomi semplici: invece di confondere le etichette, chiamali "Cita carattere" o "evidenzia il carattere".
• Ricorda di salvare: le tue modifiche non si attaccano fino a quando non premi il pulsante Salva.

La maggior parte dei siti Web necessita solo di caratteri di direzione e corpo. Aggiungi solo variabili extra per esigenze di design speciali, non piccole modifiche al testo. Un minor numero di variabili semplifica la creazione di nuovi contenuti molto più semplice.

2. Aggiungi variabili numeriche per dimensioni dei caratteri

Passa alla scheda Numeri in Gestione variabili. Qui, crei variabili di dimensioni che funzionano con i tuoi caratteri. Pensa a questi come alla tua scala di tipografia.

Inizia con le dimensioni dell'intestazione. Crea variabili denominate H1, H2, H3 e così via. Imposta ciascuno su una dimensione diversa che ha senso per il tuo design. È possibile utilizzare valori di pixel regolari come 32px o unità reattive come CLAMP () per dimensioni che si adattano ad altri schermi.

Anche il testo del corpo necessita della sua variabile di dimensioni. Chiamalo qualcosa come "Dimensione del corpo" e impostalo su una dimensione di lettura comoda, di solito da 16 px a 18px.

Puoi anche creare variabili per esigenze di testo speciali. Forse vuoi una variabile "piccolo testo" per didascalie o una variabile "testo grande" per le testimonianze. Nomina chiaramente in modo da ricordare per cosa sono più tardi.

Queste variabili numeriche funzionano ovunque hai bisogno di dimensionamenti coerenti. Usali per altezze di linea, spaziatura o qualsiasi misurazione che appare più volte sul tuo sito. Quando si aggiorna una variabile numerica, tutto l'utilizzo cambia automaticamente.

La maggior parte dei siti Web necessita solo di caratteri di direzione e corpo. Aggiungi solo variabili extra per esigenze di design speciali, non piccole modifiche al testo. Un minor numero di variabili semplifica la creazione di nuovi contenuti molto più semplice.

3. Usa Trova e sostituisci per scambiare caratteri statici

Fare clic con il pulsante destro del mouse su qualsiasi campo di carattere nelle impostazioni del modulo per visualizzare l'opzione Trova e sostituire. Questo apre un pannello in cui Divi carica automaticamente le impostazioni del carattere corrente. Ora puoi scambiare quel carattere statico con una delle tue variabili di design.

Il campo dell'elemento sorgente mostra da quale modulo hai iniziato. Puoi cambiarlo per scegliere qualsiasi altro elemento sulla tua pagina come punto di partenza.

Il valore Trova visualizza qualunque carattere tu voglia sostituire. Invece di scegliere un altro carattere statico, imposta il valore di sostituzione su una delle variabili di design del carattere.

Trova e sostituisci le opere anche per le dimensioni dei caratteri. Fare clic con il pulsante destro del mouse su qualsiasi campo Dimensione del carattere per accedere allo stesso pannello di sostituzione. Questo ti consente di scambiare dimensioni a livello di elemento come 24px con le variabili numeriche.

Cerca i moduli di testo in cui si impostano manualmente le dimensioni dei caratteri. Queste impostazioni di dimensioni sparse creano gli stessi problemi dei caratteri statici. Quando si desidera regolare la scala di tipografia, finisci per cercare ogni modulo per trovare ogni dimensione. Sostituire queste dimensioni statiche con H1, H2, dimensioni del corpo o altre variabili numeriche.

Imposta i tuoi confini di sostituzione

Trova e sostituisci i controlli di posizione dove si verificano le modifiche. Scegli "intera pagina" per aggiornare i caratteri attraverso l'intero layout. Scegli "elemento corrente e bambini" per limitare le modifiche a quella sezione specifica e qualsiasi cosa nidificata al suo interno.

Puoi anche prendere di mira contenitori per genitori o aree di pagina specifiche.

Trova e sostituire il tipo di elemento ti aiuta a concentrarti su moduli specifici. Seleziona "Tutti gli elementi" per uno scambio di carattere completo o scegli "moduli" per saltare contenitori ed elementi strutturali. Puoi diventare ancora più specifico prendendo di mira solo determinati tipi di moduli.

Evita i sostituti accidentali

L'opzione "Sostituisci solo campi identici" impedisce cambiamenti indesiderati. Accendi questo quando si desidera sostituire i caratteri senza influire su altre impostazioni che potrebbero condividere lo stesso valore.

Questo mantiene il raggio del confine a 10px anche quando stai sostituendo un carattere che sembra essere chiamato "10px" o qualcosa di simile.

Senza questa impostazione, trova e sostituisci il tuo valore target ovunque. Con esso abilitato, il sistema modifica solo i campi di carattere effettivi, lasciando da sole altre impostazioni di progettazione.

4. Lavora attraverso il tuo sistema di carattere

Avrai bisogno di operazioni di ricerca e sostituzione separate per pesi e stili di carattere diversi. Il tuo sito potrebbe utilizzare la stessa famiglia di caratteri in pesi regolari e audaci. Gestisci ogni variazione singolarmente, sostituendole con le variabili di progettazione appropriate create in precedenza.

Ogni volta, il processo è lo stesso: fare clic con il pulsante destro del mouse sul campo di carattere, impostare il valore di sostituzione su una variabile di progettazione, scegliere l'ambito e applicare le modifiche. Ripeti questo per ogni carattere statico che necessita di aggiornamento.

5. Crea preset con le tue variabili

Accedi a qualsiasi modulo di testo e vai alla scheda Design. Individua la tipografia e fai clic sull'icona preimpostata. Seleziona la variabile del carattere intestazione dal menu a discesa. Applica la variabile del numero H1 per il dimensionamento.

Configurare l'altezza della linea e i valori di spaziatura. Assegna un nome alla preimpostazione "Intestazione principale" e salvalo. Fai clic sull'icona Star per impostarlo come impostazione predefinita. Nuovi moduli di testo adotteranno automaticamente queste impostazioni. Tutti i moduli esistenti con lo stesso tag di intestazione e nessun stile erediteranno anche queste impostazioni.

Puoi ripetere questo processo per ogni livello di intestazione. Ogni preimpostazione mantiene coerenza mentre serve scopi diversi.

Questi preset tipografici funzionano con qualsiasi modulo contenente campi di testo. I moduli Blurb, il contenuto della fisarmonica, le testimonianze e i moduli di contatto accettano tutti gli stessi preset. Questa compatibilità incrociata elimina le attività di stile ripetitivo.

PRESEMETTO GRUPPO OPZIONE SOLO categorie di stile target. Applicare un preimpostazione dell'intestazione per il testo del pulsante mantenendo intatti lo sfondo del pulsante e le impostazioni del bordo.

6. Estendi le tue nuove variabili in tutti gli elementi

Fare clic con il tasto destro su qualsiasi elemento usando le nuove variabili. Seleziona "Estendi gli attributi" dal menu. Configurare l'elemento di origine come modulo recentemente aggiornato.

Imposta la posizione su "intera pagina" per aggiornamenti completi. In tipi di attributi, scegli "stili" per concentrarsi solo sugli elementi di design.

Abilita "Sostituisci solo campi identici" per prevenire modifiche indesiderate a imbottitura, margini o altri valori numerici che potrebbero corrispondere alle dimensioni dei caratteri. Seleziona "Tutti gli elementi" per aggiornare moduli e contenitori o scegliere "Moduli" per target in particolare elementi di contenuto.

Elaborare pagine complesse in sezioni più piccole piuttosto che aggiornamenti a livello di sito. Selezionare "Sezione corrente" per limitare le modifiche a un'area alla volta. Inizia con la sezione dell'intestazione. Applicare estensioni variabili, rivedere i risultati e procedere alle principali aree di contenuto. Completa la sezione del piè di pagina per ultimo.

Questo approccio metodico identifica la formattazione dei conflitti in anticipo e controlla il processo di aggiornamento.

Divi 5 semplifica la tipografia

Passavi dal display Playfair a qualcosa di moderno e aggiornavi la maggior parte delle intestazioni, ma perdi quella testimonianza a pagina tre. Il tuo sito sembrava sbilenco per settimane.

Le variabili di Divi 5 semplificano la tipografia del tuo sito web. Modifica la variabile di intestazione dall'icona del database nella barra laterale e ogni modulo di testo si aggiorna all'istante. Quel piè di pagina del modulo di contatto è incluso.

La prossima volta che ti rifornirai, aggiornerai due variabili invece di fare clic su cinquanta moduli. Lo strumento Find and Sostituisci cattura ciò che normalmente ti mancherà. La tua tipografia rimane stretta e i tuoi fine settimana rimangono tuoi.