La guida definitiva al personalizzatore di temi Divi

Il Divi Theme Customizer è uno strumento potente e conveniente per personalizzare il tema Divi. Come il Visual Builder, Divi Theme Customizer consente personalizzazioni visive front-end e modifiche al design che eliminano il gioco di ipotesi dal processo di personalizzazione. Se utilizzato in modo efficiente, questo strumento può essere un ottimo risparmio di tempo e un punto di partenza per progetti futuri.

Il post di oggi ha lo scopo di aiutarti a capire meglio come funziona il Personalizzatore di temi in modo che tu possa usarlo per aumentare la produttività per i progetti futuri. Tratto quasi tutte le opzioni disponibili in Theme Customizer con un'enfasi su quelle opzioni che sono specifiche per Divi. In un certo senso, questo post funge da pezzo di documentazione che offre alcune spiegazioni approfondite e suggerimenti di progettazione lungo il percorso. Ti mostrerò anche come esportare le impostazioni del Customizer da utilizzare nel tuo prossimo progetto.

Abbiamo molto da coprire, quindi cominciamo dall'inizio.

Costruito con WordPress in mente

Il tema personalizzatore è stato introdotto in WordPress 3.4. Questa comoda funzione consente agli utenti di WordPress di visualizzare in anteprima le modifiche apportate ai loro temi in tempo reale e quindi salvare tali modifiche con un clic. Ciò che prima richiedeva più finestre e innumerevoli aggiornamenti, ora può essere eseguito rapidamente in un'unica finestra del browser.

Ecco un esempio delle opzioni di personalizzazione del tema sul tema TwentySeventeen:

Come puoi vedere, molte delle funzionalità di WordPress che prima risiedevano in diverse pagine nel backend di WordPress (Identità del sito, Menu, Widget, ecc...) sono ora accessibili in questo personalizzatore front-end in un unico posto.

D'altra parte, il personalizzatore di temi Divi è stato creato come una versione migliorata di questo personalizzatore di temi con tutti i tipi di opzioni specifiche di Divi. Per gli utenti, questo semplifica notevolmente il processo di personalizzazione di Divi. E il fatto che tu possa effettivamente vedere le personalizzazioni durante la modifica (simultanea) rende questo un comodo strumento di progettazione.

Divi Theme Customizer ha ancora molte delle opzioni standard di WordPress Customizer, ma ne ha anche molte di più.

Come puoi vedere, ci sono molte più impostazioni che sono state aggiunte a Divi Theme Customizer. Ora iniziamo ad esplorarli in modo più approfondito.

impostazioni generali

Quando inizi a personalizzare il tuo tema, penso che sia meglio iniziare dall'alto con le Impostazioni generali e procedere verso il basso.

Identità del sito

Questa sezione non è esclusiva di Divi. Questo è un posto conveniente per modificare il titolo del sito e lo slogan per il tuo sito. Puoi anche inserire un'icona del sito che viene utilizzata per browser e app, diversa dall'icona della favicon che puoi aggiungere in Divi Theme Options.

Impostazioni di Layout

Le impostazioni di layout ti consentono di regolare la struttura del tuo tema determinando quanto spazio c'è tra sezioni e righe e quale sarà la larghezza massima della sezione del contenuto principale.

ABILITA LAYOUT BOX

Qui puoi modificare il tuo sito in un layout a scatola che inquadra il contenuto del tuo sito ed espone uno sfondo che può essere personalizzato.

LARGHEZZA DEL CONTENUTO DEL SITO

Qui è dove puoi impostare la larghezza massima della sezione dei tuoi contenuti. Poiché il tuo contenuto è su un layout reattivo, si adatterà a dimensioni più piccole ma non si espanderà oltre la larghezza massima impostata qui.

L'impostazione predefinita è 1080px. Questa è una buona larghezza per la maggior parte dei laptop e desktop standard.

LARGHEZZA GRIGLIA DEL SITO WEB

