Jak oznaczyć nową sekcję Divi za pomocą subtelnych kształtów ruchu

Istnieje wiele sposobów na uświadomienie odwiedzającym, że przechodzą do innej sekcji na Twojej stronie. W Divi istnieje szeroka gama przegródek, z których możesz korzystać od razu. Ale jeśli szukasz bardziej animowanego sposobu, aby to wyjaśnić, pokochasz ten samouczek. Pokażemy Ci, jak oznaczyć nową sekcję Divi za pomocą subtelnych kształtów ruchu. Stworzymy te kształty za pomocą wbudowanych opcji Divi i dodamy do nich ruch za pomocą efektów przewijania Divi. Możliwości są nieograniczone, ale podzielimy się trzema przykładami projektów, z których możesz skorzystać od razu. Będziesz mógł również bezpłatnie pobierać pliki JSON!

Weźmy się za to.

Zapowiedź

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

Przykład 1

Pulpit

mobilny

Przykład #2

Pulpit

mobilny

Przykład #3

Pulpit

mobilny

Pobierz układy subtelnych kształtów ruchu ZA DARMO

Aby położyć ręce na darmowych układach subtelnych kształtów ruchu, najpierw musisz je pobrać 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!

Ogólne kroki

Prześlij układ strony docelowej galerii sztuki

W tym samouczku użyjemy pakietu układu galerii sztuki, ale możesz zastosować tę technikę do dowolnego rodzaju tworzonej witryny. Dodaj nową stronę i prześlij stronę docelową pakietu układów.

Dodaj nowy wiersz na dole sekcji #1

Struktura kolumny

Teraz przejdziemy przez kilka podstawowych kroków, które dotyczą wszystkich trzech przykładów pokazanych na początku tego samouczka. Najpierw dodaj nowy wiersz na dole pierwszej sekcji strony, korzystając z następującej struktury kolumn:

Rozmiary

Otwórz ustawienia wiersza i zmień ustawienia rozmiaru w następujący sposób:

• Użyj niestandardowej szerokości rynny: Tak
• Szerokość rynny: 1
• Szerokość: 100%
• Maksymalna szerokość: 100%

Rozstaw

Zmodyfikuj również wartości marginesów i dopełnienia.

• Górny margines: 10vw
• Górna wyściółka: 0px
• Dolna wyściółka: 0px

Usuń część 1 dolną wyściółkę

Aby upewnić się, że wiersz i kształty ruchu są wyświetlane na dole sekcji, musimy usunąć dolną wyściółkę sekcji.

• Dolna wyściółka: 0vw

Odtwórz przykład nr 1

Dodaj moduł rozdzielacza nr 1

Widoczność

Po wykonaniu ogólnych kroków nadszedł czas, aby zacząć odtwarzać różne przykłady, zaczynając od pierwszego. Dodaj pierwszy moduł rozdzielacza i upewnij się, że opcja „Pokaż rozdzielacz” jest włączona.

• Pokaż dzielnik: tak

Linia

Przejdź do zakładki projektu modułu i zmień kolor linii.

• Kolor linii: #ffa100

Rozmiary

Zmodyfikuj również ustawienia rozmiaru modułu.

• Waga dzielnika: 50px
• Wysokość: 50px

Rozstaw

Następnie przejdź do ustawień odstępów i dodaj niestandardowe wartości marginesów i dopełnienia.

• Lewy margines: -200px (tylko tablet i telefon)
• Prawy margines: -200px (tylko tablet i telefon)
• Lewa wyściółka: 15vw
• Prawa wyściółka: 15vw

Przekształć pochylenie

Przekształcimy również nieznacznie moduł, dodając dolną wartość skosu w ustawieniach transformacji.

• Dół: 60 stopni

Efekt przewijania ruchu w poziomie

Czas dodać różne efekty przewijania do naszego modułu! Najpierw dodamy ruch poziomy.

• Włącz ruch poziomy: Tak
• Przesunięcie początkowe: 0
• Przesunięcie środkowe: 0 (przy 80%)
• Odsunięcie końcowe:
  • Komputer stacjonarny: 20 (przy 85%)
  • Tablet i telefon: 5 (przy 85%)

Efekt przewijania i zanikania

Dodamy też efekt zanikania i zanikania.

• Włącz pojawianie się i zanikanie: tak
• Początkowe krycie: 0%
• Średnie krycie: 0% (przy 36%)
• Końcowe krycie: 100% (przy 40%)

Skalowanie efektu przewijania w górę iw dół

A my uzupełnimy ustawienia modułu, dodając efekt skalowania w górę iw dół.

• Włącz skalowanie w górę i w dół: Tak
• Skala początkowa: 20%
• Skala średnia: 50% (przy 69%)
• Skala końcowa: 100% (przy 73%)

Moduł dzielnika klonów #1

Po ukończeniu modułu rozdzielającego możesz go sklonować.

Zmień kolor linii

Otwórz ustawienia zduplikowanego modułu i zmień kolor linii.

• Kolor linii: #24252d

Zmień odstępy

Zmodyfikuj również wartości odstępów modułu.

• Lewy margines: -200px (tylko tablet i telefon)
• Prawy margines: -200px (tylko tablet i telefon)
• Lewa wyściółka: 25vw
• Prawa wyściółka: 25vw

