Come impilare i titoli appiccicosi sullo scorrimento per la navigazione del collegamento di ancoraggio univoco in Divi

Le opzioni adesive di Divi continuano ad aprire le porte a nuovi design e funzionalità. In questo tutorial, progetteremo un modo creativo per guidare gli utenti attraverso il contenuto di una pagina Web utilizzando titoli permanenti come collegamenti di ancoraggio. Le intestazioni permanenti si attaccano alla parte superiore e inferiore della finestra del browser come utile identificatore del contenuto visualizzato e del contenuto che si trova sopra o sotto. Aggiungendo collegamenti di ancoraggio a queste intestazioni permanenti, possiamo consentire agli utenti di fare clic su tali intestazioni permanenti per passare alla sezione corrispondente. Questo è un ottimo modo per migliorare l'esperienza dell'utente sulle pagine che mostrano un processo (come i passaggi per una ricetta).

Per creare la navigazione del collegamento di ancoraggio dell'intestazione adesiva, utilizzeremo solo le opzioni integrate di Divi. Le funzionalità su desktop e mobile sono entrambe uniche. E i risultati potrebbero sorprenderti!

Iniziamo!

Sbirciata

Ecco uno sguardo alle intestazioni permanenti con la navigazione del collegamento di ancoraggio che creeremo in questo tutorial.

Scarica GRATUITAMENTE il layout di navigazione del collegamento di ancoraggio dei titoli appiccicosi

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 i file

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.

SCARICA

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).
• Seleziona l'opzione "Scegli un layout predefinito".

• Dal popup Carica dalla libreria, trova e carica il layout della pagina della ricetta del kit del pasto dal pacchetto di layout del kit del pasto.

Parte 2: Modifica del layout

Eliminazione di righe

Una volta che il layout è stato caricato, elimina le due righe inferiori sotto la seconda sezione denominata Istruzioni.

Ora dovresti avere una riga con il contenuto per il "passaggio-01" della ricetta.

Creare una nuova riga e riempirla di contenuto

Le intestazioni permanenti risiedono nella colonna di sinistra di una riga a due colonne. Per creare questa configurazione, aggiungi una nuova riga di colonna 0ne-fourths tre quarti sotto la riga corrente.

Usando mulitselect (tieni premuto cmd/ctrl e fai clic), seleziona i tre moduli che contengono il contenuto per il passaggio uno della ricetta nella riga di layout predefinita sopra.

Quindi trascina quei moduli nella colonna di destra della nuova riga appena creata.

Elimina la riga vuota sopra quando hai finito.

Parte 3: creazione di titoli appiccicosi per ogni riga

Questo layout includerà quattro righe, ciascuna contenente un'intestazione adesiva nella colonna di sinistra. Dopo aver creato la prima intestazione adesiva per la prima riga, duplichiamo le righe per creare ogni riga aggiuntiva di contenuto.

Creazione dell'intestazione adesiva per la prima riga (passaggio uno)

Per creare la prima intestazione adesiva per il passaggio uno, aggiungi un nuovo modulo di testo alla colonna di sinistra della riga.

Quindi aggiornare le impostazioni di progettazione per il testo dell'intestazione H4 come segue:

• Intestazione 4 Peso del carattere: grassetto
• Intestazione 4 Stile carattere: TT
• Intestazione 4 Allineamento del testo: Centro
• Intestazione 4 Dimensioni del testo: 15 px
• Intestazione 4 Spaziatura lettere: 3px
• Intestazione 4 Altezza riga: 2em

Quindi aggiorna la spaziatura e gli angoli arrotondati come segue:

• Margine: 0px
• Imbottitura: 10px
• Angoli arrotondati: 3px

NOTA: a causa delle dimensioni del testo (15px), dell'altezza della linea (2em che equivale a 30px), del riempimento (10px) e del margine inferiore H4 predefinito (10px), l'altezza risultante del modulo di testo è 50px (30px + 10px + 10px). Questo è importante da notare in modo che sappiamo di quanto compensare ogni posizione in alto e in basso dello stick andando avanti.

Nella scheda Avanzate, aggiorna le seguenti opzioni permanenti:

• Offset fondo permanente: 150 px (desktop), 0 px (tablet)
• Limite permanente superiore: Sezione (desktop), Nessuno (tablet)
• Limite permanente inferiore: sezione (desktop), riga (tablet)
• Offset dagli elementi appiccicosi circostanti: NO

Questa tecnica assicurerà che i nostri link di ancoraggio trascinino la riga nella parte superiore della finestra del browser quando si fa clic sull'intestazione adesiva.

Quindi, aggiorna il colore di sfondo nello stato permanente:

• Colore di sfondo appiccicoso: #febd2d

Quindi aggiorna l'indice Z sullo stato permanente:

• Indice Z (appiccicoso): 10003

Ciò assicurerà che l'intestazione rimanga al di sopra delle altre intestazioni permanenti ogni volta che si accumulano sul dispositivo mobile.

Aggiorna contenuto fittizio

Prima di duplicare la nostra riga per ulteriori passaggi, estrai l'intestazione H4 nel modulo di testo in alto nella colonna 2. Quindi copia il secondo modulo di testo (con il testo del paragrafo) nella colonna 2 e incollalo tre volte sotto il modulo immagine. Questo ci darà più contenuti da scorrere.

