Vai al contenuto principale

Come personalizzare la tipografia e il layout su Divi

Divi: il tema WordPress più semplice da usare

Divi: il miglior tema WordPress di tutti i tempi!

più Download di 901.000, Divi è il tema WordPress più popolare al mondo. È completo, facile da usare e viene fornito con oltre i modelli gratuiti 62. [Consigliato]

Per iniziare a personalizzare il layout e la tipografia del tuo sito web, devi prima accedere al Theme Customizer cliccando sul link Divi> Personalizzazione del tema sulla dashboard di WordPress. Questo avvierà il customizer. Quindi cerca il pannello "Impostazioni generali". Fare clic sul pannello per aprire le impostazioni appropriate e avviare la personalizzazione. Nel pannello "Impostazioni generali" noterai tre sezioni: Impostazioni layout, Tipografia e Sfondo.

parametri generali divi.png

Impostazioni del layout

Il pannello di layout ti consente di regolare varie opzioni di dimensioni e spaziatura per il tuo sito web. Qui puoi aumentare o diminuire la spaziatura tra colonne, righe e sezioni e regolare la dimensione della barra laterale. È inoltre possibile attivare la modalità "Layout in scatola" da questo pannello.

layout parameter.png

Abilita layout di nidificazione

Qui puoi modificare il tuo sito in un formato box che incornicia il contenuto del tuo sito ed espone uno sfondo che può essere personalizzato.

Larghezza del contenuto del sito web

Qui è dove puoi impostare la larghezza massima della sezione dei contenuti. Poiché il tuo contenuto è su un layout reattivo, si adatterà a dimensioni più piccole ma non si espanderà più della larghezza massima impostata qui.
L'impostazione predefinita è 1080px. È una buona larghezza per la maggior parte dei laptop e desktop standard.

Spaziatura delle colonne sul sito web

La larghezza della grondaia è la quantità di spazio orizzontale (margine) tra le colonne in ogni riga.

I valori opzionali per la larghezza della grondaia sono compresi tra 1 e 4.

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

Crea facilmente il tuo sito Web con Elementor

Elementor ti consente di creare facilmente qualsiasi design di sito Web con un aspetto professionale. Smetti di pagare caro per quello che puoi fare da solo. [Free]

configurazione divi.png

Usa la larghezza della 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 che non sono state create con Divi Builder.

Altezza della sezione e della linea

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

Colore accento del tema

Prima di iniziare a cambiare i colori degli altri elementi, devi prima cambiarli. Dopo averlo modificato, salva e pubblica le tue impostazioni e aggiorna la tua pagina. Ora il tema Accent Color aggiornato dovrebbe aver riempito automaticamente altri elementi.

tipografia

Il pannello tipografico è dove puoi regolare l'aspetto predefinito del testo in tutto il tuo sito web. Puoi regolare la dimensione del carattere e delle intestazioni, che si rifletteranno proporzionalmente in tutte le aree del sito. Puoi regolare i colori, l'altezza della linea, la spaziatura delle lettere e gli stili dei caratteri. Infine, puoi anche scegliere tra dozzine di caratteri da applicare a ciascuno.

tipografia su divi.png

Stai cercando i migliori temi e plugin per WordPress?

Scarica i migliori plugin e temi WordPress su Envato e crea facilmente il tuo sito web. Già più di 49.720.000 download. [ESCLUSIVO]

Dimensione del testo del corpo

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

Altezza della linea del corpo

L'altezza della riga di ogni riga di testo.

Dimensioni del testo dell'intestazione

Divi ti consente di impostare qui la dimensione del testo predefinita per la tua intestazione. Ciò influisce sugli elementi Divi come i titoli dei moduli di intestazione a larghezza intera.

Spazio della lettera di intestazione

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

Altezza riga di intestazione

Proprio come il valore di spaziatura delle lettere, il valore di altezza della riga di intestazione influisce su tutti i livelli di intestazione (h1, h2, h3, h4, h5, h6), virgolette e titoli di diapositive.

Stile di polizia

Utilizzare queste opzioni per modificare lo stile del carattere delle intestazioni.

Carattere del corpo e dell'intestazione

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

Colore dei collegamenti del corpo

Il colore del collegamento del corpo viene ereditato dal colore principale del tema. Ma puoi sempre cambiarlo qui.

Colore del testo del corpo

Qui puoi cambiare il colore del tuo corpo.

Crea facilmente il tuo negozio online

Scarica gratuitamente WooCommerce, i migliori plug-in di e-commerce per vendere i tuoi prodotti fisici e digitali su WordPress. [Consigliato]

Colore del testo dell'intestazione

Qui puoi cambiare il colore delle intestazioni.

Sfondo

Il pannello di sfondo ti consente di regolare il colore di sfondo del tema, nonché di caricare un'immagine di sfondo personalizzata e di regolarne il posizionamento sulla pagina. Le immagini ei colori di sfondo funzionano bene se abbinati all'impostazione Formattazione in box nel pannello Layout menzionato in precedenza.

do divi.png

Questo è tutto per questo tutorial, spero che ti permetta di regolare meglio il carattere e il layout del tema Divi.

Altri tutorial di Divi

Questo articolo contiene i commenti 0

Lascia un commento

L'indirizzo email non verrà pubblicato. I campi obbligatori sono contrassegnati *

Questo sito utilizza Akismet per ridurre indesiderati. Ulteriori informazioni su come vengono utilizzati i dati dei commenti.

Torna in alto
6 azioni
quota3
Tweet1
Enregistrer2