Jak tworzyć wyskakujące okienka z zablokowanymi treściami w Divi

Co tydzień dostarczamy nowe i bezpłatne pakiety układów Divi, których możesz użyć w swoim następnym projekcie. W przypadku jednego z pakietów układu udostępniamy również przypadek użycia, który pomoże Ci przenieść Twoją witrynę na wyższy poziom.

W tym tygodniu, w ramach naszej trwającej inicjatywy projektowania Divi, pokażemy Ci, jak tworzyć wyskakujące okienka z zablokowanymi treściami za pomocą Divi i pakietu Resort Layout Pack. Koncepcja formularza zgody na zablokowane treści jest prosta. Ludzie muszą podać swój adres e-mail, a gdy tylko to zrobią, ukryte treści zostaną ujawnione. Możesz użyć tej ukrytej zawartości, aby na przykład udostępnić kod rabatowy. Aby to wszystko się stało, użyjemy wtyczki Bloom i dodamy krótki kod formularza zgody na zablokowane treści do modułu tekstowego, który nadamy stylowi jako wyskakujące okienko. Moduł tekstowy będzie również zawierał animację z opóźnieniem animacji, aby moduł tekstowy wyglądał jak wyskakujące okienko.

Weźmy się za to!

Zapowiedź

Zanim zagłębimy się w samouczek, rzućmy okiem na wyniki na różnych rozmiarach ekranu.

Pulpit

mobilny

Zainstaluj wtyczkę Bloom

Pobierz Bloom

Pierwszą rzeczą, którą musisz zrobić, to pobrać wtyczkę Bloom. Jeśli jesteś już członkiem Elegant Themes, możesz znaleźć wtyczkę, przechodząc do obszaru członków. Tam będziesz mógł pobrać spakowany plik. Jeśli nie jesteś jeszcze członkiem Elegant Themes, musisz najpierw kupić członkostwo.

Prześlij i zainstaluj Bloom

Po pobraniu Bloom możesz przesłać go do swojej witryny WordPress, przechodząc do Wtyczki> Dodaj nowy i klikając „Prześlij wtyczkę” u góry strony.

Następnie prześlij spakowany plik i kliknij „Zainstaluj teraz”.

Nie zapomnij aktywować wtyczki po jej przesłaniu.

Skonfiguruj formularz Bloom Optin

Dodaj nowy formularz zablokowanej zawartości

Możemy teraz rozpocząć tworzenie formularza zablokowanej zawartości, którego użyjemy później w tym poście w naszym projekcie Divi! Przejdź do pulpitu WordPress > Bloom > Formularze optin i utwórz nowy formularz optin.

Kontynuuj, wybierając typ opcji „Zablokowana zawartość” i przejdź do ustawień konfiguracji.

Ustawienia konfiguracji

Po przejściu do ustawień konfiguracji musisz nadać nazwę nowemu formularzowi zgody. Musisz także wybrać wybranego dostawcę poczty e-mail i wprowadzić dane uwierzytelniające.

Ustawienia projektowe

Kolejnym krokiem jest zaprojektowanie formularza. W dalszej części posta użyjemy krótkiego kodu formularza optin w module tekstowym, który zmienimy styl, więc nie potrzebujemy stosowania zbyt wielu ustawień do samego formularza optin. Upewnij się, że pozostawiłeś puste pola tytułu optin i optin content message. Zmień również orientację obrazu.

• Orientacja obrazu: brak obrazu

Przewiń stronę w dół i wprowadź dodatkowe zmiany w stylu optin i konfiguracji formularza.

• Kolor tła: #ffffff
• Orientacja formularza: Formularz na dole

Zmieniamy także ustawienia stylów formularzy.

• Orientacja pól formularza: ułożone pola formularza
• Kolor tła formularza: #f4f4f4
• Kolor przycisku: #ffffff
• Kolor tekstu przycisku: ciemny
• Wybierz Styl krawędzi formularza: Druga opcja

Twórz projekt z Divi

Dodaj nowy wiersz

Struktura kolumny

Możemy teraz przełączyć się na Divi Builder! Śmiało i utwórz nową stronę, korzystając ze strony głównej pakietu Resort Layout Pack. Po przesłaniu układu kontynuuj, dodając nowy wiersz u góry drugiej sekcji, korzystając z następującej struktury kolumn:

Rozmiary

Nie dodając jeszcze żadnych modułów, otwórz ustawienia wierszy i wprowadź zmiany w ustawieniach rozmiaru.

• Stwórz ten wiersz o pełnej szerokości: Tak
• Użyj niestandardowej szerokości rynny: Tak
• Szerokość rynny: 1

Rozstaw

Przejdź do ustawień odstępów i dodaj „0px” do górnego i dolnego dopełnienia wiersza. Ograniczy to miejsce zajmowane przez dodany przez nas nowy wiersz.

