Tutorial Divi: come utilizzare il modulo di navigazione negli articoli

Prima di poter aggiungere un modulo Divi di navigazione articolo alla tua pagina, devi prima passare a Divi Builder. Una volta il Tema Divi installato sul tuo sito web, noterai un pulsante Usa Divi Builder sopra l'editor dei post ogni volta che crei una nuova pagina. Fare clic su questo pulsante per attivare Divi Builder e accedere a tutti i moduli Divi Builder. Quindi fare clic sul pulsante Usa Visual Builder per avviare il generatore in modalità visuale. Puoi anche fare clic sul pulsante Usa Visual Builder quando navighi sul tuo sito Web in primo piano se sei connesso alla dashboard di WordPress.

Una volta entrato in Visual Builder, puoi fare clic sul pulsante più grigio per aggiungere un nuovo modulo alla tua pagina. I nuovi moduli possono essere aggiunti solo all'interno delle righe. Se stai iniziando una nuova pagina, ricordati di aggiungere prima una riga alla tua pagina.

Individua il modulo di navigazione nell'elenco dei moduli e fai clic su di esso per aggiungerlo alla tua pagina. L'elenco dei moduli è ricercabile, il che significa che puoi anche digitare la parola "post navigazione" e quindi fare clic su Invio per trovare e aggiungere automaticamente il modulo di navigazione. Una volta aggiunto il modulo, sarai accolto dall'elenco delle opzioni del modulo. Queste opzioni sono suddivise in tre gruppi principali: Contenuto , Design et avanzato .

Esempio di caso d'uso: aggiunta di collegamenti di navigazione personalizzati in fondo a un post del blog

Avere collegamenti di navigazione agli articoli successivi e precedenti nella parte inferiore del tuo articolo è un ottimo modo per mantenere il tuo Visitatori interagito con i tuoi contenuti. In questo esempio, ti mostrerò come utilizzare i nomi effettivi dei titoli dei post per i tuoi link di navigazione invece dei nomi generici dei link "precedente" e "successivo". Ti mostrerò anche come aggiungere un bordo attorno ai collegamenti per dare loro più effetto.

Cominciamo.

Usa il visual builder per aggiungere una sezione standard con un layout a larghezza intera (1 colonna) nella parte inferiore del post. Quindi aggiungi un modulo di navigazione dopo la riga.

Aggiorna le impostazioni di navigazione della pubblicazione come segue:

Scheda Contenuto

