Jak odsłonić CTA kolumny w stanie lepkim za pomocą Divi

W pewnym momencie podczas tworzenia projektu strony możesz natknąć się na listę usług, kursów lub czegoś podobnego, które chcesz udostępnić w interaktywny sposób. Projekt, którego używasz do zawartości listy, odgrywa bardzo ważną rolę w sposobie trawienia zawartości przez użytkowników. W przypadku większości list będziesz również chciał dołączyć wezwanie do działania, które łączy kropki. Jeśli szukasz kreatywnego sposobu na zrobienie tego, pokochasz ten samouczek.

Dzisiaj pokażemy Ci, jak za pomocą Divi ujawnić CTA kolumny w stanie lepkim. Gdy tylko CTA dotknie końca kolumny, efekt przyklejenia ustaje, co daje bezproblemowe doświadczenie, w którym ludzie mogą kontynuować czytanie elementów listy i decydować się na podjęcie działań, kiedy tylko chcą, bez konieczności przewijania w górę lub w dół w celu znalezienia CTA . Udostępnimy również 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 przyklejonych kolumn za DARMO

Aby położyć ręce na układzie sekcji CTA z darmową przyklejoną kolumną, 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!

Zacznijmy odtwarzać!

Dodaj nową sekcję

Kolor tła

Zacznij od dodania nowej sekcji do strony, nad którą pracujesz. Otwórz ustawienia sekcji i zastosuj biały kolor tła.

• Kolor tła: #ffffff

Dodaj wiersz nr 1

Struktura kolumny

Kontynuuj, dodając nowy wiersz, korzystając z następującej struktury kolumn:

Rozstaw

Nie dodając jeszcze żadnych modułów, otwórz ustawienia wiersza i zastosuj dolny margines.

• Dolny margines: 5%

Dodaj moduł tekstowy do kolumny

Dodaj zawartość H2

Dodaj moduł tekstowy z wybraną zawartością H2.

Ustawienia tekstu H2

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

• Czcionka nagłówka 2: Alata
• Grubość czcionki nagłówka 2: pogrubiona
• Nagłówek 2 Wyrównanie tekstu: do środka
• Kolor tekstu nagłówka 2: #000000
• Rozmiar tekstu nagłówka 2:
  • Pulpit: 55px
  • Tablet: 40px
  • Telefon: 30px

Dodaj moduł dzielnika do kolumny

Widoczność

Tuż pod modułem tekstowym dodaj moduł dzielnika i upewnij się, że opcja „Pokaż dzielnik” jest włączona.

• Pokaż dzielnik: tak

Linia

Przejdź do zakładki projektu modułu i zmień ustawienia linii w następujący sposób:

• Kolor linii: #3a7a84
• Styl linii: Podwójny

Rozmiary

Uzupełnij ustawienia modułu, odpowiednio modyfikując ustawienia rozmiaru:

• Waga dzielnika: 10px
• Szerokość: 8%
• Wyrównanie modułu: Środek
• Wysokość: 10px

Dodaj wiersz nr 2

Struktura kolumny

Kontynuuj, dodając kolejny wiersz tuż pod poprzednim, używając następującej struktury kolumn:

Rozmiary

Otwórz ustawienia wiersza i zmodyfikuj ustawienia rozmiaru w następujący sposób:

• Użyj niestandardowej szerokości rynny: Tak
• Szerokość rynny: 2
• Wyrównaj wysokości kolumn: Tak
• Szerokość: 95%
• Maksymalna szerokość: 2580 pikseli

Rozstaw

Następnie usuń wszystkie domyślne górne i dolne wyściółki.

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

Ustawienia kolumny 1

Zdjęcie w tle

Następnie otwórz ustawienia kolumny 1 i zastosuj obraz tła.

• Rozmiar obrazu tła: okładka

Granica

Przejdź do zakładki projektu kolumny i zastosuj zaokrąglone rogi.

• Wszystkie rogi: 20px

Dodaj moduł Blurb do kolumny 2

Dodaj zawartość

Czas dodać moduły, zaczynając od modułu Blurb w kolumnie 2. Dodaj wybrane przez siebie treści.

Wybierz ikonę

Następnie wybierz ikonę.

Kolor tła

Następnie zastosuj biały kolor tła.

• Kolor tła: #FFFFFF

Ustawienia ikon

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

• Kolor ikony: #3a7a84
• Umieszczenie obrazu/ikony: po lewej

Ustawienia tekstu tytułu

Następnie dostosuj ustawienia tekstu tytułu.

• Poziom nagłówka tytułu: H3
• Czcionka tytułu: Alata
• Grubość czcionki tytułu: pogrubiona
• Kolor tekstu tytułu: #000000
• Rozmiar tekstu tytułu:
  • Pulpit: 35px
  • Tablet: 30px
  • Telefon: 20px

Ustawienia tekstu podstawowego

Wprowadź też pewne zmiany w ustawieniach tekstu podstawowego.

• Czcionka ciała: Karla
• Rozmiar tekstu treści:
  • Pulpit: 17px
  • Tablet: 15px
  • Telefon: 14px
