Jak stworzyć animację koperty za pomocą efektów przewijania Divi

Za każdym razem, gdy pojawia się nowa funkcja Divi, staramy się udostępniać fajne i przydatne samouczki, które pomogą Ci myśleć nieszablonowo i kreatywnie korzystać z Divi. Dzisiejszy samouczek dokładnie to robi. Pokażemy Ci, jak stworzyć responsywną animację koperty z efektami przewijania Divi. To świetny sposób na podkreślenie na przykład bloku wezwania do działania, ale możesz go również użyć do innych celów. 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.

Pulpit

mobilny

Subskrybuj nasz kanał YouTube

Pobierz układ animacji koperty ZA DARMO

Aby położyć swoje ręce na darmowym układzie animacji koperty, musisz najpierw pobrać go 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!

Odtwórz strukturę elementów

Dodaj nową sekcję na środku lub na dole strony

Kolor tła

Zacznij od dodania nowej sekcji gdzieś w środku lub na dole strony. Otwórz ustawienia sekcji i zmień kolor tła na biały.

• Kolor tła: #FFFFFF

Rozstaw

Następnie zmodyfikuj ustawienia odstępów.

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

Przepełnienia

I ukryj przepełnienia sekcji.

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

Dodaj wiersz nr 1

Struktura kolumny

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

Kolor tła

Nie dodając jeszcze żadnych modułów, otwórz ustawienia wierszy i zmień kolor tła.

• Kolor tła: #FFFFFF

Rozmiary

Przejdź do karty projektu wiersza i zmień ustawienia rozmiaru w następujący sposób:

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

Rozstaw

Następnie dodaj kilka niestandardowych wartości dopełnienia dla różnych rozmiarów ekranu.

• Górna wyściółka: 14vw (komputer stacjonarny), 11vw (tablet i telefon)
• Dolna wyściółka: 14vw (komputer stacjonarny), 11vw (tablet i telefon)
• Lewa wyściółka: 20vw (komputer), 10vw (tablet i telefon)
• Prawa wyściółka: 20vw (komputer stacjonarny), 10vw (tablet i telefon)

Granica

Dodaj też promień obramowania.

• Wszystkie rogi: 20px

Cień Pudełka

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

• Pozycja pionowa cienia pudełka: 38px
• Siła rozmycia cieni w pudełku: 80px
• Kolor cienia: rgba (0,0,0,0,08)

Indeks Z

Uzupełnij ustawienia wiersza, zwiększając indeks z na karcie Zaawansowane.

• Indeks Z: 11

Dodaj moduł tekstowy nr 1 do kolumny

Dodaj zawartość H2

Czas dodać moduły, zaczynając od pierwszego modułu tekstowego. Wprowadź wybrane przez siebie treści H2.

Ustawienia tekstu H2

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

• Czcionka nagłówka 2: Poppins
• Rozmiar tekstu nagłówka 2: 2vw (komputer), 4vw (tablet), 5vw (telefon)

Dodaj moduł tekstowy nr 2 do kolumny

Dodaj zawartość

Dodaj kolejny moduł tekstowy tuż pod poprzednim i wstaw dowolną treść opisu.

Ustawienia tekstu

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

• Czcionka tekstu: Otwórz Sans
• Rozmiar tekstu: 1vw (komputer), 2vw (tablet), 3vw (telefon)
• Wysokość linii tekstu: 2,6 em

Rozstaw

Dodaj również niestandardowe górne i dolne wartości dla różnych rozmiarów ekranu.

• Górna wyściółka: 2vw (komputer stacjonarny), 4vw (tablet), 5vw (telefon)
• Dolna wyściółka: 2vw (komputer stacjonarny), 4vw (tablet), 5vw (telefon)

Dodaj moduł przycisku do kolumny

Dodaj kopię

Następnym i ostatnim modułem, który umieścimy w tym wierszu, jest moduł przycisku. Dodaj wybraną kopię.

Ustawienia przycisków

Następnie dostosuj odpowiednio styl przycisku:

• Użyj niestandardowych stylów dla przycisku: Tak
• Rozmiar tekstu przycisku: 1vw (komputer), 2vw (tablet), 3vw (telefon)
• Kolor tekstu przycisku: #ffffff
• Kolor tła przycisku: #0f33ff
• Szerokość obramowania przycisku: 0px

• Promień obramowania przycisku: 100px
• Czcionka przycisku: Poppins

Rozstaw

I uzupełnij ustawienia modułu, dodając kilka niestandardowych wartości dopełnienia dla różnych rozmiarów ekranu.