Testo del link precedente:% title (questa variabile inserisce il titolo dell'articolo)
Testo del seguente collegamento:% titolo (questa variabile inserisce il titolo dell'articolo)

Scheda di progettazione

Collegamenti di carattere: PT Sans
Dimensione carattere collegamenti: 20px
Colore testo collegamenti: # 5e95c1
Usa il bordo: SÌ
Colore bordo: # 5e95c1
Larghezza del bordo: 1px
Tappezzeria personalizzata: 20px in alto, 20px a destra, 20px in basso, 20px a sinistra

È tutto ! Ora hai i titoli dei post sui link di navigazione

Opzioni di contenuto per il modulo di navigazione

Nella scheda dei contenuti troverai tutti gli elementi di contenuto del modulo, come testo, immagini e icone. Tutto ciò che controlla cosa appare nel tuo modulo si troverà sempre in questa scheda.

Testo del link precedente

Definisci il testo personalizzato per il collegamento precedente. Puoi utilizzare la variabile% title per includere il titolo dell'articolo. Lascia vuoto per l'impostazione predefinita.

Testo del seguente link

Definisci il testo personalizzato per il seguente link. Puoi utilizzare la variabile% title per includere il titolo del post. Lascia vuoto per l'impostazione predefinita.

Nella stessa categoria

È possibile definire qui se gli articoli precedenti e successivi devono essere nello stesso termine tassonomia dell'articolo corrente.

Nome della tassonomia personalizzata

Lascia vuota questa opzione se stai usando questo modulo su un progetto o un articolo. Altrimenti, digita il nome della tassonomia affinché l'opzione "Nella stessa categoria" funzioni correttamente.

Nascondi il link precedente

Qui puoi scegliere di nascondere o mostrare il collegamento precedente.

Nascondi il seguente link

Qui puoi scegliere di nascondere o mostrare il seguente collegamento.

Etichetta amministrativa

Questo cambierà l'etichetta del modulo nel costruttore per una facile identificazione. Quando si utilizza la visualizzazione WireFrame in Visual Builder, queste etichette vengono visualizzate nel blocco del modulo dell'interfaccia di Divi Builder.

Opzioni di progettazione dopo la navigazione

Nella scheda Design, troverai tutte le opzioni di stile del modulo, come caratteri, colori, dimensioni e spaziatura. Questa è la scheda che utilizzerai per modificare l'aspetto del tuo modulo. Ogni modulo Divi ha un lungo elenco di impostazioni di progettazione che puoi utilizzare per modificare qualsiasi cosa.

Carattere dei collegamenti

È possibile modificare il carattere del testo dei collegamenti selezionando il carattere desiderato dal menu a discesa. Divi viene fornito con dozzine di fantastici caratteri forniti da Google Fonts. Per impostazione predefinita, Divi utilizza il carattere Open Sans per tutto il testo sulla tua pagina. Puoi anche personalizzare lo stile del tuo testo utilizzando le opzioni grassetto, corsivo, maiuscolo e sottolineato.

Collega la dimensione del carattere

Qui puoi regolare la dimensione del testo del tuo link. È possibile trascinare il dispositivo di scorrimento dell'intervallo per aumentare o diminuire la dimensione del testo o immettere direttamente il valore della dimensione del testo desiderato nel campo di immissione a destra del dispositivo di scorrimento. I campi di input supportano diverse unità di misura, il che significa che puoi inserire "px" o "em" a seconda del valore della tua dimensione per cambiare il suo tipo di unità.

Colore del testo dei collegamenti

Per impostazione predefinita, tutti i colori del testo in Divi vengono visualizzati in bianco o grigio scuro. Se vuoi cambiare il colore del testo dei tuoi link, scegli il colore desiderato dal selettore di colori usando questa opzione.

Spaziatura di lettere di collegamenti

La spaziatura delle lettere influisce sullo spazio tra ogni lettera. Se desideri aumentare lo spazio tra ogni lettera nel testo del link, usa il cursore dell'intervallo per regolare lo spazio o inserisci la dimensione di spaziatura desiderata nel campo di immissione a destra del cursore. I campi di input supportano diverse unità di misura, il che significa che puoi inserire "px" o "em" a seconda del valore della tua dimensione per cambiare il suo tipo di unità.

Altezza della linea di collegamenti

L'altezza della riga influisce sullo spazio tra ogni riga del testo del collegamento. Se si desidera aumentare lo spazio tra ogni riga, utilizzare il dispositivo di scorrimento dell'intervallo per regolare lo spazio o immettere la dimensione della spaziatura desiderata nel campo. voce a destra del cursore. I campi di input supportano diverse unità di misura, il che significa che puoi inserire "px" o "em" a seconda del valore della tua dimensione per cambiare il suo tipo di unità.

Usa il bordo

Abilitando questa opzione verrà posizionato un bordo attorno al modulo. Questo bordo può essere personalizzato utilizzando i seguenti parametri condizionali.

Colore del bordo

Questa opzione influisce sul colore del bordo. Seleziona un colore personalizzato dal selettore di colori per applicarlo al bordo.

Larghezza del confine

Per impostazione predefinita, i bordi sono larghi 1 pixel. È possibile aumentare questo valore trascinando il dispositivo di scorrimento dell'intervallo o immettendo un valore personalizzato nel campo di immissione a destra del dispositivo di scorrimento. Sono supportate unità di misura personalizzate, il che significa che puoi cambiare l'unità predefinita da "px" a qualcos'altro come em, vh, vw ecc.

Stile del bordo

I bordi supportano otto diversi stili: solido, punteggiato, punteggiato, doppio, scanalatura, cresta, sovrapposizione e inizio. Seleziona lo stile desiderato dal menu a discesa per applicarlo al bordo.

Margine personalizzato

Il margine è lo spazio aggiunto all'esterno del modulo, tra il modulo e l'elemento successivo sopra, sotto o a sinistra ea destra di esso. È possibile aggiungere valori di margine personalizzati a uno qualsiasi dei quattro lati del modulo. Per rimuovere il margine personalizzato, rimuovere il valore aggiunto dal campo di input. Per impostazione predefinita, questi valori vengono misurati in pixel, ma è possibile immettere unità di misura personalizzate nei campi di input.

Imbottitura personalizzata

Il riempimento è lo spazio aggiunto all'interno del modulo, tra il bordo del modulo ei suoi elementi interni. È possibile aggiungere valori di riempimento personalizzati a uno qualsiasi dei quattro lati del modulo. Per rimuovere il margine personalizzato, rimuovere il valore aggiunto dal campo di input. Per impostazione predefinita, questi valori vengono misurati in pixel, ma è possibile immettere unità di misura personalizzate nei campi di input.

Opzioni avanzate per il modulo di navigazione

Nella scheda Avanzate troverai le opzioni che i web designer più esperti potrebbero trovare utili, come gli attributi CSS e HTML personalizzati. Qui puoi applicare CSS personalizzati a uno qualsiasi dei molti elementi del modulo. Puoi anche applicare classi e ID CSS personalizzati al modulo, che possono essere utilizzati per personalizzare il modulo nel file style.css del tema figlio.

ID CSS

Immettere un ID CSS opzionale da utilizzare per questo modulo. Un ID può essere utilizzato per creare uno stile CSS personalizzato o per collegarsi a particolari sezioni della tua pagina.

Classe CSS

Immettere le classi CSS opzionali da utilizzare per questo modulo. Una classe CSS può essere utilizzata per creare uno stile CSS personalizzato. Puoi aggiungere più classi, separate da uno spazio. Queste classi possono essere utilizzate nel tema figlio Divi o nel foglio di stile CSS personalizzato che aggiungi alla tua pagina o al tuo sito Web utilizzando le opzioni del tema Divi o le impostazioni nella pagina Divi Builder.

CSS personalizzato

Il CSS personalizzato può anche essere applicato al modulo ea qualsiasi parte interna del modulo. Nella sezione CSS personalizzato, troverai un campo di testo in cui puoi aggiungere fogli di stile CSS personalizzati direttamente a ciascun elemento. Le voci CSS in queste impostazioni sono già inserite nei tag di stile. Quindi inserisci le regole CSS separate da punto e virgola.

visibilità

Questa opzione ti consente di controllare i dispositivi su cui appare il tuo modulo. Puoi scegliere di disattivare singolarmente il tuo modulo su tablet, smartphone o desktop. Questo è utile se vuoi usare diverse mod su diversi dispositivi, o se vuoi semplificare il design mobile eliminando alcuni elementi dalla pagina.

[vc_row center_row=”yes”][vc_column width=”1/2″][vcex_button target=”blank” layout=”expanded” align=”center” font_family=”Raleway” font_weight=”700″ style=”flat” custom_background=”#18b69d” custom_hover_background=”#118d7a” custom_color=”#ffffff” custom_hover_color=”#ffffff” icon_right=”fa fa-download”]SCARICA TEMA DIVI [/vcex_button][/vc_column][vc_column width=” 1 /2″][vcex_button url=”https://www.elegantthemes.com/affiliates/idevaffiliate.php?id=23065&url=40632&tid1=tutorials” target=”blank” layout=”expanded” align=”center” font_family = ”Raleway” font_weight=”700″ style=”flat” custom_background=”#c4226e” custom_hover_background=”#8d184f” custom_color=”#ffffff” custom_hover_color=”#ffffff” icon_right=”fa fa-download”]SCARICA IL MODELLI DIVI[/vcex_button][/vc_column][/vc_row]

Tutorial Divi: come utilizzare il modulo di navigazione negli articoli

Esempio di caso d'uso: aggiunta di collegamenti di navigazione personalizzati in fondo a un post del blog