Jak zastosować animacje kolizji do projektowania elementów za pomocą Divi

Dodanie animacji do elementów projektu na swojej stronie może zdecydowanie pomóc w zwiększeniu zaangażowania. W programie Divi's Visual Builder dostępnych jest wiele opcji animacji i są one dość proste w użyciu. Ale możesz też wykazać się kreatywnością dzięki tym animacjom i wykorzystać je w wyjątkowy sposób. W tym poście zajmiemy się trzema przykładami zderzających się animacji, które odtworzymy krok po kroku, korzystając tylko z wbudowanych opcji Divi.

Weźmy się za to!

Zapowiedź

Zanim zagłębimy się w samouczek, rzućmy okiem na trzy przykłady, które odtworzymy w tym samouczku.

Przykład #1: Zderzający się tekst

Przykład #2: Zderzające się dzielniki

Przykład #3: Siatka kolidująca

Unosić się

Subskrybuj nasz kanał YouTube

Odtwórz przykład nr 1: kolidowanie tekstu

Dodaj sekcję specjalistyczną

Struktura

Zacznijmy od pierwszego przykładu! Otwórz nową lub istniejącą stronę i dodaj nową sekcję specjalizacyjną, korzystając z następującej struktury:

Rozmiary

Bez dodawania żadnych modułów ani wierszy otwórz ustawienia sekcji i włącz opcję „Ustaw tę sekcję o pełnej szerokości” w ustawieniach rozmiaru.

Dodaj wiersz nr 1

Struktura kolumny

Kontynuuj, dodając wiersz do sekcji specjalności:

Rozmiary

Otwórz ustawienia wiersza i wprowadź zmiany w ustawieniach rozmiaru.

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

Rozstaw

Zmień również niestandardowe wartości dopełnienia w ustawieniach odstępów.

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

Dodaj moduł tekstowy do kolumny 1

Dodaj zawartość

Kontynuuj, dodając moduł tekstowy do pierwszej kolumny wiersza i dodaj trochę treści.

Ustawienia tekstu nagłówka

Następnie zmień ustawienia tekstu nagłówka.

• Czcionka nagłówka: Montserrat
• Grubość czcionki nagłówka: Lekka
• Rozmiar tekstu nagłówka: 4.4vw (komputer), 8.2vw (tablet), 40px (telefon)
• Wysokość linii nagłówka: 0,7 em

Dodaj moduł rozdzielacza do kolumny 1

Widoczność

Drugim modułem potrzebnym w kolumnie 1 jest moduł rozdzielający. Upewnij się, że dzielnik jest widoczny, włączając opcję „Pokaż dzielnik”.

• Pokaż dzielnik: tak

Kolor

Przejdź do zakładki projektu i zmień kolor dzielnika.

• Kolor: #000000

Rozmiary

Zmniejsz również szerokość przekładki.

• Szerokość: 91%

Rozstaw

I dodaj górny margines, aby stworzyć przestrzeń między modułem dzielnika a modułem tekstowym.

• Górny margines: 30px

Animacja

Na koniec dodaj subtelną animację do modułu dzielnika.

• Styl animacji: slajd
• Kierunek animacji: w lewo

Dodaj moduł tekstowy do kolumny 2

Dodaj zawartość

Przejdź do drugiej kolumny i dodaj drugi moduł tekstowy z wybraną zawartością.

Ustawienia tekstu nagłówka

Następnie zmień ustawienia tekstu nagłówka.

• Czcionka nagłówka: Montserrat
• Grubość czcionki nagłówka: Lekka
• Kolor tekstu nagłówka: #3f46ff
• Rozmiar tekstu nagłówka: 3.8vw (komputer), 6.5vw (tablet), 40px (telefon)
• Wysokość linii nagłówka: 0,8 em

Animacja

Dodaj też animację do tego modułu.

• Styl animacji: slajd
• Kierunek animacji: w lewo
• Opóźnienie animacji: 600 ms
• Intensywność animacji: 10%

Dodaj wiersz nr 2

Struktura kolumny

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

Dodaj pozostałe moduły

Dodaj inne moduły, które chcesz wyświetlić w tym nowym wierszu i dostosuj je do swoich potrzeb.

Odtwórz przykład nr 2: Zderzające się dzielniki

Dodaj sekcję specjalistyczną

Struktura

