Costruisci i bei siti Web WordPress utilizzando Divi e Divi Builder

Come creare un'intestazione adesiva scorrevole per la navigazione di collegamenti di ancoraggio unici in Divi

Rifat Tutorial Divi Jun 8, 2021

Hai mai pensato di creare una pagina che abbia uno straordinario sistema di navigazione con link di ancoraggio di intestazione appiccicosa proprio su quella pagina? Bene! Divi ha aperto la porta a numerose possibilità per gli sviluppatori web. Puoi creare tutti i tipi di magnifici design tramite Divi. Oggi progetteremo una pagina Web di contenuti che consentirà ai nostri utenti di esplorarla tramite titoli permanenti come collegamenti di ancoraggio. Le intestazioni rimarranno in sequenza nella parte superiore della pagina e i visitatori possono fare clic solo sulle intestazioni per saltare direttamente alla sezione. Figo! Quindi passiamo al tutorial di oggi, in cui creeremo questo stile con la funzione integrata di Divi chiamata "Sticky Option".

Anteprima del progetto

Ecco come sarà il nostro design di oggi.

Sezione uno: Iniziare

Riteniamo che tu abbia installato e attivato con successo il tema Divi. Ora aggiungi una nuova pagina dalla tua dashboard e aprila con Divi builder. Qui andremo con la seconda opzione che dice "Scegli un layout predefinito".

Cercheremo da Pacchetto layout kit pasto > Layout pagina ricetta kit pasto dalla libreria. Fare clic per selezionarlo.

Scarica Divi Il miglior tema WordPress

Il tema di WordPress più popolare nel mondo e l'ultimo generatore di pagine di wordpress

Scarica Divi

Attiveremo il layout con l'opzione "Usa questa demo".

Sezione due: modifica del layout

Elimina le righe

Al termine dell'importazione del layout, eliminare le ultime due righe in basso.

Ora, ti rimane una riga chiamata "Step-1".

Creazione di una nuova riga e aggiunta di contenuti

Aggiungi la riga contrassegnata sotto la prima.

Ora seleziona più moduli insieme e trascinalo nella riga appena creata.

Sezione tre: creazione di titoli appiccicosi

In questo layout, ci saranno quattro righe e ognuna di queste conterrà un'intestazione adesiva nella colonna di sinistra. Creeremo il primo e lo duplichiamo per il resto delle righe.

Passaggio uno: crea l'intestazione adesiva per la prima riga

Aggiungi un modulo di testo alla colonna di sinistra. Questa sarà la nostra intestazione appiccicosa per questa riga.

Ora aggiorna le seguenti impostazioni nella scheda Progettazione. Assicurati di apportare modifiche all'intestazione H4.

  • 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

Inoltre, aggiorna le impostazioni di spaziatura e angoli arrotondati.

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

Nella scheda Avanzate, aggiorna le seguenti impostazioni sugli effetti 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

Ora torna alla scheda contenuto e modifica il testo di cui hai bisogno. Metti anche il testo con l'intestazione H4 perché in precedenza abbiamo modificato le impostazioni H4. Inoltre, cambia il colore di sfondo appiccicoso.

  • Colore di sfondo appiccicoso: #febd2d

Torna alla scheda Avanzate e aggiorna Z-index in stato permanente. Ciò manterrà il testo in primo piano sui dispositivi mobili.

  • Indice Z (appiccicoso): 10003

Aggiungi più contenuti

Dobbiamo allegare altri contenuti sotto l'immagine in modo da avere abbastanza contenuti da scorrere. Quindi aggiungi un altro modulo di testo sotto l'immagine e aggiungi alcune scritte a tua scelta.

Duplica riga 1

Infine, crea una replica della riga uno duplicandola.

Passaggio due: crea l'intestazione adesiva per la seconda riga

Ora cambia l'intestazione H4 nella colonna 1.

Ora cambia le impostazioni permanenti.

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

Aggiorna il valore dell'indice Z.

  • Indice Z (appiccicoso): 10002

Duplica riga 2

Quindi, crea nuovamente una replica della riga due duplicandola.

Passaggio tre: crea l'intestazione adesiva per la terza riga

Di nuovo, cambia H4 nella colonna 1 e chiamalo come Passaggio - 3.

Ora cambia le opzioni adesive per il testo.

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

Di nuovo, aggiorna il valore dell'indice Z per la terza riga.

  • Indice Z (appiccicoso): 10001

Aggiorna l'indice Z per ogni colonna uno

Abbiamo già messo un valore Z-index a tutte le intestazioni H4. Ora aggiorneremo anche il valore per ogni colonna che contiene quei titoli appiccicosi. Apri ogni colonna e aggiorna il valore.

  • Riga 1 > Colonna 1: indice Z = 20
  • Riga 2 > Colonna 1: indice Z = 19
  • Riga 3 > Colonna 1: indice Z = 18

Sezione tre: collegamenti di ancoraggio per titoli appiccicosi

Ora assegneremo l'ID CSS alle righe in modo che l'utente possa facilmente utilizzare l'intera pagina tramite esse.

Riga 1: collegamento di ancoraggio

Apri le impostazioni della riga 1 e aggiungi il seguente ID CSS.

  • ID CSS: uno

Ora, apri le impostazioni del modulo di testo nella colonna 1 o nella riga 1 e aggiungi l'URL del collegamento al modulo.

  • URL collegamento modulo: #uno

Riga 2: collegamento di ancoraggio

Apri le impostazioni della riga 2 e aggiungi il seguente ID CSS.

  • ID CSS: due

Ora, apri le impostazioni del modulo di testo nella colonna 1 o nella riga 1 e aggiungi l'URL del collegamento al modulo.

  • URL collegamento modulo: #due

Riga 3: collegamento di ancoraggio

Apri le impostazioni della riga 3 e aggiungi il seguente ID CSS.

  • ID CSS: tre

Ora, apri le impostazioni del modulo di testo nella colonna 1 o nella riga 1 e aggiungi l'URL del collegamento al modulo.

  • URL collegamento modulo: #tre

Vista finale

Quindi, ecco la nostra intestazione appiccicosa a scorrimento per un design di navigazione del collegamento di ancoraggio unico.

Parole finali

Onestamente, l'uso di un titolo appiccicoso nel web design porta più fascino e aiuta i visitatori a fare una passeggiata attraverso il contenuto. L'utilizzo dei link di ancoraggio può migliorare i tuoi visitatori migliorando l'esperienza dell'utente in molti modi. Queste opzioni integrate di Divi ti offrono sempre più modi per fornire un sito Web migliore per i tuoi visitatori. Si spera che questo tutorial ti aiuti a creare un'intestazione appiccicosa con una navigazione del collegamento di ancoraggio unica. Scorrimento dell'intestazione adesiva per la navigazione del collegamento di ancoraggio unico. Per favore, facci sapere quali altri argomenti possiamo condividere con te. Divertiti con 12800459.