Jak utworzyć pływający baner w Divi (bez wtyczki)

Opublikowany: 2024-10-08

Pływające banery skutecznie przyciągają uwagę użytkowników i prezentują kluczowe lub ważne komunikaty, nie zakłócając ogólnego doświadczenia użytkownika. W połączeniu z funkcją przewijania banery te pojawiają się dynamicznie, gdy odwiedzający poruszają się po stronie, zwiększając zaangażowanie użytkowników, oferując aktualne informacje we właściwym momencie.

Ten artykuł poprowadzi Cię przez proces tworzenia atrakcyjnego wizualnie i skutecznego pływającego banera w Divi bez pomocy dodatkowych wtyczek innych firm. Od dostosowywania wyglądu po uruchamianie wyświetlania w oparciu o zachowanie podczas przewijania, możesz strategicznie zaplanować czas wyświetlania pływających banerów podczas przewijania. Jednocześnie możesz także w sprawny sposób skutecznie promować oferty, ogłoszenia czy wezwania do działania.

Jak utworzyć pływający baner w Divi w oparciu o zachowanie przewijania (bez wtyczki)

Krok 1: Utwórz lub edytuj niestandardowy szablon treści

Na pulpicie WordPress przejdź do Divi -> Theme Builder . Na stronie Kreator motywów utwórz nowy szablon treści lub edytuj istniejący, klikając przycisk Dodaj treść globalną lub niestandardową lub wybierając szablon, który chcesz zmodyfikować.

W tym przykładzie wyświetlimy pływający baner w jednym szablonie postu, więc wybieramy nasz szablon Wszystkie posty, aby go edytować.

Dodaj nową sekcję

Po wejściu do edytora szablonów Custom Body utwórz nową sekcję dla swojej strony. Aby element pływającego banera wyglądał proporcjonalnie i nie był zbyt duży na Twojej stronie, ustawiliśmy rozmiar sekcji na 25% szerokości.

Krok 2: Dodaj pływającą treść banera

Dodaj moduł

Następnie dodamy pływającą treść banera. Kliknij przycisk „ + ” wewnątrz sekcji, aby dodać nowy moduł. Następnie wybierz dowolny moduł, który ma być wyświetlany jako pływająca treść banera, taki jak Tekst, Przycisk, moduł Wezwania do działania itp. W tym przykładzie wybieramy moduł Wezwania do działania .

Dostosuj moduł

Po dodaniu modułu, którego chcesz używać do wyświetlania zawartości pływającego banera, następną rzeczą, którą zrobimy, będzie ulepszenie i stylizacja modułu. Możesz dostosować moduł do swoich preferencji, dla przykładu (moduł Call to Action) wprowadzamy pewne zmiany, takie jak zamiana tytułu i treści tekstu, dodanie adresu URL przycisku i linku, zmiana koloru tła modułu, dodanie marginesu, dodanie promienia obramowania itp.

  • Dodaj klasę CSS

Następnie dodaj niestandardową klasę CSS o nazwie „ floating-banner-content ” w zakładce zaawansowane modułu.

Po zakończeniu projektowania treści pływającego banera nie zapomnij zapisać wszystkich zmian.

Krok 3: Dodaj niestandardowy fragment CSS i JavaScript

Następnie dodamy niestandardowy fragment kodu CSS i JavaScript do opcji motywu Divi.

Dodaj niestandardowy CSS

Przejdź do opcji motywu Divi i wybierz Niestandardowy CSS (pulpit WordPress -> Divi -> Opcje motywu Divi -> Ogólne -> Niestandardowy CSS ). Następnie skopiuj poniższy fragment CSS i wklej go w dostępnym polu. 

 Tylko ekran @media i (min-width: 768px) { .floating-banner-content {
  pozycja: stała;
  góra: 130 pikseli;
  po lewej: 80%;
  transformacja: tłumaczenieX(-50%);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
  indeks Z: 9999;
  nieprzezroczystość: 0;
  widoczność: ukryta;
  przejście: nieprzezroczystość 0,3 s wysuwania, widoczność 0,3 s wysuwania;
}
}

Tylko ekran @media i (min-width: 768px) { .floating-banner-content.active {
  nieprzezroczystość: 1;
  widoczność: widoczna;
}
}

