Jak tworzyć tekst i obrazy, które zmieniają się podczas przewijania w Divi

Efekty przewijania Divi świetnie nadają się do tworzenia ciekawych układów. Opublikowaliśmy sporo od czasu uruchomienia tej funkcji. W tym samouczku pokażemy, jak stworzyć układ z tekstem i obrazami, które zmieniają się podczas przewijania. Ten projekt może być używany dla strony usług lub dowolnego typu strony, której potrzebujesz. Utrzymaliśmy to w czystości i prostocie, aby efekt przewijania znalazł się w centrum uwagi.

Możesz pobrać układ jako plik JSON lub odtworzyć go na własnej stronie internetowej Divi.

Zacznijmy.

Zapowiedź

Zanim zaczniemy, przyjrzyjmy się układowi na różnych rozmiarach ekranu.

Pulpit

mobilny

Pobierz BEZPŁATNIE tekst i obrazy, które zmieniają się w sekcji przewijania

Aby położyć ręce na bezpłatnej sekcji z tekstem i obrazami, które zmieniają się podczas 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!

Odtwórz sekcję z tekstem i obrazami, które zmieniają się podczas przewijania

Dodaj nową sekcję

Tło

Aby rozpocząć odtwarzanie projektu, dodaj nową sekcję na nowej lub istniejącej stronie. Dodaj obrazy tła, które podaliśmy w powyższym pliku do pobrania.

• Obraz tła: projekt pudełka i kropek
  • Pulpit: obraz 1
  • Tablet: obraz 2
  • Telefon: Obraz 3
• Rozmiar obrazu: okładka
• Powtórzenie obrazu tła: Powtórz Y (w pionie)

Rozstaw

Dodaj trochę odstępu do sekcji.

• Wyściółka górna i dolna: 30%

Widoczność

Ukryj również przelewy.

• Przepełnienie poziome i pionowe: ukryte

Dodaj nowy wiersz

Widoczność

Teraz dodaj pierwszy wiersz i dostosuj ustawienia widoczności w zakładce Zaawansowane.

• Poziomy: ukryty
• Przepełnienie pionowe: domyślne

Dodaj moduł tekstowy

Tekst

Dodaj pierwszy moduł tekstowy do tytułu. Wstaw wybrane przez siebie treści H1.

• Treść: Treść H1 – Zespół produkcyjny

Tekst nagłówka

Przejdź do karty projektu i nadaj styl tekstowi nagłówka.

• Poziom nagłówka: H1
• Czcionka: Fredoke One
• Waga: pogrubienie
• Kolor czarny
• Rozmiar
  • Pulpit: 100px
  • Tablet: 75px
  • Telefon: 33px
• Odstępy między literami
  • Pulpit: 4px
  • Tablet: 3px
  • Telefon: 2px

Rozmiary

Następnie dostosuj szerokość.

• Szerokość: 100%

Dodaj nowy wiersz

Rozmiary

Teraz dodaj drugi rząd i odpowiednio dostosuj ustawienia rozmiaru:

• Szerokość: 80%
• Maksymalna szerokość: 1000px

Widoczność

Ukryj również przelewy.

• Przelewy poziome i pionowe: ukryte

Dodaj pierwszy moduł tekstowy

Tekst

Dodaj kolejny moduł tekstowy. Tym razem wprowadź wybraną zawartość H2.

• Treść: H2 Content – ​​Set Photography

Tekst nagłówka

Dodaj styl nagłówka.

• Poziom kursu: H2
• Waga: pogrubienie
• Styl: TT
• Kolor: Czarny #000000
• Rozmiar
  • Pulpit: 50px
  • Tablet: 40px
  • Telefon: 28px
• Odstępy między literami: 3px

Rozstaw

Ustaw trochę odstępu dla modułu.

• Margines górny i dolny: 0px

Efekty przewijania

Uzupełnij ustawienia modułu, dodając następujące efekty przewijania:

• Zanikanie i zanikanie: Włącz
• Dół rzutni
  • Pozycja: 42%
  • Początkowe krycie: 0%
• Średnie krycie
  • Dolna pozycja: 43%
  • Najwyższa pozycja: 53%
  • Średnie krycie: 100%
• Widok na górę
  • Pozycja: 54%
  • Końcowe krycie: 0%

