W przypadku wyświetlania wielu wezwań do działania na stronie pomocne może być stworzenie interaktywnego efektu przewijania, który łączy różne elementy. Jednym z rozwiązań jest przekształcenie modułów w stałe elementy, gdy poruszają się one w kontenerze kolumny. W dzisiejszym samouczku pokażemy, jak stworzyć piękny projekt, który obsługuje tę technikę. Będziesz także mógł bezpłatnie pobrać plik JSON!

Chodźmy.

badanie

Zanim przejdziemy do samouczka, przyjrzyjmy się ostatecznie, jak to działało na różnych rozmiarach ekranu.

Naprawiono przegląd sekcji kontenera divi

Zacznijmy od nowa!

Dodaj nową sekcję

Zacznij od dodania nowej regularnej sekcji do strony, nad którą pracujesz.

Wybór sekcji divi

rozstaw

Otwórz ustawienia sekcji i zmień marginesy dolny i górny dla różnych rozmiarów ekranu.

  • Top tapicerski: 7vw (komputer stacjonarny), 10vw (tablet), 15vw (telefon)
  • Tapicerka u dołu: 20vw (komputer stacjonarny), 7vw (tablet), 10vw (telefon)
Konfiguracja rozstawu sekcji Divi

Dodaj nową linię

Struktura kolumny

Kontynuuj dodawanie nowego wiersza, używając następującej struktury kolumn:

Wybierz układ kolumn Divi

zaklejania

Nie dodając jeszcze żadnych modułów, otwórz ustawienia wiersza i pozwól mu zajmować całą szerokość sekcji. On jest także bardzo ważne  aktywuj opcję „Wyrównaj wysokości kolumn”. W ten sposób utworzysz puste miejsce w kolumnach, które pozwoli stacjonarnym modułom na swobodne poruszanie się podczas przewijania strony.

  • Użyj niestandardowej szerokości rynny: Tak
  • Szerokość rynny: 1
  • Wyrównaj wysokości kolumn: Tak
  • Szerokość: 100%
  • Maksymalna szerokość: 100%
Konfiguracja linii parametrów Divi

Górna wyściółka kolumny 2

Następnie otwórz ustawienia kolumny 2 i dodaj górny wypełniacz na pulpicie.

  • Górna wyściółka: 20vw (komputer stacjonarny), 0vw (tablet i telefon)
Konfiguracja Divi z wysokim marginesem

Górna wyściółka kolumny 3

Dodaj także niestandardową wartość górnego wypełnienia do trzeciej kolumny.

  • Najlepsze wypełnienie: 40vw (komputer stacjonarny), 0vw (tablet i telefon)
Konfiguracja z wysokim marginesem w kolumnie 3 divi

Górna wyściółka kolumny 4

I uzupełnij parametry linii, dodając również wyższą wartość wypełnienia do kolumny 4.

  • Górna wyściółka: 60vw (komputer stacjonarny), 0vw (tablet i telefon)
pojemnik na kolumnę

Dodaj wezwanie do działania do kolumny 1

Dodaj treść

Czas zacząć dodawać moduły! Pierwszym modułem, którego potrzebujemy w kolumnie 1, jest moduł CTA (Call to Action). Wstawić treść do wyboru.

Konfiguracja połączenia Divi Action

Zastaw

Dodaj również link do przycisku. Umożliwi to wyświetlenie przycisku w projekcie.

  • Adres URL linku do przycisku: #
Konfiguracja przycisku wezwania do działania

Kolor tła

Następnie zmień kolor tła modułu.

  • Kolor tła: #ffffff
Kolory tła Divi

Ustawienia tekstu

Przejdź do karty Projekt i zmień ogólne ustawienia tekstu.

  • Wyrównanie tekstu: środek
  • Kolor tekstu: ciemny
Dopasowanie konfiguracji wywołania tekstowego do akcji divi

Ustawienia tekstu tytułowego

Zmień także ustawienia tekstu tytułu.

  • Tytuł Poziom tytułu: H3
  • Tytuł tekstu: Spectral
  • Tytuł tekstu kolorowego: # 000000
  • Rozmiar tytułu tekstu: 2vw (komputer stacjonarny), 4vw (tablet), 6vw (telefon)
Edytuj wezwanie do działania w tytule difvi

Ustawienia tekstu podstawowego

Z parametrami treści tekstu.

  • Czcionka ciała: Fira Sans
  • Waga czcionki: lekka
  • Tekst w kolorze: # 000000
  • Rozmiar tekstu: 1vw (komputer stacjonarny), 2vw (tablet), 3vw (telefon)
  • Wysokość ciała: 1.8em
Tekst divi

Ustawienia przycisków

Nie zapomnij również o stylizowaniu przycisku modułu CTA.

  • Użyj niestandardowych stylów przycisku: Tak
  • Rozmiar tekstu przycisku: 1vw (komputer stacjonarny), 2vw (tablet), 3vw (telefon)
  • Kolor tekstu przycisku: #ffffff
  • Kolor tła przycisku: #444eff
  • Szerokość obramowania przycisku: 0px
Konfiguracja stylu przycisku wezwania do działania
  • Promień granicy przycisku: 50vw
  • Przycisk czcionki: Fira Sans
