Come creare un banner mobile in Divi (senza plugin)

Pubblicato: 2024-10-08

I banner mobili attirano efficacemente l'attenzione dell'utente e presentano messaggi chiave o importanti senza interrompere l'esperienza complessiva dell'utente. Se combinati con un trigger di scorrimento, questi banner appaiono dinamicamente mentre i visitatori navigano nella pagina, migliorando il coinvolgimento dell'utente offrendo informazioni tempestive al momento giusto.

Questo articolo ti guiderà nella creazione di un banner mobile visivamente accattivante ed efficace in Divi senza l'aiuto di plug-in aggiuntivi di terze parti. Dalla personalizzazione dell'aspetto all'attivazione della visualizzazione in base al comportamento di scorrimento, puoi programmare strategicamente la comparsa dei banner mobili durante lo scorrimento. Allo stesso tempo, puoi anche promuovere efficacemente offerte, annunci o inviti all'azione in modo fluido.

Come creare il banner mobile in Divi in ​​base al comportamento di scorrimento (senza plugin)

Passaggio 1: crea o modifica un modello di corpo personalizzato

Sulla dashboard di WordPress, vai a Divi -> Theme Builder . Nella pagina Theme Builder, crea un nuovo modello di corpo o modificane uno esistente facendo clic sul pulsante Aggiungi corpo globale o personalizzato o selezionando il modello che desideri modificare.

Per questo esempio, visualizzeremo il banner mobile in un modello di post singolo, quindi selezioniamo il nostro modello Tutti i post per modificarlo.

Aggiungi una nuova sezione

Una volta entrato nell'editor del modello Custom Body, crea una nuova sezione per la tua pagina. Per fare in modo che l'elemento banner mobile appaia proporzionale e non troppo grande sulla tua pagina, impostiamo la dimensione della sezione al 25% di larghezza.

Passaggio 2: aggiungi il contenuto del banner mobile

Aggiungi un modulo

Successivamente, aggiungeremo il contenuto del banner mobile. Fare clic sul pulsante " + " all'interno della sezione per aggiungere un nuovo modulo. Successivamente, seleziona qualsiasi modulo che desideri venga visualizzato come contenuto del banner mobile, come testo, pulsante, modulo Call to Action, ecc. Per questo esempio, selezioniamo il modulo Call to Action .

Personalizza il modulo

Una volta aggiunto il modulo che desideri utilizzare come mezzo per visualizzare il contenuto del banner mobile, la prossima cosa che faremo sarà modificare e abbellire il modulo. Puoi personalizzare il modulo secondo le tue preferenze, per questo esempio (modulo Call to Action), applichiamo alcune modifiche, come la sostituzione del titolo e del corpo del testo, l'aggiunta di un pulsante e un URL di collegamento, la modifica del colore del modulo di sfondo, l'aggiunta di margini, aggiunta del raggio del bordo, ecc.

  • Aggiungi la classe CSS

Successivamente, aggiungi una classe CSS personalizzata chiamata " floating-banner-content " nella scheda avanzata del modulo.

Una volta terminata la progettazione del contenuto del banner mobile, non dimenticare di salvare tutte le modifiche.

Passaggio 3: aggiungi il CSS personalizzato e lo snippet JavaScript

Successivamente, aggiungeremo lo snippet CSS e JavaScript personalizzato nelle Opzioni tema Divi.

Aggiungi il CSS personalizzato

Vai alle Opzioni tema Divi e seleziona CSS personalizzato (dashboard WordPress -> Divi -> Opzioni tema Divi -> Generale -> CSS personalizzato ). Successivamente, copia lo snippet CSS sottostante e incollalo nel campo disponibile. 

 Schermata solo @media e (larghezza minima: 768px) { .floating-banner-content {
  posizione: fissa;
  in alto: 130px;
  sinistra: 80%;
  trasformazione: traduciX(-50%);
  box-ombra: 0 2px 4px rgba(0, 0, 0, 0.2);
  indice z: 9999;
  opacità: 0;
  visibilità: nascosta;
  transizione: opacità 0,3 s facilità di entrata-uscita, visibilità 0,3 s facilità di entrata-uscita;
}
}

