Jak podkreślić swój lepki przycisk we wspaniałej sekcji CTA za pomocą Divi

Po wydaniu funkcji przyklejonych opcji Divi, postowi o wydaniu na naszym blogu towarzyszyły demonstracje na żywo, które pokazują wszechstronność tej nowej funkcji. Aby pomóc Ci lepiej zrozumieć opcje przyklejania i zacząć ich używać w swoim projekcie, pokażemy Ci, jak odtworzyć jeden z projektów demonstracyjnych na żywo w tym samouczku. Projekt, który odtwarzamy, skupia się na podkreśleniu przyklejonego przycisku. Jest to sekcja tekstowa CTA, która pozwala w piękny sposób wyróżnić wezwanie do działania. Będziesz mógł również pobrać plik JSON za darmo!

Weźmy się za to.

Zapowiedź

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

Pulpit

mobilny

Pobierz układ sekcji CTA ZA DARMO

Aby położyć ręce na darmowym układzie sekcji CTA, musisz najpierw pobrać go 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!

1. Zbuduj strukturę elementów

Dodaj nową sekcję

Kolor tła

Zacznij od dodania nowej sekcji do strony, nad którą pracujesz. Może to być nowa strona lub już istniejąca, ale zalecamy dodanie jej do strony, która już zawiera jakąś treść, aby było wystarczająco dużo miejsca na przewijanie, abyś mógł zobaczyć efekty ożywające. Otwórz ustawienia sekcji i zastosuj wybrany kolor tła.

• Kolor tła: #00965a

Rozmiary

Przejdź do zakładki projektu przekroju i zastosuj maksymalną wysokość. Ta maksymalna wysokość pomoże nam zapewnić, że wysokość sekcji jest ograniczona.

• Maksymalna wysokość: 100vh

Przepełnienia

Ponieważ w dalszej części samouczka zastosujemy niektóre efekty przewijania, musimy również ukryć przepełnienia sekcji, aby upewnić się, że nic nie przewyższa kontenera sekcji.

• Przepełnienie poziome: ukryte
• Przepełnienie pionowe: ukryte

Dodaj nowy wiersz

Struktura kolumny

Po wprowadzeniu ustawień sekcji dodaj nowy wiersz, korzystając z następującej struktury kolumn:

Rozmiary

Nie dodając jeszcze żadnych modułów, otwórz ustawienia wiersza i zastosuj niestandardowe ustawienia rozmiaru. Te ustawienia rozmiaru pozwolą kontenerowi wierszy zająć całą szerokość wiersza, co daje naszemu projektowi efekt pełnoekranowy.

• Szerokość: 100%
• Maksymalna szerokość: brak

Ustawienia kolumny 2

Rozstaw

Otwórz następnie ustawienia kolumny 2 i zastosuj niestandardowe wartości dopełnienia dla różnych rozmiarów ekranu.

• Dolna wyściółka: 60px
• Lewa wyściółka:
  • Tablet i telefon: 5%
• Prawa wyściółka:
  • Komputer stacjonarny: 10vw
  • Tablet i telefon: 5%

Dodaj moduł tekstowy do kolumny 1

Dodaj zawartość

Czas dodać moduły, zaczynając od modułu tekstowego w kolumnie 1. Dodaj wybrane przez siebie treści. Aby stworzyć dokładnie taki sam projekt, jak w podglądzie tego posta, wstaw kilka odpowiednich słów, które pomogą wzmocnić CTA, które umieścimy w kolumnie 2 później w samouczku. Upewnij się, że umieszczasz każde słowo w osobnym wierszu.

Ustawienia tekstu

Przejdź do zakładki projektu modułu i zmień ustawienia tekstu. Zauważysz, że używamy szerokości widocznego obszaru jako jednostki rozmiaru tekstu. Użycie jednostki szerokości widocznego obszaru pomoże nam utrzymać responsywność tekstu na wszystkich rozmiarach ekranu.

• Czcionka tekstu: Work Sans
• Grubość czcionki tekstu: pogrubiona
• Kolor tekstu: #000000
• Rozmiar tekstu: 10vw
• Wysokość linii tekstu: 0.2em

Dodaj moduł tekstowy do kolumny 2

Dodaj zawartość