Zduplikuj moduł tekstu dwa razy

Dwukrotnie sklonuj moduł tekstowy.

Dostosuj drugi moduł tekstowy

Tekst

Zmień treść w nowym module tekstowym.

• Treść: Treść H2 – Kierownictwo artystyczne

Pozycja

Dodaj również pozycjonowanie bezwzględne do modułu.

• Pozycja: bezwzględna
• Lokalizacja: górny lewy

Efekty przewijania

Następnie zaktualizuj ustawienia efektu przewijania.

• Zanikanie i zanikanie: Włącz
• Dół rzutni
  • Pozycja: 56%
  • Początkowe krycie: 0%
• Średnie krycie
• Dolna pozycja: 57%
• Najwyższa pozycja: 67%
• Średnie krycie: 100%
• Widok na górę
  • • Pozycja: 68%
    • Końcowe krycie: 0%

  

Dostosuj trzeci moduł tekstowy

Tekst

Teraz dostosuj drugi duplikat modułu tekstowego. Najpierw zmień zawartość.

• Korpus: zawartość H2 – rekwizyty i garderoba

Pozycja

Dodaj następnie pozycję bezwzględną.

• Pozycja: bezwzględna
• Lokalizacja: górny lewy

Efekty przewijania

Następnie zmodyfikuj efekty przewijania.

• Zanikanie i zanikanie: Włącz
• Dół rzutni
  • Pozycja: 70%
  • Początkowe krycie: 0%
• Średnie krycie
  • Dolna pozycja: 71%
  • Najwyższa pozycja: 80%
  • Średnie krycie: 100%
• Widok na górę
  • Pozycja: 81%
  • Końcowe krycie: 0%

Dodaj moduł obrazu

Obraz

Teraz nadszedł czas na dodanie modułu obrazu. Użyj kwadratowego obrazu o rozmiarze 350 x 350 pikseli.

• Obraz: obraz kwadratowy 350 x 350 pikseli

Wyrównanie

Ustaw wyrównanie w lewo.

• Wyrównanie obrazu: do lewej

Rozstaw

Dostosuj również odstępy.

• Pokaż przestrzeń pod obrazem: Nie
• Górny margines: -60px

Filtry

Następnie dodaj filtr, aby zmniejszyć nasycenie obrazu.

• Nasycenie: 0%

Widoczność

Teraz przejdź do zakładki Zaawansowane i ustaw przepełnienia na ukryte.

• Przepełnienie poziome i pionowe: ukryte

Efekty przewijania

Na koniec dodaj efekt przewijania zanikania i zanikania.

• Zanikanie i zanikanie: Włącz
• Dół rzutni
  • Pozycja: 70%
  • Początkowe krycie: 0%
• Średnie krycie
  • Pozycja: 71%
  • Środek: 100%
• Widok na górę
  • Pozycja: 100%
  • Końcowe krycie: 0%

Dodaj moduł wezwania do działania

Tekst

Przejdźmy do kolejnego modułu, który jest modułem wezwania do działania. Dołącz wybrane treści.

• Tytuł: Zespół artystyczny Jasona
• Button: Książka Zespół artystyczny Jasona
• Treść: Treść opisowa

Połączyć

Dodaj link dalej.

• Link: Twój link

Tło

Usuń również domyślny kolor tła.

• Użyj koloru tła: nie

Tekst

Następnie ustaw wyrównanie w prawo.

• Wyrównanie tekstu: do prawej

Tekst nagłówka

Stylizuj również tekst nagłówka.

• Poziom nagłówka: H3
• Czcionka: Fredoke One
• Wyrównanie tekstu tytułu: do lewej
• Kolor: czarny #oooooo
• Rozmiar
  • Pulpit: 48px
  • Tablet: 42px
  • Telefon: 33px
• Odstępy między literami
  • Komputer stacjonarny i tablet: 1px
  • Telefon: 0px
• Wysokość linii
  • Komputer stacjonarny i tablet: 1,6 em
  • Telefon: 1.1em

Tekst główny

Następnie tekst główny.

• Czcionka: Verdana
• Kolor: Czarny #000000
• Rozmiar: 14px
• Odstępy między literami: 0.5px

Przycisk

Dostosuj również style przycisków.