La larghezza del margine corrisponde alla quantità di spazio orizzontale (margine) tra le colonne di ogni riga.

I valori facoltativi per la larghezza della grondaia vanno da 1 a 4.

1 rappresenta il margine zero tra le colonne.
2 rappresenta un margine destro del 3% tra le colonne.
3 rappresenta un margine destro del 5,5% tra le colonne.
4 rappresenta un margine destro dell'8% tra le colonne.

USA LARGHEZZA BARRA LATERALE PERSONALIZZATA

Questo imposta la larghezza della barra laterale predefinita per il tuo tema. Questo vale per tutte le pagine del tuo tema che hanno una barra laterale e non sono state create utilizzando Divi Builder.

SEZIONE E ALTEZZA FILA

Queste opzioni regolano la quantità di spaziatura verticale (imbottitura superiore e inferiore) per ogni sezione e riga.

Per impostazione predefinita, il riempimento della sezione è di 50 pixel in alto e in basso . Per la riga, il riempimento predefinito è 30 px in alto e in basso . Tuttavia, modificando l'imbottitura della sezione o della riga utilizzando il Customizer, il valore del padding si trasforma in una percentuale che corrisponde al numero sul quadrante delle opzioni sul personalizzatore del tema.

Ad esempio, "0" rappresenta lo 0% del riempimento superiore e inferiore, "1" rappresenta l'1% del riempimento superiore e inferiore, "2" rappresenta il 2% e così via. La percentuale di riempimento si basa sulla larghezza del contenitore (la sezione o riga). Quindi, se la larghezza effettiva della sezione è 1080px e hai impostato l'altezza della sezione su 1, significa che avrai...

1080 px x 0,01 = 10,8 px

… 10.8px di imbottitura nella parte superiore e inferiore.

Le opzioni vanno da 0 a 10 quindi puoi avere fino al 10% di padding.

TEMA ACCENT COLOR

Prima di iniziare a cambiare i colori per gli altri elementi, dovresti prima cambiare questo . Dopo averlo modificato, salva e pubblica le tue impostazioni e aggiorna la tua pagina. Ora il colore dell'accento del tema aggiornato dovrebbe aver popolato automaticamente altri elementi.

L'aggiornamento del colore dell'accento del tema aggiornerà anche quanto segue:

• Colore del collegamento del corpo
• Colore intestazione widget
• Colore proiettile widget
• Icone social del piè di pagina Colore al passaggio del mouse
• Colore predefinito per le icone
• Menu piè di pagina Colore collegamento attivo
• Colore di sfondo del menu secondario
• Colore di sfondo Slide In e stile intestazione a schermo intero
• Icona del menu dell'hamburger per il colore del menu mobile
• Colore collegamento attivo menu principale
• Colore linea menu a discesa
• Colore di sfondo del menu secondario
• Colore di sfondo del menu a discesa secondario
• Colore di sfondo del menu secondario
• Colore collegamento menu principale attivo
• Menu piè di pagina Colore collegamento attivo

Tipografia

Questo è uno degli aspetti più importanti del tuo sito web che tende a essere trascurato da utenti e sviluppatori. Non commettere l'errore di trascurare queste opzioni. Ottenere questi dettagli nel modo giusto può fare una grande differenza. Prendersi del tempo per impostare la tipografia predefinita per il tema può anche farti risparmiare tempo a lungo termine perché non dovrai effettuare personalizzazioni a livello di modulo.

DIMENSIONI DEL TESTO DEL CORPO

Questo cambia il testo del corpo predefinito per il tuo tema. La dimensione predefinita è 14px.

Suggerimento di progettazione: sembra che 14 px sia un po' troppo piccolo per una dimensione standard del testo del corpo. Non dovresti davvero andare a meno di 16 px per la dimensione del carattere del tuo corpo di livello base. Quelli di noi vicino ai 40 anni di età ti ringrazieranno. Anche la maggior parte dei browser utilizza 16px come dimensione del carattere di livello base standard.

