Tworząc stronę Informacje, prawdopodobnie zechcesz również przedstawić tam członków swojego zespołu. W ten sposób zezwalasz na odwiedzający wchodzić w interakcje z ludźmi stojącymi za Twoją firmą. Jeśli szukasz sposobu na animowanie sekcji członków zespołu na przewijaniu, ten samouczek może być dla Ciebie. Stworzymy automatycznie przewijającą się karuzelę członków zespołu, która będzie się poruszać, gdy Twój odwiedzający przewiń stronę.
Demonstracja
Zanim przejdziemy do samouczka, przyjrzyjmy się wynikom na różnych rozmiarach ekranu.
Początek poczęcia
Dodaj nową sekcję
rozstaw
Zacznij od dodania nowej zwykłej sekcji do strony, nad którą pracujesz. Otwórz ustawienia sekcji i dodaj niestandardowe wypełnienie na różnych rozmiarach ekranu.
- Górna wyściółka: 200 pikseli (biurko), 100 pikseli (tablet i telefon)
- Wyściółka u dołu: 200px (biurko), 100px (tablet i telefon)
przepełnienia
Aby upewnić się, że w naszym projekcie nie pojawi się poziomy pasek przewijania, ukryjemy przepełnienia sekcji w zakładce Zaawansowane.
- Przelew poziomy: ukryty
- Przelew pionowy: ukryty
Dodaj wiersz nr 1
Struktura kolumny
Kontynuuj dodawanie nowego wiersza do sekcji przy użyciu następującej struktury kolumn:
zaklejania
Nie dodając jeszcze żadnych modułów, otwórz ustawienia wierszy, przejdź do zakładki projektu i zmień szerokość i maksymalną szerokość w ustawieniach rozmiaru.
- Szerokość: 90%
- Maksymalna szerokość: 1580 pikseli
rozstaw
Dodajemy również niestandardowe górne i dolne wypełnienie.
- Górna wyściółka: 100px
- Dolne wypełnienie: 100px
Dodaj moduł tekstowy do kolumny
Dodaj zawartość H2
Czas dodać moduły, zaczynając od pierwszego modułu tekstowego. Wprowadź to treść H2 według własnego wyboru.
Ustawienia tekstu H2
Przejdź do zakładki projektowania modułu i zmień ustawienia tekstu H2 w następujący sposób:
- Tytuł czcionki 2: Quicksand
- Tytuł czcionki 2: pogrubiony
- Kolor tekstu pozycji 2: # 000000
- Nagłówek 2 Rozmiar tekstu: 70px (komputer stacjonarny), 50px (tablet), 40px (telefon)
Dodaj moduł separacji do kolumny
widoczność
Następnie dodaj moduł separacji. Upewnij się, że opcja „Pokaż separator” jest włączona.
- Pokaż separator: Tak
Linia
Następnie wprowadź zmiany w ustawieniach linii.
- Kolor linii: # edf000
- Styl linii: jednolity
- Pozycja linii: góra
zaklejania
I uzupełnij parametry modułu, odpowiednio modyfikując parametry wymiarowania:
- Waga dzielnika: 20px
- Szerokość: 11%
- Wyrównanie modułu: lewo
- Wysokość: 20px
Dodaj linię # 2
Struktura kolumny
Do następnego rzędu! Użyj następującej struktury kolumn:
zaklejania
Bez dodawania kolejnych modułów otwórz parametry linii i zmodyfikuj parametry rozmiaru w następujący sposób:
- Użyj niestandardowej szerokości rynny: Tak
- Szerokość rynny: 2
- Szerokość: 100%
- Maksymalna szerokość: 100%
rozstaw
Następnie dodaj lewą i prawą wyściółkę tylko na mniejszych ekranach.
- Lewa wyściółka: 5% (tylko tablet i telefon)
- Prawa dopełnienie: 5% (tylko tablet i telefon)
Parametry kolumny (5x)
Teraz, w następnych trzech krokach tego samouczka, wprowadzimy pewne zmiany w kolumnach. Zastosuj trzy kroki do każdej kolumny w rzędzie.
Tło gradientowe
Najpierw dodaj gradientowe tło do każdej kolumny.
- Kolor 1: rgba (255,255,255,0)
- Kolor 2: rgba (0,0,0,0,84)
- Rodzaj gradientu: liniowy
- Pozycja początkowa: 25%
- Pozycja końcowa: 86%
- Umieść gradient nad obrazem tła: Tak
Obraz tła
Następnie prześlij wybrany obraz tła. Ten obraz tła reprezentuje każdego członka zespołu, więc użyj innego obrazu dla każdej kolumny.
- Rozmiar obrazu tła: okładka
- Pozycja obrazu tła: środek
Główny element
Uzupełnij ustawienia kolumny, dodając niestandardowy CSS do głównego elementu tabletu w każdej kolumnie. Te wiersze kodu CSS pomogą nam umieścić kolumny jedna pod drugą na tablecie zamiast dwóch obok siebie.
szerokość: 100%! ważne; margines: 50px 0px 50px 0px! ważne;
Dodaj moduł osoby do kolumny
Dodaj treść
Do udostępniania informacji o członkach zespołu wykorzystamy moduł Osoba. Dodaj pierwszy moduł Person do kolumny 1 i użyj treść do wyboru.
Usuń zdjęcie
Następnie usuń obraz. Zamiast tego używamy obrazu tła kolumny.
Obraz tła
Następnie dodamy nakładkę obrazu jako obraz tła modułu. Możesz znaleźć ten, którego używamy, pobierając folder na początku tego samouczka.
- Rozmiar obrazu tła: okładka
- Pozycja obrazu tła: środek
Ustawienia tekstu tytułowego
Przejdź do zakładki projektowania modułu i zmień ustawienia tekstu tytułu w następujący sposób:
- Poziom tytułu: H3
- Czcionka tytułu: Quicksand
- Waga czcionki tytułu: pogrubiona
- Kolor tekstu tytułu: #ffffff
- Rozmiar tekstu tytułu: 230%
Ustawienia tekstu podstawowego
Zmień także ustawienia tekstu podstawowego.
- Czcionka ciała: Otwórz Sans
- Kolor tekstu: #ffffff
- Wysokość linii ciała: 2,2 em
Ustaw ustawienia tekstu
Następnie wprowadź zmiany w ustawieniach tekstu pozycji.
- Pozycja czcionki: Otwórz Sans
- Kolor tekstu pozycji: # edf000
rozstaw
Uzupełnij ustawienia modułu, dodając niestandardowe wartości wypełnienia do ustawień odstępów.
- Górna wyściółka: 70%
- Dolna wyściółka: 10%
- Lewa wyściółka: 10%
- Prawa wyściółka: 10%
Zduplikuj moduł Osoba 4 razy
Po ukończeniu modułu Osoba możesz cztery razy sklonować cały moduł.
Umieść duplikaty w pozostałych kolumnach
Umieść zduplikowane moduły w pozostałych czterech kolumnach rzędu. Pamiętaj także o zmianie treść.
Zamień Row w karuzelę z automatycznym przewijaniem
Zmień rozmiar linii # 2
Teraz, aby przekształcić ten wiersz w automatycznie przewijającą się karuzelę członków zespołu, musimy ponownie otworzyć ustawienia wiersza i zmienić szerokość i maksymalną szerokość w ustawieniach rozmiaru.
- Szerokość: 180%
- Maksymalna szerokość: 220% (biurko), 100% (tablet i telefon)
Dodaj ruch poziomy linii 2
Uzupełnij ustawienia linii, dodając ruch poziomy do ustawień efektu przewijania w zakładce Zaawansowane i gotowe!
- Aktywuj ruch poziomy: Tak
- Rozpocznij przesunięcie:
- Biuro: 2,5
- Tablet i telefon: 0
- Średnie przesunięcie: 0 (przy 40%)
- Przesunięcie końcowe:
- Biuro: -25 (62%)
- Tablet i telefon: 0
- Efekt ruchu wyzwalania: środek elementu
badanie
Teraz, gdy przeszliśmy przez wszystkie kroki, przyjrzyjmy się ostatecznie, jak wygląda na różnych rozmiarach ekranu.
Biuro
końcowe przemyślenia
W tym samouczku pokazaliśmy, jak wykazać się kreatywnością dzięki wbudowanym efektom przewijania Divi. W szczególności odtworzyliśmy piękną, automatycznie przewijaną karuzelę członków zespołu. Kiedy odwiedzający przewiń stronę, pojawi się kolejna część karuzeli.
