Strona, która mówi o Tobie (o) jest jedną z najważniejszych stron Twojego Witryna internetowa. Dzięki temu ludzie mogą Cię lepiej poznać i zdecydować, czy czują się komfortowo, wykonując kolejny krok. Jeśli szukasz łatwego sposobu na umieszczenie narracji na tej stronie, ten samouczek przypadnie Ci do gustu. Użyjemy efektów przewijania Divi, aby stworzyć płynne przejście narracji podczas przewijania. Gdy tylko jedna część historii zaniknie, pojawia się kolejna część. To daje odwiedzający uczucie czytania ciekawej historii. 

Możliwy wynik końcowy

Zanim przejdziemy do samouczka, przyjrzyjmy się wynikom na różnych rozmiarach ekranu.

1. Utwórz pierwszą sekcję pełnego ekranu strony

Dodaj nową sekcję

Kolor tła

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

• Kolor tła: # 000000

zaklejania

Następnie przełącz sekcję na pełny ekran, dodając minimalną wysokość w parametrach rozmiaru.

• Min. Wysokość: 100vh

2. Dodaj animowaną linię

Dodaj nową linię

Struktura kolumny

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

zaklejania

Otwórz parametry linii i pozwól linii zajmować całą szerokość kontenera przekroju, modyfikując parametry wymiarowania.

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

rozstaw

Następnie dodaj lewe i prawe wypełnienie na różnych rozmiarach ekranu.

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

Animacja

Aby zwiększyć efekt narracji, użyjemy również animacji zanikania dla linii.

• Styl animacji: zanikanie
• Czas trwania animacji: 3000 ms
• Krzywa szybkości animacji: łatwość wprowadzania
• Powtarzanie animacji: raz

Pozycja

Na koniec upewnimy się, że linia jest ustawiona na środku kontenera przekroju poprzez zmianę opcji położenia.

• Pozycja: absolutna
• Lokalizacja: centrum

3. Wstaw tytuł z efektami przewijania

Dodaj moduł tekstowy # 1 do kolumny

Dodaj zawartość H1

Jedynym modułem, jakiego potrzebujemy w tej linii, jest moduł tekstowy z treść H1.

Tytuł 1 Ustawienia tekstu

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

• Czcionka tytułu: Nunito
• Waga czcionki tytułu: pogrubiona
• Kolor tekstu nagłówka: #ffffff
• Rozmiar tekstu nagłówka: 7vw (komputer stacjonarny), 9vw (tablet), 11vw (telefon)

Ruch pionowy

Dodamy również subtelną pionową animację.

• Aktywuj ruch pionowy: Tak
• Rozpocznij przesunięcie: 0 (przy 50%)
• Średnie przesunięcie: 10 (przy 100%)
• Ostateczne przesunięcie: 10

Efekt przewijania przychodzącego i wychodzącego

Z przychodzącym i wychodzącym efektem zanikania.

• Aktywuj pojawianie się i zanikanie: Tak
• Początkowe krycie: 100%
• Średnie krycie: 100% (przy 55%)
• Koniec krycia: 0% (do 62%)

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

Wreszcie, będziemy również używać efektu przewijania w górę iw dół.

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

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

Edytuj tytuł i treść

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

Zmodyfikuj parametry tekstowe modułu H2 Text

Zmień odpowiednio ustawienia tekstu H2:

• Tytuł 2 Policja: Nunito
• Tytuł czcionki 2: pogrubiony
• Pozycja 2 Kolor tekstu: #ffffff
• Pozycja 2 Rozmiar tekstu: 5vw (komputer stacjonarny), 7vw (tablet), 8vw (telefon)
• Wysokość linii 2: 1 em (biuro), 1.2 em (tablet i telefon)

Dodaj moduł tekstowy # 2 do kolumny

Dodaj treść

Następnie dodaj kolejny moduł tekstowy do kolumny za pomocą a treść wybrany przez Ciebie opis.

Ustawienia tekstu

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

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

rozstaw

Użyj również górnego marginesu.

• Górny margines: 8vw

Efekt przewijania przychodzącego i wychodzącego

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

• Aktywuj pojawianie się i zanikanie: Tak
• Początkowe krycie: 100%
• Średnie krycie: 0% (przy 31%)
• Ostateczne krycie: 0% (do 35%)

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

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

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

Możesz teraz sklonować tę ostatnią sekcję tyle razy, ile to możliwe. Będziesz jednak musiał dostosować treść każdej sekcji dla Twoich potrzeb.

badanie

Teraz, gdy przeszliśmy przez wszystkie kroki, przyjrzyjmy się ostatecznie, jak wygląda na różnych rozmiarach ekranu.

końcowe przemyślenia

W tym artykule pokazaliśmy, jak opowiedzieć historię na stronie Informacje, korzystając z wbudowanych efektów przewijania Divi. Stworzony przez nas efekt pozwala na zanikanie i pojawianie się kolejnych kopii, nadając odwiedzający jak czytanie opowiadania. Mogłeś również bezpłatnie pobrać plik JSON! Jeśli masz jakieś pytania lub sugestie, możesz zostawić komentarz w sekcji komentarzy poniżej.