Jak dodać wyskakujące okienko wyzwalane przewijaniem do swoich postów na blogu w Divi

Dodanie wyskakującego okienka uruchamianego przewijaniem do postów na blogu wydaje się naprawdę mądrym posunięciem. Być może widziałeś je wcześniej, czytając inne blogi. Gdy użytkownik przewinie do określonego punktu posta (zwykle do końca), nagle pojawia się okno zawierające wezwanie do działania. Wyskakujące okienko uruchamiane przewijaniem ma na celu zaprezentowanie odwiedzającym ukierunkowanego wezwania do działania dokładnie w momencie, w którym chcesz, aby zobaczyli je na stronie. Krótko mówiąc, jest to świetne narzędzie do zwiększania konwersji lub pozyskiwania kwalifikowanych leadów. Z tego powodu wiele wtyczek zwiększających konwersję (takich jak nasz własny Bloom lub jak Optin Monster) pozwala zrobić to samo.

W tym samouczku pokażemy, jak dodać wyskakujące okienko wyzwalane przewijaniem do swoich postów na blogu w Divi od podstaw, bez wtyczki. Aby to zrobić, użyjemy Divi Theme Builder do zaprojektowania wyskakującego okienka zawierającego powiązany post według kategorii, a także wyskakujące okienko zawierające opcję e-mail. Wyzwalanie przewijania zostanie zrealizowane za pomocą małego fragmentu jQuery.

Zacznijmy!

zapowiedź

Oto krótkie spojrzenie na wyskakujące okienka uruchamiane przewijaniem, które będziemy tworzyć.

Utworzymy wyskakujące okienko, aby ujawnić powiązany post (według kategorii), jak pokazano poniżej.

Pokażemy Ci również, jak dodać opcję e-mail optin do wyskakującego okienka, jak widać tutaj.

Pobierz szablon wyskakującego okienka Divi Post z przewijaniem za DARMO

Aby położyć swoje ręce na szablonie posta z tego samouczka, najpierw musisz go pobrać za pomocą przycisku poniżej. Aby uzyskać dostęp do pobrania, musisz zapisać się na naszą listę e-mailową Divi Daily, korzystając z poniższego formularza. Jako nowy subskrybent otrzymasz jeszcze więcej dobroci Divi i darmowy pakiet Divi Layout w każdy poniedziałek! Jeśli jesteś już na liście, po prostu wpisz poniżej swój adres e-mail i kliknij pobierz. Nie będziesz „ponownie subskrybować” ani otrzymywać dodatkowych wiadomości e-mail.

Pobierz pliki

Pobierz za darmo

Dołącz do biuletynu Divi, a wyślemy Ci e-mailem kopię najlepszego pakietu układu strony docelowej Divi, a także mnóstwo innych niesamowitych i bezpłatnych zasobów, wskazówek i sztuczek Divi. Idź dalej, a w mgnieniu oka zostaniesz mistrzem Divi. Jeśli masz już subskrypcję, wpisz poniżej swój adres e-mail i kliknij Pobierz, aby uzyskać dostęp do pakietu układów.

POBIERANIE

Udało Ci się zasubskrybować. Sprawdź swój adres e-mail, aby potwierdzić subskrypcję i uzyskać dostęp do bezpłatnych cotygodniowych pakietów układów Divi!

Aby zaimportować układ do swojej strony, po prostu rozpakuj plik zip i dodaj jeden z plików json do Divi Theme Builder za pomocą opcji Theme Builder Portability.

Przejdźmy do samouczka, dobrze?

Czego potrzebujesz, aby zacząć

Aby rozpocząć, musisz zainstalować i aktywować motyw Divi. Upewnij się, że masz najnowszą wersję Divi.

Będziesz musiał pobrać pakiet Fourth Theme Builder Pack, ponieważ będziemy używać gotowego szablonu posta z tego pakietu w tym samouczku.

Potrzebujesz również co najmniej kilku postów na blogu utworzonych do celów testowych, aby szablon posta wyświetlał wyniki.

Po tym jesteś gotowy do pracy.

Tworzenie wyskakującego okienka wyzwalanego przewijaniem na końcu postów na blogu Divi

Importowanie szablonu bloga z czwartego pakietu Theme Builder Pack

Z pulpitu WordPress przejdź do Divi> Theme Builder. W kreatorze motywów wybierz ikonę przenoszenia w prawym górnym rogu strony. W wyskakującym okienku przenośności wybierz zakładkę importu, wybierz plik theme-builder-pack-4-post-template.json i kliknij przycisk importu. (Ten plik importu będzie znajdował się w folderze Fourth Theme Builder Pack)

