3 bezproblemowe efekty ruchu przewijania, które możesz dodać do swoich nagłówków dzięki Divi

Nowe efekty przewijania Divi zapewniają mnóstwo nowych możliwości projektowania tworzonych stron. Do każdego kontenera można dodać dostosowany efekt przewijania i odpowiednio zsynchronizować efekty. Ta swoboda projektowania z łatwością pomaga wyróżnić określone treści w elegancki sposób. W tym samouczku pokażemy, jak dodać efekty ruchu przewijania do nagłówków. W ten sposób możesz położyć dodatkowy nacisk na nagłówki i utrzymać zaangażowanie odwiedzających. 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 sekcji Efekty ruchu przewijania ZA DARMO

Aby położyć ręce na darmowych układach sekcji, 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. Zbuduj swój projekt sekcji bohaterów na nowej lub istniejącej stronie

Dodaj nową sekcję

Kolor tła

Zacznij od dodania nowej sekcji do strony, nad którą pracujesz. Otwórz ustawienia sekcji i zmień kolor tła na biały.

• Kolor tła: #FFFFFF

Rozstaw

Przejdź do zakładki projektu i zmodyfikuj również wartości odstępów.

• Górna wyściółka: 15vw (komputer stacjonarny), 20vw (tablet), 25vw (telefon)
• Dolna wyściółka: 0vw

Przepełnienia

Aby upewnić się, że efekty przewijania nie powodują pojawienia się poziomych pasków przewijania, ukryjemy również 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:

Rozmiary

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

• Szerokość: 90%
• 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

Dodaj moduł tekstowy nr 1 do kolumny

Dodaj zawartość H1

Jedyny moduł, którego potrzebujemy w tym wierszu, to moduł tekstowy z pewną zawartością H1.

Ustawienia tekstu H1

Zmień odpowiednio ustawienia tekstu H1 modułu:

• Czcionka nagłówka: Playfair Display
• Grubość czcionki nagłówka: pogrubiona
• Wyrównanie tekstu nagłówka: do środka
• Kolor tekstu nagłówka: #000000
• Rozmiar tekstu nagłówka: 6vw

Dodaj wiersz nr 2

Struktura kolumny

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

Tło gradientowe

Nie dodając jeszcze żadnych modułów, otwórz ustawienia wierszy i użyj gradientowego tła.

• Kolor 1: #444444
• Kolor 2: #000000
• Typ gradientu: liniowy
• Kierunek gradientu: 237 stopni

Rozmiary

Zmodyfikuj również ustawienia rozmiaru wiersza.

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

Rozstaw

Następnie dodaj niestandardową górną i dolną wyściółkę.

• Górna wyściółka: 0vw
• Dolna wyściółka: 10vw (komputer stacjonarny), 15vw (tablet), 20vw (telefon)

Dodaj moduł tekstowy nr 2 do kolumny

Dodaj zawartość

Pierwszym modułem, którego potrzebujemy w tym wierszu, jest moduł tekstowy z pewną zawartością.

Ustawienia tekstu

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

• Czcionka tekstu: wyświetlacz Playfair
• Kolor tekstu: #dddddd
• Rozmiar tekstu: 6vw
• Wysokość linii tekstu: 1em
• Siła rozmycia cienia tekstu: 0,29 em
• Kolor cienia tekstu: #ffffff
• Wyrównanie tekstu: do środka

Dodaj moduł tekstowy nr 3 do kolumny

Dodaj zawartość

Następnie dodaj kolejny moduł tekstowy 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: #e8e8e8
• Rozmiar tekstu: 0,9vw (komputer), 2vw (tablet), 2,5vw (telefon)
• Wysokość linii tekstu: 2em
• Wyrównanie tekstu: do środka

Rozmiary

Zmodyfikuj również ustawienia rozmiaru.

• Szerokość: 40% (komputer stacjonarny), 90% (tablet i telefon)
• Wyrównanie modułu: Środek