Zmodyfikuj efekt przewijania ruchu w poziomie

Następnie przejdź do efektów przewijania na karcie Zaawansowane i zmodyfikuj końcowe przesunięcie efektu przewijania ruchu w poziomie.

• Odsunięcie końcowe:
  • Pulpit: -20
  • Tablet i telefon: -5

Odtwórz przykład nr 2

Dodaj moduł rozdzielacza nr 1

Widoczność

Jeśli wolisz odtworzyć drugi przykład, dodaj pierwszy moduł rozdzielający do ostatniego wiersza sekcji. Upewnij się, że opcja „Pokaż dzielnik” jest włączona.

• Pokaż dzielnik: tak

Linia

Następnie zmodyfikuj kolor linii modułu.

• Kolor linii: #ffa100

Rozmiary

Zmień również ustawienia rozmiaru.

• Waga dzielnika: 200px
• Szerokość: 200px
• Wyrównanie modułu: Środek
• Wysokość: 200px

Granica

Następnie zamienimy moduł w okrąg, dodając promień obramowania.

• Wszystkie rogi: 200px

Efekt przewijania ruchu w poziomie

Czas dodać efekty przewijania! Pierwszym efektem, którego używamy, jest ruch poziomy.

• Włącz ruch poziomy: Tak
• Przesunięcie początkowe: -2
• Przesunięcie środkowe: 0
• Odsunięcie końcowe:
  • Pulpit: 20
  • Tablet i telefon: 5

Skalowanie efektu przewijania w górę iw dół

Następnie włączymy efekt skalowania w górę i w dół.

• Włącz skalowanie w górę i w dół: Tak
• Skala początkowa: 20%
• Skala środkowa: 100%
• Skala końcowa: 100%

Moduł dzielnika klonów

Śmiało i sklonuj cały moduł rozdzielacza.

Zmień kolor linii

Otwórz duplikat i zmień kolor linii.

• Kolor linii: #24252d

Zmień odstępy

Dodaj też górny margines.

• Górny margines: -200px

Zmień efekt przewijania ruchu w poziomie

Następnie przejdź do ustawień efektu przewijania w poziomie i zmień końcowe przesunięcie.

• Odsunięcie końcowe:
  • Pulpit: -20
  • Tablet i telefon: -5

Odtwórz przykład nr 3

Dodaj wypełnienie wiersza

Przejdźmy do następnego i ostatniego przykładu! Zacznij od otwarcia wiersza utworzonego w ogólnych krokach tego samouczka i zmień wartości dopełnienia w ustawieniach odstępów.

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

Dodaj moduł rozdzielacza nr 1

Widoczność

Dodaj nowy moduł rozdzielający do ostatniego rzędu sekcji i ukryj rozdzielacz.

• Pokaż dzielnik: Nie

Tło gradientowe

Następnie dodaj tło gradientowe.

• Kolor 1: #ffa100
• Kolor 2: #f77f00
• Typ gradientu: liniowy
• Kierunek gradientu: 121 stopni

Rozmiary

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

• Szerokość: 200px
• Wyrównanie modułu: Środek
• Wysokość: 0px

Rozstaw

Następnie dodamy niestandardowe górne i dolne wyściółki.

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

Efekt przewijania ruchu w poziomie

Teraz nadszedł czas, aby dodać efekty przewijania, zaczynając od pewnego poziomego ruchu na różnych rozmiarach ekranu.

• Włącz ruch poziomy: Tak
• Przesunięcie początkowe: -1 (przy 30%)
• Przesunięcie środkowe: 0
• Odsunięcie końcowe:
  • Pulpit: 20
  • Tablet i telefon: 5

Obrotowy efekt przewijania

Uzupełnimy ustawienia modułu, dodając efekt obracającego się przewijania.

• Włącz obracanie: Tak
• Obrót początkowy: 0° (przy 46%)
• Średni obrót: 50° (przy 75%)
• Zakończenie obrotu: 90°

Moduł dzielnika klonów

Śmiało i sklonuj cały moduł.

Zmień tło gradientowe

Otwórz ustawienia duplikatu i zmień kolory gradientu tła.

• Kolor 1: #24252d
• Kolor 2: #16161c

Zmień odstępy

Dodaj trochę ujemnego górnego marginesu.

• Górny margines: -100px

Zmień efekt przewijania w poziomie

I zmodyfikuj końcowe przesunięcie ruchu poziomego w ustawieniach efektów przewijania.

• Odsunięcie końcowe:
  • Pulpit: -20
  • Tablet i telefon: -5

Zapowiedź

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

Przykład 1

Pulpit

mobilny

Przykład #2

Pulpit

mobilny

Przykład #3

Pulpit

mobilny

Końcowe przemyślenia

W tym poście pokazaliśmy, jak tworzyć kształty ruchu i używać ich do oznaczania nowej sekcji na stronie Divi. Korzystanie z tej techniki pomoże odwiedzającym stać się jeszcze bardziej świadomym faktu, że przechodzą do innej części Twojej strony. Odtworzone przez nas efekty ruchu są subtelne i w łatwy sposób dodają interakcji do Twojej witryny. Udało Ci się również pobrać pliki 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.