Schermata solo @media e (larghezza minima: 768px) { .floating-banner-content.active {
  opacità: 1;
  visibilità: visibile;
}
}

Aggiungi il codice JavaScript

Nella pagina Opzioni Divi Them, vai alla scheda Integrazione . Successivamente, incolla lo snippet JavaScript di seguito nel campo Aggiungi codice alla <head> del tuo blog . 

 <copione>
jQuery(documento).ready(funzione($) {
    var banner = $('.floating-banner-content');

    $(finestra).scroll(funzione() {
        var scrollTop = $(this).scrollTop();
        if (scrollTop >= 400) {
            banner.addClass('attivo');
        } altro {
            banner.removeClass('attivo');
        }
    });
});
</script>

Una volta aggiunti gli snippet CSS e JavaScript personalizzati, applica le modifiche facendo clic sul pulsante Salva modifiche .

Per vedere il risultato, puoi visualizzare l'anteprima di uno dei tuoi post o delle tue pagine (a seconda di dove posizioni l'elemento banner mobile).

Cosa hanno fatto il codice CSS e JavaScript?

Ripartizione del codice CSS

  • @media only screen and ( min-width: 768px ) :
    • Questa query multimediale si rivolge specificamente ai dispositivi con una larghezza dello schermo minima di 768 pixel (ad esempio, tablet e dimensioni maggiori). Garantisce che il banner mobile sia adattato ai dispositivi che possono visualizzarlo comodamente.
  • .floating-banner-content :
    • Questo selettore prende di mira gli elementi con la classe "floating-banner-content", che viene applicata al modulo contenente il contenuto del banner.
  • Stili per il .floating-banner-content :
    • position: fixed; : Rimarrà al suo posto anche quando l'utente scorre la pagina.
    • top: 130px; : imposta la posizione superiore del banner a 130 pixel dalla parte superiore del viewport.
    • left: 80%; : posiziona il banner all'80% della larghezza del viewport dal bordo sinistro.
    • transform: translateX(-50%); : centra il banner orizzontalmente traslandolo del 50% a sinistra.
    • box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2); : aggiunge un'ombra sottile al banner per donare profondità.
    • z-index: 9999; : garantisce che il banner venga visualizzato sopra gli altri elementi della pagina.
    • opacity: 0; : Inizialmente nasconde il banner impostandone l'opacità su 0.
    • visibility: hidden; : nasconde il contenuto del banner finché non viene reso visibile.
    • transition: opacity 0.3s ease-in-out, visibility 0.3s ease-in-out; : applica un effetto di transizione graduale quando l'opacità e la visibilità del banner cambiano.
  • .floating-banner-content.active :
    • Questo selettore prende di mira gli elementi con la classe " floating-banner-content " che ha anche la classe " active ". Questa classe viene aggiunta al banner quando dovrebbe essere visibile.
  • Stili per l'elemento .floating-banner-content.active :
    • opacity: 1; : Rende visibile il banner impostandone l'opacità su 1.
    • visibility: visible; : Visualizza il contenuto del banner.

Riepilogo del codice JavaScript

Questo codice JavaScript controlla efficacemente la visibilità del banner mobile in base alla posizione di scorrimento dell'utente.

Il banner diventa visibile quando l'utente scorre verso il basso oltre una certa soglia ( 400 pixel in questo caso).

Quando l'utente torna indietro sopra la soglia, il banner scompare. Questo comportamento fornisce un'esperienza utente dinamica e coinvolgente.

La linea di fondo

In questo articolo, abbiamo scoperto come creare un banner mobile dinamico e accattivante in Divi senza plug-in aggiuntivi. Seguendo la guida passo passo, hai imparato come creare un banner visivamente accattivante, personalizzarne l'aspetto e controllarne la visibilità in base al comportamento di scorrimento.

Il banner mobile ti consente di inviare messaggi importanti, evidenziare offerte chiave o migliorare l'esperienza utente complessiva del tuo sito web. Con un po' di creatività e personalizzazione, puoi creare un banner mobile che si integra perfettamente nel design del tuo sito web e affascina i tuoi visitatori.