Come rendere appiccicoso qualsiasi elemento Divi? (Guida passo passo)

Vuoi personalizzare il tuo sito e rendere gli elementi fissi? In questa guida, ti mostreremo come rendere appiccicoso qualsiasi elemento Divi sia con che senza codifica.

Di recente abbiamo visto come rendere permanente la tua intestazione utilizzando Divi per aiutare gli utenti a navigare tra i tuoi contenuti. Questo è un buon primo passo, ma c'è molto di più che puoi fare. Divi è un tema altamente personalizzabile che ti consente di personalizzare ogni centimetro del tuo sito WordPress. Ecco perché, in questo tutorial, daremo un'occhiata a diversi modi per rendere appiccicoso qualsiasi elemento Divi .

Perché rendere gli elementi Divi appiccicosi?

Per impostazione predefinita, gli elementi sui siti non sono permanenti, quindi quando un utente scorre verso il basso, quegli elementi scompaiono dallo schermo e l'utente vede nuovi contenuti. Tuttavia, potresti voler rendere sempre visibili gli elementi più importanti del tuo sito per aiutare i tuoi clienti a trovare ciò di cui hanno bisogno. Ciò significa che l'elemento sarà sempre fisso sullo schermo anche se l'utente scorre verso il basso. Ad esempio, puoi inserire il menu principale, il modulo di registrazione o una colonna con le informazioni chiave di cui gli utenti hanno bisogno.

L'idea è di rendere questi elementi più visibili per aiutare i tuoi visitatori. Gli elementi appiccicosi possono anche essere molto utili per aumentare le vendite e le conversioni. Ad esempio, molti negozi online rendono le loro offerte e i principali Call-to-Action (CTA) appiccicosi per aumentare le vendite.

Come rendere qualsiasi Divi Element appiccicoso/fisso?

Esistono due metodi principali per rendere appiccicoso qualsiasi elemento Divi:

1. Utilizzando il plug-in integrato per il builder Divi
2. Con un po' di codifica

In questa guida spiegheremo come creare elementi fissi con entrambi i metodi. Entrambe le opzioni porteranno a termine il lavoro, quindi scegli quella più adatta alle tue capacità.

1) Utilizzo di Divi Builder

Divi Builder viene fornito con Divi, quindi, se stai già utilizzando questo tema, non è necessario installare nulla. Per rendere appiccicoso qualsiasi elemento, in primo luogo, devi creare una pagina e utilizzare il visual builder per aggiungere o rimuovere elementi, modificarli e così via. Per questa demo, utilizzeremo uno dei loro pacchetti di layout predefiniti chiamati Accountant , ma puoi anche utilizzare una pagina live o una pagina completamente nuova.

Crea una pagina

Innanzitutto, nella dashboard di WordPress, vai su Pagine> Aggiungi nuovo e crea una nuova pagina.

D'ora in poi, useremo il visual builder Divi, quindi premi il pulsante Usa il Divi Builder e vedrai un visual builder drag and drop.

Importa modello preferito

Una volta aperto il builder, vedrai tre opzioni:

• Costruisci da zero
• Scegli un layout predefinito
• Clona una pagina esistente

Se vuoi creare un design personalizzato, scegli la prima opzione. Utilizzando il builder Divi, sarà abbastanza semplice creare un design di pagina unico per il tuo sito. In alternativa, puoi clonare i design delle pagine esistenti o scegliere un layout predefinito. Nel nostro caso, utilizzeremo il modello di layout predefinito ( Contabile) . Quindi, per importare il modello Contabile , selezioniamo l'opzione Scegli layout predefinito e quindi selezioniamo quello che ti piace dall'elenco.

Dopodiché, poiché stiamo usando l'editor classico, vedrai qualcosa di simile sul tuo schermo:

Tuttavia, è più facile lavorare con il visual builder, quindi passeremo ad esso.

Passa al Visual Builder

Nell'intestazione, vedrai un'opzione per utilizzare il visual builder chiamato Build On the Front End . Premilo e vedrai come cambia lo schermo e renderà più facile vedere i risultati delle modifiche dal frontend.

Il modello Contabile viene fornito con una barra laterale destra e un modulo di iscrizione alla newsletter. Tuttavia, non è stato risolto, quindi mentre scorriamo verso il basso, scompare. Quindi, vediamo come rendere appiccicosa la casella di iscrizione alla newsletter.

Installa e attiva il plugin WordPress Sticky Menu

Per rendere appiccicoso qualsiasi elemento Divi, utilizzeremo il plug-in Menu appiccicoso. Quindi, apri la dashboard di WordPress , vai su Plugin> Aggiungi nuovo e cerca il menu Sticky, Sticky Header on Scroll . Quindi, fai clic su Installa e attivalo.

Con questo semplice plugin, saremo in grado di rendere appiccicosi i nostri menu, l'intestazione o qualsiasi elemento in pochissimo tempo. Per configurare il plug-in, vai su Impostazioni > Menu permanente (o qualsiasi altra cosa!) .

