Czy chciałbyś, aby członkowie Twojego zespołu byli prezentowani w formie karuzeli z Divi ?
Podczas konfigurowania strony Informacje prawdopodobnie będziesz chciał uwzględnić tam również członków swojego zespołu. Robiąc to, pozwalasz odwiedzający kontaktować się z ludźmi stojącymi za Twoją firmą.
Jeśli szukasz sposobu na animowanie sekcji członków zespołu na scrollu, pokochasz ten samouczek.
Zamierzamy odtworzyć piękną, automatycznie przewijaną karuzelę członków zespołu, która porusza się tak, jak Ty odwiedzający przewiń stronę.
Chodźmy.
badanie
Zanim zagłębimy się w samouczek, rzućmy okiem na wynik na różnych rozmiarach ekranu.
Komputer stacjonarny
Wersja mobilna
Zacznijmy projektować z Divi
Czytaj także: Divi: Jak wyświetlić zawartość po najechaniu kursorem na rozdzielacz sekcji
Dodaj nową sekcję
Magowie wewnętrzni
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.
- Padding (góra i dół): 200px (komputer), 100px (tablet i telefon)
widoczność
Aby upewnić się, że w naszym projekcie nie pojawią się poziome paski przewijania, ukryjemy przepełnienia sekcji w zakładce Zaawansowane.
- Przepełnienie poziome: ukryte
- Przepełnienie pionowe: ukryte
Dodaj wiersz #1
Struktura kolumny
Kontynuuj, dodając nowy wiersz do sekcji, korzystając z następującej struktury kolumn:
Szerokość
Nie dodając jeszcze żadnych modułów, otwórz ustawienia linii, przejdź do zakładki Wnętrze i zmień szerokość i maksymalną szerokość w ustawieniach rozmiaru.
- Szerokość: 90%
- Maksymalna szerokość: 1 pikseli
rozstaw
Dodajemy również niestandardowe górne i dolne wypełnienie.
- Dopełnienie (góra i dół): 100px
Dodaj moduł tekstowy do kolumny
Dodaj zawartość rozmiaru H2
Czas dodać moduły, zaczynając od pierwszego modułu Tekst. Wprowadź a treść Rozmiar H2 do wyboru.
Ustawienia tekstu H2
Przełącz na kartę Wnętrze modułu i zmodyfikuj parametry tekstu H2 w następujący sposób:
- Czcionka: Ruchome Piaski
- Grubość czcionki: pół pogrubiona
- Kolor tekstu: #000000
- Rozmiar tekstu: 70px (komputer), 50px (tablet), 40px (telefon)
Dodaj moduł „Przegroda” do kolumny
widoczność
Następnie dodaj moduł dzielnik. Upewnij się, że opcja „Pokaż dzielnik” jest włączona.
- Pokaż dzielnik: TAK
Linia
Następnie wprowadź zmiany w ustawieniach linii.
- Kolor linii: #edf000
- Styl: solidny
- Pozycja linii: górna
Dobór
I uzupełnij parametry modułu, odpowiednio modyfikując parametry doboru:
- Waga dzielnika: 20px
- Szerokość: 11%
- Moduł wyrównania: lewy
- Wysokość: 20px
Dodaj wiersz 2
Struktura kolumny
Następny rząd! Użyj następującej struktury kolumn:
Dobór
Nie dodając jeszcze żadnych modułów, otwórz ustawienia wiersza i zmień ustawienia rozmiaru w następujący sposób:
- Użyj niestandardowej szerokości rynny: Tak
- Szerokość rynny: 2
- Szerokość: 100%
- Maksymalna szerokość: 100%
Odstępy (tylko tablet i telefon)
Następnie dodaj dopełnienie lewe i prawe tylko na małych rozmiarach ekranu.
- Wypełnienie (lewy i prawy): 5% (tylko tablet i telefon)
Parametry kolumny (5x)
Teraz w kolejnych trzech krokach tego samouczka wprowadzimy pewne zmiany w kolumnach. Zastosuj trzy kroki do każdej kolumny w swoim wierszu.
Gradient tła
Najpierw dodaj gradientowe tło do każdej kolumny.
- Gradient zatrzymuje się (25%): rgba (255,255,255,0)
- Gradient zatrzymuje się (86%): rgba (0,0,0,0.84)
- Typ: liniowy
- Kwadratowy 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
Dodano niestandardowy CSS (tylko tablet)
Uzupełnij ustawienia kolumn, dodając niestandardowy CSS do głównego elementu (Do widoku Tablet tylko) każdej kolumny.
Te wiersze kodu CSS pomogą nam umieścić kolumny jedna pod drugą na tablecie, zamiast mieć dwie obok siebie.
width: 100% !important;
margin: 50px 0px 50px 0px !important;
Dodaj moduł „Osoba” do kolumny
Dodaj treść
Aby udostępnić informacje o członkach zespołu, użyjemy modułu 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.
Zdjęcie w tle
Następnie dodamy nakładkę obrazu jako obraz tła modułu.
- Rozmiar obrazu tła: okładka
- Pozycja obrazu tła: środek
Ustawienia tekstu tytułowego
Przełącz na kartę Wnętrze i zmień ustawienia tekstu tytułu w następujący sposób:
- Poziom nagłówka tytułu: H3
- Czcionka tytułu: Ruchome Piaski
- Waga czcionki: pogrubiona
- Kolor tekstu tytułu: #ffffff
- Rozmiar tekstu tytułu: 230%
Ustawienia tekstu podstawowego
Zmień także ustawienia tekstu podstawowego.
- Czcionka ciała: Open Sans
- Kolor tekstu: #ffffff
- Wysokość linii: 2,2 em
Ustawienia tekstu posta członka zespołu
Następnie wprowadź zmiany w ustawieniach tekstowych stanowiska zajmowanego przez członka zespołu.
- Czcionka pozycji: otwarta bez
- Kolor tekstu pozycji: #edf000
rozstaw
Uzupełnij ustawienia modułu, dodając niestandardowe wartości wypełnienia do ustawień odstępów.
- Wyściółka: 70% (góra), 10% (dół, lewa i prawa)
Sklonuj moduł „Osoba” cztery 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 także o zmianie treść.
Zmień wiersz w automatycznie przewijającą się karuzelę
Zobacz także: Divi: Jak utworzyć płynną siatkę słupów po najechaniu myszą
Zmień rozmiar wiersza #2
Teraz, aby zmienić tę linię w automatycznie przewijaną karuzelę, musimy ponownie otworzyć ustawienia linii i zmienić szerokość i maksymalną szerokość w ustawieniach rozmiaru.
- Szerokość: 180%
- Maksymalna szerokość: 220% (komputer stacjonarny), 100% (tablet i telefon)
Dodaj ruch poziomy do linii 2
Uzupełnij ustawienia linii, dodając ruch poziomy do ustawień efektu przewijania w zakładce Zaawansowane pod opcją Przewiń efekty i jesteś skończony!
- Włącz ruch poziomy: Tak
- Odsunięcie początkowe:
- Pulpit: 2,5
- Tablet i telefon: 0
- Przesunięcie środkowe: 0 (do 40%)
- Odsunięcie końcowe:
- Komputer stacjonarny: -25 (do 62%)
- Tablet i telefon: 0
- Wyzwalacz efektu ruchu: środek elementu
badanie
Teraz, gdy przeszliśmy przez wszystkie kroki, przyjrzyjmy się ostatecznie, jak wygląda na różnych rozmiarach ekranu.
Komputer stacjonarny
Pobierz DIVI teraz !!!
Widok mobilny
Pobierz DIVI teraz !!!
Wnioski
W tym artykule pokazaliśmy, jak wykazać się kreatywnością dzięki wbudowanym efektom przewijania Divi.
W szczególności odtworzyliśmy piękną karuzelę z automatycznie przewijającymi się członkami zespołu. Kiedy odwiedzający przewiń stronę, pojawi się kolejna część karuzeli.
Mamy nadzieję, że ten samouczek zainspiruje Cię do kolejnych projektów. Divi. Jeśli masz jakiekolwiek wątpliwości lub sugestie, znajdź nas w sekcja komentarzy przedyskutować to.
Możesz również skonsultować nasze zasoby, jeśli potrzebujesz więcej elementów do realizacji swoich projektów tworzenia stron internetowych.
Nie wahaj się również skonsultować z naszym przewodnikiem na temat Tworzenie bloga WordPress lub ten na Divi: najlepszy motyw WordPress wszechczasów.
Ale w międzyczasie udostępnij ten artykuł w różnych sieciach społecznościowych.
...
