Pobierz DARMOWĄ samoprzewijającą się karuzelę członków zespołu wykonaną z efektami przewijania Divi

Konfigurując stronę z informacjami, najprawdopodobniej zechcesz na niej również umieścić członków swojego zespołu. W ten sposób umożliwiasz odwiedzającym kontakt z ludźmi stojącymi za Twoją firmą. Jeśli szukasz sposobu na animowanie sekcji członka zespołu podczas przewijania, pokochasz ten samouczek. Odtworzymy piękną, samoprzewijającą się karuzelę członków zespołu, która porusza się, gdy odwiedzający przewijają stronę w dół. Będziesz mógł również pobrać plik JSON za darmo!

Weźmy się za to.

Zapowiedź

Zanim zagłębimy się w samouczek, rzućmy okiem na wyniki na różnych rozmiarach ekranu.

Pulpit

mobilny

Pobierz układ karuzeli członków zespołu ZA DARMO

Aby położyć swoje ręce na darmowym układzie karuzeli członków zespołu, musisz najpierw pobrać go za pomocą przycisku poniżej. Aby uzyskać dostęp do pobrania, musisz zapisać się na naszą listę e-mailową Divi Daily, korzystając z poniższego formularza. Jako nowy subskrybent otrzymasz jeszcze więcej dobroci Divi i darmowy pakiet Divi Layout w każdy poniedziałek! Jeśli jesteś już na liście, po prostu wpisz poniżej swój adres e-mail i kliknij pobierz. Nie będziesz „ponownie subskrybować” ani otrzymywać dodatkowych wiadomości e-mail.

Pobierz pliki

Pobierz za darmo

Dołącz do biuletynu Divi, a wyślemy Ci e-mailem kopię najlepszego pakietu układu strony docelowej Divi, a także mnóstwo innych niesamowitych i bezpłatnych zasobów, wskazówek i sztuczek Divi. Idź dalej, a w mgnieniu oka zostaniesz mistrzem Divi. Jeśli masz już subskrypcję, wpisz poniżej swój adres e-mail i kliknij Pobierz, aby uzyskać dostęp do pakietu układów.

POBIERANIE

Udało Ci się zasubskrybować. Sprawdź swój adres e-mail, aby potwierdzić subskrypcję i uzyskać dostęp do bezpłatnych cotygodniowych pakietów układów Divi!

Zacznijmy odtwarzać!

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 w różnych rozmiarach ekranu.

• Górna wyściółka: 200px (komputer stacjonarny), 100px (tablet i telefon)
• Dolna wyściółka: 200px (komputer), 100px (tablet i telefon)

Przepełnienia

Aby upewnić się, że w naszym projekcie nie pojawia się poziomy pasek przewijania, ukryjemy przepełnienia sekcji w zakładce Zaawansowane.

• Przepełnienie poziome: ukryte
• Przepełnienie pionowe: ukryte

Dodaj wiersz nr 1

Struktura kolumny

Kontynuuj, dodając nowy wiersz do sekcji, korzystając z następującej struktury kolumn:

Rozmiary

Nie dodając jeszcze żadnych modułów, otwórz ustawienia wiersza, przejdź do zakładki projektu i zmodyfikuj szerokość i maksymalną szerokość w ustawieniach rozmiaru.

• Szerokość: 90%
• Maksymalna szerokość: 1580 pikseli

Rozstaw

Dodajemy również niestandardowe górne i dolne wyściółki.

• Górna wyściółka: 100px
• Dolna wyściółka: 100px

Dodaj moduł tekstowy do kolumny

Dodaj zawartość H2

Czas dodać moduły, zaczynając od pierwszego modułu tekstowego. Wprowadź wybrane przez siebie treści H2.

Ustawienia tekstu H2

Przejdź do zakładki projektowania modułu i zmień ustawienia tekstu H2 w następujący sposób:

• Czcionka nagłówka 2: Ruchome piaski
• Grubość czcionki nagłówka 2: pół pogrubiona
• Kolor tekstu nagłówka 2: #000000
• Rozmiar tekstu nagłówka 2: 70px (komputer), 50px (tablet), 40px (telefon)

Dodaj moduł dzielnika do kolumny

Widoczność

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

• Pokaż dzielnik: tak

Linia

Następnie wprowadź kilka zmian w ustawieniach linii.

• Kolor linii: #edf000
• Styl linii: Jednolity
• Pozycja linii: górna

Rozmiary

I uzupełnij ustawienia modułu, odpowiednio zmieniając ustawienia rozmiaru:

• Waga dzielnika: 20px
• Szerokość: 11%
• Wyrównanie modułu: do lewej
• Wysokość: 20px