Do drugiej kolumny. Tam dodaj moduł tekstowy z wybraną kopią wezwania do działania.

Ustawienia tekstu

Przejdź do zakładki projektu modułu i odpowiednio zmień ustawienia tekstu:

• Czcionka tekstu: Work Sans
• Kolor tekstu: #ffffff
• Rozmiar tekstu: 56px
• Wysokość linii tekstu: 1,2 em

Rozmiary

Przypisz również maksymalną szerokość do modułu tekstowego.

• Maksymalna szerokość: 400px

Dodaj moduł przycisku do kolumny 2

Dodaj kopię

Następnym i ostatnim modułem, którego potrzebujemy w naszym projekcie, jest moduł przycisku w kolumnie 2. Dodaj wybraną kopię.

Ustawienia przycisków

Przejdź do zakładki projektu modułu i odpowiednio dostosuj styl przycisku:

• Użyj niestandardowych stylów dla przycisku: Tak
• Rozmiar tekstu przycisku: 16px
• Kolor tekstu przycisku: #000000
• Kolor tła przycisku:
  • Domyślnie: #ffffff
  • Najechanie: rgba(255,255,255,0.7)
• Szerokość obramowania przycisku: 5px
• Kolor obramowania przycisku: rgba (0,0,0,0)

• Promień obramowania przycisku: 5px
• Czcionka przycisku: Work Sans
• Pokaż ikonę przycisku: Nie

2. Zastosuj efekty przewijania i przyklejania

Dodaj ruch pionowy do modułu tekstowego w kolumnie 1

Teraz, gdy fundamenty naszego projektu zostały ustalone, nadszedł czas na zastosowanie efektów scroll i sticky! Otwórz moduł tekstowy w kolumnie 1 i zastosuj responsywny ruch pionowy.

• Włącz ruch w pionie: Tak
• Odsunięcie początkowe:
  • Pulpit: 10
  • Tablet i telefon: 0
• Przesunięcie środkowe: 0
• Odsunięcie końcowe:
  • Pulpit: -10
  • Tablet i telefon: 0
• Wyzwalacz efektu ruchu: Góra elementu

Dodaj lepki efekt do kolumny 2

Następnie otworzymy ustawienia kolumny 2 i zastosujemy efekt lepkości na pulpicie. Ponieważ kolumny i moduły na mniejszych ekranach są umieszczone pod sobą, a nie obok siebie, przywrócimy lepkie ustawienia do „Nie przyklejaj” na mniejszych rozmiarach ekranu.

• Lepka pozycja:
  • Pulpit: trzymaj się góry
  • Tablet i telefon: nie przykleja się
• Przyklejony górny offset: 80px
• Dolny limit lepkości: sekcja
• Przesunięcie od otaczających lepkich elementów: Tak
• Domyślne i trwałe style przejścia: Tak

Dodaj lepki styl do przycisku w kolumnie 2

Teraz, gdy kolumna 2 została przyklejona, będziemy mogli zastosować lepki styl do samej kolumny i modułów wewnątrz kolumny. Jedyne trwałe zmiany, jakie wprowadzimy, dotyczą jednak przycisku. Otwórz moduł, przejdź do ustawień przycisków i odwróć kolory tekstu i przycisków. Otóż ​​to! Po zapisaniu układu i wyjściu z kreatora wizualnego możesz oglądać piękny projekt na żywo w swojej witrynie.

• Kolor tekstu przycisku: #ffffff
• Kolor tła przycisku: #000000

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 odtworzyć jeden z projektów, które zostały użyte jako demo w poście aktualizacji funkcji przyklejonych opcji. Ten projekt skupia się na podświetlaniu przyklejonego przycisku poprzez zmianę stylu po włączeniu stanu przyklejenia. Udało Ci się również pobrać plik JSON za darmo! Jeśli masz jakieś pytania lub sugestie, możesz zostawić komentarz w sekcji komentarzy poniżej.

Jeśli chcesz dowiedzieć się więcej o Divi i zdobyć więcej gratisów Divi, zasubskrybuj nasz biuletyn e-mailowy i kanał YouTube, dzięki czemu zawsze będziesz jedną z pierwszych osób, które poznają i będą czerpać korzyści z tych bezpłatnych treści.