Przejdźmy do następnego przykładu! Dodaj nową sekcję specjalizacyjną, korzystając z następującej struktury:

Rozmiary

Bez dodawania żadnych wierszy ani modułów otwórz ustawienia sekcji i włącz opcję „Ustaw tę sekcję o pełnej szerokości”.

• Ustaw tę sekcję o pełnej szerokości: Tak

Dodaj wiersz nr 1

Struktura kolumny

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

Rozstaw

Otwórz ustawienia wiersza i zmodyfikuj niestandardowe ustawienia dopełnienia.

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

Dodaj moduł tekstowy

Dodaj zawartość

Następnie dodaj moduł tekstowy do wiersza z wybraną zawartością.

Ustawienia tekstu nagłówka

Przejdź do karty projektu i zmień ustawienia tekstu nagłówka.

• Czcionka nagłówka: Montserrat
• Grubość czcionki nagłówka: Lekka
• Rozmiar tekstu nagłówka: 70px (komputer), 50px (tablet), 40px (telefon)
• Wysokość linii nagłówka: 0,8 em

Dodaj wiersz nr 2

Struktura kolumny

Kontynuuj, dodając kolejny wiersz, korzystając z następującej struktury kolumn:

Rozmiary

Nie dodając jeszcze żadnych modułów, otwórz ustawienia wiersza i zmodyfikuj ustawienia rozmiaru.

• Użyj niestandardowej szerokości rynny: Tak
• Szerokość rynny: 1
• Szerokość: 53% (komputer stacjonarny), 100% (tablet i telefon)

Rozstaw

Zmień również niestandardowe wartości dopełnienia.

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

Dodaj moduł rozdzielacza do kolumny 1

Widoczność

Gdy skończysz modyfikować ustawienia wiersza, dodaj moduł dzielnika do pierwszej kolumny i upewnij się, że dzielnik się wyświetla, włączając opcję „Pokaż dzielnik”.

• Pokaż dzielnik: tak

Kolor

Następnie zmień kolor separatora.

• Kolor dzielnika: #3f46ff

Style

I zmień styl dzielnika w ustawieniach stylów.

• Styl dzielnika: podwójny

Rozmiary

Zwiększ wagę rozdzielacza również w ustawieniach rozmiaru.

• Waga dzielnika: 8px

Animacja

Na koniec dodaj animację do modułu dzielnika.

• Styl animacji: slajd
• Kierunek animacji: w prawo

Moduł dzielnika klonów i miejsce w kolumnie 2

Gdy skończysz modyfikować ustawienia modułu rozdzielacza, sklonuj moduł. Umieść duplikat w drugiej kolumnie wiersza.

Zmień animację

Aby stworzyć efekt kolizji, zmień kierunek animacji zduplikowanego modułu dzielnika.

• Styl animacji: slajd
• Kierunek animacji: w lewo

Dodaj wiersz nr 3

Struktura kolumny

Kontynuuj, dodając kolejny wiersz, korzystając z następującej struktury kolumn:

Dodaj pozostałe moduły

I dodaj tyle modułów, ile chcesz, aby zakończyć projekt sekcji.

Odtwórz przykład #3: Siatka kolidująca

Dodaj nową sekcję

Rozstaw

Przejdźmy do następnego i ostatniego przykładu! Dodaj zwykłą sekcję i otwórz ustawienia. Przejdź do ustawień odstępów i dodaj kilka niestandardowych wartości dopełnienia:

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

Dodaj wiersz nr 1

Struktura kolumny

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

Dodaj moduł obrazu do kolumny

Prześlij nakładkę z obrazem w kształcie

Zapisz następującą ukształtowaną nakładkę obrazu na pulpicie, klikając prawym przyciskiem myszy:

Po zapisaniu kształtowanej nakładki obrazu wróć do swojej witryny Divi i dodaj moduł obrazu do wiersza. Prześlij plik nakładki z ukształtowanym obrazem, który możesz znaleźć w folderze pobierania.

Tło gradientowe

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

• Kolor 1: #aa2bff
• Kolor 2: #09f7eb

Wyrównanie

Zmień również wyrównanie obrazu.

• Wyrównanie obrazu: Środek

Rozmiary

I włącz opcję „Wymuś pełną szerokość” w ustawieniach rozmiaru.

• Wymuś pełną szerokość: tak

Rozstaw

Dodaj również niestandardowy margines do modułu.