• Wysokość linii ciała: 2,5 em

Rozmiary

Następnie zmień ustawienia rozmiaru.

• Szerokość treści: 100%

Rozstaw

I zastosuj niestandardowe wartości dopełnienia do ustawień odstępów.

• Górna wyściółka: 20%
• Dolna wyściółka: 20%
• Lewa wyściółka: 10%
• Prawa wyściółka: 10%

Granica

Następnie dodamy zaokrąglone rogi do ustawień obramowania.

• Wszystkie rogi: 20px

Cień Pudełka

I dodamy subtelny cień pudełkowy.

• Siła rozmycia cieni w pudełku: 50px
• Kolor cienia: rgba (59 120 130 0,14)

Animacja

Kontynuuj, usuwając domyślną animację modułu Blurb w ustawieniach animacji.

• Animacja obrazu/ikony: brak animacji

CSS tytułu plamy

I uzupełnij ustawienia modułu, dodając jedną linię kodu CSS do pola CSS tytułu notatek w zakładce Zaawansowane.

margin-bottom: 20px;

Dwukrotne klonowanie modułu Blurb

Po ukończeniu pierwszego modułu Blurb sklonuj moduł Blurb tyle razy, ile potrzebujesz.

Zmień zawartość

Zmień zawartość w każdym zduplikowanym module.

Dodaj moduł CTA do kolumny 1

Dodaj zawartość

W kolumnie 1 jedynym potrzebnym nam modułem jest moduł wezwania do działania. Dodaj wybrane przez siebie treści.

Dodaj link do przycisku

Następnie dodaj link do przycisku.

Tło gradientowe

Następnie zastosuj tło gradientowe.

• Kolor 1: rgba (59,120,130,0,53)
• Kolor 2: #112730
• Typ gradientu: liniowy
• Kierunek gradientu: 161 stopni

Ustawienia tekstu tytułu

Przejdź do karty projektu modułu i wprowadź następujące zmiany w ustawieniach tekstu tytułu:

• Poziom nagłówka tytułu: H3
• Czcionka tytułu: Alata
• Grubość czcionki tytułu: pogrubiona
• Kolor tekstu tytułu: #ffffff
• Rozmiar tekstu tytułu:
  • Pulpit: 50px
  • Tablet i telefon: 30 pikseli

Ustawienia przycisków

Nadaj styl przyciskowi dalej.

• Użyj niestandardowych stylów dla przycisku: Tak
• Rozmiar tekstu przycisku:
  • Pulpit: 20px
  • Tablet: 17px
  • Telefon: 15px
• Szerokość obramowania przycisku: 0px
• Promień obramowania przycisku: 0px

• Czcionka przycisku: Alata
• Waga czcionki przycisku: pogrubiona

• Górna wyściółka: 20px
• Dolna wyściółka: 20px
• Lewa wyściółka: 20px
• Prawe wypełnienie: 20px
• Pozycja pozioma cienia pudełka: 0px
• Pozycja pionowa cienia pudełka: 3px
• Kolor cienia: #ffffff

Rozmiary

Przejdź do ustawień rozmiaru modułu i zastosuj następujące zmiany:

• Szerokość:
  • Komputer stacjonarny: 95%
  • Tablet i telefon: 100%
• Wyrównanie modułu: Środek

Rozstaw

Dodaj również niestandardową górną i dolną wyściółkę.

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

Granica

Uwzględnij również zaokrąglone rogi.

• Wszystkie rogi: 20px

Przekształć Tłumacz

Uzupełnij ustawienia modułu, stosując następujące ustawienia tłumaczenia transformacji:

• Dobrze:
  • Pulpit: -25 pikseli
  • Tablet i telefon: 0px

Zastosuj lepki efekt do modułu CTA

Przyklejone ustawienia

Teraz, gdy wszystkie elementy są na swoim miejscu, nadszedł czas na zastosowanie efektu klejenia. Otwórz moduł CTA i zastosuj następujące lepkie ustawienia:

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

Nieprzezroczystość

Teraz, gdy moduł jest już lepki, możemy zastosować lepkie style. Przejdź do ustawień filtrów i zastosuj następujące ustawienia filtra krycia:

• Domyślne krycie:
  • Komputer stacjonarny: 0%
  • Tablet i telefon: 100%
• Lepkie krycie: 100%

Przemiana

Na koniec zmienimy ustawienia przejścia w zakładce Zaawansowane. Otóż ​​to!

• Czas trwania przejścia: 800ms
• Krzywa prędkości przejścia: łatwość

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 wykazać się kreatywnością dzięki lepkim opcjom Divi. Mówiąc dokładniej, pokazaliśmy, jak pięknie wyświetlać elementy listy za pomocą przyklejonego wezwania do działania w kolumnie. Takie podejście pozwala wizualnie wyświetlić wszystkie elementy i mieć wezwanie do działania w pobliżu, podczas gdy odwiedzający będą gotowi za pośrednictwem usług, kursów lub innych rodzajów list. Udało Ci się również pobrać plik JSON za darmo! Jeśli masz jakieś pytania, 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.