Imposta il menu permanente

Sono disponibili due principali opzioni di impostazione della personalizzazione:

• Di base
• Avanzate

Per prima cosa, vediamo come personalizzare le impostazioni di base. Dovrai nominare un elemento appiccicoso. Nel nostro caso, lo chiameremo #sticky e imposteremo uno spazio tra la prima pagina e l'elemento a 50px . Non preoccuparti se non sei sicuro della spaziatura, puoi cambiarla in seguito.

Quindi, salva le impostazioni di base e vai alla scheda Impostazioni avanzate . Qui perfezioneremo un po' di più l'elemento appiccicoso. Ad esempio, imposteremo il campo Z-Index su 99998 e aggiungeremo #stop nel campo dell'elemento push-up. L'elemento push-up ti aiuterà a fermare il widget appiccicoso fluttuante (ne parleremo più avanti).

Ci sono alcune altre opzioni di personalizzazione premium lì, ma per ora non le toccheremo. Quindi, una volta aggiunti questi valori, salva le impostazioni e sei a posto. Successivamente, apri la pagina che hai creato utilizzando il visual builder Divi. Renderemo il widget di iscrizione alla newsletter appiccicoso aggiungendo una classe CSS ad esso. Ci sono due colonne. La colonna di sinistra mostra i post del blog e quella di destra mostra la barra di iscrizione alla newsletter. Quindi, dobbiamo applicare l'ID CSS alla colonna di destra.

Aggiungi ID CSS personalizzato

Per fare ciò, apri la sezione Impostazioni Divi e scegli la colonna 2 . Nella scheda Avanzate , vedrai una sezione per aggiungere codici CSS ID, classe CSS e CSS personalizzati. Per rendere questo elemento appiccicoso, devi semplicemente aggiungere l'elemento appiccicoso che hai impostato nelle impostazioni di base. Nel nostro caso, aggiungeremo sticky al campo ID CSS e salveremo le impostazioni.

Assicurati di salvare tutte le impostazioni del builder Divi, altrimenti non funzionerà. Quindi, puoi visualizzare in anteprima la pagina.

Come puoi vedere sopra, il modulo di iscrizione alla newsletter è ora corretto. Tuttavia, si sovrappone ad altri elementi del sito, quindi apporteremo alcune modifiche. Questo è quando entra in gioco l' ID elemento push-up dalle impostazioni avanzate. Nel nostro caso, interromperemo il widget della newsletter subito prima del modulo di contatto.

Aggiungi il CSS di arresto

Quindi, come abbiamo fatto in precedenza, dobbiamo menzionare l' ID CSS push-up nella sezione del modulo di contatto. Per fare ciò, apri le impostazioni della sezione Newsletter in Divi, vai alla scheda Avanzate, aggiungi stop all'ID CSS e salva le modifiche.

Quindi, aggiorna la pagina nel frontend e vedrai che la casella di iscrizione alla newsletter è appiccicosa ma si interrompe quando raggiunge il modulo di contatto e non si sovrappone ad altri widget del sito.

Allo stesso modo, puoi seguire gli stessi passaggi per rendere appiccicoso qualsiasi elemento Divi sul tuo sito . Vediamo come puoi correggere le icone social usando il menu Sticky e Divi Builder.

Rendere appiccicose le icone dei social media

Il processo per rendere appiccicose le icone dei social media è molto simile. Tuttavia, prima di iniziare, tieni presente che con la versione gratuita di Menu appiccicoso, puoi rendere appiccicoso un solo elemento alla volta, quindi ricorda di rimuovere l'ID CSS appiccicoso dalle colonne 2 .

Successivamente, dovrai aggiungere l'ID CSS appiccicoso all'elemento delle icone dei social media. Proprio come abbiamo fatto in precedenza, fai clic sull'elemento, vai alla scheda Avanzate e aggiungi l' ID CSS personalizzato nel campo corrispondente.

Quindi salva le impostazioni e controlla i risultati sul frontend.

Come puoi vedere, abbiamo appena reso le icone dei social media appiccicose!

Se non desideri installare alcun plug-in, puoi correggere gli elementi in modo programmatico. Vediamo come farlo.

2) Rendi appiccicoso qualsiasi elemento Divi con un po' di codifica

In questa sezione, ti mostreremo come puoi correggere qualsiasi elemento Divi a livello di codice . In questo caso, invece di correggere il widget di iscrizione alla newsletter, ti mostreremo come rendere l'intestazione appiccicosa con un po' di codifica .

Crea un'intestazione personalizzata

Dal generatore di temi Divi, puoi creare modelli di siti Web personalizzati.

Per questa demo, per prima cosa, creiamo un'intestazione globale.

Avrai tre opzioni:

• Costruisci da zero
• Scegli un layout predefinito
• Clona una pagina esistente

Per questa demo, creeremo un'intestazione da zero.

Nel passaggio successivo, devi selezionare il numero di righe che desideri nell'intestazione.