ALTEZZA LINEA CORPO

L'altezza della riga di ogni singola riga di testo.

Suggerimento di progettazione : l'altezza della linea è misurata nel valore di lunghezza "em". L'impostazione predefinita di Divi è 1.7em per il corpo del testo. Questo valore em è migliore di un valore in pixel (px) perché si basa sulla dimensione del carattere corrente dell'elemento e quindi si ridimensiona con il valore in linea genitore (o nel nostro caso, la dimensione del carattere corrente). Il valore "1.7em" rappresenta sostanzialmente 1,7 volte la dimensione del carattere corrente. Quindi, se la dimensione del carattere corrente è 16 px, l'altezza della linea sarà 27,2 px. Questo ti dà 5,6 pixel di spazio extra in alto e 5,6 pixel in basso. Questa sembra essere una buona guida (spazio tra le righe della copia) per la leggibilità.

DIMENSIONI DEL TESTO DELL'INTESTAZIONE

Divi ti consente di impostare qui la dimensione del testo dell'intestazione h1 predefinita. Questo influisce su elementi di Divi come i titoli del modulo di intestazione a larghezza intera. Se vuoi regolare la dimensione degli altri livelli di intestazione (h2, h3, ecc.), allora ti suggerisco di aggiungerli in CSS aggiuntivi (questo è trattato più avanti nel post).

Suggerimento per il design: nella maggior parte dei casi, avrai solo un'intestazione per pagina, quindi fallo contare. Pensalo come il titolo sulla copertina di un libro. È la prima cosa che una persona nota. E, contrariamente allo slogan popolare, le persone giudicano ancora i libri dalle loro copertine, soprattutto in questo caso.

Il valore predefinito per la dimensione del testo dell'intestazione è 30 px. Questa è una buona dimensione sicura per iniziare. Soprattutto perché alcuni titoli richiedono una copia più lunga. Tuttavia, tendo a gravitare su una dimensione dell'intestazione più grande per adattarsi alla crescente dimensione dei display dei monitor. Inoltre, la maggior parte dei clienti ha bisogno di siti Web con titoli semplici e brevi come "Chi siamo" e "Contattaci" che abbiano un aspetto migliore con caratteri di dimensioni maggiori. Mi piace impostare le mie intestazioni h1 su almeno 48px .

SPAZIATURA LETTERA INTESTAZIONE

La spaziatura delle lettere regola lo spazio orizzontale tra le lettere. Il valore Spaziatura lettere intestazione influisce su tutti i livelli di intestazione (h1, h2, h3, h4, h5, h6), virgolette e titoli delle diapositive.

Suggerimento di progettazione: è una buona tecnica di progettazione ridurre la spaziatura delle lettere per il testo più grande e aumentare la spaziatura delle lettere per il testo più piccolo . Quando si tratta di intestazioni, il testo più grande con un peso del carattere maggiore (grassetto) può avere un aspetto migliore con una spaziatura delle lettere ridotta di -1px.

Tuttavia, se metti la stessa intestazione in maiuscolo, potresti scoprire che aumentare la spaziatura delle lettere a 1-2px avrà un aspetto migliore.

ALTEZZA LINEA INTESTAZIONE

Proprio come per il valore della spaziatura delle lettere, il valore dell'altezza della riga dell'intestazione influisce su tutti i livelli dell'intestazione (h1, h2, h3, h4, h5, h6), virgolette e titoli delle diapositive. A causa della dimensione del carattere più grande, 1em è l'impostazione predefinita. Penso che un'altezza della linea da qualche parte tra 1em e 1.3em appaia buona, specialmente quando l'intestazione va a due o più righe.

STILE FONT INTESTAZIONE

Usa queste opzioni per cambiare lo stile del carattere delle tue intestazioni.

INTESTAZIONE E CORPO FONT