• Górna wyściółka: 1vw (komputer), 2vw (tablet), 3vw (telefon)
• Dolna wyściółka: 1vw (komputer), 2vw (tablet), 3vw (telefon)
• Lewa wyściółka: 2vw (komputer), 4vw (tablet), 6vw (telefon)
• Prawa wyściółka: 2vw (komputer stacjonarny), 4vw (tablet), 6vw (telefon)

Dodaj wiersz nr 2

Struktura kolumny

Teraz, gdy mamy już wiersz wezwania do działania, czas zacząć tworzyć kształt koperty. Aby to zrobić, dodaj nowy wiersz, korzystając z następującej struktury kolumn:

Rozmiary

Pozwól wierszowi zająć całą szerokość sekcji, zmieniając ustawienia rozmiaru w następujący sposób:

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

Rozstaw

Usuń również wszystkie domyślne górne i dolne wyściółki.

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

Wyświetlacz

Aby upewnić się, że kolumny są wyświetlane obok siebie na mniejszych ekranach, dodamy jeden wiersz kodu CSS do głównego elementu wiersza.

display: flex;

Dodaj moduł obrazu do kolumny 1

Pozostaw puste pole obrazu

Dodaj moduł obrazu do kolumny 1 i pozostaw pole obrazu puste.

Tło gradientowe

Zamiast tego używamy tła gradientowego.

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

Rozstaw

Zmień odpowiednio wartości dopełnienia modułu:

• Górna wyściółka: 15vw
• Dolna wyściółka: 15vw

Klonuj moduł obrazu w kolumnie 1 i umieść duplikat w kolumnie 2

Po ukończeniu modułu obrazu w kolumnie 1 możesz sklonować cały moduł i umieścić duplikat w kolumnie 2.

Zmień tło gradientowe

Zmień tło gradientowe w następujący sposób:

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

Dodaj wiersz nr 3

Struktura kolumny

Aby utworzyć spód koperty, potrzebujemy kolejnego wiersza o następującej strukturze 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

Następnie usuń wszystkie domyślne górne i dolne wyściółki.

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

Wyświetlacz

I pozwól obu kolumnom pojawiać się obok siebie, dodając jeden wiersz kodu CSS do głównego elementu wiersza.

display: flex;

Indeks Z

Uzupełnij ustawienia wiersza, zwiększając indeks z na karcie Zaawansowane.

• Indeks Z: 12

Dodaj moduł obrazu do kolumny 1

Pozostaw puste pole obrazu

Dodaj moduł obrazu do kolumny 1 i ponownie pozostaw pole obrazu puste.

Tło gradientowe

Zamiast tego użyj gradientowego tła.

• Kolor 1: rgba (255,255,255,0)
• Kolor 2: #efefef
• Typ gradientu: liniowy
• Kierunek gradientu: 213 stopni
• Pozycja startowa: 40%
• Pozycja końcowa: 40%

Rozstaw

I zwiększ rozmiar modułu, dodając górną i dolną wyściółkę.

• Górna wyściółka: 20vw
• Dolna wyściółka: 20vw

Klonuj moduł obrazu w kolumnie 1 i umieść duplikat w kolumnie 2

Po ukończeniu modułu obrazu w kolumnie 1 możesz go sklonować i umieścić duplikat w kolumnie 2.

Zmień tło gradientowe

Upewnij się, że zmieniłeś gradientowe tło duplikatu.

• Kolor 1: rgba (255,255,255,0)
• Kolor 2: #e8e8e8
• Typ gradientu: liniowy
• Kierunek gradientu: 147 stopni
• Pozycja startowa: 40%
• Pozycja końcowa: 40%

Dodaj ruch pionowy do rzędu nr 1

Teraz ostatnią częścią działania animacji obwiedni jest dodanie responsywnego efektu przewijania ruchu w pionie do pierwszego wiersza w sekcji i gotowe!

• Włącz ruch w pionie: Tak
• Odsunięcie początkowe:
  • Komputer stacjonarny: 0 (przy 68%)
  • Tablet: 0,5 (przy 61%)
  • Telefon: 0,5 (przy 43%)
• Przesunięcie środkowe:
  • Komputer stacjonarny: 6,5 (przy 81%)
  • Tablet i telefon: 21,5 (przy 82%)
• Odsunięcie końcowe:
  • Komputer stacjonarny: 16 (przy 95%)
  • Tablet i telefon: 21,5 (przy 82%)

Zapowiedź

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

Pulpit

mobilny

Końcowe przemyślenia

W tym poście pokazaliśmy, jak wykazać się kreatywnością dzięki efektom przewijania Divi. Dokładniej, pokazaliśmy, jak złożyć animację koperty. Możesz użyć tej animacji do wielu rzeczy, na przykład do podświetlenia swojego bloku CTA. Udało Ci się również pobrać plik 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.