Rozstaw

I dodaj górny i dolny margines na różnych rozmiarach ekranu.

• Górny margines: 10vw (komputer stacjonarny), 15vw (tablet), 20vw (telefon)
• Margines dolny: 3vw (komputer stacjonarny), 8vw (tablet), 13vw (telefon)

Dodaj moduł przycisku do kolumny

Dodaj kopię

Następnym i ostatnim modułem, którego potrzebujemy, jest moduł przycisku. Dodaj wybraną kopię.

Wyrównanie

Kontynuuj, zmieniając wyrównanie przycisków na karcie projektu.

• Wyrównanie przycisków: środek

Ustawienia przycisków

Następnie zmień styl przycisku w następujący sposób:

• Użyj niestandardowych stylów dla przycisku: Tak
• Rozmiar tekstu przycisku: 0,8vw (komputer), 1,5vw (tablet), 2,5vw (telefon)
• Kolor tekstu przycisku: #ffffff
• Kolor obramowania przycisku: #ffffff
• Promień obramowania przycisku: 1px
• Czcionka przycisku: Otwórz Sans
• Waga czcionki przycisku: pogrubiona
• Styl czcionki przycisku: wielkie litery

Rozstaw

Uwzględnij też niestandardowe 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: 2.5vw (komputer), 5vw (tablet), 8vw (telefon)
• Prawa wyściółka: 2.5vw (komputer stacjonarny), 5vw (tablet), 8vw (telefon)

2. Zastosuj efekty przewijania

Przykład 1

Moduł tekstowy nr 1

Ruch poziomy

Teraz, gdy zaprojektowaliśmy ogólny wygląd i styl naszej sekcji bohaterów, nadszedł czas, aby zastosować różne efekty ruchu przewijania do naszej kopii. Aby odtworzyć pierwszy przykład, otwórz pierwszy moduł tekstowy i użyj następującego ruchu poziomego:

• Włącz ruch poziomy: Tak
• Przesunięcie początkowe: 0
• Przesunięcie środkowe: 0
  • 0% – 80% (komputer stacjonarny)
  • 0% – 95% (Tablet i Telefon)
• Przesunięcie końcowe: -10

Zanikanie i zanikanie

Dodamy też efekt zanikania i zanikania.

• Włącz pojawianie się i zanikanie: tak
• Początkowe krycie: 100%
• Średnie krycie: 100%
  • 0% – 70% (komputer stacjonarny)
  • 0% – 95% (Tablet i Telefon)
• Końcowe krycie: 0%

Moduł tekstowy nr 2

Ruch poziomy

Następnie otwórz drugi moduł tekstowy w swojej sekcji i zastosuj następujący ruch poziomy:

• Włącz ruch poziomy: Tak
• Przesunięcie początkowe: 10
• Przesunięcie środkowe: 0
  • 10% – 70% (komputer stacjonarny)
  • 10% – 95% (tablet i telefon)
• Przesunięcie końcowe: 10

Zanikanie i zanikanie

Wraz z dopasowanym efektem zanikania i zanikania:

• Włącz pojawianie się i zanikanie: tak
• Początkowe krycie: 0%
• Średnie krycie: 100%
  • 35% – 60% (komputer stacjonarny)
  • 35% – 95% (tablet i telefon)
• Końcowe krycie: 0%

Przykład #2

Moduł tekstowy nr 1

Ruch pionowy

Chcesz zamiast tego odtworzyć drugi efekt ruchu przewijania? Otwórz pierwszy moduł tekstowy w swojej sekcji i dodaj następujący ruch pionowy:

• Włącz ruch w pionie: Tak
• Przesunięcie początkowe: 0
• Przesunięcie środkowe: 0
  • 90% (komputer stacjonarny)
  • 95% (tablet i telefon)
• Przesunięcie końcowe: -8

Skalowanie w górę i w dół

