Desideri creare una barra di navigazione tra i post che sia fissa in Divi?
Una barra di navigazione post appiccicosa è un modo efficace per migliorare l'esperienza utente di qualsiasi utente sito web del blog. Oltre alla navigazione principale del tuo sito, i link di navigazione dei post consentono agli utenti di passare facilmente al post precedente o successivo il tuo blog. Inoltre, se aggiungi questi collegamenti di navigazione post a una barra fissa, questi collegamenti rimangono visibili e più accessibili.
In questo tutorial, creeremo una barra di navigazione tra post sticky in Divi. Per fare ciò, utilizzeremo le opzioni integrate di Divi per trasformare una riga in una barra fissa. Successivamente, utilizzeremo il modulo di navigazione dell'articolo per progettare i collegamenti "articolo precedente" e "articolo successivo".
Inoltre, aggiungeremo un titolo del post come contenuto dinamico al centro della barra che ricorda agli utenti il post che stanno attualmente visualizzando, dando alla barra di navigazione un piacevole elemento "passato, presente e futuro".
Cominciamo!
Panoramica
Ecco una rapida occhiata al design che creeremo in questo tutorial.
Cosa ti serve per iniziare
Sebbene tu possa aggiungere questa barra di navigazione dei post appiccicosa a qualsiasi layout o modello di post di blog in Divi, utilizzeremo un modello di post di blog predefinito per accelerare il processo e avviare rapidamente la progettazione.
Importa il modello di post del blog "Kit pasto" in Divi Theme Builder
Per iniziare, scarica il modello di post sul blog gratuito per il pacchetto di layout del kit pasto di Divi . Per fare questo, vai a il post del blog .
Quindi inserisci la tua email per scaricare il file zip.
Successivamente, decomprimi il file in modo che sia pronto per l'importazione.
Per importare il file nell'editor del tema, attenersi alla seguente procedura:
- Vai a Divi > Generatore di temi.
- Fare clic sull'icona della portabilità.
- Nella finestra a comparsa Portabilità, seleziona la scheda di importazione.
- Scegli il file decompresso scaricato in precedenza da importare.
- Fare clic « Importa Divi Theme Builder Modelli ».
- Fare clic sull'icona di modifica per modificare il modello importato.
Crea una barra di navigazione appiccicosa in Divi
Parte 1: Creazione della linea adesiva
Per creare la barra di navigazione adesiva, utilizzeremo una riga a tre colonne come contenitore adesiva per i nostri collegamenti di navigazione tra il post e il titolo del post.
Leggi anche: Divi: come utilizzare l'opzione "Ripeti sfumatura" per creare motivi di sfondo personalizzati
Nella seconda sezione del layout del modello, aggiungi una nuova riga sotto la riga contenente il contenuto del post.
Impostazioni linea
Apri le impostazioni della linea.
Innanzitutto, dobbiamo aggiungere la posizione adesiva alla linea in modo da poter aggiornare altre opzioni di progettazione nello stato appiccicoso.
Sotto la scheda Tecnologia, aggiorna quanto segue:
- Posizione appiccicosa: attacca in alto e in basso
- Limite appiccicoso superiore: sezione
- Limite appiccicoso inferiore: Area del corpo
Per assicurarti che le colonne non si accumulino sui dispositivi mobili, aggiungi il seguente CSS personalizzato a Elemento principale :
display:flex;
flex-wrap:nowrap;
align-items:center;
Sotto la scheda Contenuti, aggiungi un colore di sfondo bianco alla linea nello stato appiccicoso come segue:
- sfondo: nessuno
- Fondo: #ffffff (appiccicoso)
In Impostazioni Design, aggiorna quanto segue:
- Usa larghezza grondaia personalizzata: SÌ
- Larghezza grondaia: 1
- Larghezza: 100%
- Larghezza massima: 100%
- Imbottitura: 0px (superiore e inferiore)
Nascondi la colonna centrale su tablet e telefono
Per nascondere la colonna su dispositivo mobile, apri le impostazioni per la colonna 2 (colonna centrale) e aggiorna le opzioni di visibilità come segue:
- Disattiva su: Telefono, Tablet
Parte 2: Creazione di collegamenti di navigazione dell'articolo
Per offrire una maggiore flessibilità di progettazione per la navigazione post, utilizzeremo due moduli di navigazione post separati. Nella colonna di sinistra, aggiungeremo un modulo Post Navigation che mostra solo il link dell'articolo precedente. Nella colonna di destra, aggiungeremo un modulo Post Navigation che mostra solo il link del post successivo.
Link al post precedente
Nella colonna 1, aggiungi un nuovo modulo Post Navigation.
Apri le impostazioni del modulo, aggiorna la scheda delle opzioni di Contenuti come segue :
- Link precedente (testo): Post precedente
- Mostra il link del post precedente: SÌ
- Mostra collegamento post successivo: NO
- Sfondo: #000000
Sotto la scheda Design, aggiorna quanto segue:
- Font link: Kumbh Sans
- Peso del carattere dei collegamenti: grassetto
- Stile carattere: TT
- Colore testo link: #ffffff
- Dimensioni testo collegamenti: 26px (desktop), 16px (tablet e telefono)
- Altezza della linea: 1,3 em
- Imbottitura: 0,9 em (in alto), 0,7 em (in basso), 2 em (sinistra e destra)
Poiché stiamo nascondendo la colonna centrale sui dispositivi mobili, le due colonne rimanenti che conterranno i collegamenti di navigazione possono ora occupare ciascuna il 50% della larghezza del browser su tablet e telefono.
Guarda anche: Divi: come modificare lo stile di più elementi quando si passa con il mouse o dopo un clic
Per assicurarti che il collegamento di navigazione si estenda al 50% del viewport, aggiungi il seguente CSS personalizzato alla casella Collegamenti CSS per la visualizzazione su tablet:
display:block;
width:50vw;
text-align:center;
float:none;
Creazione del collegamento Post successivo
Per creare il link per il prossimo post, copia il modulo Post Navigation (con il link del post precedente) che abbiamo appena disegnato e incollalo nella colonna 3 (colonna di destra).
Quindi, apri le impostazioni di navigazione dei post per il modulo duplicato nella colonna di destra e aggiorna le seguenti opzioni della scheda contenuto:
- Prossimo collegamento: Prossimo post
- Mostra link post precedente: NO
- Mostra collegamento post successivo: SÌ
- Sfondo: #ffb100
Sotto la scheda Design, aggiorna il colore del testo del link:
- Colore testo link: #000000
Parte 3: Creazione del titolo dinamico del post
Con entrambi i collegamenti di navigazione attivi, siamo pronti per aggiungere il titolo del post come contenuto dinamico nella colonna centrale.
L'idea è di dare all'utente un bel promemoria del messaggio che sta leggendo con la possibilità di passare al messaggio precedente e al messaggio successivo.
Nella colonna centrale, aggiungi un nuovo modulo Testo.
Sotto la scheda Contenuti, fare clic sull'icona "Usa contenuto dinamico" nell'area del corpo, quindi selezionare Titolo post/archivio.
Una volta aggiunto il titolo del post dinamico, apri le impostazioni di Titolo post/archivio e aggiorna il contenuto prima di:
- Prima di leggere
Quindi salvare le modifiche.
Sotto la scheda Design, aggiorna quanto segue:
- Carattere del testo: Kumbh Sans
- Peso del carattere del testo: grassetto
- Stile carattere: TT
- Colore del testo del testo: trasparente (desktop), #000000 (appiccicoso)
- Dimensione del testo: 16px
- Spaziatura lettere: 1px
- Altezza della linea: 1,3 em
- Allineamento del testo: centrato
- Larghezza massima: 96%
- Modulo di allineamento: centro
- Imbottitura: 0,5 em (superiore e inferiore)
Risultato finale
Scarica DIVI ora!!!
Conclusione
In questo tutorial, abbiamo mostrato quanto sia facile creare una barra di navigazione dei post appiccicosa per un modello di post di blog in Divi.
La funzionalità sticky barra/linea può anche essere facilmente regolata con le opzioni integrate di Divi. Ad esempio, puoi limitare lo stato permanente a una sezione o scegliere di renderlo permanente solo nella parte superiore o inferiore della finestra del browser.
Spero che questo sarà utile per il tuo prossimo blog. Se hai dubbi o suggerimenti, trovaci in la sezione commenti per discuterne.
Puoi anche consultare le nostre risorse, se hai bisogno di più elementi per realizzare i tuoi progetti di creazione di siti Internet.
Non esitate a consultare anche la nostra guida sul Creazione di blog WordPress o quello acceso Divi: il miglior tema WordPress di tutti i tempi.
Ma nel frattempo, condividi questo articolo sui tuoi diversi social network.
...