Możesz również wybrać opcję importowania globalnego nagłówka i stopki jako układów statycznych.

Po zaimportowaniu szablonu kliknij ikonę, aby edytować niestandardowy obszar ciała.

Spowoduje to przejście do edytora układu szablonu treści, w którym dodamy wyskakujące okienka wyzwalane przewijaniem.

Projektowanie wyskakującego okienka wyzwalanego przewijaniem z powiązanym postem według kategorii

Wyskakujące okienko będzie zawarte w wierszu Divi. Dlatego po uruchomieniu funkcji wyskakujących okienek możesz wypełnić ten wiersz dowolnym modułem, aby utworzyć dowolną treść. W tym pierwszym przykładzie utworzymy wyskakujące okienko z powiązanym postem według kategorii. W ten sposób, gdy odwiedzający przewinie się na sam dół posta, zostanie mu zasugerowany powiązany post w wyskakującym okienku.

Oto jak to zrobić.

Dodaj wiersz jednokolumnowy

Najpierw dodaj wiersz z jedną kolumną tuż pod wierszem zawierającym moduł treści posta w układzie szablonu postu.

Ustawienia wiersza

Przed dodaniem modułu zaktualizuj ustawienia wierszy w następujący sposób:

• Kolor tła: #ffffff
• Szerokość rynny: 1
• Szerokość: 300px (komputer), 200px (telefon)
• Padding: 20px góra, 0px dół
• Cień pudełka: patrz zrzut ekranu

Dodaj moduł tekstowy

Po dostosowaniu ustawień wiersza dodaj do wiersza moduł tekstowy. Będzie to obszar tytułowy naszego powiązanego wyskakującego okienka.

Zadowolony

Zaktualizuj treść treści tekstem „Powiązany post”.

Projekt

Następnie zaktualizuj ustawienia projektu w następujący sposób:

• Czcionka tekstu: Heebo
• Styl czcionki tekstu: TT
• Kolor tekstu tekstu: #f94857
• Wyrównanie tekstu: do środka

Dodaj moduł bloga

Pod modułem tekstowym dodaj moduł bloga.

Zadowolony

Ponieważ chcemy wyróżnić tylko jeden powiązany post, ograniczymy liczbę postów do jednego i uwzględnimy „bieżącą kategorię”, aby post wyświetlany w wyskakującym okienku miał tę samą kategorię, co rzeczywisty post wyświetlany w szablonie.

Zaktualizuj następujące elementy:

• Liczba postów: 1
• Uwzględnione kategorie: Aktualna kategoria

Elementy

W grupie opcji Elementy upewnij się, że wybrałeś wyświetlanie tylko wyróżnionego obrazu. Ukryj wszystko inne.

Projekt

Na karcie projekt zaktualizuj następujące elementy:

• Czcionka tytułu: Heebo
• Grubość czcionki tytułu: Ultra Bold
• Rozmiar tekstu tytułu: 16px
• Wysokość wiersza tytułu: 1.4em
• Wyściółka: 5% u góry, 5% w lewo, 5% w prawo

Zaawansowane ustawienia wierszy

Klasa CSS, niestandardowy CSS i indeks Z

W zakładce Zaawansowane musimy nadać naszemu wierszowi klasę CSS, trochę niestandardowego CSS i zaktualizować indeks Z, aby wyskakujące okienko pozostało nad inną zawartością strony.

Ten krok spowoduje ukrycie wiersza z widoku podczas korzystania z wizualnego konstruktora z przodu. Dlatego może lepiej wdrożyć widok szkieletowy przed aktualizacją tych opcji.

W trybie widoku szkieletowego otwórz kopię zapasową ustawień wiersza i dodaj następującą klasę CSS:

• Klasa CSS: po wierszu

Następnie dodaj następujący niestandardowy css do głównego elementu:

position: fixed;
bottom: 0%;
right: -300px;

I zaktualizuj indeks Z:

• Indeks Z: 999

Dodaj dzielniki jako punkty wyzwalania przewijania

W tym momencie nasze wyskakujące okienko jest gotowe. Teraz musimy zdecydować, gdzie dodać nasze punkty wyzwalające przewijanie w szablonie posta, aby po przewinięciu do tych punktów wyskakujące okienko zostało pokazane lub ukryte. Punkty wyzwalające przewijania zostaną określone przez element z klasą CSS. Ponieważ chcemy, aby punkt wyzwalania przewijania znajdował się na dole wpisu, możemy użyć dzielnika z klasą CSS jako naszego elementu punktu wyzwalania przewijania.

