Come creare una fisarmonica cliccabile usando i titoli delle pagine adesive in Divi
Pubblicato: 2020-09-03Le nuove opzioni di posizione adesiva di Divi aprono la porta a molte nuove ed entusiasmanti possibilità di design. In questo tutorial, ti mostreremo come combinare le opzioni di posizione appiccicosa di Divi con collegamenti di ancoraggio a scorrimento fluido per creare un modo simile a una fisarmonica per indicizzare e navigare nella tua pagina. Costruirlo è davvero facile con le opzioni integrate di Divi, quindi non c'è bisogno di CSS extra o altro codice. Una volta fatto, avrai un modo unico per organizzare la tua pagina e migliorare l'esperienza dell'utente su desktop e dispositivi mobili.
Iniziamo!
Sbirciata
Ecco una rapida occhiata al design che costruiremo in questo tutorial.
Qui puoi vedere le intestazioni delle pagine adesive attaccate nella parte superiore e inferiore della finestra del browser e impilate l'una sull'altra come una fisarmonica.
Qui puoi vedere che facendo clic su uno dei titoli appiccicosi salterà (usando collegamenti di ancoraggio a scorrimento uniforme) a quella sezione della pagina anche come una fisarmonica.
Ecco la funzionalità anche su mobile.
Scarica il layout GRATUITAMENTE
Per mettere le mani sui disegni di questo tutorial, dovrai prima scaricarlo utilizzando il pulsante in basso. Per accedere al download dovrai iscriverti alla nostra mailing list Divi Daily utilizzando il modulo sottostante. Come nuovo abbonato, riceverai ancora più bontà Divi e un pacchetto Divi Layout gratuito ogni lunedì! Se sei già nell'elenco, inserisci semplicemente il tuo indirizzo email qui sotto e fai clic su download. Non sarai "riabbonato" o riceverai email extra.
Scarica gratis
Iscriviti alla newsletter Divi e ti invieremo via email una copia dell'ultimo Divi Landing Page Layout Pack, oltre a tonnellate di altre incredibili risorse Divi gratuite, suggerimenti e trucchi. Seguici e diventerai un maestro Divi in pochissimo tempo. Se sei già iscritto, digita il tuo indirizzo e-mail qui sotto e fai clic su download per accedere al pacchetto di layout.
Ti sei iscritto con successo. Controlla il tuo indirizzo e-mail per confermare la tua iscrizione e ottenere l'accesso ai pacchetti di layout Divi settimanali gratuiti!
Per importare il layout della sezione nella tua libreria Divi, vai alla libreria Divi.
Fare clic sul pulsante Importa.
Nel popup della portabilità, seleziona la scheda di importazione e scegli il file di download dal tuo computer.
Quindi fare clic sul pulsante di importazione.
Una volta fatto, il layout della sezione sarà disponibile in Divi Builder.
Passiamo al tutorial, vero?
Cosa ti serve per iniziare
Per iniziare, dovrai fare quanto segue:
- Se non l'hai ancora fatto, installa e attiva il tema Divi.
- Crea una nuova pagina in WordPress e usa Divi Builder per modificare la pagina sul front-end (visual builder).
- Scegli l'opzione "Crea da zero".
Successivamente, avrai una tela bianca per iniziare a progettare in Divi.
Creazione della riga adesiva
Per cominciare, creiamo la nostra riga adesiva. Per fare ciò, aggiungi una riga a una colonna alla sezione predefinita.
Apri le impostazioni della riga. Nella scheda Avanzate, aggiorna la posizione permanente come segue:
- Posizione appiccicosa: attaccare in alto e in basso
Ciò farà sì che la riga si mantenga nella parte superiore della finestra del browser mentre l'utente scorre verso il basso e quindi si attacca alla parte inferiore della finestra del browser mentre l'utente scorre verso l'alto.
Disegnare la riga adesiva
Ora che la posizione fissa è a posto, possiamo iniziare a modellare la riga utilizzando l'opzione di stile permanente incorporata che ti consente di dare all'elemento uno stile specifico ogni volta che la posizione fissa è attiva (o bloccata). Per la riga, vogliamo che lo sfondo cambi in un colore scuro ogni volta che si trova nella posizione bloccata. Per fare ciò, apri le impostazioni della riga e aggiorna quanto segue:
- Colore di sfondo (desktop): #ffffff
- Colore di sfondo (appiccicoso): #051923
Nella scheda Progettazione, aggiorna quanto segue:
- Usa larghezza grondaia personalizzata: S
- Larghezza grondaia: 1
- Larghezza (tablet e telefono): 100%
- Imbottitura: 0px in alto, 0px in basso
Successivamente, vogliamo dare un bordo inferiore alla riga per fungere da linea divisoria tra l'intestazione e il contenuto sottostante. E, una volta che la riga è in posizione fissa, vogliamo invece mostrare un bordo sinistro.
Sotto l'opzione del bordo, aggiorna quanto segue:
- Colore bordo: #6eeb83
- Larghezza bordo inferiore (desktop): 8 px
- Larghezza bordo inferiore (appiccicoso): 0px
- Larghezza bordo sinistro (desktop): 0px
- Larghezza bordo sinistro (appiccicoso): 8 px
Creazione del testo appiccicoso dell'intestazione
Per creare il testo dell'intestazione della pagina, aggiungi un nuovo modulo di testo alla riga.
Quindi incolla il seguente codice HTML nel contenuto del corpo.
<h2><strong>Step 2:</strong> S<span>ed do eiusmod tempor incididunt</span></h2>
E aggiorna anche il colore di sfondo al passaggio del mouse...
- Colore di sfondo (al passaggio del mouse): rgba (255,255,255,0.2)
Ciò renderà più evidente che le intestazioni sono cliccabili per l'utente.
Disegnare il testo appiccicoso dell'intestazione
Nella scheda Progettazione, aggiorna quanto segue:
- Intestazione 2 Carattere: Montserrat
- Intestazione 2 Allineamento del testo: a sinistra
- Colore testo titolo 2 (desktop): predefinito (o nero)
- Colore testo titolo 2 (appiccicoso): #ffffff
- Titolo 2: Dimensioni testo: 80 px (desktop), 22 px (appiccicoso), 28 px (telefono)
- Heading 2 Line Height: 1.3em (desktop), 1em (sticky)
Quindi aggiorna il riempimento come segue:
- Imbottitura (desktop): 15px in alto, 15px in basso
- Imbottitura (appiccicosa): 10px in alto, 0px in basso, 20px a sinistra
- Imbottitura (tablet e telefono): 15 px in alto, 15 px in basso, 15 px a sinistra, 15 px a destra
Creazione del contenuto della pagina fittizia
Una volta che la riga adesiva è a posto, possiamo aggiungere un'altra riga che conterrà del contenuto della pagina fittizia sotto l'intestazione. Per fare ciò, crea una nuova riga a una colonna sotto la riga adesiva.
Quindi aggiungi un nuovo modulo di testo alla riga e incolla del contenuto fittizio.
Duplicazione della sezione secondo necessità per intestazioni e contenuti di pagine più persistenti
A questo punto, hai il design di base in atto per creare sezioni di pagina aggiuntive con titoli appiccicosi semplicemente duplicando la sezione.
Sezione duplicata
Per creare un'altra sezione, duplica la sezione esistente che contiene la riga/intestazione permanente e la riga del contenuto fittizio. Ciò accelererà il processo di sviluppo della creazione della sezione successiva della pagina.
Aggiorna il contenuto del testo e il colore del bordo della riga
Nella sezione duplicata, aggiorna il testo all'interno del modulo di testo e quindi aggiorna il colore del bordo sotto le impostazioni della riga.
Ripeti se necessario
Continua a duplicare la sezione e aggiorna il contenuto del testo e il colore del bordo della riga secondo necessità. Per questo esempio, duplicheremo la sezione altre due volte per darci un totale di quattro intestazioni di pagina adesive che formeranno la fisarmonica.
Aggiunta di collegamenti di ancoraggio ai titoli delle pagine permanenti
In questo momento, la funzionalità consentirà all'utente di scorrere verso il basso la pagina e di mantenere i titoli in alto e in basso, proprio come una fisarmonica. Ora vogliamo rendere le intestazioni cliccabili in modo che, quando l'utente clicca su una delle intestazioni permanenti, l'utente venga portato a quella sezione della pagina. Questo viene fatto utilizzando i collegamenti di ancoraggio.
Per aggiungere un collegamento di ancoraggio, dobbiamo prima aggiungere un ID CSS alla sezione a cui vogliamo che il collegamento passi.
Aggiungi l'ID CSS della sezione 1
Apri le impostazioni per la sezione e aggiungi il seguente ID CSS:
- ID CSS: uno
Quindi apri le impostazioni per la riga permanente e aggiungi il seguente URL di collegamento alla riga:
- URL collegamento riga: #uno
Ora, quando l'utente fa clic sulla riga/intestazione, la pagina passerà a questa prima sezione.
Aggiungi l'ID CSS della sezione 2
Successivamente, dobbiamo aggiungere il collegamento di ancoraggio per la seconda intestazione.
Apri le impostazioni della seconda sezione e aggiungi il seguente ID CSS:
- ID CSS: due
Aggiungi l'URL del collegamento alla riga permanente della sezione 1
Quindi apri le impostazioni per la riga adesiva all'interno della seconda sezione e aggiungi l'URL del collegamento alla riga:
- URL collegamento riga: #due
Aggiungi l'ID CSS della sezione 3
Successivamente, dobbiamo aggiungere il collegamento di ancoraggio per la terza intestazione.
Apri le impostazioni della terza sezione e aggiungi il seguente ID CSS:
- ID CSS: tre
Aggiungi l'URL del collegamento alla riga permanente della sezione 1
Quindi apri le impostazioni per la riga adesiva all'interno della terza sezione e aggiungi l'URL del collegamento alla riga:
- URL collegamento riga: #tre
Aggiungi l'ID CSS della sezione 4
Infine, dobbiamo aggiungere il collegamento di ancoraggio per la quarta intestazione.
Apri le impostazioni della quarta sezione e aggiungi il seguente ID CSS:
- ID CSS: quattro
Aggiungi l'URL del collegamento alla riga permanente della sezione 1
Quindi apri le impostazioni per la riga adesiva all'interno della quarta sezione e aggiungi l'URL del collegamento alla riga:
- URL collegamento riga: #quattro
Risultato finale
Qui puoi vedere le intestazioni delle pagine adesive attaccate nella parte superiore e inferiore della finestra del browser e impilate l'una sull'altra come una fisarmonica.
Qui puoi vedere che facendo clic su uno dei titoli appiccicosi salterà (usando collegamenti di ancoraggio a scorrimento uniforme) a quella sezione della pagina anche come una fisarmonica.
Ecco la funzionalità anche su mobile.
Pensieri finali
Questo design utilizza l'opzione di posizione appiccicosa in un modo unico. Non solo le intestazioni della pagina rimangono visibili mentre l'utente scorre, ma ogni intestazione è anche cliccabile, portando l'utente a quella sezione specifica utilizzando i collegamenti di ancoraggio. Il risultato è molto simile a una fisarmonica per l'intera pagina. Questo design sarebbe sicuramente utile per l'indicizzazione di contenuti di lunga durata o per creare un one-pager di facile utilizzo.
Non vedo l'ora di sentirti nei commenti.
Saluti!