Come rendere appiccicoso qualsiasi elemento della pagina Divi

Sapere come rendere appiccicoso (o fisso) qualsiasi elemento della pagina Divi è una di quelle pratiche abilità che i web designer possono utilizzare in diversi modi. Se non hai familiarità con il termine "appiccicoso", si riferisce semplicemente a un elemento su una pagina web che rimane "fisso" mentre l'utente scorre la pagina verso il basso. Un esempio popolare di elemento appiccicoso è un menu di navigazione fisso. Divi ha una funzionalità di navigazione fissa (o permanente) disponibile per impostazione predefinita. Quindi, quando l'utente scorre la pagina verso il basso, una versione fissa del menu rimane bloccata nella parte superiore della pagina mentre l'utente scorre. Ma gli elementi adesivi possono essere utilizzati per qualsiasi cosa ed è un ottimo modo per richiamare l'attenzione sull'invito all'azione desiderato su una determinata pagina.

In questo tutorial, ti mostrerò un modo semplice per rendere permanente qualsiasi elemento della tua pagina utilizzando il plugin chiamato Sticky Menu (o Anything!) su Scroll. Bastano pochi istanti per configurare le impostazioni del plugin. Quindi tutto ciò che devi fare è aggiungere un ID CSS personalizzato al tuo elemento. È così facile.

Entriamo in esso!

Cosa ti serve per questo tutorial

Per questo tutorial avrai bisogno di quanto segue:

• Tema Divi
• Il menu appiccicoso (o qualsiasi cosa!) sul plug-in Scroll
• Il layout di pagina del blog contabile (disponibile all'interno di Divi Builder)

Come rendere appiccicoso qualsiasi elemento della pagina Divi

Iscriviti al nostro canale Youtube

Configurazione delle impostazioni del plugin

Una volta installato e attivato il plug-in Sticky Menu (o Anything!) su Scroll sul tuo tema Divi, vai alla dashboard di WordPress e vai a Impostazioni> Sticky Menu (o Anything!).

Nella scheda Impostazioni di base, aggiorna le opzioni come segue:

Innanzitutto, dovrai aggiungere un identificatore univoco per il tuo elemento adesivo. Può essere un ID CSS o una classe. Successivamente aggiungeremo questo identificatore al nostro elemento in Divi. Per renderlo più facile da ricordare, aggiungerò l'ID CSS "#sticky".

Elemento appiccicoso: #sticky

Quindi è necessario aggiungere il valore in pixel per lo spazio tra la parte superiore della pagina e l'elemento adesivo. Poiché la barra di navigazione fissa di Divi è alta 54 pixel per impostazione predefinita, vogliamo aggiungere almeno 54 pixel per questa opzione in modo che il nostro elemento appiccicoso non si sovrapponga al navigatore fisso.

Spazio tra la parte superiore della pagina e l'elemento appiccicoso: 54 pixel

È anche una buona idea disabilitare l'elemento appiccicoso sui dispositivi mobili. Per fare ciò, dobbiamo configurare il plugin in modo che non attacchi l'elemento quando lo schermo è più piccolo di 980px.

Non incollare l'elemento quando lo schermo è più piccolo di: 980 pixel

Salva le tue impostazioni, quindi vai alla scheda Impostazioni avanzate e aggiorna quanto segue:

Per l'opzione z-index, vogliamo assicurarci che il nostro elemento sia impilato sopra tutti gli altri elementi della pagina, specialmente se pianifichiamo che il nostro elemento si sovrapponga ad altri elementi sullo scorrimento. Per assicurarti che ciò accada, imposta lo z-index su 99998.

Indice Z: 99998

Per darti un'idea di come sono ordinati gli elementi in Divi, le sezioni hanno uno z-index di 2, le colonne hanno uno z-index di 9 e l'intestazione/barra di navigazione ha uno z-index di 99999. Quindi, in pratica, siamo volendo che il nostro elemento appiccicoso sia 1 numero inferiore allo z-index per la navigazione dell'intestazione. Ciò assicurerà che l'elemento appiccicoso si trovi sopra tutto il resto della pagina tranne il nav. Questo sarà utile ogni volta che vuoi fermare il tuo elemento e spingerlo verso l'alto nella pagina in modo che l'elemento appiccicoso non si trovi sopra il nav mentre scorri (sembra disordinato e rotto).

Successivamente, possiamo aggiungere un identificatore di elemento "push up". Puoi pensare a questo come un tappo per il nostro elemento appiccicoso. Questo è comunemente un elemento piè di pagina. Fondamentalmente, questo identifica l'elemento che fermerà l'elemento appiccicoso durante lo scorrimento della pagina, consentendo all'elemento appiccicoso di essere spostato verso l'alto con il resto della pagina. Per questo esempio, imposterò l'identificatore con l'ID CSS "#stop".

Elemento push-up: #stop

Salva le impostazioni.

Ora siamo dotati della potenza necessaria per creare un elemento appiccicoso!

Rendere appiccicoso un elemento della pagina Divi

Per mostrarti come rendere appiccicoso un elemento Divi, userò la pagina del blog del contabile di Divi dal pacchetto di layout del contabile. Per iniziare, crea una nuova pagina, assegna un titolo alla tua pagina e distribuisci Visual Builder. Quindi seleziona l'opzione "Scegli un layout predefinito". Dal popup Carica dalla libreria, seleziona il Pacchetto layout contabile e scegli la pagina Blog.

Questa pagina presenta un modulo di iscrizione via e-mail nella barra laterale destra di una sezione specializzata. Nel tentativo di attirare più attenzione su questo modulo, possiamo farlo diventare appiccicoso una volta che l'utente scorre la pagina. Quindi possiamo fare in modo che l'elemento si fermi (o spinga verso l'alto) ogni volta che raggiunge la sezione successiva della pagina in modo che non si sovrapponga.

Come rendere appiccicosa una colonna

A questo punto, però, dobbiamo decidere quale elemento specifico vogliamo rendere appiccicoso. Potremmo semplicemente rendere appiccicoso il modulo Opzione email, ma ciò non terrà conto del modulo Segui sui social media direttamente sotto il modulo, che vogliamo rendere appiccicoso. E possiamo dare a entrambi i moduli lo stesso identificatore perché diventerebbero entrambi appiccicosi nella stessa posizione causando la sovrapposizione. Il modo migliore per farlo è rendere appiccicosa l'intera colonna (colonna 2).

Per rendere permanente la colonna 2, apri le impostazioni di riga della riga contenente la colonna che vogliamo scegliere come target. Quindi, nella scheda Avanzate, aggiungi l'ID CSS "sticky". Questo corrisponde all'identificatore univoco dell'elemento appiccicoso che abbiamo aggiunto nelle impostazioni del nostro plugin.

ID CSS: appiccicoso

(NOTA: non inserire qui il simbolo hashtag (o cancelletto) prima dell'ID. Inoltre, assicurati di aggiungerlo all'ID CSS e non alla classe CSS)

Salva le impostazioni e visualizza in anteprima la versione live della pagina. Se scorri verso il basso, noterai che la colonna 2 (con entrambi i moduli) diventerà appiccicosa una volta che diventano 54 px dalla parte superiore della finestra e rimarranno in quella posizione mentre continui a scorrere.

Arresto dell'elemento appiccicoso in una sezione

Come puoi vedere, l'elemento continua a rimanere appiccicoso in modo che si sovrapponga al contenuto delle altre sezioni sottostanti. Per evitare che ciò accada, possiamo utilizzare il nostro identificatore "push up" (#stop) che abbiamo aggiunto nelle impostazioni del plugin.

Per fermare l'elemento appiccicoso nella sezione sottostante, dobbiamo aprire le impostazioni della sezione e aggiungere l'ID CSS "stop".

ID CSS: stop

Ora vai in anteprima alla versione live della pagina. Nota come l'elemento appiccicoso si ferma nella sezione che hai identificato.

Abbastanza bello vero?

Come rendere appiccicoso un modulo

Per rendere permanente un singolo modulo, dovrai apportare una regolazione in Divi per assicurarti che il tuo elemento abbia lo z-index corretto in modo che si trovi sopra gli altri elementi in tutta la pagina durante lo scorrimento. Come accennato in precedenza, Divi assegna aa z-index di 2 a tutte le sezioni. E il plugin applica lo z-index di 99998 all'elemento appiccicoso. Ma poiché un modulo non può essere ordinato (o indicizzato) sopra il suo elemento genitore (la sezione), il modulo rimarrà comunque dietro ad altri moduli nella pagina. Per risolvere questo problema, dobbiamo assicurarci di assegnare manualmente alla sezione che contiene il nostro modulo appiccicoso uno z-index di 99998.

Per illustrare questo, userò lo stesso layout di pagina del blog contabile che abbiamo usato in precedenza. Prima di aggiungere il nostro ID CSS a un modulo, dobbiamo prima eliminare l'ID CSS (sticky) che abbiamo impostato per la colonna 2. E poi eliminare l'ID CSS (stop) che abbiamo impostato per la sezione sottostante. Successivamente, apri le impostazioni del modulo Segui social media e aggiungi l'ID CSS "appiccicoso" al modulo.

Se visualizzi la pagina live, noterai che l'elemento appiccicoso è nascosto quando si sovrappone agli altri moduli nelle sezioni sottostanti mentre scorri.

Per risolvere questo problema, apri le impostazioni della sezione per la sezione contenente l'elemento appiccicoso del modulo follow social media. Quindi aggiungi il seguente CSS personalizzato all'elemento principale:

z-index: 99998;

Ora controlla la pagina live. Nota come le icone dei social media rimarranno nella parte superiore della pagina (54 px dall'alto), appena sotto il navigatore fisso e quindi rimarranno sopra gli altri moduli mentre scorri.

Rendere una sezione appiccicosa

Per rendere appiccicosa un'intera sezione, seguiresti lo stesso processo di aggiunta dell'ID CSS "appiccicoso" alla sezione di tua scelta. Non è necessario aggiornare lo z-index utilizzando CSS personalizzato poiché il plug-in lo fa automaticamente per te.

Gli effetti al passaggio del mouse possono causare il glitch degli elementi appiccicosi

Se hai effetti al passaggio del mouse attivi in ​​tutta la tua pagina o sul tuo elemento appiccicoso, potresti riscontrare alcuni problemi. In tal caso, potrebbe essere necessario disattivare gli effetti al passaggio del mouse dell'elemento appiccicoso.

Solo un elemento adesivo per pagina

Il plug-in consente solo un elemento permanente per pagina, quindi se desideri aggiungere più elementi permanenti, avrai bisogno di una soluzione più avanzata (o un altro plug-in che lo supporti).

Pensieri finali

Spero che questo articolo sia stato utile nel fornire un modo piacevolmente semplice per rendere appiccicoso qualsiasi elemento della pagina Divi. Usalo per creare sottomenu permanenti, CTA permanenti, offerte promozionali permanenti e qualsiasi altra cosa ti venga in mente. Divertiti ad esplorare le possibilità!

Non vedo l'ora di sentirti nei commenti qui sotto.

Saluti!