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.
Zacznijmy od nowa!
Dodaj nową sekcję
Zacznij od dodania nowej regularnej sekcji do strony, nad którą pracujesz.
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)
Dodaj nową linię
Struktura kolumny
Kontynuuj dodawanie nowego wiersza, używając następującej struktury kolumn:
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%
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)
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)
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)
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.
Zastaw
Dodaj również link do przycisku. Umożliwi to wyświetlenie przycisku w projekcie.
- Adres URL linku do przycisku: #
Kolor tła
Następnie zmień kolor tła modułu.
- Kolor tła: #ffffff
Ustawienia tekstu
Przejdź do karty Projekt i zmień ogólne ustawienia tekstu.
- Wyrównanie tekstu: środek
- Kolor tekstu: ciemny
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)
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
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
- Promień granicy przycisku: 50vw
- Przycisk czcionki: Fira Sans
- 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)
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
granica
Dodaj także zaokrąglone kąty do modułu.
- Zaokrąglone rogi: 1vw (wszystkie rogi)
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)
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
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.
wyrównanie
Następnie zmień wyrównanie obrazu.
- Wyrównanie obrazu: do środka
zaklejania
Pamiętaj, aby wymusić również pełną szerokość modułu.
- Wymuś pełną szerokość: Tak
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)
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.
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
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
Dodaj linię 2
Struktura kolumny
Pozostaje tylko dodać kod CSS. Aby to zrobić, dodaj nową linię.
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>
badanie
Po wykonaniu wszystkich kroków przyjrzyjmy się ostatecznie, co się stało z różnymi rozmiarami ekranu.
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.