• Lewy margines: 200px
• Prawy margines: 200px

Animacja

Na koniec dodaj animację do modułu.

• Styl animacji: Zoom
• Kierunek animacji: Centrum
• Czas trwania animacji: 3000 ms
• Intensywność animacji: 100%

Dodaj wiersz nr 2

Struktura kolumny

Do drugiego rzędu. Użyj następującej struktury kolumn:

Rozmiary

Nie dodając jeszcze żadnych modułów, otwórz ustawienia wierszy i wprowadź zmiany w ustawieniach rozmiaru.

• Użyj niestandardowej szerokości: Tak
• Jednostka: PX
• Szerokość niestandardowa: 944px
• Użyj niestandardowej szerokości rynny: Tak
• Szerokość rynny: 1

Dodaj moduł Blurb do kolumny 1

Dodaj zawartość

Kontynuuj, dodając moduł Blurb do pierwszej kolumny. Wprowadź dowolną treść.

Ikona

Następnie wybierz ikonę.

Kolor tła

Dodaj również kolor tła do modułu.

• Kolor tła: rgba (255,255,255,0.83)

Ustawienia ikon

Przejdź do zakładki projektu i zmień ustawienia ikon.

• Kolor ikony: #000000
• Umieszczenie ikon: góra
• Użyj rozmiaru czcionki ikony: Tak
• Rozmiar czcionki ikony: 73px

Ustawienia tekstu tytułu

Zmodyfikuj również ustawienia tekstu tytułu.

• Czcionka tytułu: Open Sans
• Grubość czcionki tytułu: pół pogrubiona
• Wyrównanie tekstu tytułu: do środka
• Rozmiar tekstu tytułu: 15px
• Odstępy między literami tytułu: -1px
• Wysokość wiersza tytułu: 1,8 em

Rozmiary

I zmniejsz szerokość zawartości w ustawieniach rozmiaru.

• Szerokość treści: 183px

Rozstaw

Dodamy również niestandardową górną i dolną wyściółkę.

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

Cień Pudełka

Kontynuuj, nadając modułowi Blurb subtelny cień pudełkowy.

• Siła rozmycia cieni w pudełku: 80px
• Kolor cienia: rgba(0,0,0,0.3)

Przejścia

I zwiększ czas przejścia w zakładce Zaawansowane.

• Czas trwania przejścia: 600ms

Clone Blurb Module 8 razy i umieść 3 duplikaty w każdej pozostałej kolumnie

Teraz, gdy skończysz modyfikować pierwszy moduł Blurb, możesz sklonować go 8 razy. Umieść trzy duplikaty w drugiej kolumnie i trzy w trzeciej. W następnej części tego samouczka wprowadzimy unikalne zmiany w każdym z modułów Blurb. W tym celu zastosujemy numerację poniżej:

Modyfikuj moduł rozmycia nr 1

Rozstaw

Otwórz pierwszy moduł Blurb i dodaj trochę ujemnego marginesu górnego.

• Górny margines: -340px (komputer), 0px (tablet i telefon)

Odstępy najechania

Zmień wartości marginesów po najechaniu myszą.

• Górny margines: -380px
• Margines dolny: 40px
• Lewy margines: -40px
• Prawy margines: 40px

Zaokrąglone rogi

Kontynuuj, dodając „30px” w lewym górnym rogu modułu.

Animacja

I dodaj animację.

• Styl animacji: slajd
• Kierunek animacji: w lewo
• Opóźnienie animacji: 200 ms

Modyfikuj moduł rozmycia nr 2

Kolor tła

Otwórz drugi moduł Blurb i zmień kolor tła.

• Kolor tła: rgba (255,255,255,0.93)

Rozstaw

Kontynuuj, dodając do modułu ujemny górny margines.

• Górny margines: -340px (komputer), 0px (tablet i telefon)

Odstępy najechania

Zmień te wartości marginesów po najechaniu myszą.

• Górny margines: -380px
• Margines dolny: 40px

Animacja

I dodaj animację do modułu.

• Styl animacji: slajd
• Kierunek animacji: w lewo
• Opóźnienie animacji: 400 ms

Modyfikuj moduł rozmycia nr 3

Rozstaw

Przejdźmy do trzeciego modułu Blurb. Dodaj trochę ujemnego górnego marginesu.

• Górny margines: -340px (komputer), 0px (tablet i telefon)

Odstępy najechania

