Przejdź do głównej treści

Jak stworzyć karuzelę przewijania członka zespołu za pomocą Divi

Divi: najłatwiejszy w użyciu motyw WordPress

Divi: Najlepszy motyw WordPress wszechczasów!

więcej Pobieranie 901.000, Divi jest najpopularniejszym motywem WordPress na świecie. Jest kompletny, łatwy w użyciu i zawiera więcej niż darmowe szablony 62. [Zalecane]

Podczas tworzenia strony Informacje prawdopodobnie zechcesz również przedstawić członków swojego zespołu. W ten sposób umożliwiasz odwiedzającym interakcję z osobami stojącymi za Twoją firmą. Jeśli szukasz sposobu na ożywienie sekcji członków zespołu na zwoju, ten samouczek może być dla Ciebie. Stworzymy automatycznie przewijającą się karuzelę członków zespołu, która będzie się poruszać w miarę przewijania strony przez odwiedzających. 

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ź wybraną zawartość H2.

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.

Łatwo stwórz swoją stronę internetową dzięki Elementor

Elementor pozwala łatwo stworzyć dowolny projekt strony internetowej o profesjonalnym wyglądzie. Przestań płacić drogo za to, co możesz zrobić sam. [Bezpłatny]

  • 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.

Szukasz najlepszych motywów i wtyczek WordPress?

Pobierz najlepsze wtyczki i motywy WordPress na Envato i łatwo stwórz swoją stronę. Już więcej niż pobrań 49.720.000. [EXCLUSIVE]

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

Aby udostępnić informacje o członkach zespołu, użyjemy modułu Person. Dodaj pierwszy moduł Person do kolumny 1 i użyj dowolnej zawartości.

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 wiersza. Pamiętaj, aby edytować również zawartość.

Z łatwością stwórz swój sklep internetowy

Uzyskaj woocommerce, najlepsze wtyczki e-commerce do sprzedaży produktów swoich fizycznych i cyfrowych na WordPressie. [Zalecane]

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 przewijającą się karuzelę członków zespołu. Gdy odwiedzający przewijają stronę w dół, pojawia się kolejna część karuzeli.

Ten artykuł zawiera komentarze 0

Zostaw komentarz

Twoj adres e-mail nie bedzie opublikowany. Wymagane pola są oznaczone *

Ta strona używa Akismet, aby zmniejszyć niechciane. Dowiedz się więcej o sposobie wykorzystania danych komentarzy.

Powrót do góry
0 akcji
udział
ćwierkanie
Enregistrer