• Górna wyściółka: 0px
• Dolna wyściółka: 0px

Dodaj moduł tekstowy

Dodaj zawartość H3

Jedynym modułem, którego potrzebujemy, aby utworzyć wyskakujące okienko zablokowanej treści, jest moduł tekstowy. Dodaj wybrany tytuł H3 do pola treści.

Dodaj skrócony kod formularza Optin dla zablokowanej zawartości

Następnie wróć do wtyczki Bloom i skopiuj krótki kod formularza optin, który utworzyłeś w poprzedniej części tego samouczka.

Dodaj dowolną treść, która ma się pojawiać po wypełnieniu formularza zgody. W poniższym przykładzie możesz zauważyć, że udostępniamy kod kuponu, ale możesz udostępniać dowolne informacje.

Kolor tła

Przejdź do ustawień tła modułu i dodaj całkowicie biały kolor tła.

• Kolor tła: #ffffff

Ustawienia tekstu

Przejdź do zakładki projektu i następnie zmień ustawienia tekstu.

• Czcionka tekstu: Otwórz Sans
• Kolor tekstu: #0f87ff
• Rozmiar tekstu: 15px

Ustawienia tekstu H3

Zmień też czcionkę używaną w kopii H3.

• Czcionka nagłówka 3: Wyświetlacz Gilda

Rozstaw

Aby nadać modułowi kształt, dodamy kilka niestandardowych wartości marginesów i dopełnienia. Modyfikujemy również wszystkie te wartości, aby projekt pasował do dowolnego rozmiaru ekranu, z którego korzystają użytkownicy.

• Górny margines: -17vw
• Lewy margines: 65vw (komputer stacjonarny), 37vw (tablet), 3vw (telefon)
• Prawy margines: 0px
• Górna wyściółka: 5vw (komputer), 11vw (tablet), 13vw (telefon)
• Dolna wyściółka: 5vw, 11vw (tablet), 13vw (telefon)
• Lewa wyściółka: 6vw (komputer), 11vw (tablet), 16vw (telefon)
• Prawa wyściółka: 6vw (komputer), 11vw (tablet), 16vw (telefon)

Granica

Kontynuuj, przechodząc do ustawień obramowania modułu tekstowego i dodaj „500vw” do każdego z rogów, z wyjątkiem prawego dolnego.

Cień Pudełka

Dodaj cień pola obok, aby wyskoczył moduł tekstowy.

• Siła rozmycia cieni w pudełku: 150px
• Kolor cienia: rgba(0,0,0,0.3)

Animacja

Na koniec dodajemy również animację, która biegnie od prawej do lewej, aby stworzyć efekt wyskakującego okienka.

• Powtórzenie animacji: raz
• Kierunek animacji: w lewo
• Czas trwania animacji: 500 ms
• Opóźnienie animacji: 1000 ms
• Intensywność animacji: 16%

Klonuj rząd

Po zakończeniu tworzenia pierwszego wyskakującego okienka w rogu zablokowanej zawartości możesz sklonować cały wiersz.

Umieść zduplikowany wiersz tutaj:

Usuń dolną wyściółkę sekcji

Usuń dolną wyściółkę sekcji, w której umieściłeś wiersz.

• Dolna wyściółka: 0px

Zmień ustawienia odstępów modułu tekstowego

Następnie otwórz ustawienia modułu tekstowego i zmień niestandardowe wartości marginesów.

• Lewy margines: 0vw
• Prawy margines: 65vw (komputer stacjonarny), 37vw (tablet), 3vw (telefon)

Zmień zaokrąglone rogi modułu tekstowego

Upewnij się, że zmieniłeś też zaokrąglone rogi. Używamy „500vw” dla każdego z rogów, z wyjątkiem lewego dolnego.

Zmień ustawienia animacji modułu tekstowego

Na koniec zmień kierunek animacji na prawy i gotowe!

• Kierunek animacji: w prawo

Zapowiedź

Teraz, gdy przeszliśmy przez wszystkie kroki, przyjrzyjmy się ostatecznemu wynikowi na różnych rozmiarach ekranu!

Pulpit

mobilny

Końcowe przemyślenia

W tym poście pokazaliśmy, jak tworzyć wyskakujące okienka z zablokowanymi treściami za pomocą Divi, wtyczki Bloom i pakietu Resort Layout Pack. Możesz użyć tej techniki, aby przekonać ludzi do dołączenia do Twojej listy e-mailowej, oferując kod kuponu, który pojawia się po wypełnieniu formularza. Ten samouczek jest częścią naszej nieustannej inicjatywy projektowej Divi, w której każdego tygodnia staramy się dodawać coś dodatkowego do zestawu narzędzi projektowych. Jeśli masz jakieś pytania lub sugestie, koniecznie zostaw komentarz w sekcji komentarzy poniżej!