Zmodyfikuj wartości marginesów po najechaniu myszą.

• Górny margines: -380px
• Margines dolny: 40px
• Lewy margines: 40px
• Prawy margines: -40px

Zaokrąglone rogi

Dodaj „30px” również w prawym górnym rogu modułu.

Animacja

I dodaj animację.

• Styl animacji: slajd
• Kierunek animacji: w lewo
• Opóźnienie animacji: 600 ms

Modyfikuj moduł Blurb #4

Kolor tła

Do czwartego modułu. Otwórz ustawienia i zmień kolor tła.

• Kolor tła: rgba (255,255,255,0.93)

Odstępy najechania

Następnie dodaj kilka wartości marginesów najechania.

• Lewy margines: -40px
• Prawy margines: 40px

Animacja

Dodaj też animację.

• Styl animacji: zanikanie
• Opóźnienie animacji: 800ms

Modyfikuj moduł rozmycia # 5

Animacja

Do piątego modułu. Jedyne, co musisz tutaj zrobić, to dodać animację.

• Styl animacji: zanikanie
• Opóźnienie animacji: 1000 ms

Modyfikuj moduł rozmycia # 6

Kolor tła

Kontynuuj, otwierając szósty moduł i zmieniając kolor tła.

• Kolor tła: rgba (255,255,255,0.93)

Odstępy najechania

Zmień również wartości odstępów po najechaniu myszą.

• Lewy margines: 40px
• Prawy margines: -40px

Animacja

I dodaj animację.

• Styl animacji: zanikanie
• Opóźnienie animacji: 1200 ms

Modyfikuj moduł rozmycia nr 7

Odstępy najechania

Do siódmego modułu. Dodaj kilka wartości marginesów najechania do ustawień odstępów.

• Górny margines: 40px
• Lewy margines: -40px
• Prawy margines: 40px

Zaokrąglone rogi

Kontynuuj, dodając „30px” promienia obramowania w lewym dolnym rogu modułu.

Animacja

I dodaj animację.

• Styl animacji: slajd
• Kierunek animacji: w prawo
• Opóźnienie animacji: 1400 ms

Modyfikuj moduł rozmycia nr 8

Kolor tła

Kontynuuj, otwierając ósmy moduł i zmieniając kolor tła.

• Kolor tła: rgba (255,255,255,0.93)

Odstępy najechania

Dodaj trochę niestandardowego marginesu po najechaniu kursorem na moduł obok.

• Górny margines: 40px

Animacja

Dodaj animację również do tego modułu Blurb.

• Styl animacji: slajd
• Kierunek animacji: w prawo
• Opóźnienie animacji: 1600ms

Modyfikuj moduł rozmycia #9

Odstępy najechania

Do dziewiątego i ostatniego modułu! Przejdź do ustawień odstępów i dodaj kilka niestandardowych wartości marginesów najechania.

• Górny margines: 40px
• Lewy margines: 40px
• Prawy margines: -40px

Zaokrąglone rogi

Dodaj „30px” promienia obramowania również w prawym dolnym rogu.

Animacja

I dodaj animację.

• Styl animacji: slajd
• Kierunek animacji: w prawo
• Opóźnienie animacji: 1800 ms

Dodaj ujemny margines dolny do modułu obrazu w wierszu nr 1

Teraz, aby zderzyć okrąg, który utworzyliśmy w pierwszej części tego przykładu, z siatką, damy modułowi obrazu (zawierającemu ukształtowaną nakładkę obrazu) pewien ujemny margines dolny.

• Margines dolny: -520px

Zapowiedź

Teraz, gdy przeszliśmy przez wszystkie kroki, przyjrzyjmy się ostatecznemu wynikowi, który osiągnęliśmy.

Przykład #1: dzielniki kolidujące

Przykład #2: Zderzający się tekst

Przykład #3: Siatka kolidująca

Unosić się

Końcowe przemyślenia

Dodanie animacji do stron może pomóc w stworzeniu większej interakcji między odwiedzającymi a Tobą. Oczywiście możesz po prostu użyć ustawień animacji, które masz w Visual Builder, ale możesz też pójść o krok dalej, stosując kolidujące animacje do elementów projektu, co pomoże Ci osiągnąć oszałamiające rezultaty. Jeśli masz jakieś pytania lub sugestie, koniecznie zostaw komentarz w sekcji komentarzy poniżej!