Jak opowiedzieć swoją historię o przewijaniu z Divi

Twoja strona z informacjami jest jedną z najważniejszych stron w Twojej witrynie. Pozwala ludziom lepiej Cię poznać i zdecydować, czy mogą zrobić kolejny krok. Jeśli szukasz płynnego sposobu na włączenie opowiadania do swojej strony z informacjami, pokochasz ten samouczek. Użyjemy efektów przewijania Divi, aby stworzyć płynne przejście narracji podczas przewijania. Gdy tylko część opowieści zniknie, inna część zanika. Daje to odwiedzającym wrażenie, że czytają ciekawą historię. 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 historię strony z informacjami w układzie przewijania ZA DARMO

Aby położyć swoje ręce na bezpłatnej opowieści o stronie w układzie przewijania, najpierw musisz ją 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. Utwórz pierwszą sekcję pełnoekranową strony

Dodaj nową sekcję

Kolor tła

Zacznij od dodania pierwszej sekcji do swojej strony z informacjami. Otwórz ustawienia sekcji i zmień kolor tła na czarny.

• Kolor tła: #000000

Rozmiary

Następnie obróć sekcję na pełny ekran, dodając minimalną wysokość w ustawieniach rozmiaru.

• Minimalna wysokość: 100vh

2. Dodaj animowany wiersz

Dodaj nowy wiersz

Struktura kolumny

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

Rozmiary

Otwórz ustawienia wiersza i pozwól wierszowi zająć całą szerokość kontenera sekcji, modyfikując ustawienia rozmiaru.

• Szerokość: 100%
• Maksymalna szerokość: 100%

Rozstaw

Następnie dodaj trochę lewego i prawego dopełnienia na różnych rozmiarach ekranu.

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

Animacja

Aby zwiększyć efekt narracji, użyjemy również animacji zanikania w rzędzie.

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

Pozycja

Na koniec upewnimy się, że wiersz jest umieszczony centralnie w kontenerze sekcji, modyfikując opcje pozycji.

• Pozycja: bezwzględna
• Lokalizacja: Centrum

3. Wstaw tytuł z efektami przewijania

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.

Nagłówek 1 Ustawienia tekstu

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

• Czcionka nagłówka: Nunito
• Grubość czcionki nagłówka: pół pogrubiona
• Kolor tekstu nagłówka: #ffffff
• Rozmiar tekstu nagłówka: 7vw (komputer), 9vw (tablet), 11vw (telefon)

Ruch pionowy

Dodamy też subtelną animację pionową.

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

Efekt przewijania i zanikania

Wraz z efektem zanikania i zanikania.

• Włącz pojawianie się i zanikanie: tak
• Początkowe krycie: 100%
• Średnie krycie: 100% (przy 55%)
• Końcowe krycie: 0% (przy 62%)

Skalowanie efektu przewijania w górę iw dół

Na koniec użyjemy również efektu przewijania w górę iw dół.

• Włącz skalowanie w górę i w dół: Tak
• Skala początkowa: 100% (przy 40%)
• Skala średnia: 95% (przy 74%)
• Skala końcowa: 90%

4. Sklonuj całą sekcję raz i dołącz tekst opisu z efektami przewijania

Zmień nagłówek treści i kopię

Po ukończeniu pierwszej sekcji możesz ją całkowicie sklonować. Otwórz moduł tekstowy wewnątrz kontenera sekcji duplikatów i użyj kopii H2.

Modyfikuj ustawienia tekstowe modułu tekstowego H2

Zmień odpowiednio ustawienia tekstu H2:

• Czcionka nagłówka 2: Nunito
• Grubość czcionki nagłówka 2: pół pogrubiona
• Kolor tekstu nagłówka 2: #ffffff
• Rozmiar tekstu nagłówka 2: 5vw (komputer), 7vw (tablet), 8vw (telefon)
• Wysokość linii nagłówka 2: 1 em (komputer), 1,2 em (tablet i telefon)

Dodaj moduł tekstowy nr 2 do kolumny

Dodaj zawartość

Następnie dodaj kolejny moduł tekstowy do kolumny z wybraną zawartością opisu.

Ustawienia tekstu

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

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

Rozstaw

Użyj trochę górnego marginesu.

• Górny margines: 8vw

Efekt przewijania i zanikania

Następnie przejdź do efektów przewijania w zakładce Zaawansowane i użyj następujących ustawień zanikania i zanikania:

• Włącz pojawianie się i zanikanie: tak
• Początkowe krycie: 100%
• Średnie krycie: 0% (przy 31%)
• Krycie końcowe: 0% (przy 35%)

Skalowanie efektu przewijania w górę iw dół

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

• Włącz skalowanie w górę i w dół: Tak
• Skala początkowa: 100% (przy 40%)
• Skala średnia: 95% (przy 74%)
• Skala końcowa: 90%

5. Klonuj drugą sekcję tyle razy, ile chcesz

Zmieniaj zawartość na bieżąco

Po ukończeniu drugiej sekcji na stronie możesz ją sklonować tyle razy, ile chcesz, w zależności od fabuły o stronie. Upewnij się, że zmieniłeś treść w każdej sekcji.

6. Uzupełnij stronę z sekcją CTA

Zmiana Opis Odstępy między modułami tekstu

Uzupełnij stronę z sekcją CTA na końcu. Otwórz opis modułu tekstowego i zmodyfikuj górny i dolny margines.

• Górny margines: 4vw
• Dolny margines: 4vw

Dodaj moduł przycisku

Dodaj kopię

Następnie dodaj również moduł przycisku z wybraną przez siebie kopią.

Ustawienia przycisków

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

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

• Promień obramowania przycisku: 100px
• Czcionka przycisku: Nunito
• Waga czcionki przycisku: pogrubiona

Rozstaw

Uzupełnij ustawienia modułu przycisku, 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: 3vw (komputer), 6vw (tablet), 8vw (telefon)
• Prawa wyściółka: 3vw (komputer), 6vw (tablet), 8vw (telefon)

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 opowiedzieć historię na swojej stronie za pomocą wbudowanych efektów przewijania Divi. Stworzony przez nas efekt umożliwia pojawianie się i znikanie kolejnych kopii, co daje odwiedzającym wrażenie, że czytają historię. 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.