Dodaj punkt wyzwalający przewijanie nr 1

Aby dodać nasz pierwszy punkt wyzwalający przewijanie, dodajmy moduł dzielnika bezpośrednio pod modułem treści posta.

Następnie dodaj następującą klasę CSS:

• Klasa CSS: post-point

To było łatwe.

Dodaj punkt wyzwalania przewijania nr 2

Teraz, aby dodać drugi punkt wyzwalający (ten, który ukryje wyskakujące okienko w dalszej części strony), skopiuj właśnie utworzony moduł dzielnika.

Następnie wklej go w miejscu znajdującym się dalej w szablonie posta, w którym chcesz zamknąć (lub ukryć) wyskakujące okienko. W tym przykładzie dodaję go tuż pod modułem bloga powiązanych postów i tuż nad sekcją komentarzy w szablonie posta.

Dodaj niestandardowy kod za pomocą modułu kodu

Wszystko, co pozostało do zrobienia, aby wyskakujące okienko wyzwalane przewijaniem zadziałało, to mały kod.

Śmiało i dodaj moduł kodu do szablonu posta.

Następnie wklej następujący kod w polu kodu:

<style>
  .post-row {
    transition: all .4s;
  }
  .post-row.show-post {
    right: 0px;
  }
</style>
<script>
  jQuery(document).ready(function($) {
    $('.post-waypoint').waypoint(function() {
        $('.post-row').toggleClass('show-post');
    }, {offset: '97%'});
  });
</script>

Wynik

Aby zobaczyć wynik, odwiedź jeden ze swoich postów na blogu i przewiń stronę w dół. Powinieneś zobaczyć wyskakujące okienko powiązanego posta, gdy dojdziesz do dołu treści posta. Przewijaj, aby zobaczyć go ukryty zaraz za sekcją powiązanych postów w poście.

Dodawanie opcji e-mail do wyskakującego okienka wyzwalanego przewijaniem

Powiązane wyskakujące okienko posta jest fajne, ale może zamiast tego chcesz wyskakujące okienko e-mail. To jest łatwe. W rzeczywistości możemy nawet użyć opcji optin e-mail już zaprojektowanej w gotowym układzie stopki w tym szablonie.

Zapisz stopkę e-mail Optin do biblioteki Divi

Zapisz układ i wyjdź do kreatora motywów. Następnie kliknij, aby edytować układ niestandardowego szablonu stopki.

Znajdź moduł optin e-mail i zapisz go w bibliotece divi.

Dodaj zapisaną opcję e-mail do wyskakującego wiersza

Teraz wróć do niestandardowego układu szablonu treści i dodaj zapisany e-mail opt w tym samym wierszu, którego używasz jako wyskakującego okienka. Pamiętaj, że wszystko w tym wierszu będzie wyświetlane jako zawartość wyskakującego okienka.

Ponieważ nie używasz modułu tekstowego i blogowego, możesz wyłączyć ich widoczność w interfejsie.

Ustawienia opcji e-mail

Po wprowadzeniu opcji e-mail optin i wyłączeniu innych modułów zaktualizuj ustawienia e-mail optin w następujący sposób:

• Tytuł: „Podobało mi się ten artykuł?”
• Treść: „Dołącz do naszego Newslettera!”

Następnie dodaj następujące wypełnienie:

• Padding: 5% dolny, 20px w prawo

Wynik

Teraz sprawdź wynik w poście na żywo.

Końcowe przemyślenia

Wyskakujące okienka uruchamiane przewijaniem z pewnością mogą być cennym zasobem Twojego bloga. Zapewniają dyskretny sposób na wykorzystanie kwalifikowanych leadów. Użyj wyskakującego okienka z powiązanym wpisem, aby utrzymać ich zaangażowanie w swojej witrynie, lub skorzystaj z opcji e-mail, aby pomóc w rozbudowie listy. A dzięki Divi możesz dodać prawie każdą inną treść, o której możesz pomyśleć. I możesz dokładnie zdecydować, kiedy chcesz, aby odwiedzający zobaczył te wyskakujące okienka, co jest dość potężne. Mam nadzieję, że przyda Ci się na własnym blogu lub w następnym projekcie.

Czekam na kontakt z Państwem w komentarzach poniżej.

Pozdrawiam!