Jak zaprojektować bramkę powitalną dla swojej strony w Divi

Bramka powitalna to skuteczny sposób na zwiększenie konwersji dowolnego wezwania do działania w Twojej witrynie. W rzeczywistości bramki powitalne są popularną funkcją wtyczek, takich jak OptinMonster, do tworzenia opcji e-mail o wysokiej konwersji. Podstawową ideą bramki powitalnej jest ukrycie treści strony za pomocą pełnoekranowego wezwania do działania. Zmusza to użytkownika do interakcji z wezwaniem do działania przed wyświetleniem odpowiedniej strony.

W tym samouczku pokażemy Ci szybki i łatwy sposób na dodanie niestandardowej bramki powitalnej do Twojej strony internetowej bez użycia wtyczki. Może się to przydać do zwiększenia konwersji Twoich wezwań do działania na stronach docelowych.

Sprawdź to!

zapowiedź

Oto krótkie spojrzenie na bramkę powitalną, którą zbudujemy w tym samouczku.

Pobierz układ za DARMO

Aby położyć swoje ręce na projektach 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 otrzymasz ponownej subskrypcji ani 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 na swoją stronę, po prostu wyodrębnij plik zip i przeciągnij plik json do Divi Builder.

Przejdźmy do samouczka, dobrze?

Czego potrzebujesz, aby zacząć

Aby rozpocząć, musisz wykonać następujące czynności:

1. Jeśli jeszcze tego nie zrobiłeś, zainstaluj i aktywuj motyw Divi.
2. Utwórz nową stronę w WordPress i użyj Divi Builder, aby edytować stronę w interfejsie (konstruktor wizualny).
3. Wybierz opcję „Wybierz gotowy układ”.
   
4. Wybierz pakiet układu Bistro i z wyskakującego okienka Wczytaj z biblioteki wybierz układ strony docelowej bistro i kliknij przycisk „Użyj tego układu”, aby zaimportować układ na stronę.
   

Następnie masz stronę docelową, której możesz użyć podczas tworzenia niestandardowej bramki powitalnej.

Tworzenie Bramy Powitalnej

Dodaj nową sekcję

Najpierw utwórz nową zwykłą sekcję i przeciągnij ją na górę strony. Następnie dodaj jeden wiersz kolumny do sekcji.

Zaprojektuj sekcję

Zanim zaczniemy dodawać jakiekolwiek moduły/treści do sekcji, dodajmy trochę niestandardowego projektu, abyśmy mieli ładne płótno do pracy w przyszłości.

Tło

Aby rozpocząć, dodaj gradient tła i obraz w następujący sposób:

• Kolor lewego gradientu tła: rgba (0,17,38,0.7)
• Prawy gradient tła: #001126
• Pozycja startowa: 68%
• Umieść gradient nad obrazem tła: TAK
• Obraz tła: [wstaw obraz]

Dopełnienie i animacja

Następnie przejdź do zakładki projektu i zaktualizuj następujące ustawienia dopełnienia i animacji:

• Wypełnienie (komputer): 28vh na górze, 28vh na dole
• Wypełnienie (tablet): góra 18vh, dół 18vh
• Wypełnienie (telefon): 10vh góra, 10vh dół
• Styl animacji: slajd
• Kierunek animacji: w dół
• Nieprzezroczystość początkowa animacji: 100%;

Ustaw sekcję powitalną

Teraz jesteśmy gotowi, aby nadać naszej sekcji stałą pozycję z wyższym indeksem z, aby bramka powitalna wypełniła ekran przeglądarki, dopóki użytkownik nie kliknie przycisku „Nie, dziękuję”.

Zanim dodamy nasz css pozycjonowania, dodajmy niestandardowy identyfikator CSS w następujący sposób:

• Identyfikator CSS: bramka powitalna

Będzie to używane do kierowania sekcji za pomocą jQuery, aby przenieść ją w górę z widoku, gdy użytkownik kliknie przycisk „Nie, dziękuję”.

Dodaj następujący niestandardowy kod CSS do głównego elementu:

height: 100vh;
position:fixed;
width: 100%;
top: 0px;
display:flex;
flex-direction: column;

Następnie zaktualizuj indeks Z w następujący sposób:

• Indeks Z: 11