Dodaj również efekt skalowania w górę iw dół.

• Włącz skalowanie w górę i w dół: Tak
• Skala początkowa: 20%
• Skala środkowa: 100%
  • 20% – 80% (komputer stacjonarny)
  • 20% – 95% (Tablet i Telefon)
• Skala końcowa: 20%

Moduł tekstowy nr 2

Ruch pionowy

Następnie otwórz drugi moduł tekstowy i użyj następujących ustawień ruchu w pionie:

• Włącz ruch w pionie: Tak
• Przesunięcie początkowe: 0
• Przesunięcie środkowe: 0
  • 15% – 70% (komputer stacjonarny)
  • 15% – 90% (Tablet i Telefon)
• Przesunięcie końcowe: -8

Skalowanie w górę i w dół

Dodaj następnie efekt skalowania w górę iw dół.

• Włącz skalowanie w górę i w dół: Tak
• Skala początkowa: 0%
• Skala środkowa: 100%
  • 30% – 70% (komputer stacjonarny)
  • 30% – 90% (Tablet i Telefon)
• Skala końcowa: 100%

Plama

I uzupełnij efekt przewijania, dodając efekt rozmycia do drugiego modułu tekstowego sekcji.

• Włącz rozmycie: Tak
• Rozmycie początkowe: 10px
• Średnie rozmycie: 0px
  • 40% – 73% (komputer stacjonarny)
  • 40% – 95% (tablet i telefon)
• Rozmycie końcowe: 100px

Przykład #3

Moduł tekstowy nr 1

Ruch poziomy

Na koniec pokażemy, jak odtworzyć trzeci efekt ruchu przewijania. Otwórz pierwszy moduł tekstowy sekcji i dodaj efekt ruchu poziomego.

• Włącz ruch poziomy: Tak
• Przesunięcie początkowe: 0
• Przesunięcie środkowe: 0
  • 0% – 90%
• Przesunięcie końcowe: 10

Zanikanie i zanikanie

Użyj efektu zanikania i zanikania również dla tego modułu.

• Włącz pojawianie się i zanikanie: tak
• Początkowe krycie: 100%
• Średnie krycie: 100%
  • 0% – 90% (komputer stacjonarny)
  • 0% – 95% (Tablet i Telefon)
• Końcowe krycie: 0%

Obracanie

I zastosujemy również efekt rotacji.

• Włącz obracanie: Tak
• Obrót początkowy: 0°
• Średni obrót: 0°
  • 0% – 90% (komputer stacjonarny)
  • 0% – 95% (Tablet i Telefon)
• Zakończenie obrotu: 90°

Moduł tekstowy nr 2

Ruch poziomy

Następnie otwórz drugi moduł tekstowy w swojej sekcji i zastosuj następujące ustawienia ruchu w poziomie:

• Włącz ruch poziomy: Tak
• Przesunięcie początkowe: 0
• Przesunięcie środkowe: 0
  • 0% – 90%
• Przesunięcie końcowe: -10

Zanikanie i zanikanie

Kontynuuj, używając efektu ruchu przewijania do przodu i do tyłu.

• Włącz pojawianie się i zanikanie: tak
• Początkowe krycie: 100%
• Średnie krycie: 100%
  • 0% – 80% (komputer stacjonarny)
  • 0% – 95% (Tablet i Telefon)
• Końcowe krycie: 0%

Obracanie

I uzupełnij ustawienia modułu, dodając również efekt przewijania.

• Włącz obracanie: Tak
• Obrót początkowy: 0°
• Średni obrót: 0°
  • 0% – 80% (komputer stacjonarny)
  • 0% – 90% (Tablet i Telefon)
• Zakończenie obrotu: -90°

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 korzystać z nowych efektów przewijania Divi, aby dodać efekty ruchu przewijania do nagłówka. Zajęliśmy się trzema różnymi przykładami, ale możliwości są naprawdę nieograniczone. 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.