Jak tworzyć animowane przejścia stron za pomocą kreatora motywów Divi

Zwykle, gdy odwiedzający przechodzą od strony do strony w witrynie Divi, przejście następuje natychmiast. A co, jeśli istnieje sposób na animowanie tych przejść między stronami? Z Divi's Theme Builder na pewno tak jest, bez potrzeby tworzenia niestandardowego kodu! Gdy tylko odwiedzający opuszczą stronę, aby wejść na inną, możesz zastosować animację. W dzisiejszym samouczku pokażemy, jak tworzyć animowane przejścia między stronami. Co więcej, podzielimy się również trzema różnymi przykładami, które możesz od razu zastosować w swoim następnym projekcie. Będziesz mógł również bezpłatnie pobrać szablonowe pliki JSON!

Weźmy się za to.

Zapowiedź

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

Animowane przejście strony nr 1

Pulpit

mobilny

Animowane przejście strony nr 2

Pulpit

mobilny

Animowane przejście strony nr 3

Pulpit

mobilny

Pobierz szablony stron ZA DARMO

Aby położyć ręce na darmowych szablonach stron, 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!

1. Przejdź do kreatora motywów Divi i dodaj nowy szablon strony

Przejdź do kreatora motywów Divi i dodaj nowy szablon

Pierwszą rzeczą, którą musisz zrobić, to przejść do Kreatora motywów Divi i kliknąć „Dodaj nowy szablon”.

Użyj szablonu na wszystkich stronach

Użyj nowego szablonu na wszystkich stronach (lub stronach, do których chcesz zastosować przejście).

• Użyj na: wszystkie strony

Rozpocznij tworzenie treści szablonu

Następnie zacznij tworzyć niestandardową treść szablonu strony.

2. Utwórz treść strony za pomocą modułu treści postów

Ustawienia sekcji

Rozstaw

W edytorze szablonów zauważysz sekcję. Otwórz tę sekcję i usuń wszystkie domyślne górne i dolne wyściółki.

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

Widoczność

Aby upewnić się, że podczas animacji nie pojawia się żaden poziomy pasek przewijania, musimy ukryć oba przepełnienia sekcji w zakładce Zaawansowane w ustawieniach 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 wierszy i pozwól wierszowi zająć całą szerokość kontenera sekcji.

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

Rozstaw

Usuwamy również domyślną górną i dolną wyściółkę wiersza. W tym momencie kontenery sekcji, wierszy i kolumn mają dokładnie taki sam rozmiar. Pomiędzy kontenerami nie ma żadnych odstępów. Jest to ważne dla tego, co nadejdzie w następnym kroku; dodanie dynamicznej zawartości strony.

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

Dodaj moduł treści posta do kolumny

Jedynym modułem, którego potrzebujemy, aby zawartość strony pojawiała się dynamicznie, jest moduł Post Content. Śmiało i dodaj ten moduł do kolumny wiersza. Dzięki ustawieniom sekcji i wierszy, które zastosowaliśmy w poprzednich częściach tego postu, dynamiczna zawartość strony zajmie całą szerokość i wysokość kontenera sekcji.

3. Zastosuj animowane przejście strony według własnego wyboru

Odtwórz animowane przejście strony nr 1

Ustawienia sekcji

Kolor tła

Czas zastosować animowane przejścia stron! Udostępniamy trzy różne przykłady, ale dzięki wbudowanym opcjom Divi możliwości animacji są nieograniczone. Aby zastosować pierwsze animowane przejście strony, otwórz kontener sekcji i dodaj kolor tła.

• Kolor tła: #d8cdbe

Animacja

W sekcji stosujemy również następujące ustawienia animacji:

• Styl animacji: slajd
• Kierunek animacji: w prawo
• Początkowe krycie animacji: 100%
• Krzywa szybkości animacji: łatwość wchodzenia i wychodzenia
• Powtórzenie animacji: raz

Ustawienia wiersza

Kolor tła

Następnie otwórz ustawienia wiersza i dodaj następujący kolor tła:

• Kolor tła: #e2e2e2

Animacja

Kontynuuj, stosując następującą animację do wiersza:

• Styl animacji: slajd
• Kierunek animacji: w prawo
• Opóźnienie animacji: 500 ms
• Początkowe krycie animacji: 100%
• Krzywa szybkości animacji: łatwość wchodzenia i wychodzenia
• Powtórzenie animacji: raz

Ustawienia kolumny

Kolor tła

Przejdźmy do następnego kontenera, który będziemy animować, czyli kontenera kolumny. Otwórz ustawienia kolumn i dodaj biały kolor tła.

• Kolor tła: #ffffff

Animacja

Dodaj również niestandardową animację do kolumny.

• Styl animacji: slajd
• Kierunek animacji: w lewo
• Opóźnienie animacji: 1200 ms
• Krzywa szybkości animacji: łatwość wchodzenia i wychodzenia
• Powtórzenie animacji: raz

Ustawienia modułu publikowania treści

Animacja

Na koniec będziemy animować moduł treści posta (zawierający całą dynamiczną zawartość strony).

• Styl animacji: zanikanie
• Opóźnienie animacji: 2500 ms
• Krzywa szybkości animacji: łatwość wchodzenia i wychodzenia
• Powtórzenie animacji: raz

Odtwórz animowane przejście strony nr 2

