Jak używać przekształconych kształtów ruchu jako tła w Divi

Nowe efekty przewijania Divi zostały stworzone, abyś mógł łatwo przenieść swoje doświadczenie w projektowaniu stron internetowych na wyższy poziom. Oczywiście możesz zastosować go bezpośrednio do elementów w swojej sekcji, ale możesz również dodać ruch do elementów leżących poniżej. Wybranie podstawowego podejścia pozwala zachować statykę treści podczas ruchu w tle. W tym samouczku użyjemy przekształconych kształtów ruchu jako naszych podstawowych elementów, aby utworzyć animowaną sekcję. Zajmiemy się dwoma różnymi przykładami, ale możliwości są naprawdę nieograniczone. 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.

Przykład 1

Pulpit

mobilny

Przykład #2

Pulpit

mobilny

Pobierz układ przekształconych kształtów ruchu ZA DARMO

Aby położyć swoje ręce na układzie darmowych przekształconych kształtów ruchu, najpierw musisz go 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

Dodaj nową sekcję

Tło gradientowe

Zacznij od dodania nowej sekcji do strony, nad którą pracujesz. Otwórz ustawienia sekcji i zastosuj tło gradientowe.

• Kolor 1: #ffffff
• Kolor 2: #97c6fc
• Typ gradientu: liniowy
• Kierunek gradientu: 306 stopni
• Pozycja startowa: 50%
• Pozycja końcowa: 50%

Rozstaw

Przejdź do karty projektu sekcji i użyj niestandardowych wartości marginesów i dopełnienia.

• Lewy margines: 4%
• Prawy margines: 4%
• Górna wyściółka: 11%
• Dolna wyściółka: 11%

Cień Pudełka

Używamy również subtelnego cienia pudełkowego.

• Siła rozmycia cieni w pudełku: 80px
• Kolor cienia: rgba (0,0,0,0.1)
• Pozycja cienia pudełka: cień zewnętrzny

Widoczność

Dokończymy ustawienia sekcji, ustawiając przepełnienia na ukryte. Zapewni to, że gdy dodamy przekształcone kształty ruchu, nie przekroczą one kontenera sekcji.

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

Dodaj nowy wiersz

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 i zmień maksymalną szerokość w ustawieniach rozmiaru.

• Maksymalna szerokość: 1580 pikseli

Odstęp kolumny 1

Dodajemy również górne dopełnienie do ustawień odstępów w pierwszej kolumnie.

• Górna wyściółka: 9%

Dodaj moduł tekstowy nr 1 do kolumny 1

Dodaj zawartość H2

Po zakończeniu ustawień wierszy nadszedł czas, aby dodać moduły, zaczynając od modułu tekstowego w kolumnie 1. Dodaj wybrane przez siebie treści H2.

Ustawienia tekstu H2

Przejdź do zakładki projektu modułu i odpowiednio zmień ustawienia tekstu H2:

• Czcionka nagłówka 2: Abril Fatface
• Kolor tekstu nagłówka 2: #7206a0
• Rozmiar tekstu nagłówka 2: 80px (komputer), 65px (tablet), 50px (telefon)

Dodaj moduł tekstowy #2 do kolumny 1

Ustawienia tekstu

Dodaj kolejny moduł tekstowy tuż pod poprzednim z wybraną zawartością opisu.

Ustawienia tekstu

Zmień ustawienia tekstowe modułu w następujący sposób:

• Czcionka tekstu: Otwórz Sans
• Kolor tekstu: #7206a0
• Wysokość linii tekstu: 2em

Dodaj moduł przycisku do kolumny 1

Dodaj kopię

Ostatnim modułem, którego potrzebujemy w kolumnie 1, jest moduł przycisku. Wprowadź wybraną kopię.

Ustawienia przycisków

Następnie przejdź do zakładki projektu i odpowiednio dostosuj styl przycisku:

• Użyj niestandardowych stylów dla przycisku: Tak
• Rozmiar tekstu przycisku: 20px
• Kolor tekstu przycisku: #ffffff
• Kolor tła przycisku: #077bff
• Szerokość obramowania przycisku: 0px

• Czcionka przycisku: Abril Fatface

Rozstaw

Dodajemy też kilka niestandardowych wartości dopełnienia.

• Górna wyściółka: 20px
• Dolna wyściółka: 20px
• Lewa wyściółka: 50px
• Prawe wypełnienie: 50px

Dodaj moduł obrazu do kolumny 2

Załaduj obrazek

W drugiej kolumnie wiersza jedynym modułem, którego potrzebujemy, jest moduł obrazu. Prześlij wybraną ilustrację. Jeśli chcesz użyć dokładnie tego, którego użyliśmy w tym samouczku, możesz go znaleźć w folderze pobierania, który udało Ci się pobrać na początku tego postu.