Il carattere predefinito in Divi è Open Sans , ma Divi Theme Customizer ha quasi un centinaio di caratteri tra cui scegliere! Approfitta di questi caratteri integrati e verifica quali funzionano meglio per il tuo tema.

Suggerimento per il design: per trarre ispirazione per gli abbinamenti di caratteri, puoi dare un'occhiata a fontpair.co che aiuta ad accoppiare Google Fonts insieme. Divi non supporterà tutti questi caratteri immediatamente, ma potresti cercare quelli supportati da Divi per vedere gli abbinamenti che funzionano bene insieme.

COLORE DEL COLLEGAMENTO DEL CORPO

Il colore del collegamento del corpo viene ereditato dal colore dell'accento del tema. Ma puoi sempre cambiarlo qui.

Suggerimento di progettazione: se lo desideri, puoi aggiungere un attributo di sottolineatura per tutti i collegamenti del tuo corpo utilizzando CSS aggiuntivi (vedi fine del post).

COLORE DEL TESTO DEL CORPO

Qui puoi cambiare il colore del tuo corpo del testo. Blog popolari come il New York Times e Smashing Magazine usano #333333 per il colore del testo del corpo. Questo tende a leggere meglio su uno sfondo bianco secondo me.

COLORE TESTO INTESTAZIONE

Qui puoi cambiare il colore delle tue intestazioni. Se stai attaccando con una sfumatura di nero, andrei un po' più scuro del testo del corpo per farlo risaltare un po'. Qualcosa come #121212 funzionerebbe.

Sfondo