Dodaj wiersz nr 2

Struktura kolumny

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

Rozmiary

Nie dodając jeszcze żadnych modułów, otwórz ustawienia wiersza i zmodyfikuj ustawienia 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 trochę dopełnienia lewego i prawego tylko na mniejszych rozmiarach ekranu.

• Lewa wyściółka: 5% (tylko tablet i telefon)
• Prawa wyściółka: 5% (tylko tablet i telefon)

Ustawienia kolumny (5x)

Teraz w kolejnych trzech krokach tego samouczka wprowadzimy pewne zmiany w kolumnach. Zastosuj wszystkie trzy kroki do każdej kolumny w swoim wierszu.

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)
• Typ gradientu: liniowy
• Pozycja startowa: 25%
• Pozycja końcowa: 86%
• Umieść gradient nad obrazem tła: Tak

Zdjęcie w tle

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 kolumn, dodając niestandardowy kod CSS do głównego elementu tabletu w każdej kolumnie. Te wiersze kodu CSS pomogą nam umieścić kolumny pod sobą na tablecie, zamiast mieć dwie obok siebie.

width: 100% !important;
margin: 50px 0px 50px 0px !important;

Dodaj moduł Osoba do kolumny

Dodaj zawartość

Aby udostępnić informacje o członku zespołu, użyjemy modułu Person. Dodaj pierwszy moduł osoby do kolumny 1 i użyj wybranej przez siebie treści.

Usuń obraz

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

Zdjęcie w tle

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łu

Przejdź do zakładki projektu modułu i zmień ustawienia tekstu tytułu w następujący sposób:

• Poziom nagłówka tytułu: H3
• Czcionka tytułu: Ruchome Piaski
• Grubość czcionki tytułu: pogrubiona
• Kolor tekstu tytułu: #ffffff
• Rozmiar tekstu tytułu: 230%

Ustawienia tekstu podstawowego

Zmodyfikuj również ustawienia tekstu podstawowego.

• Czcionka ciała: Open Sans
• Kolor tekstu ciała: #ffffff
• Wysokość linii ciała: 2,2 em

Ustawienia tekstu pozycji

Następnie wprowadź zmiany w ustawieniach tekstu pozycji.

• Czcionka pozycji: Otwórz Sans
• Kolor tekstu pozycji: #edf000

Rozstaw

I uzupełnij ustawienia modułu, dodając niestandardowe wartości dopeł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%

Moduł klonowania osoby 4x

Po ukończeniu modułu Person możesz sklonować cały moduł cztery razy.

Umieść duplikaty w pozostałych kolumnach

Umieść zduplikowane moduły w czterech pozostałych kolumnach rzędu. Upewnij się, że zmieniłeś również treść.

Zmień wiersz w samoprzewijającą się karuzelę

Zmień rozmiar wiersza #2

Teraz, aby zmienić ten wiersz w samoprzewijają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% (komputer stacjonarny), 100% (tablet i telefon)

Dodaj rząd #2 ruchu poziomego

Uzupełnij ustawienia wiersza, dodając ruch poziomy do ustawień efektu przewijania w zakładce Zaawansowane i gotowe!

• Włącz ruch poziomy: Tak
• Odsunięcie początkowe:
  • Pulpit: 2,5
  • Tablet i telefon: 0
• Przesunięcie środkowe: 0 (przy 40%)
• Odsunięcie końcowe:
  • Komputer stacjonarny: -25 (przy 62%)
  • Tablet i telefon: 0
• Wyzwalacz efektu ruchu: środek elementu

Zapowiedź

Teraz, gdy przeszliśmy przez wszystkie kroki, przyjrzyjmy się ostatecznemu wynikowi na różnych rozmiarach ekranu.

Pulpit

mobilny

Końcowe przemyślenia

W tym poście pokazaliśmy, jak wykazać się kreatywnością dzięki wbudowanym efektom przewijania Divi. Mówiąc dokładniej, odtworzyliśmy piękną, samoprzewijającą się karuzelę członków zespołu. Gdy odwiedzający przewijają stronę, pojawia się inna część karuzeli. Udało Ci się również pobrać plik JSON za darmo! Jeśli masz jakieś pytania lub sugestie, możesz zostawić komentarz w sekcji komentarzy poniżej.

Jeśli chcesz dowiedzieć się więcej o Divi i zdobyć więcej gratisów Divi, zasubskrybuj nasz biuletyn e-mailowy i kanał YouTube, dzięki czemu zawsze będziesz jedną z pierwszych osób, które poznają i będą czerpać korzyści z tych bezpłatnych treści.