Wyrównanie

Przejdź do zakładki projektowania modułu i zmień wyrównanie obrazu.

• Wyrównanie obrazu: w prawo

Rozmiary

Uzupełnij ustawienia modułu, modyfikując szerokość na różnych rozmiarach ekranu.

• Szerokość: 100% (komputer stacjonarny), 50% (tablet i telefon)

Odtwórz przykład nr 1

Dodaj moduł tekstowy na górę kolumny 1

Gdy wszystkie zwykłe moduły są już na miejscu, nadszedł czas, aby dodać przekształcone kształty ruchu! Odtworzymy pierwszy przykład, dodając nowy moduł tekstowy na górze pierwszej kolumny. Pozostaw pole zawartości puste.

Tło gradientowe

Następnie dodaj do modułu tło gradientowe.

• Kolor 1: rgba (255,255,255,0)
• Kolor 2: #00fff6
• Typ gradientu: liniowy
• Kierunek gradientu: 306 stopni
• Pozycja startowa: 54%
• Pozycja końcowa: 54%

Rozmiary

Zmodyfikuj również ustawienia rozmiaru.

• Szerokość: 165%
• Wzrost: 270%

Rozstaw

Następnie przejdź do ustawień odstępów i użyj niestandardowych wartości odstępów.

• Margines dolny: 1vw (komputer stacjonarny), 2vw (tablet), 3vw (telefon)
• Górna wyściółka: 29%
• Dolna wyściółka: 29%

Przekształć Obróć

Następnie obracamy moduł.

• Lewo: 270 stopni

Przekształć pochylenie

Zastosujemy również wartość skosu przekształcenia.

• Dół: 16 stopni
• Prawo: 16 stopni

Pozycja

Następnie przejdź do zakładki Zaawansowane i zmodyfikuj ustawienia pozycji w następujący sposób:

• Pozycja: bezwzględna
• Lokalizacja: górny lewy
• Przesunięcie w pionie: -50%
• Przesunięcie w poziomie: -50%

Efekt przewijania w pionie

Następnie dodamy efekty przewijania, zaczynając od ruchu w pionie.

• Włącz ruch w pionie: Tak
• Przesunięcie początkowe: 4
• Przesunięcie środkowe: 0 (przy 50%)
• Przesunięcie końcowe: -4

Efekt przewijania ruchu w poziomie

I uzupełnimy ustawienia modułu, dodając również trochę ruchu poziomego!

• Włącz ruch poziomy: Tak
• Przesunięcie początkowe: 4
• Przesunięcie środkowe: 0 (przy 50%)
• Przesunięcie końcowe: -4%

Odtwórz przykład nr 2

Dodaj moduł tekstowy na górę kolumny 1

Chcesz zamiast tego odtworzyć drugi przykład? Dodaj moduł tekstowy na górze pierwszej kolumny.

Kolor tła

Otwórz ustawienia modułu i zastosuj kolor tła.

• Kolor tła: #00fff6

Rozmiary

Przejdź do zakładki projektu modułu i zmień ustawienia rozmiaru.

• Szerokość: 165%
• Wzrost: 270%

Rozstaw

Dodajemy też kilka niestandardowych wartości odstępów.

• Margines dolny: 1vw (komputer stacjonarny), 2vw (tablet), 3vw (telefon)
• Górna wyściółka: 29%
• Dolna wyściółka: 29%

Obróć Pochylenie

I zastosujemy efekt skosu przekształcenia w ustawieniach przekształcenia.

• Po prawej: -54 stopnie

Pozycja

Następnie przejdziemy do zakładki zaawansowane i zmienimy ustawienia pozycji modułu.

• Pozycja: bezwzględna
• Lokalizacja: górny lewy
• Przesunięcie w pionie: -50%
• Przesunięcie w poziomie: -50%

Efekt przewijania ruchu w pionie

Następnie dodamy efekty przewijania. Zaczynając od pewnego ruchu pionowego.

• Włącz ruch w pionie: Tak
• Przesunięcie początkowe: 4
• Przesunięcie środkowe: 0 (przy 50%)
• Przesunięcie końcowe: -4

Efekt przewijania ruchu w poziomie

I uzupełnimy ustawienia modułu, dodając również trochę ruchu poziomego!

• Włącz ruch poziomy: Tak
• Przesunięcie początkowe: 4
• Przesunięcie środkowe: 0 (przy 50%)
• Przesunięcie końcowe: -4

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

Końcowe przemyślenia

W tym poście pokazaliśmy, jak kreatywnie dodawać przekształcone kształty ruchu do projektu sekcji. Podstawowe przekształcone kształty ruchu pomagają dodać subtelną animację do projektów przekrojów. Udało Ci się również pobrać plik JSON za darmo! Jeśli masz jakieś pytania, 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.