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.

Przewiń członka zespołu divi

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)
Konfiguracja parametrów

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
Konfiguracja przepełnienia

Dodaj wiersz nr 1

Struktura kolumny

Kontynuuj dodawanie nowego wiersza do sekcji przy użyciu następującej struktury kolumn:

Wybierz układ divi

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
Parametr linii Divi

rozstaw

Dodajemy również niestandardowe górne i dolne wypełnienie.

  • Górna wyściółka: 100px
  • Dolne wypełnienie: 100px
Konfiguracja divi z odstępami między wierszami

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.

Poznaj drużynę

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)
Odstępy w tekście Divi

Dodaj moduł separacji do kolumny

widoczność

Następnie dodaj moduł separacji. Upewnij się, że opcja „Pokaż separator” jest włączona.

  • Pokaż separator: Tak
Pokaż separator divi

Linia

Następnie wprowadź zmiany w ustawieniach linii.

  • Kolor linii: # edf000
  • Styl linii: jednolity
  • Pozycja linii: góra
Styl odstępów Divi

zaklejania

I uzupełnij parametry modułu, odpowiednio modyfikując parametry wymiarowania:

  • Waga dzielnika: 20px
  • Szerokość: 11%
  • Wyrównanie modułu: lewo
  • Wysokość: 20px
Wymiarowanie modułu linii Divi

Dodaj linię # 2

Struktura kolumny

Do następnego rzędu! Użyj następującej struktury kolumn:

Konfiguracja kolumny Divi

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%
Konfiguracja szerokości rynny

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)
Konfiguracja stylu odstępów między wierszami

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.

Parametr divi konfiguracji linii

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
Konfiguracja tylnej kolumny Divi

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
Dodaj obraz tła kolumny Divi

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;
Kod kolumny divi css

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.

Imię osoby Divi

Usuń zdjęcie

Następnie usuń obraz. Zamiast tego używamy obrazu tła kolumny.

Usuń obraz divi

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
Konfiguracja tła modułu osoby

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%
Personalizacja tytułu modułu Divi

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
Personalizacja ciała Divi

Ustaw ustawienia tekstu

Następnie wprowadź zmiany w ustawieniach tekstu pozycji.

  • Pozycja czcionki: Otwórz Sans
  • Kolor tekstu pozycji: # edf000
Pozycja Divi

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%
Rozstaw modułów Divi Person

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ść.

Dostosuj listę użytkowników

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)
Odstępy modyfikacji linii divi

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
Konfiguracja animacji przewijania Divi

badanie

Teraz, gdy przeszliśmy przez wszystkie kroki, przyjrzyjmy się ostatecznie, jak wygląda na różnych rozmiarach ekranu.

Biuro

Przewiń członka zespołu divi

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.