Tworzenie CTA „Rozpocznij”, które ujawnia wiele opcji po najechaniu kursorem
Opublikowany: 2019-06-26Wiele firm umieści na swojej stronie głównej CTA „rozpocznij”. Zwykle jest to podstawowe wezwanie do działania na stronie, ponieważ prowadzi użytkownika przez jakiś zamierzony proces. Może to być prosty przycisk „rozpocznij teraz”, który prowadzi do innej strony. Lub może to być sekcja strony, która zawiera instrukcje „rozpoczęcia” i/lub różne opcje, które użytkownik może wybrać, aby rozpocząć proces zamierzony przez firmę.
W tym samouczku pokażemy, jak utworzyć wezwanie do działania „Rozpocznij”, które pokaże wiele opcji „Rozpoczęcie” po najechaniu myszą. Korzystając z Divi, zaprojektujemy sekcję tak, aby wyglądała jak duży przycisk. Następnie po najechaniu kursorem na przycisk opcje będą wyglądać podobnie, jak pionowy suwak odsłania następny slajd.
Projekt jest elegancki, a funkcjonalność może być użyteczna na wiele sposobów.
Zacznijmy.
zapowiedź
Oto krótkie spojrzenie na CTA „Rozpocznij”, które zbudujemy w tym samouczku.
Pobierz układ CTA Divi „Rozpocznij” ZA DARMO
Aby położyć swoje ręce na projekcie 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 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.
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ąć, będziesz potrzebować:
- Zainstalowany i aktywny motyw Divi
- Nowa strona utworzona w celu zbudowania od podstaw na interfejsie użytkownika (konstruktor wizualny)
- Obrazy, które mają być wykorzystane do pozorowanych treści
Następnie będziesz mieć puste płótno, aby rozpocząć projektowanie w Divi.
Wdrażanie projektu CTA „Rozpocznij tutaj” w Divi
Podstawową ideą tego projektu jest przesunięcie zawartości sekcji w górę po najechaniu na sekcję. W tym celu musimy upewnić się, że nasza sekcja ma stałą wysokość z ukrytym przelewem. Spowoduje to ukrycie opcji CTA przed stanem najechania. Następnie możemy użyć marginesu do pozycjonowania naszych modułów i górnego dopełnienia, aby przenieść zawartość do widoku po najechaniu myszą.
Zacznijmy od sekcji.
Tworzenie sekcji
Aby rozpocząć, utwórz zwykłą sekcję z wierszem z jedną kolumną. Następnie zanim dodamy jakiekolwiek moduły, zaktualizujmy ustawienia sekcji.
Otwórz ustawienia sekcji i zaktualizuj następujące elementy:
Kolor tła: #2b87da
Szerokość: 90%
Maksymalna szerokość: 1100px
Wyrównanie sekcji: środek
Margines: 6vw góra, 6vw dół (tylko po to, by dać trochę miejsca na oddech)
Wypełnienie (komputer): 300px góra, 0px dół
Wypełnienie (tablet): 0px góra, 15% dół
Następnie dodaj zaokrąglone rogi. Stworzy to nasz projekt przypominający guzik, ilekroć nadamy sekcji maksymalną wysokość.
Zaokrąglone rogi: 140px (komputer), 20px (najechanie), 10px (tablet)
Następnie nadaj mu cień pudełka (patrz zrzut ekranu).
W tym momencie nie dodamy wszystkich ustawień niezbędnych do ostatecznego projektu. Musimy wrócić i nadać mu ustaloną wysokość i efekt zawisu. Ale na razie dodajmy treść.
Tworzenie pierwszego wiersza treści
Otwórz ustawienia dla utworzonego wiersza z jedną kolumną i zaktualizuj następujące elementy:
Szerokość: 100%
Padding: 0px góra, 0px dół, 5% w lewo, 5% w prawo
W wierszu z jedną kolumną dodaj moduł tekstowy.
Następnie dodaj następujący nagłówek h2 do treści treści.
<h2>Get Started Here...</h2>
Zaktualizuj ustawienia projektu w następujący sposób:
Czcionka nagłówka 2: Nunito
Grubość czcionki nagłówka 2: pogrubiona
Kolor tekstu nagłówka 2: #ffffff
Rozmiar tekstu nagłówka 2: 78px (komputer i tablet), 46px (telefon)
Maksymalna szerokość: 500px
Wysokość: 300px (komputer), auto (tablet i telefon)
Margines: -300px góra (komputer), 0px góra (tablet i telefon)
Wyściółka: 7% góry
Wysokość 300px i górny margines -300px powodują, że moduł tekstowy wypełnia górny dopełnienie sekcji o 300px. Później, gdy usuniemy dopełnienie górnej sekcji po najechaniu kursorem, moduł tekstowy przewinie się w górę nad sekcją.
Tworzenie drugiego rzędu treści
W drugim rzędzie treści dodamy opcje CTA. Śmiało i dodaj nowy wiersz z układem trzech kolumn.
Następnie zaktualizuj ustawienia wiersza w następujący sposób:
Szerokość: 100%
Maksymalna szerokość: 100%
Padding: 0px na górze, 0px na dole
Następnie dodaj moduł notki w kolumnie 1.
Następnie zaktualizuj ustawienia notki w następujący sposób:
Wyjmij domyślny tekst i zostaw Tytuł.
Następnie dodaj ikonę obrazu (90 X 90). Możesz też użyć zwykłej ikony Divi, jeśli chcesz.
Dodaj tło i zaktualizuj projekt tekstu tytułu.
Kolor tła: #ffffff
Czcionka tytułu: Nunito
Grubość czcionki tytułu: Ultra Bold
Styl czcionki tytułu: TT
Wyrównanie tekstu tytułu: do środka
Kolor tekstu tytułu: #2b87da
Rozmiar tekstu tytułu: 14px
Zanim będziemy mogli nadać notatkom okrągłym, najpierw musimy nadać notatce równą wysokość i szerokość. Następnie możemy użyć odstępów, aby wyrównać treść notatek i notatek na środku.
Szerokość treści: 200px (komputer), 250px (tablet)
Szerokość: 250px (komputer), 300px (tablet)
Wyrównanie modułu: środek
Wysokość: 250px (komputer), 300px (tablet)
Margines: 25px góra, 0px dół
Wypełnienie: góra 50px (komputer), góra 75px (tablet i telefon)
Aby ukończyć projekt koła, nadaj plamie zaokrąglony róg i cień w kształcie pudełka.
Zaokrąglone rogi: 50%
Cień pudełka: patrz zrzut ekranu
To załatwia naszą pierwszą notkę. Aby stworzyć kolejne dwa. Skopiuj notkę i wklej ją do kolumny 2 i kolumny 3. Następnie zaktualizuj ikonę obrazu dla każdego z nich. Powinien wyglądać tak:
Ostatnie poprawki do sekcji
Aby ukończyć projekt CTA „Rozpocznij”, musimy nieco zaktualizować sekcję. Zaktualizuj następujące ustawienia sekcji:
Wysokość: 300px (komputer), auto (tablet i telefon)
Przepełnienie poziome: ukryte
Przepełnienie pionowe: ukryte
Dzięki temu sekcja będzie miała tę samą wysokość co zawartość w wierszach 1 i 2. Ukrycie przepełnienia spowoduje, że zawartość w wierszu 2 pozostanie ukryta, dopóki nie wyświetlimy jej po najechaniu myszą.
Aby wyświetlić zawartość wiersza 2, musimy usunąć górną wyściółkę sekcji po najechaniu myszą.
Dopełnienie (najechanie): 0px u góry
Teraz sprawdź dotychczasowy wynik. Treść przewinie się w górę, aby wyświetlić zawartość w wierszu 2, który pokazuje trzy opcje CTA.
Aby sekcja wyglądała bardziej jak przycisk, możemy użyć opcji transformacji, aby ją zmniejszyć, a następnie przywrócić jej normalny rozmiar po najechaniu myszą. Zaktualizuj następujące opcje transformacji dla sekcji.
Skala transformacji (komputer): 70%
Skala transformacji (najechanie kursorem): 100%
Skala transformacji (tablet): 100%
Teraz dodaj grafikę obrazu tła (500 X 500), aby uzyskać odpowiedni rozmiar sekcji.
Obraz tła: wstaw obraz
Rozmiar obrazu tła: rzeczywisty rozmiar
Pozycja obrazu tła: Środkowy prawy (komputer), górny prawy (tablet), górny lewy (telefon)
Dodawanie adresów URL linków do Blurbs i skalowanie ich w Hover
Ponieważ nasze notki tak naprawdę służą jako okrągłe przyciski, musimy dodać adresy URL linków modułów do każdego z notek. Oczywiście będziesz musiał dodać własne, aby dopasować je do swoich potrzeb.
Ponieważ notki są ukryte w kreatorze wizualnym, przełącz tryb widoku szkieletowego i zaktualizuj każde z ustawień notatek za pomocą adresu URL łącza modułu.
Następnie pozostań w trybie widoku szkieletowego i użyj wielokrotnego wyboru, aby wybrać wszystkie trzy notki. I otwórz ustawienia jednej z notek, aby zaktualizować ustawienia elementów dla wszystkich trzech. Następnie zaktualizuj opcję transformacji w następujący sposób:
Skala transformacji (najechanie): 105%
Otóż to!
Wynik końcowy
Zobaczmy ostateczny projekt CTA „Rozpocznij”.
A oto projekt na tablecie i telefonie.
Końcowe przemyślenia
CTA „Rozpocznij” jest dziś powszechne w sieci. Mamy nadzieję, że ten samouczek pomoże Ci przenieść go na wyższy poziom. I nie bój się myśleć o innych sposobach wykorzystania tej funkcji. Pomyśl o tym. Możesz dodać dowolną treść do sekcji!
Zapraszam do dzielenia się swoimi przemyśleniami w komentarzach poniżej.
Czekam na kontakt z Państwem.
Pozdrawiam!