Per il tutorial, sceglieremo un layout a riga singola. Come abbiamo visto in precedenza, dopo aver creato la tua intestazione sarai in grado di modificarla e aggiungere più elementi come menu, immagini, collegamenti personalizzati e altro ancora. Con il trascinamento della selezione di Divi Builder, puoi regolare le dimensioni e il riempimento della tua intestazione in pochi clic.

Nel nostro caso, aggiungeremo un menu alla nostra intestazione.

Aggiungi una classe CSS

Prima di andare avanti, devi menzionare una classe CSS per la tua intestazione. Dalle impostazioni dell'intestazione, vai alla scheda Avanzate e aggiungi una classe CSS personalizzata. Aggiungeremo pa-sticky-header come classe CSS personalizzata.

Dopodiché, salva le modifiche e nelle opzioni del tema Divi, vedrai una sezione per inserire il codice nelle impostazioni di integrazione .

Aggiungi codice JavaScript

Ora inizia la parte divertente. Copia il seguente codice JavaScript:

 <script>
jQuery(funzione ($) {
var headerHeight = $('header.et-l.et-l--header').outerHeight();
$(finestra).bind('scorrimento', funzione () {
var windowHeight = $(finestra).altezza();
if ($(finestra).scrollTop() < windowHeight - headerHeight) {
$('pa-header').removeClass('pa-sticky-header');
}
altro {
$('pa-header').addClass('pa-sticky-header');
}
});
});
</script>

Incollalo nell'editor e salva le modifiche.

Aggiungi CSS aggiuntivo

Successivamente, imposteremo l'elemento che vogliamo rendere appiccicoso sul sito. Nel nostro caso, per fissare l'intestazione in alto, copia il codice CSS seguente e incollalo nell'editor CSS e salva le modifiche.

 /*per rendere appiccicoso un elemento specifico*/

.pa-sticky-header {
	posizione: fissa!importante;
	superiore: 0; /*Imposta la distanza dell'intestazione dalla parte superiore della pagina*/
	larghezza: 100%;
} 

Ora controlla il frontend del tuo sito web e vedrai che l'intestazione sarà corretta.

Inoltre, puoi personalizzare l'intestazione e cambiarne la posizione, le dimensioni e così via. Allo stesso modo, puoi utilizzare il codice come base e rendere appiccicoso qualsiasi altro elemento in Divi. Ad esempio, puoi usarlo per fissare moduli, pulsanti o colonne.

Raccomandazioni

Ora sai come creare elementi appiccicosi sulla tua installazione di Divi ma prima di concludere la nostra guida, diamo un'occhiata ad alcuni suggerimenti.

Nessuna animazione

Con il plug-in Divi builder, puoi aggiungere effetti al passaggio del mouse a elementi, sezioni e altro. Tuttavia, non consigliamo di utilizzare gli effetti al passaggio del mouse sui tuoi elementi permanenti perché potrebbero danneggiare il tuo sito. Se riscontri problemi tecnici durante l'installazione, disattiva l'effetto di animazione al passaggio del mouse e tutto tornerà alla normalità.

Visualizza in anteprima le modifiche prima della pubblicazione

Divi Builder ti consente di vedere le modifiche apportate sullo schermo. Questo è molto utile per assicurarsi che l'allineamento sia corretto e che l'elemento non si sovrapponga ad altri widget del sito.

Elementi appiccicosi limitati nella versione gratuita

La versione gratuita di WP Sticky Menu ti consente solo di aggiungere un elemento appiccicoso. Quindi, se desideri aggiungere più elementi al tuo sito Web, potresti prendere in considerazione l'aggiornamento alla versione pro che parte da 39 USD.

Conclusione

Tutto sommato, correggere alcuni elementi è un'ottima opzione quando vuoi renderli più visibili per i tuoi utenti. In questo tutorial, abbiamo visto due opzioni per rendere appiccicoso qualsiasi elemento Divi:

• Utilizzando il plug-in Divi Builder
• Programmaticamente

Se non hai competenze di programmazione, puoi utilizzare il plug-in Divi Builder. È il modo più semplice e adatto ai principianti per farlo. Con la modalità di anteprima dal vivo, puoi vedere ogni modifica all'istante.

D'altra parte, se non vuoi installare alcun plug-in o ti piace semplicemente programmare, puoi correggere qualsiasi elemento a livello di codice. Usa semplicemente il codice JavaScript come base e personalizzalo per rendere appiccicoso qualsiasi elemento desideri. Puoi aggiungere i codici CSS al file style.css del tuo tema o utilizzare la sezione CSS aggiuntiva in Divi. Prima di farlo, assicurati di menzionare la classe CSS sul tuo elemento.

Quale metodo hai usato per rendere i tuoi elementi appiccicosi? ne conoscete altri? Fatecelo sapere nella sezione commenti qui sotto.

Se questo tutorial è stato utile, condividilo con i tuoi amici e colleghi blogger sui social media. Per altri tutorial, dai un'occhiata al nostro blog.