Cum se creează un banner plutitor în Divi (fără plugin)

Publicat: 2024-10-08

Bannerele plutitoare captează în mod eficient atenția utilizatorului și prezintă mesaje cheie sau importante fără a perturba experiența generală a utilizatorului. Atunci când sunt combinate cu un declanșator de derulare, aceste bannere apar dinamic pe măsură ce vizitatorii navighează prin pagină, sporind implicarea utilizatorilor prin oferirea de informații oportune la momentul potrivit.

Acest articol vă va ghida prin crearea unui banner plutitor atrăgător și eficient din punct de vedere vizual în Divi, fără ajutorul altor pluginuri terțe. De la personalizarea aspectului său până la declanșarea afișajului pe baza comportamentului de defilare, puteți cronometra strategic apariția bannerelor plutitoare în timpul derulării. În același timp, puteți promova, de asemenea, în mod eficient oferte, anunțuri sau îndemnuri.

Cum se creează bannerul plutitor în Divi pe baza comportamentului de defilare (fără plugin)

Pasul 1: Creați sau editați un șablon de corp personalizat

Pe tabloul de bord WordPress, navigați la Divi -> Theme Builder . Pe pagina Creator de teme, creați un șablon de corp nou sau editați unul existent făcând clic pe butonul Adăugați corp global sau personalizat sau selectând șablonul pe care doriți să-l modificați.

Pentru acest exemplu, vom afișa bannerul plutitor într-un singur șablon de postare, așa că selectăm șablonul Toate postările pentru a-l edita.

Adăugați o secțiune nouă

Odată ce intri în editorul de șabloane Corp personalizat, creați o nouă secțiune pentru pagina dvs. Pentru ca elementul banner plutitor să pară proporțional și nu prea mare pe pagina dvs., am stabilit dimensiunea secțiunii la 25% lățime.

Pasul 2: Adăugați conținutul bannerului flotant

Adăugați un modul

În continuare, vom adăuga conținutul bannerului plutitor. Faceți clic pe butonul „ + ” din interiorul secțiunii pentru a adăuga un nou modul. Apoi, selectați orice modul care doriți să apară ca conținut banner plutitor, cum ar fi text, buton, modul de apel la acțiune etc. Pentru acest exemplu, selectăm modulul de apel la acțiune .

Personalizați modulul

Odată ce adăugați modulul pe care doriți să îl utilizați ca mijloc de a afișa conținutul bannerului dvs. plutitor, următorul lucru pe care îl vom face este să modificăm și să stilăm modulul. Puteți personaliza modulul după preferințele dvs., pentru acest exemplu (modul Call to Action), aplicăm unele modificări, cum ar fi înlocuirea titlului textului și a corpului, adăugarea unui buton și a unui link URL, schimbarea culorii modulului de fundal, adăugarea marjei, adăugând raza-chenar etc.

  • Adăugați clasa CSS

Apoi, adăugați o clasă CSS personalizată numită „ floating-banner-content ” în fila avansată a modulului.

Odată ce ați terminat de proiectat conținutul bannerului plutitor, nu uitați să salvați toate modificările.

Pasul 3: Adăugați fragmentul CSS și JavaScript personalizat

În continuare, vom adăuga fragmentul personalizat CSS și JavaScript în Opțiunile temei Divi.

Adăugați CSS personalizat

Accesați Opțiunile temei Divi și selectați CSS personalizat (tabloul de bord WordPress -> Divi -> Opțiuni tema Divi -> General -> CSS personalizat ). După aceea, copiați fragmentul CSS de mai jos și inserați-l în câmpul disponibil. 

 Ecran numai @media și ( min-width: 768px ) { .floating-banner-content {
  poziție: fixă;
  sus: 130px;
  stânga: 80%;
  transforma: translateX(-50%);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
  indicele z: 9999;
  opacitate: 0;
  vizibilitate: ascuns;
  tranziție: opacitate 0,3s ease-in-out, vizibilitate 0,3s ease-in-out;
}
}

Ecran numai @media și ( min-width: 768px ) { .floating-banner-content.active {
  opacitate: 1;
  vizibilitate: vizibil;
}
}