Ustawienia sekcji

Kolor tła

Chcesz zamiast tego stworzyć drugą animację? Otwórz ustawienia sekcji i użyj następującego koloru tła:

• Kolor tła: #d8cdbe

Animacja

Następnie zastosuj do sekcji niestandardową animację.

• Styl animacji: slajd
• Kierunek animacji: w lewo
• Początkowe krycie animacji: 100%
• Krzywa szybkości animacji: łatwość wchodzenia i wychodzenia
• Powtórzenie animacji: raz

Ustawienia wiersza

Tło gradientowe

Następnie otwórz ustawienia wiersza i użyj do tego następującego tła gradientowego:

• Kolor 1: rgba (255,255,255,0)
• Kolor 2: #ffffff
• Typ gradientu: liniowy
• Kierunek gradientu: 90 stopni
• Pozycja startowa: 50%
• Pozycja końcowa: 50%

Animacja

Dodaj również niestandardową animację do swojego wiersza.

• Styl animacji: slajd
• Kierunek animacji: w górę
• Opóźnienie animacji: 800ms
• Początkowe krycie animacji: 100%
• Krzywa szybkości animacji: łatwość obsługi
• Powtórzenie animacji: raz

Ustawienia kolumny

Kolor tła

Następnie otwórz ustawienia kolumn wiersza i użyj białego koloru tła.

• Kolor tła: #ffffff

Animacja

Kontynuuj, dodając animację do kolumny.

• Styl animacji: slajd
• Kierunek animacji: w prawo
• Opóźnienie animacji: 2000 ms
• Początkowe krycie animacji: 100%
• Krzywa szybkości animacji: łatwość wchodzenia i wychodzenia
• Powtórzenie animacji: raz

Ustawienia modułu publikowania treści

Animacja

Na koniec otwórz ustawienia modułu treści posta i użyj następujących ustawień animacji:

• Styl animacji: zanikanie
• Opóźnienie animacji: 3000 ms
• Krzywa szybkości animacji: łatwość wchodzenia i wychodzenia
• Powtórzenie animacji: raz

Odtwórz animowane przejście strony nr 3

Ustawienia sekcji

Tło gradientowe

Przejdź do następnego i ostatniego animowanego przejścia strony! Otwórz ustawienia sekcji i użyj następującego tła gradientowego:

• Kolor 1: #d8cdbe
• Kolor 2: #ffffff
• Typ gradientu: Promieniowy
• Kierunek promieniowy: góra
• Pozycja startowa: 20%
• Pozycja końcowa: 20%

Animacja

Przejdź do zakładki projektu przekroju i odpowiednio zmień ustawienia animacji:

• Styl animacji: slajd
• Kierunek animacji: w dół
• Intensywność animacji: 10%
• Początkowe krycie animacji: 100%
• Krzywa szybkości animacji: łatwość wchodzenia i wychodzenia
• Powtórzenie animacji: raz

Ustawienia wiersza

Tło gradientowe

Następnie otwórz ustawienia wiersza i zastosuj gradientowe tło:

• Kolor 1: #ffffff
• Kolor 2: rgba (255,255,255,0)
• Typ gradientu: Promieniowy
• Kierunek promieniowy: Środek
• Pozycja startowa: 50%
• Pozycja końcowa: 50%

Animacja

Zmodyfikuj również ustawienia animacji wiersza.

• Styl animacji: slajd
• Kierunek animacji: w dół
• Opóźnienie animacji: 1000 ms
• Początkowe krycie animacji: 100%
• Krzywa szybkości animacji: łatwość obsługi
• Powtórzenie animacji: raz

Ustawienia kolumny

Kolor tła

Kontynuuj, otwierając ustawienia kolumny. Zmień kolor tła.

• Kolor tła: #ffffff

Animacja

Zastosuj również następujące ustawienia animacji do kolumny:

• Styl animacji: slajd
• Kierunek animacji: w dół
• Opóźnienie animacji: 1500 ms
• Krzywa szybkości animacji: łatwość wchodzenia i wychodzenia
• Powtórzenie animacji: raz

Ustawienia modułu publikowania treści

Animacja

I ukończ trzecie przejście animowanej strony, stosując następujące ustawienia animacji do modułu Post Content:

• Styl animacji: zanikanie
• Opóźnienie animacji: 3000 ms
• Krzywa szybkości animacji: łatwość wchodzenia i wychodzenia
• Powtórzenie animacji: raz

6. Zapisz wszystkie zmiany kreatora motywów i wyniki podglądu

Po zbudowaniu treści szablonu strony i dodaniu wybranego animowanego przejścia strony możesz zapisać wszystkie zmiany w Kreatorze Motywów i wyświetlić wynik na swojej stronie!

Zapowiedź

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

Animowane przejście strony nr 1

Pulpit

mobilny

Animowane przejście strony nr 2

Pulpit

mobilny

Animowane przejście strony nr 3

Pulpit

mobilny

Końcowe przemyślenia

W tym poście pokazaliśmy, jak tworzyć animowane przejścia stron za pomocą wbudowanych opcji Divi i Kreatora motywów. To świetny sposób na dodanie kolejnego poziomu interakcji do Twojej witryny bez dodatkowego kodu. Udało Ci się również bezpłatnie pobrać przykładowe szablonowe pliki JSON! 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.