Konfiguracja parametrów przycisku Divi
  • Górna wyściółka: 1vw (komputer stacjonarny), 2vw (tablet), 3vw (telefon)
  • Tapicerka u dołu: 1vw (komputer stacjonarny), 2vw (tablet), 3vw (telefon)
  • Lewe wypełnienie: 3vw (komputer stacjonarny), 7vw (tablet), 13vw (telefon)
  • Tapicerka po prawej: 3vw (komputer stacjonarny), 7vw (tablet), 13vw (telefon)
Konfiguracja wyrównania przycisku Divi

rozstaw

Następnie przejdź do ustawień odstępów i dodaj niestandardowe marginesy wewnętrzne i dolne.

  • Top Padding: 8vw
  • Wyściółka u dołu: 8vw
Moduł wezwania do działania w konfiguracji odstępów Divi

granica

Dodaj także zaokrąglone kąty do modułu.

  • Zaokrąglone rogi: 1vw (wszystkie rogi)
Moduł wezwania do działania konfiguracji z zaokrąglonymi krawędziami

Pole cienia

Zakończ projekt modułu, dodając subtelny cień pola.

  • Cień pudełka Pozycja pozioma: 10px
  • Box Shadow Blur Force: 50px
  • Kolor cienia: rgba (0,0,0,0,08)
Moduł divi konfiguracji Shadow Box

Klasa CSS

Teraz, aby efekt lepkiego przewijania zadziałał, będziemy musieli dodać kilka wierszy kodu CSS na końcu tego samouczka. W ramach przygotowania dodamy klasę CSS do modułu CTA.

  • Klasa CSS: lepki-cta
Identyfikator konfiguracji i klasy modułu wezwania do działania

Dodaj moduł obrazu do kolumny 1

Załaduj obrazek

Przejdźmy do następnego i ostatniego moda, którego potrzebujemy w kolumnie 1, czyli do modyfikacji obrazu. Prześlij wybrany obraz PNG.

Dodaj moduł obrazu z donotem

wyrównanie

Następnie zmień wyrównanie obrazu.

  • Wyrównanie obrazu: do środka
Moduł obrazu wyrównania divi

zaklejania

Pamiętaj, aby wymusić również pełną szerokość modułu.

  • Wymuś pełną szerokość: Tak
Konfiguracja odstępów między modułami obrazu Divi

rozstaw

Uzupełnij ustawienia modułu, przechodząc do ustawień odstępów i dodając niestandardowe wartości odstępów dla różnych rozmiarów ekranu.

  • Górny margines: -5vw (tablet i telefon)
  • Dolny margines: -12vw (komputer stacjonarny), 5vw (tablet i telefon)
  • Lewe wypełnienie: 3vw (komputer stacjonarny), 10vw (tablet), 25vw (telefon)
  • Tapicerka po prawej: 3vw (komputer stacjonarny), 10vw (tablet), 25vw (telefon)
Konfiguracja modułu rozstawu divi image donut

Sklonuj dwa moduły trzy razy i umieść pozostałe kolumny

Po zakończeniu obu modułów w kolumnie 1, możesz zduplikować je trzy razy i umieścić duplikaty w pozostałych kolumnach wiersza.

pojemnik na kolumnę

Zmień obrazy

Pamiętaj, aby zmienić obraz w każdym zduplikowanym module obrazu.

Zmień zawartość wezwania do działania i kolory tła przycisków

Zmień także treść CTA z kolorami tła przycisku.

  • Moduł CTA #2: #89ffb4
  • Moduł CTA #3: #ff89f1
  • Moduł CTA #4: #ffd389
Zmodyfikuj kolory modułów wezwanych do działania

Dodaj klasę CSS do modułów obrazu w kolumnach 1, 2 i 3

Teraz, aby upewnić się, że efekt lepkości działa również na obrazach, będziemy musieli dodać klasę CSS do modułów obrazu w kolumnach 1, 2 i 3.

  • Klasa CSS: obraz lepki
Edytuj obrazy w każdej kolumnie

Dodaj linię 2

Struktura kolumny

Pozostaje tylko dodać kod CSS. Aby to zrobić, dodaj nową linię.

Dodaj wiersz do kolumny na divi

Dodaj moduł kodu z kodem CSS

Dodaj moduł kodu do wiersza, wstaw poniższy kod CSS i gotowe!

<style>@media only screenand (min-width: 980px) {.sticky-cta {position: sticky;position: -webkit-sticky;top: 8vw !important;}.sticky-image {position: sticky;position: -webkit-sticky;top: 28vw !important;}}</style>

Dodaj moduł kodu na divi

badanie

Po wykonaniu wszystkich kroków przyjrzyjmy się ostatecznie, co się stało z różnymi rozmiarami ekranu.

Ostateczna animacja wezwania do działania divi
pojemnik na kolumnę

końcowe przemyślenia

W tym artykule pokazaliśmy, jak utrzymać moduły na stałe w kontenerze kolumn. Użycie tej techniki może wygenerować oszałamiające efekty przewijania, które pozwolą Ci wyróżnić różne wezwania do działania na Twojej stronie. Możesz także pobrać plik JSON za darmo! Jeśli masz jakieś pytania lub sugestie, możesz zostawić komentarz w sekcji komentarzy poniżej.