Adăugați codul JavaScript

Pe pagina Opțiuni Divi Them, navigați la fila Integrare . Apoi, inserați fragmentul JavaScript de mai jos în câmpul Adăugați cod la < head > al blogului dvs. 

 <script>
jQuery(document).ready(funcție($) {
    var banner = $('.floating-banner-content');

    $(window).scroll(function() {
        var scrollTop = $(this).scrollTop();
        if (scrollTop >= 400) {
            banner.addClass('activ');
        } altfel {
            banner.removeClass('activ');
        }
    });
});
</script>

După ce sunt adăugate fragmentele CSS și JavaScript personalizate, aplicați modificările făcând clic pe butonul Salvare modificări .

Pentru a vedea rezultatul, puteți previzualiza una dintre postările sau paginile dvs. (în funcție de locul în care plasați elementul banner plutitor).

Ce au făcut codul CSS și JavaScript?

Defalcarea codului CSS

  • @media only screen and ( min-width: 768px ) :
    • Această interogare media vizează în mod specific dispozitivele cu o lățime minimă a ecranului de 768 de pixeli (adică tablete și mai mari). Se asigură că bannerul plutitor este adaptat dispozitivelor care îl pot afișa confortabil.
  • .floating-banner-content :
    • Acest selector vizează elemente cu clasa „floating-banner-content”, care se aplică modulului care conține conținutul bannerului.
  • Stiluri pentru .floating-banner-content :
    • position: fixed; : va rămâne pe loc chiar și atunci când utilizatorul derulează pagina.
    • top: 130px; : Setează poziția de sus a bannerului la 130 de pixeli din partea de sus a ferestrei de vizualizare.
    • left: 80%; : Poziţionează bannerul la 80% din lăţimea ferestrei de vizualizare de la marginea stângă.
    • transform: translateX(-50%); : Centrează bannerul pe orizontală transpunându-l 50% la stânga.
    • box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2); : Adaugă o umbră subtilă bannerului pentru profunzime.
    • z-index: 9999; : Se asigură că bannerul apare deasupra altor elemente de pe pagină.
    • opacity: 0; : ascunde inițial banner-ul setându-i opacitatea la 0.
    • visibility: hidden; : ascunde conținutul bannerului până când acesta devine vizibil.
    • transition: opacity 0.3s ease-in-out, visibility 0.3s ease-in-out; : aplică un efect de tranziție lină atunci când opacitatea și vizibilitatea bannerului se modifică.
  • .floating-banner-content.active :
    • Acest selector vizează elemente cu clasa „ floating-banner-content ” care are și clasa „ active ”. Această clasă este adăugată la banner atunci când ar trebui să fie vizibilă.
  • Stiluri pentru elementul .floating-banner-content.active :
    • opacity: 1; : Face bannerul vizibil setându-i opacitatea la 1.
    • visibility: visible; : Afișează conținutul bannerului.

Rezumatul codului JavaScript

Acest cod JavaScript controlează în mod eficient vizibilitatea bannerului plutitor pe baza poziției de defilare a utilizatorului.

Bannerul devine vizibil atunci când utilizatorul derulează în jos peste un anumit prag ( 400 pixeli în acest caz).

Când utilizatorul derulează înapoi deasupra pragului, bannerul dispare. Acest comportament oferă o experiență de utilizator dinamică și captivantă.

Concluzia

În acest articol, am descoperit cum să creăm un banner plutitor dinamic și captivant în Divi fără pluginuri suplimentare. Urmând ghidul pas cu pas, ați învățat cum să creați un banner atrăgător din punct de vedere vizual, să îi personalizați aspectul și să-i controlați vizibilitatea pe baza comportamentului de defilare.

Bannerul plutitor vă permite să transmiteți mesaje importante, să evidențiați oferte cheie sau să îmbunătățiți experiența generală a utilizatorului site-ului dvs. Cu puțină creativitate și personalizare, puteți crea un banner plutitor care se integrează perfect în designul site-ului dvs. și care vă captivează vizitatorii.