Questa opzione imposta lo sfondo per il tuo tema. Per il tema Divi, questa opzione si applica solo al layout della scatola . Il colore di sfondo predefinito è bianco (#ffffff) a meno che non lo cambi qui. Se lo desideri, puoi anche aggiungere un'immagine di sfondo.

Questo è tutto per le impostazioni di layout. Dopo aver posizionato il layout, puoi iniziare a guardare elementi più specifici.

Intestazione e navigazione

L'intestazione e il menu di navigazione sono probabilmente l'elemento più importante del tuo tema. Questa sezione ha molte opzioni per creare quasi tutti i tipi di intestazione che desideri.

Formato intestazione

Stile intestazione

I quattro stili di intestazione possono dare al tuo sito web un aspetto nuovo di zecca con un solo clic. Questi stili includono Centrato, Logo in linea centrato, Slide-in e Schermo intero.

Puoi anche aggiungere la navigazione verticale al tuo sito che può essere una caratteristica unica. E puoi scegliere di nascondere la navigazione finché non scorri. Questo sarebbe utile per un sito a pagina singola che vuole evidenziare più contenuti above the fold senza la distrazione della barra di navigazione.

Barra dei menu principale

La tua barra dei menu principale è il menu principale all'interno dell'intestazione del tuo sito web. Puoi personalizzare completamente l'aspetto del tuo menu principale.

Suggerimento per la progettazione: devi davvero sapere quali saranno i collegamenti del menu prima di iniziare a perfezionare il menu con Divi Theme Customizer. Non dimenticare che stai per creare un menu reattivo, quindi prenditi del tempo per assicurarti che il menu sia perfetto su tutte le dimensioni dello schermo. Puoi farlo facendo clic sulle icone del dispositivo nella parte inferiore del personalizzatore o semplicemente regolando le dimensioni del tuo browser. Se sei interessato, puoi scoprire come correggere la tua navigazione reattiva qui.

Crea larghezza intera

Questo estende il menu per l'intera larghezza della finestra del browser.

Nascondi immagine logo

Se vuoi, qui puoi nascondere completamente l'immagine del logo dal tuo menu.

Altezza menu

Qui puoi modificare l'altezza del menu in base alle tue esigenze. Tuttavia, fai attenzione a non aumentare l'altezza del tuo menu poiché potresti sprecare preziose proprietà immobiliari su un menu anziché sul contenuto della tua home page.

Altezza massima logo

Qui puoi aumentare o diminuire la percentuale di larghezza massima del tuo logo per ingrandirlo o rimpicciolirlo.

Dimensione del testo, spaziatura delle lettere, carattere, stile del carattere, colore del testo, colore del collegamento attivo

Queste opzioni ti consentono di personalizzare i collegamenti del menu come preferisci.

Colore di sfondo

Questo ti permette di cambiare il colore di sfondo del tuo menu principale.

Suggerimento per il design: se usi i colori semitrasparenti (o completamente trasparenti) per l'intestazione, Divi sovrapporrà automaticamente l'intestazione alla sezione sottostante senza alcun problema. Questo crea un effetto piuttosto interessante. Ad esempio, questo è uno stile di intestazione centrato con uno sfondo trasparente e un'intestazione a larghezza intera direttamente sotto di esso. Nota come Divi regola automaticamente l'immagine di sfondo per adattarla perfettamente dietro l'intestazione:

Impostazioni del menu a discesa

Il tuo menu a discesa non deve ereditare lo stile del menu principale. Qui puoi creare un design unico per il tuo menu a discesa. Puoi anche aggiungere animazioni personalizzate quando visualizzi il menu a discesa.

Barra dei menu secondaria

Qui puoi personalizzare la barra dei menu secondaria utilizzando le opzioni fornite.

Quando abilitata, la barra dei menu secondaria si trova sopra la barra dei menu principale nella parte superiore del browser. Può contenere elementi aggiuntivi tra cui un indirizzo e-mail, collegamenti ai social media e un menu secondario.

Per impostazione predefinita, il menu secondario rimarrà nascosto a meno che non si acceda a un menu secondario o si aggiungano elementi nella sezione Elementi dell'intestazione. Potrebbe essere necessario salvare e aggiornare il personalizzatore del tema per visualizzare il menu.

Impostazioni di navigazione fisse

La navigazione fissa si riferisce allo stato del menu "fisso" o bloccato nella parte superiore della finestra del browser quando l'utente scorre la pagina verso il basso. Per impostazione predefinita, la navigazione fissa si riduce in altezza per fornire una finestra più ampia per la visualizzazione del contenuto del sito.

Suggerimento per il design: puoi anche impostare il colore di sfondo del menu principale fisso su un colore semitrasparente per rivelare parte del contenuto dietro di esso. Questo lo rende ancora meno invadente ma comunque accessibile.

Elementi di intestazione

Gli elementi dell'intestazione sono elementi aggiuntivi che puoi aggiungere all'intestazione. Questi elementi includono icone social, un'icona di ricerca, un numero di telefono e un'e-mail. A parte l'icona di ricerca, tutti questi elementi verranno visualizzati nel menu secondario.

Icone sociali

Per impostazione predefinita, Divi visualizza le icone per Facebook, Twitter, Google+ e RSS. Puoi modificare questi profili nelle Opzioni del tema di Divi.

piè di pagina

Per impostazione predefinita, la sezione del piè di pagina è nascosta a meno che non sia popolata dal contenuto. Inoltre, il piè di pagina non deve essere confuso con la barra inferiore che viene visualizzata nella parte inferiore del sito per impostazione predefinita e include i crediti del piè di pagina e le icone social.

Disposizione

Qui puoi scegliere tra 5 layout per la tua sezione piè di pagina.

Puoi anche impostare un colore di sfondo del piè di pagina che è impostato su #222222 per impostazione predefinita.

Suggerimento per la progettazione: questa sezione verrà visualizzata su tutte le pagine del tuo sito (a meno che tu non scelga un modello di pagina vuota). Pertanto, ha senso rendere il colore più neutro in modo che corrisponda a tutte le pagine del tuo sito.

Widget

Se hai aggiunto widget alle sezioni del piè di pagina, puoi definire l'aspetto di quei widget qui.

I widget non sono esclusivi di Divi. Questi sono integrati in wordpress e possono essere trovati nella dashboard di wordpress in Aspetto > Widget . Lì puoi vedere quattro aree piè di pagina in cui puoi aggiungere widget. Tutti i widget che aggiungi a queste sezioni verranno visualizzati nell'area del piè di pagina.

Tuttavia, puoi anche accedere alle aree del widget senza mai dover uscire dal personalizzatore del tema (una delle mie cose preferite a riguardo).

Elementi piè di pagina

Qui puoi scegliere di mostrare le tue icone social nella barra in basso proprio come nel menu secondario.

Menu a piè di pagina

Se hai un menu a piè di pagina, puoi modificarlo qui.

Barra inferiore

La barra in basso si trova nella parte inferiore del tuo sito Web e mostra i crediti a piè di pagina e le icone social per impostazione predefinita. Qui puoi personalizzare lo stile di questi elementi, inclusa la modifica della dimensione e del colore del carattere dell'icona social.

Modifica crediti piè di pagina

Puoi anche sostituire i crediti del piè di pagina predefiniti con qualsiasi html desideri all'interno di questa casella.

pulsanti

Questa sezione controlla quali vuoi che siano gli stili dei pulsanti predefiniti.

Stile bottoni

Qui puoi personalizzare lo stile dei pulsanti per il tuo tema. Non entrerò nei dettagli su ciascuna opzione qui. Puoi andare alla nostra documentazione sul modulo dei pulsanti per maggiori informazioni su come modellare i pulsanti.

Colore del testo

Se noti, per impostazione predefinita, il colore del pulsante viene ereditato dal Colore accento tema impostato in Impostazioni generali. Questo è solo per i moduli il cui testo è impostato su "scuro". E i pulsanti sono bianchi quando il testo del modulo è impostato su "luce". Tuttavia, non appena imposti un colore di testo personalizzato per i tuoi pulsanti, questo colore viene impostato sia per le versioni di testo scure che chiare all'interno di un determinato modulo.

Suggerimento di progettazione: lascia che il colore dell'accento del tema imposti il ​​colore del testo dei pulsanti in modo da mantenere la possibilità di aggiungere versioni scure e chiare del pulsante nei moduli.

Stile dei pulsanti al passaggio del mouse

Qui è dove puoi personalizzare lo stile dello stato al passaggio del mouse dei tuoi pulsanti.

È importante che gli utenti capiscano che ciò che stanno per fare clic è in realtà un pulsante. L'aggiunta di un effetto hover solidifica questo nella mente e li incoraggia a interagire. Per impostazione predefinita, Divi aggiunge uno sfondo chiaro e anima un'icona a forma di freccia a destra. Ma puoi cambiarlo in quello che vuoi.

Suggerimento per il design: non è importante cambiare lo sfondo in un colore più scuro o più chiaro, quanto assicurarsi che il pulsante cambi in qualche modo. Puoi anche aumentare la spaziatura delle lettere o regolare il raggio del bordo per dare al tuo pulsante un effetto unico al passaggio del mouse.

Blog

Inviare

Questa sezione cambia lo stile del contenuto dell'intestazione del post all'interno di un singolo post. Questo non cambia l'aspetto degli estratti del tuo blog sulla pagina del tuo blog o sul modulo del blog. A volte le intestazioni dei post del tuo blog dovranno avere un aspetto diverso dalle intestazioni del resto del tuo sito. Qui è dove faresti questi aggiustamenti.

Se scegli di utilizzare il modulo Post Header, queste opzioni non saranno efficaci.

Stili mobili

Amo questa sezione. Qui puoi regolare l'aspetto del tuo sito sui dispositivi mobili e vedere i risultati in tempo reale.

Stili tablet e telefono

Puoi selezionare Tablet o Telefono e la finestra a destra del Customizer si regolerà automaticamente per mostrarti come appare la pagina sul dispositivo. Quindi, proprio come abbiamo fatto in Impostazioni generali in Layout, puoi regolare l'altezza della sezione, l'altezza della riga, la dimensione del testo del corpo e la dimensione del testo dell'intestazione.

Suggerimento di progettazione n. 1: una personalizzazione che mi piace fare per i layout del telefono è impostare l'altezza della riga su "0". Ciò crea un migliore flusso di contenuti durante lo scorrimento su un telefono poiché elimina la spaziatura tra le righe.

Suggerimento di progettazione n. 2: trova una scala di caratteri che funzioni per il tuo sito. Eccone uno buono che mi piace seguire per le mie intestazioni:

Desktop: 48px

Tablet: 40px

Telefono: 32px

Menu mobile

Non trascurare questo o potresti perdere la creazione di un'intestazione completamente unica per il tuo menu mobile. Puoi nascondere il logo solo sui dispositivi mobili e cambiare lo sfondo e i colori del testo.

Combinazioni di colori

Questi possono essere convenienti per una soluzione rapida. Ma non consiglierei di usare le combinazioni di colori se prevedi di cambiare alcuni di questi colori in seguito nel personalizzatore del tema. Una volta impostati, questi colori non possono essere sovrascritti nel Customizer perché il CSS generato contiene la regola !important.

A mio parere, è meglio lasciare questo set di default.

Menu e widget

Non dovrai più modificare alla cieca i tuoi menu o widget nella dashboard di wordpress. Ora puoi aggiungere e personalizzare questi elementi e vederli prendere vita sulla tua pagina in tempo reale. adoro la comodità!

Prima pagina statica

Per impostazione predefinita, WordPress visualizza il tuo ultimo post sulla tua prima pagina (home page). Puoi cambiarla in qualsiasi pagina statica che desideri in questa sezione. E puoi anche designare la tua Pagina dei post (o la pagina del blog).

Non lo sapevo fino a quando non ho scritto questo post, ma puoi effettivamente distribuire una nuova pagina all'interno del personalizzatore del tema per fungere da prima pagina o pagina del blog senza mai dover lasciare il personalizzatore.

CSS aggiuntivi

La sezione CSS aggiuntivi offre una grande opportunità per dare gli ultimi ritocchi alla configurazione del tema. Qualunque cambiamento di stile che Divi Theme Customizer non può controllare, puoi farlo qui con alcuni CSS personalizzati. Poiché il Customizer ti consente di vedere le modifiche CSS in tempo reale, puoi apportare le modifiche necessarie al tuo tema molto più facilmente che andare avanti e indietro su un foglio di stile esterno.

Esempi aggiuntivi di CSS

Esempio n. 1: regolare la dimensione di tutte le intestazioni

Un buon esempio di CSS aggiuntivo sarebbe lo stile per i tag di intestazione rimanenti. Divi ti consente di personalizzare l'impostazione per il carattere dell'intestazione, ma è solo per le intestazioni h1. Puoi utilizzare la casella CSS aggiuntivo per inserire il resto delle personalizzazioni dei tag di intestazione (h2, h3, h4, ecc.). Mi piace usare la seguente scala: 16, 18, 21, 24, 36, 48.

h2 {
	font-size: 36px;
}

h3 {
	font-size: 24px;
}

h4 {
	font-size: 21px;
}

h5 {
	font-size: 18px;
}

h6 {
	font-size: 16px;
}

Esempio n. 2: corrispondenza dell'imbottitura del paragrafo inferiore con l'altezza della linea del corpo

Se imposti l'altezza della linea del testo del corpo su 1,7 em, potresti anche voler impostare lo stesso valore per il riempimento inferiore tra i paragrafi per mantenere una griglia della linea di base coerente e un ritmo verticale. In altre parole, la distanza tra i paragrafi è uguale all'altezza della riga. Per fare ciò dovresti semplicemente aggiungere quanto segue:

p { padding-bottom: 1.7em}

Poiché il valore della lunghezza em si basa sulla dimensione del carattere principale, se hai modificato la dimensione del carattere di base in qualcos'altro nel personalizzatore del tema, il valore 1.7em si adatterà di conseguenza.

Esempio n. 3: aggiungi un attributo di sottolineatura ai tuoi link

Aggiungi l'attributo di sottolineatura ai collegamenti del corpo.

a {
    text-decoration: underline;
}

Esportare e importare le impostazioni di Divi Customizer per il tuo prossimo progetto

Divi Theme Customizer ha un'opzione di portabilità che consente agli utenti di esportare o importare le impostazioni di Customizer. Ciò rappresenta una grande opportunità per gli sviluppatori di creare una sorta di modello di impostazione del personalizzatore da utilizzare nei loro progetti futuri.

Innanzitutto, ti suggerisco di dedicare del tempo a capire quali personalizzazioni tendi a fare quando crei un sito web. Una volta identificate queste impostazioni, puoi inserire tali personalizzazioni in Divi Theme Customizer e quindi esportare tali impostazioni in modo da avere un vantaggio sui tuoi prossimi progetti. Perché continuare a fare sempre le stesse cose quando puoi già farle? Inoltre, questo ti aiuterà a non saltare nessuna importante personalizzazione.

Per esportare le tue impostazioni, fai clic sull'icona della portabilità nella parte superiore di Divi Theme Customizer.

Assegna un nome al file di esportazione e fai clic sul pulsante "Esporta impostazioni personalizzatore Divi"

Ora puoi utilizzare questo file .json in futuro facendo clic sulla stessa icona di portabilità in Divi Theme Customizer e selezionando Importa invece di esportare. Quindi tutto ciò che devi fare è caricare il file .json e fare clic su "Importa impostazioni di personalizzazione Divi".

E questo è tutto.

Cosa includono le impostazioni di Divi Customizer?

Le impostazioni del personalizzatore includono praticamente tutto nelle prime 7 sezioni.

1. impostazioni generali
2. Intestazione e navigazione
3. piè di pagina
4. pulsanti
5. Blog
6. Stili mobili
7. Combinazioni di colori

Le ultime 4 sezioni sono specifiche di WordPress e non verranno trasferite ad altre installazioni Divi. Queste sezioni includono:

1. Menu
2. Widget
3. Prima pagina statica
4. CSS aggiuntivi

È importante notare che il CSS aggiuntivo non viene trasferito. Potresti fare affidamento su queste impostazioni per farti risparmiare tempo nella tua prossima build. In tal caso, ti suggerisco di creare un tema figlio con quel CSS in modo che tu possa aggiungerlo con le tue impostazioni di personalizzazione nel tuo prossimo progetto.

Come vengono memorizzati gli stili di Divi Customizer

Per Divi Customizer (insieme a Divi Options e Divi Builder), Divi serve risorse CSS statiche che possono essere memorizzate nella cache dai browser per ridurre il tempo di caricamento della pagina. Ciò significa che gli stili non vengono stampati sulla pagina ma archiviati in un file CSS statico separato. Ogni volta che salvi le tue impostazioni di personalizzazione, il file CSS statico viene aggiornato. Ciò include anche qualsiasi CSS aggiuntivo che hai aggiunto.

Pensieri conclusivi

Il Divi Theme Customizer è dotato di alcune opzioni piuttosto potenti e il processo di personalizzazione è sia conveniente che divertente con cui lavorare. E acquisire una comprensione più profonda di ciò che queste opzioni possono fare migliorerà sicuramente il modo in cui crei siti Web con Divi. Se non lo hai già fatto, prenditi del tempo per esplorare quali sarebbero le tue impostazioni di base ottimali per un progetto, collegale al Customizer e crea un file di esportazione. Rimarrai sorpreso dalla spinta (e dalla fiducia) che questo ti darà quando inizi un nuovo progetto.

Non vedo l'ora di sentirti nei commenti.

Saluti!