• Style niestandardowe
• Rozmiar tekstu: 17px
• Kolor tekstu: biały #ffffff
• Tło: Czarny #000000
• Odstępy między literami: 1px
• Czcionka: Verdana
• Górny margines: 20px
• Wyściółka górna i dolna: 10px
• Dopełnienie lewego i prawego: 25px

Pozycja

Przejdź do zakładki Zaawansowane i zmień ustawienia pozycji w następujący sposób:

• Pozycja: Względny
• Początek przesunięcia: górny lewy
• Przesunięcie w poziomie: 25px

Widoczność

Następnie ukryj przelewy.

• Przepełnienie poziome i pionowe: ukryte

Efekty przewijania

Na koniec włącz efekt przewijania w górę i w dół.

• Zanikanie i zanikanie: Włącz
• Dół rzutni
  • Pozycja: 54%
  • Początkowe krycie: 0%
• Średnie krycie
  • Dolna pozycja: 55%
  • Najwyższa pozycja: 80%
  • Środek: 100%
• Widok na górę
  • Pozycja: 100%
  • Końcowe krycie: 0%

Powiel drugi wiersz

Sklonuj wiersz ze wszystkimi jego modułami.

Dostosuj pierwszy moduł tekstowy

Tekst

Teraz zmień zawartość sklonowanych modułów tekstowych. Zacznij od góry.

• Korpus: Zawartość H2 / Pre-produkcja

Tekst

Zmień wyrównanie w prawo.

• Wyrównanie tekstu: do prawej

Rozszerz wyrównanie tekstu

Zastosuj wyrównanie do wszystkich sklonowanych modułów tekstowych w tym samym wierszu.

• Rozszerz wyrównanie tekstu: do wszystkich modułów tekstowych w tym wierszu

Dostosuj drugi moduł tekstowy

Tekst

Teraz zaktualizuj zawartość w drugim sklonowanym module tekstowym.

• Body: Zawartość H2 / Produkcja na planie

Pozycja

Zmień lokalizację również w ustawieniach pozycji.

• Lokalizacja: u góry po prawej

Dostosuj trzeci moduł tekstowy

Tekst

Teraz zmień zawartość trzeciego sklonowanego modułu tekstowego.

• Treść: Treść H2 / Koordynacja między zespołami

Pozycja

Zmień lokalizację również w ustawieniach pozycji.

• Lokalizacja: u góry po prawej

Dostosuj nowy moduł obrazu

Obraz

Następnie zmień zdjęcie w module obrazu.

• Obraz: Nowy obraz 350 x 350 pikseli

Wyrównanie

Zmień również wyrównanie obrazu.

• Wyrównanie obrazu: w prawo

Dostosuj nowy moduł wezwania do działania

Tekst

Następnie otwórz moduł wezwania do działania i zmień całą zawartość.

• Tytuł: Zespół produkcyjny Alicji
• Button: Zarezerwuj zespół produkcyjny Alice
• Treść: nowa treść opisowa.

Połączyć

Zmień też link.

• Link: Nowy link

Tekst

Zmodyfikuj również wyrównanie.

• Wyrównanie tekstu: do lewej

Tekst nagłówka

Zmień również wyrównanie tekstu nagłówka.

• Wyrównanie tekstu tytułu: do lewej

Tekst główny

Jak również treść.

• Wyrównanie tekstu podstawowego: do lewej

Rozmiary

Nie zapomnij również zmienić wyrównania całego modułu w ustawieniach rozmiaru.

• Wyrównanie modułu: do lewej

Pozycja

Na koniec zresetuj ustawienia pozycji do wartości domyślnych i gotowe!

• Pozycja: Przywróć domyślną

Zapowiedź

Przyjrzyjmy się jeszcze raz układowi strony na różnych rozmiarach ekranu.

Pulpit

mobilny

To jest opakowanie dla układu z tekstem i obrazami, które zmieniają się podczas przewijania!

Skończyliśmy odtwarzać tekst i obrazy, które zmieniają się podczas przewijania. Udało nam się osiągnąć ten efekt dzięki wbudowanym efektom przewijania Divi. Użyj tego układu dla strony usług, strony z informacjami, strony spotkań z zespołem lub czegokolwiek, co lubisz! Użyj dostarczonego tła lub pozostaw białe tło.

Daj nam znać, co myślisz w komentarzach!