Dodaj kod JavaScript

Na stronie Opcje Divi Them przejdź do zakładki Integracja . Następnie wklej poniższy fragment kodu JavaScript w polu Dodaj kod do <head> swojego bloga . 

 <skrypt>
jQuery(dokument).ready(funkcja($) {
    var banner = $('.zawartość-pływającego banera');

    $(okno).scroll(funkcja() {
        var scrollTop = $(this).scrollTop();
        if (scrollTop >= 400) {
            banner.addClass('aktywny');
        } w przeciwnym razie {
            banner.removeClass('aktywny');
        }
    });
});
</skrypt>

Po dodaniu niestandardowych fragmentów CSS i JavaScript zastosuj zmiany, klikając przycisk Zapisz zmiany .

Aby zobaczyć wynik, możesz wyświetlić podgląd jednego ze swoich postów lub stron (w zależności od tego, gdzie umieścisz pływający element banera).

Co zrobił kod CSS i JavaScript?

Podział kodu CSS

  • @media only screen and ( min-width: 768px ) :
    • To zapytanie o media jest kierowane w szczególności na urządzenia o minimalnej szerokości ekranu wynoszącej 768 pikseli (tj. tablety i większe). Dzięki temu pływający baner będzie dopasowany do urządzeń, na których można go wygodnie wyświetlać.
  • .floating-banner-content :
    • Selektor ten wybiera elementy z klasą „floating-banner content”, która jest stosowana do modułu zawierającego treść banera.
  • Style .floating-banner-content :
    • position: fixed; : Pozostanie na miejscu nawet wtedy, gdy użytkownik będzie przewijał stronę.
    • top: 130px; : Ustawia górną pozycję banera na 130 pikseli od góry widocznego obszaru.
    • left: 80%; : Ustawia baner na 80% szerokości widocznego obszaru od lewej krawędzi.
    • transform: translateX(-50%); : Wyśrodkowuje baner w poziomie, przesuwając go o 50% w lewo.
    • box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2); : Dodaje subtelny cień do banera, aby uzyskać głębię.
    • z-index: 9999; : zapewnia wyświetlanie banera nad innymi elementami strony.
    • opacity: 0; : Początkowo ukrywa baner, ustawiając jego przezroczystość na 0.
    • visibility: hidden; : Ukrywa zawartość banera do czasu, aż stanie się widoczna.
    • transition: opacity 0.3s ease-in-out, visibility 0.3s ease-in-out; : Stosuje efekt płynnego przejścia w przypadku zmiany krycia i widoczności banera.
  • .floating-banner-content.active :
    • Ten selektor wybiera elementy z klasą „ floating-banner-content ”, która ma również klasę „ active ”. Klasa ta jest dodawana do banera wtedy, gdy powinna być widoczna.
  • Style elementu .floating-banner-content.active :
    • opacity: 1; : Sprawia, że ​​baner jest widoczny, ustawiając jego przezroczystość na 1.
    • visibility: visible; : wyświetla zawartość banera.

Podsumowanie kodu JavaScript

Ten kod JavaScript skutecznie kontroluje widoczność pływającego banera na podstawie pozycji przewijania użytkownika.

Baner staje się widoczny, gdy użytkownik przewinie w dół powyżej określonego progu (w tym przypadku 400 pikseli ).

Gdy użytkownik przewinie z powrotem powyżej progu, baner zniknie. To zachowanie zapewnia dynamiczne i wciągające doświadczenie użytkownika.

Konkluzja

W tym artykule odkryliśmy, jak stworzyć dynamiczny i angażujący pływający baner w Divi bez dodatkowych wtyczek. Postępując zgodnie z przewodnikiem krok po kroku, nauczyłeś się tworzyć atrakcyjny wizualnie baner, dostosowywać jego wygląd i kontrolować jego widoczność w oparciu o zachowanie podczas przewijania.

Pływający baner umożliwia dostarczanie ważnych wiadomości, wyróżnianie kluczowych ofert lub poprawianie ogólnego doświadczenia użytkownika w witrynie. Przy odrobinie kreatywności i dostosowania możesz stworzyć pływający baner, który płynnie integruje się z projektem Twojej witryny i urzeka odwiedzających.