UWAGA: jeśli chcesz, aby bramka powitalna również ukrywała nagłówek, możesz dodać wyższy indeks Z, taki jak „99999”.

Tworzenie zawartości bramki powitalnej

Teraz, gdy nasza sekcja jest gotowa, zacznijmy dodawać zawartość bramki powitalnej. Możesz dodać dowolną treść do tej bramki powitalnej. Na razie stwórzmy proste CTA z dwoma przyciskami. Przycisk po lewej stronie będzie tym, na który użytkownicy mają kliknąć. Przycisk po prawej stronie będzie przyciskiem „Nie, dziękuję”, który zamknie bramkę powitalną.

Moduł tekstowy

W wierszu z jedną kolumną dodaj nowy moduł tekstowy o następującej treści:

<h2>Free Dessert for First Timers</h2>
Book a reservation today and get your choice of any dessert on us!

Projekt tekstu

Następnie zaktualizuj projekt tekstu w następujący sposób:

• Czcionka tekstu: kabina
• Kolor tekstu: #ffffff
• Tekst Rozmiar tekstu: 24px (komputer), 18px (telefon)
• Wyrównanie tekstu: do środka
• Czcionka nagłówka 2: Kabina
• Grubość czcionki nagłówka 2: pogrubiona
• Kolor tekstu nagłówka 2: #ffffff
• Rozmiar tekstu nagłówka 2: 66px (komputer), 26px (tablet)

Dodaj wiersz w dwóch kolumnach

Dla naszych przycisków utwórzmy wiersz w dwóch kolumnach pod tekstem.

Dodaj lewy przycisk

W lewej kolumnie dodaj moduł przycisku i zaktualizuj ustawienia w następujący sposób:

• Tekst przycisku: „Mniam! Zarezerwujmy to”

• Wyrównanie przycisków: środek
• Kolor tekstu przycisku: #ffffff
• Kolor tła przycisku: #bd8f52
• Szerokość obramowania przycisku: 0px
• Waga czcionki przycisku: pogrubiona

Następnie dodaj następujący niestandardowy kod CSS, aby przycisk obejmował całą szerokość kolumny:

display: block !important;

Dodaj odpowiedni przycisk „Nie, dziękuję”

Aby utworzyć przycisk „Nie, dziękuję”, najpierw skopiuj lewy przycisk i wklej go w prawej kolumnie.

Następnie zaktualizuj zawartość w następujący sposób:

• Tekst przycisku: nie, dziękuję
• URL linku do przycisku: # (jest to ważne, aby przycisk nie odświeżał strony)

Następnie zaktualizuj projekt przycisku w następujący sposób:

• Kolor tekstu przycisku: #333333
• Kolor tła przycisku: rgba (255,255,255,0.4)

Następnie dodaj następującą klasę CSS do przycisku „nie, dziękuję”:

• Klasa CSS: niedzięki

To będzie nasz selektor w jQuery, który po kliknięciu zamyka bramkę powitalną.

Dodaj niestandardowy kod

Teraz dodajmy niestandardowy fragment kodu potrzebny do dodania funkcji, która zamyka bramkę powitalną, gdy użytkownik kliknie przycisk „Nie, dziękuję”. Aby to zrobić, dodaj moduł kodu poniżej modułu przycisku nie dziękuję.

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

Na koniec zbliżmy przyciski do siebie, nadając wierszowi zawierającemu nasze przyciski maksymalną szerokość. Otwórz ustawienia wiersza i zaktualizuj następujące elementy:

• Maksymalna szerokość: 600px

Ostateczny wynik

Oto jak wygląda ostateczny projekt.

A oto jak wygląda bramka powitalna podczas odświeżania strony.

A oto jak wygląda bramka powitalna na komórce.

Końcowe przemyślenia

Mamy nadzieję, że ta powitalna mata będzie pomocnym dodatkiem do Twojej strony lub szablonu. Divi ułatwia projektowanie i pozycjonowanie maty powitalnej za pomocą wizualnego kreatora, a dopełnienie funkcjonalności zajmuje tylko mały fragment jQuery. Więc jeśli szukasz szybkiej maty powitalnej dla swojej strony bez użycia wtyczki, to powinno się przydać.

Czekam na kontakt z Państwem w komentarzach.

Pozdrawiam!