Jak zbudować lepkie menu CTA podczas przewijania strony?

Tradycyjnie przyklejone menu są widoczne na górze (lub na dole) strony w momencie jej załadowania. Jednak zbudowanie lepkiego menu wezwania do działania, gdy użytkownik przewija stronę w dół, może być kreatywnym i skutecznym sposobem, aby te ważne wezwania do działania były zawsze klikalne. Pod pewnymi względami jest to najlepsze z obu światów. Pozwala to CTA zachować swoje pierwszorzędne położenie w oryginalnym projekcie. I utrzymuje skróconą wersję CTA (przycisku) widoczną w lepkiej strukturze menu, którą znają użytkownicy.

W tym samouczku pokażemy, jak zbudować lepkie menu CTA podczas przewijania strony w Divi. Będzie to świetne rozwiązanie dla użytkowników komputerów stacjonarnych i urządzeń mobilnych, dodając intuicyjny, ale unikalny sposób na zachęcenie odwiedzających do podjęcia działania.

Zacznijmy!

zapowiedź

Oto krótkie spojrzenie na projekt, który 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 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!

https://youtu.be/kpjbG8frPTQ

Subskrybuj nasz kanał YouTube

Aby zaimportować układ sekcji do Biblioteki Divi, przejdź do Biblioteki Divi.

Kliknij przycisk Importuj.

W wyskakującym okienku przenośności wybierz zakładkę importu i wybierz plik do pobrania z komputera.

Następnie kliknij przycisk importu.

Po zakończeniu układ sekcji będzie dostępny w 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ę „Buduj od podstaw”.

Następnie będziesz mieć puste płótno, aby rozpocząć projektowanie w Divi.

Jak zbudować lepkie menu CTA podczas przewijania strony w Divi

Budowanie CTA #1

Aby rozpocząć tworzenie naszego pierwszego CTA, użyjemy modułu notki z niestandardowym przyciskiem CTA, który będzie przyklejał się na górze i na dole strony podczas przewijania strony.

Aby rozpocząć, utwórz nowy jednokolumnowy wiersz w zwykłej sekcji.

Dodaj rozmycie

W kolumnie wiersza dodaj moduł notki.

Otwórz ustawienia notki i dodaj wybrany obraz zamiast domyślnej ikony. Używam obrazu z pakietu Cryptocurrency Layout Pack.

Na karcie projektu zaktualizuj style tekstu w następujący sposób:

• Poziom nagłówka tytułu: H2
• Czcionka tytułu: Titillium Web
• Grubość czcionki tytułu: pół pogrubiona
• Wyrównanie tekstu tytułu: do środka
• Rozmiar tekstu tytułu: 36px (komputer), 28px (telefon)
• Wysokość wiersza tytułu: 1,5 em
• Wysokość linii ciała: 2em

Dodaj wiersz dla przycisku CTA

Pod wierszem zawierającym właśnie utworzoną notkę dodaj nowy wiersz z jedną kolumną.

Ważne jest, aby ustawienia wierszy były prawidłowe, aby przyciski przyklejone działały prawidłowo.

Otwórz ustawienia wiersza i zaktualizuj następujące elementy:

• Szerokość rynny: 1
• Szerokość: 100%
• Maksymalna szerokość: 1400px (komputer), 100% (tablet)

Dodaj przycisk wezwania do działania

W nowym wierszu dodaj moduł wezwania do działania. Aktualizacja następujących elementów:

• Będziemy potrzebować tylko elementu przycisku w tym module, abyśmy mogli pozbyć się tytułu i tekstu podstawowego.
• Pamiętaj, aby dodać link URL przycisku (na razie wystarczy „#”), aby przycisk był widoczny podczas projektowania układu. Zawsze możesz zaktualizować to później.
• Wyłącz opcję „Użyj koloru tła”.

(UWAGA: nie będzie jeszcze widać białego przycisku na białym tle, ale to się zmieni w następnym kroku)

Na karcie projekt zaktualizuj następujące style przycisków:

• Rozmiar tekstu przycisku: 14px (komputer), 11px (telefon)
• Kolor tekstu przycisku: #1b1f50
• Kolor tła przycisku: #09d5fe
• Szerokość obramowania przycisku: 0px
• Odstępy między przyciskami: 2px
• Czcionka przycisku: Titillium Web
• Waga czcionki przycisku: pogrubiona
• Styl czcionki przycisku: TT
• Wypełnienie przycisków: 1 em na górze, 1 em na dole

Kontynuuj aktualizację projektu w następujący sposób:

• Szerokość: 33,33%
• Wyrównanie modułu: środek
• Padding: 0px na górze, 0px na dole

33,33% szerokości przycisku pozwoli mu zajmować dokładnie 1/3 okna przeglądarki, gdy znajduje się w pozycji lepkiej. Połączenie tego z dwoma innymi przyciskami (każdy o tej samej szerokości 33,33%) da pełny pasek menu przycisków CTA.

W zakładce Zaawansowane dodaj następujący niestandardowy fragment kodu CSS do opisu promocji (ma niepotrzebne odstępy, których nie potrzebujemy):

display:none;

Następnie dodaj kolejny fragment przycisku promocyjnego:

display:block;

Przyklejanie przycisku

Aby przycisk był przyklejony, użyjemy opcji przyklejonej pozycji, aby przykleić przycisk oraz górną i dolną część okna przeglądarki. Zamierzamy również dodać przesunięcie dla domyślnego stałego nagłówka Divi.

Zaktualizuj następujące elementy:

• Lepka pozycja: trzymaj się góry i dołu
• Przyklejony górny offset: 54px (komputer), 0px (tablet)
• Odsunięcie od otaczających lepkich elementów: NIE

Z naszą przyklejoną pozycją możemy teraz celować w styl przycisku w stanie przyklejenia. W tym przypadku chcemy przesunąć przycisk w lewo, aby później zrobić miejsce na dodatkowe lepkie przyciski.

Zaktualizuj następujący styl transformacji w stanie przyklejonym:

• Przekształć Przesuń oś X (przyklejony): -100%

Spowoduje to przesunięcie przycisku na odległość równą dokładnej szerokości przycisku (czyli 33,33%) po przyklejeniu się do góry lub dołu strony.

Budowanie CTA #2

Teraz, gdy mamy jedną sekcję z działającym lepkim przyciskiem CTA, możemy powielić poprzednią sekcję i wprowadzić drobne poprawki do przycisku.

Najpierw zduplikuj sekcję.

Otwórz ustawienia modułu Call to Action w nowej sekcji i zaktualizuj opcje transformacji w następujący sposób:

• Przekształć Przesuń oś X (przyklejony): 0px

W rzeczywistości jest to po prostu przywracanie go do stanu domyślnego, ponieważ nie chcemy przesuwać tego przycisku, ponieważ musi pozostać na środku.

Budowanie CTA #3

Aby zbudować trzecią sekcję CTA, zduplikuj poprzednią sekcję.

Następnie otwórz ustawienia modułu Call to Action w nowej sekcji i zaktualizuj opcje transformacji w następujący sposób:

• Przekształć Przesuń oś X (przyklejony): 100%

Spowoduje to przesunięcie przycisku w prawo o odległość równą dokładnej szerokości przycisku (czyli 33,33%) po przyklejeniu się do góry lub dołu strony.

Aktualizuj tekst i kolory przycisku

Aby dopracować projekt, zaktualizuj tekst i kolory przycisku wezwania do działania, aby pasowały do ​​projektu witryny. Oto ustawienia tego przykładu:

Dla CTA #2…

• Tekst przycisku: Zobacz nasze plany
• Kolor tekstu przycisku: #ffffff
• Kolor tła przycisku: #1b1f50

Dla CTA #3…

• Tekst przycisku: Czatuj z nami
• Kolor tekstu przycisku: #ffffff
• Kolor tła przycisku: #4328b7

Dodaj tymczasowy margines do górnej i dolnej sekcji dla funkcji testowania

W normalnej witrynie te wezwania do działania znajdowałyby się gdzieś pośrodku strony, więc jest dodatkowe miejsce na przewijanie strony w górę iw dół. Na razie możemy dodać tymczasowy margines do górnej i dolnej sekcji strony.

W górnej sekcji dodaj górny margines 90vh.

W dolnej części dodaj dolny margines 90vh.

Ostateczny wynik

Sprawdźmy teraz efekt końcowy.

Końcowe przemyślenia

Ten samouczek pokazuje kreatywny sposób na utrzymanie tych ważnych CTA na pierwszym planie, aby użytkownicy mogli je klikać w dowolnym momencie. Dodaje również subtelną mikro-interakcję, która przyciąga do nich jeszcze większą uwagę bez odwracania uwagi od głównej treści strony. Mamy nadzieję, że pomoże to w rozbudzeniu tych kreatywnych soków, dzięki czemu będziesz mógł eksperymentować z większą liczbą projektów, aby uczynić go jeszcze lepszym.

Czekam na kontakt z Państwem w komentarzach.

Pozdrawiam!