Duplica riga 1

Per creare la seconda riga per il passaggio due, duplica la riga 1.

Crea un'intestazione adesiva per la seconda riga (passaggio due)

Aprire le impostazioni del testo per l'intestazione nella colonna 1 della riga duplicata (seconda) e modificare il testo H4 in "Step-02".

Quindi aggiorna le opzioni permanenti per il testo come segue:

• Offset superiore permanente: 50 px (desktop), 0 px (tablet)
• Offset fondo permanente: 100 px (desktop)
• Limite superiore appiccicoso: sezione (tablet)

Quindi aggiorna l'indice Z per lo stato permanente:

• Indice Z (appiccicoso): 10002

Duplica riga 2

Per creare la terza riga per il passaggio tre, duplica la riga 2.

Crea un'intestazione adesiva per la terza riga (passaggio tre)

Apri le impostazioni del testo per l'intestazione nella colonna 1 della riga duplicata (terza) e modifica il testo H4 in "Passaggio-03".

Quindi aggiorna le opzioni permanenti per il testo come segue:

• Offset superiore adesivo: 100 px (desktop)
• Offset fondo permanente: 50 px (desktop)

Quindi aggiorna l'indice Z per lo stato permanente:

• Indice Z (appiccicoso): 10001

Duplica riga 3

Per creare la quarta riga per il passaggio quattro, duplica la riga 3.

Crea un'intestazione permanente per la quarta riga (passaggio quattro)

Apri le impostazioni del testo per l'intestazione nella colonna 1 della riga duplicata (terza) e modifica il testo H4 in "Step-04".

Quindi aggiorna le opzioni permanenti per il testo come segue:

• Offset superiore adesivo: 150 px (desktop)
• Offset fondo permanente: 0px (desktop)

Quindi aggiorna l'indice Z per lo stato permanente:

• Indice Z (appiccicoso): 10000

Aggiorna l'indice Z della colonna per ogni intestazione adesiva

Anche se aggiorniamo l'indice z per ogni intestazione dello stick, dobbiamo anche aggiornare l'indice z per la colonna padre di ogni intestazione per assicurarci che l'ordine di sovrapposizione sui dispositivi mobili funzioni.

Per fare ciò, apri le impostazioni per ogni colonna principale di ogni intestazione permanente (passaggio 1-4) e aggiorna lo z-index della colonna per ciascuna come segue:

Riga 1, Colonna 1

• Indice Z: 20

Riga 2, Colonna 1

• Indice Z: 19

Riga 3, Colonna 1

• Indice Z: 18

Riga 4, Colonna 1

• Indice Z: 17

Parte 3: creazione di collegamenti di ancoraggio di intestazione appiccicosi

Per creare i collegamenti di ancoraggio per ogni intestazione, dobbiamo assegnare un ID CSS alla riga che corrisponde all'URL del modulo per l'intestazione.

Passaggio uno Collegamento di ancoraggio

Per creare il collegamento di ancoraggio per la prima intestazione permanente nella riga 1, apri le impostazioni per la riga 1 e aggiungi il seguente ID CSS:

• ID CSS: uno

Quindi apri le impostazioni del modulo di testo per l'intestazione "passaggio-01" e aggiungi il seguente URL di collegamento al modulo:

• URL collegamento modulo: #uno

Passaggio due Collegamento di ancoraggio

Per creare il collegamento di ancoraggio per la seconda intestazione permanente nella riga 2, apri le impostazioni per la riga 2 e aggiungi il seguente ID CSS:

• ID CSS: due

Quindi apri le impostazioni del modulo di testo per l'intestazione "passaggio-02" e aggiungi il seguente URL di collegamento al modulo:

• URL collegamento modulo: #due

Passaggio tre Collegamento di ancoraggio

Per creare il collegamento di ancoraggio per la terza intestazione adesiva nella riga 3, apri le impostazioni per la riga 3 e aggiungi il seguente ID CSS:

• ID CSS: tre

Quindi apri le impostazioni del modulo di testo per l'intestazione "passaggio-03" e aggiungi il seguente URL di collegamento al modulo:

• URL collegamento modulo: #tre

Passaggio quattro Collegamento di ancoraggio

Per creare il collegamento di ancoraggio per la quarta intestazione adesiva nella riga 4, apri le impostazioni per la riga 4 e aggiungi il seguente ID CSS:

• ID CSS: quattro

Quindi apri le impostazioni del modulo di testo per l'intestazione "step-04" e aggiungi il seguente URL di collegamento al modulo:

• URL collegamento modulo: #quattro

Risultati finali

Pensieri finali

Le intestazioni permanenti da sole sono utili per tenere gli utenti consapevoli del contenuto visualizzato. Inoltre, la creazione di intestazioni permanenti come navigazione del collegamento di ancoraggio è un modo straordinariamente efficace per migliorare l'esperienza dell'utente in modo che coinvolga gli utenti a navigare rapidamente attraverso i passaggi. Si spera che questo diventi un design utile per qualsiasi pagina che accompagni gli utenti attraverso un processo.

Non vedo l'ora di sentirti nei commenti.

Saluti!