Jak zsynchronizować rozszerzanie kopii podczas przewijania z Divi

Kiedy nacisk kładziony jest na kopię, ważne jest, aby upewnić się, że kopia nie pozostanie niezauważona. Istnieje wiele technik, których możesz użyć, aby umieścić swoją kopię w centrum uwagi, ale w tym samouczku pokażemy, jak zsynchronizować rozwijanie kopii podczas przewijania za pomocą nowych efektów przewijania Divi. Gdy użytkownicy będą przewijać, pojawi się kolejna część kopii, umożliwiając im przeczytanie krok po kroku treści, którą dostarczasz. 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

Pobierz rozwijaną kopię w układzie przewijania ZA DARMO

Aby położyć ręce na rozwijanej kopii w układzie przewijania, musisz najpierw pobrać ją 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 projekt przekroju

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.

• Kolor tła: #151515

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

Dodaj wiersz nr 1

Struktura kolumny

Kontynuuj, dodając nowy 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 w następujący sposób:

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

Rozstaw

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

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

Dodaj moduł tekstowy nr 1 do kolumny

Dodaj zawartość

Następnie dodaj pierwszy moduł tekstowy z wybraną przez siebie zawartością.

Ustawienia tekstu

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

• Czcionka tekstu: Livvic
• Grubość czcionki tekstu: pogrubiona
• Kolor tekstu: #f1f1f1
• Rozmiar tekstu: 170px (komputer), 100px (tablet), 70px (telefon)
• Wysokość linii tekstu: 1em

• Długość pozioma cienia tekstu: 0,06 em
• Długość pionowa cienia tekstu: 0em
• Kolor cienia tekstu: rgba (79,79,79,0.74)
• Wyrównanie tekstu: środek (komputer), lewo (tablet i telefon)

Klonuj moduł tekstowy dwa razy

Dwukrotnie sklonuj moduł tekstowy.

Zmień zawartość

Zmodyfikuj zawartość obu zduplikowanych modułów tekstowych.

Dodaj wiersz nr 2

Struktura kolumny

Dodaj kolejny wiersz tuż poniżej poprzedniego, korzystając z następującej struktury kolumn:

Rozmiary

Otwórz ustawienia wiersza i odpowiednio zmień ustawienia rozmiaru:

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

Rozstaw

Następnie usuń domyślne górne i dolne dopełnienie wiersza.

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

Granica

Następnie dodaj górną granicę.

• Szerokość górnej granicy: 1px
• Kolor górnej krawędzi: #4c4c4c

Ustawienia kolumny

Rozstaw

Wprowadzamy też pewne zmiany w ustawieniach kolumn. Otwórz ustawienia i dodaj kilka niestandardowych wartości dopełnienia.

• Górna wyściółka: 5vw
• Dolna wyściółka: 10vw
• Lewa wyściółka: 6vw
• Prawa wyściółka: 6vw

Granica

Użyj również prawej krawędzi.

• Szerokość prawego obramowania: 1px
• Kolor prawego obramowania: #4c4c4c

Dodaj moduł Blurb do kolumny 1

Dodaj zawartość

Kontynuuj, dodając do kolumny moduł Blurb z wybraną zawartością.

Wybierz ikonę

Następnie wybierz wybraną ikonę.

Ustawienia ikon

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

• Kolor ikony: #a3acff
• Wyrównanie obrazu/ikony: do lewej

Ustawienia tekstu tytułu

Zmodyfikuj również ustawienia tekstu tytułu.

• Czcionka tytułu: Livvic
• Grubość czcionki tytułu: pogrubiona
• Kolor tekstu tytułu: #c1c1c1
• Rozmiar tekstu tytułu: 35px

• Tekst tytułu Cień w poziomie Długość: 0,06 em
• Tekst tytułu Cień Długość pionowa: 0em
• Kolor cienia tekstu tytułu: rgba (79,79,79,0.74)

Ustawienia tekstu podstawowego

Wprowadzamy również pewne zmiany w ustawieniach tekstu podstawowego.

• Kolor tekstu ciała: #878787
• Rozmiar tekstu ciała: 16px
• Wysokość linii ciała: 2,4 em

CSS tytułu plamy

I utworzymy trochę miejsca wokół tytułu za pomocą jednej linii kodu CSS, który dodamy do tytułu notki w zakładce Zaawansowane.

margin: 30px 0 40px 0;

Klonuj całą kolumnę dwukrotnie

Po ukończeniu całej kolumny i znajdującego się w niej modułu Blurb możesz dwukrotnie sklonować całą kolumnę.

Usuń ramkę z kolumny 3

Otwórz ustawienia kolumny 3 i usuń prawą ramkę.

• Szerokość prawego obramowania: 0px

Zmień zawartość

I zmień zawartość modułu Blurb dla każdego duplikatu.

2. Dodaj efekty przewijania

Sekcja

Skalowanie w górę i w dół

Czas dodać efekty przewijania, zaczynając od sekcji. Użyj efektu przewijania w górę iw dół z następującymi wartościami:

• Włącz skalowanie w górę i w dół: Tak
• Skala początkowa: 70%
• Skala środkowa: 100%
• Skala końcowa: 100%

Moduł tekstowy nr 1

Zanikanie i zanikanie

Następnie otwórz pierwszy moduł tekstowy w pierwszym wierszu sekcji i dodaj efekt zanikania i zanikania.

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

Skalowanie w górę i w dół

Użyj również efektu skalowania w górę iw dół.

• Włącz skalowanie w górę i w dół: Tak
• Skala początkowa: 0% (przy 47%)
• Skala środkowa: 100% (przy 56%)
• Skala końcowa: 100% (przy 64%)

Rozszerz moduł tekstowy nr 1 Efekty przewijania

Kontynuuj, rozszerzając efekty przewijania na dwa pozostałe moduły tekstowe w kolumnie.

• Do: Wszystkie teksty
• Przez: ta kolumna

Moduł rozmycia nr 1

Skalowanie w górę i w dół

Następnie dodamy efekt przewijania w górę iw dół do modułu Blurb w kolumnie 1.

• Włącz skalowanie w górę i w dół: Tak
• Skala początkowa:
  • Komputer stacjonarny: 0%
  • Tablet i telefon: 100%
• Skala środkowa: 100% (przy 33%)
• Skala końcowa: 100% (przy 64%)

Rozszerzenie modułu Blurb #1 Efekty przewijania

Ukończ samouczek, rozszerzając efekt przewijania na wszystkie moduły Blurb w rzędzie i gotowe!

• Do: Wszystkie Blurbs
• Przez cały: ten rząd

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 samouczku pokazaliśmy Ci kreatywny sposób na synchronizację rozwijanej kopii w sekcji Divi. To świetny sposób na wyróżnienie tekstu i umożliwienie odwiedzającym przeczytanie różnych części Twojej sekcji krok po kroku. 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.