Jak mieszać kopiowanie podczas przewijania z ustawieniami pozycji Divi i efektami przewijania

Sposób, w jaki twórczo korzystasz z wbudowanych funkcji Divi, może mieć wpływ na projekt strony. Na przykład efekty przewijania Divi pozwalają tworzyć piękne interakcje podczas przewijania. Dzisiaj dodajemy kolejny samouczek do Twojej listy rzeczy, które możesz zrobić dzięki wbudowanym efektom przewijania Divi. Dokładniej, pokażemy Ci, jak mieszać kopiowanie z przewijaniem. Na pierwszy rzut oka kopia znajduje się pod załączonym obrazem. Jednak gdy tylko przewiniesz do określonego punktu, kopia pojawi się na górze obrazu produktu i zacznie mieszać się z obrazem. Prowadzi to do przyciągającego wzrok efektu, który wygląda bez wysiłku. Będziesz mógł również bezpłatnie pobrać plik JSON układu!

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 układ za DARMO

Aby położyć ręce na darmowym układzie, 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!

Zacznijmy odtwarzać!

Dodaj 2x sekcje zastępcze

Dodaj nową sekcję

Zacznij od dodania sekcji zastępczej do strony, nad którą pracujesz.

Rozmiary

Otwórz ustawienia sekcji i zmień wysokość w ustawieniach rozmiaru.

• Wysokość: 50vh

Sekcja klonowania

Sklonuj sekcję raz. Dzięki temu na Twojej stronie pozostaną dwie sekcje zastępcze. Te sekcje zastępcze pomogą Ci zobaczyć efekt końcowy po przejściu samouczka. W działającej witrynie sekcje zastępcze zostaną zastąpione zwykłymi sekcjami, których używasz na całej stronie.

Dodaj nową sekcję między sekcjami zastępczymi

Po umieszczeniu sekcji symboli zastępczych dodaj nową sekcję między sekcjami symboli zastępczych.

Kolor tła

Otwórz ustawienia sekcji i użyj białego koloru tła.

• Kolor tła: #ffffff

Rozstaw

Przejdź do zakładki projektu przekroju i odpowiednio zmodyfikuj górne i dolne wartości dopełnienia:

• Górna wyściółka: 10vh
• Dolna wyściółka: 10vh

Dodaj wiersz nr 1

Struktura kolumny

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

Rozmiary

Bez dodawania modułów otwórz ustawienia wiersza, przejdź do ustawień rozmiaru i zmodyfikuj wartości szerokości i maksymalnej szerokości.

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

Dodaj moduł tekstowy do kolumny

Dodaj kopię

Jedynym modułem, którego potrzebujemy dla tego wiersza, jest moduł tekstowy. Dodaj wybraną kopię.

Ustawienia tekstu

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

• Czcionka tekstu: Montserrat
• Grubość czcionki tekstu: Ultra Bold
• Styl czcionki tekstu: wielkie litery
• Kolor tekstu: #fff2ea
• Rozmiar tekstu: 11vw
• Wysokość linii tekstu: 1em
• Wyrównanie tekstu: do środka

Dodaj wiersz nr 2

Struktura kolumny

Dodaj kolejny wiersz do sekcji, korzystając z następującej struktury kolumn:

Rozmiary

Bez dodawania modułów otwórz ustawienia wiersza i zmień ustawienia rozmiaru w następujący sposób:

• Użyj niestandardowej szerokości rynny: Tak
• Szerokość rynny: 2
• Szerokość: 90%
• Wyrównanie wierszy: Środek

Dodaj moduł obrazu do kolumny

Załaduj obrazek

Dodaj moduł obrazu do kolumny wiersza. Prześlij wybrany obraz.

Wyrównanie

Przejdź do zakładki projektu modułu i odpowiednio zmień wyrównanie obrazu:

• Wyrównanie obrazu: Środek

Rozmiary

Następnie przejdź do ustawień rozmiaru i wymuś pełną szerokość modułu.

• Wymuś pełną szerokość: tak

Dodaj moduł przycisku do kolumny

Dodaj kopię

Następnym i ostatnim modułem, który dodamy do kolumny, jest moduł przycisku. Użyj wybranej kopii.

Wyrównanie przycisków

Przejdź do zakładki projekt i zmień wyrównanie przycisków.

• 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: 16px
• Kolor tekstu przycisku: #000000
• Kolor tła przycisku: #ffffff
• Szerokość obramowania przycisku: 0px
• Odstępy między przyciskami: 2px
• Czcionka przycisku: Montserrat
• Waga czcionki przycisku: pogrubiona
• Styl czcionki przycisku: wielkie litery

Rozstaw

Użyj również niektórych niestandardowych wartości dopełnienia w ustawieniach odstępów.

• Górna wyściółka: 20px
• Dolna wyściółka: 20px
• Lewa wyściółka: 5%
• Prawa wyściółka: 5%

Dodaj pozycjonowanie bezwzględne do rzędu nr 1

Po ukończeniu drugiego rzędu wróć do rzędu 1. Otwórz ustawienia wiersza, przejdź do zakładki zaawansowane i ustaw sekcję bezwzględną. W ten sposób wiersz i znajdujący się w nim moduł tekstowy zostaną umieszczone poniżej wiersza zawierającego moduł obrazu.

• Pozycja: bezwzględna
• Lokalizacja: Centrum

Klonuj rząd nr 1 i umieść duplikat poniżej rzędu nr 2

Aby umożliwić pojawienie się modułu tekstowego na górze obrazu, potrzebujemy kolejnego wiersza z wyższą wartością indeksu z. Sklonuj pierwszy wiersz i umieść duplikat pod drugim rzędem.

Zastosuj efekty do rzędu nr 3

Zwiększ indeks Z

Otwórz zduplikowany wiersz i zmień indeks z na karcie Zaawansowane.

• Indeks Z: 12

Zmień kolor tekstu

Otwórz moduł tekstowy w wierszu i zmień kolor tekstu.

• Kolor tekstu: #1e1e1e

Zastosuj tryb mieszania do wiersza

Następnie otwórz ustawienia wiersza i zmień tryb mieszania w ustawieniach filtrów.

• Tryb mieszania: nakładka

Użyj efektu przewijania w module tekstowym w wierszu nr 3

Dodaj efekt zanikania i zanikania

Ukończ samouczek, otwierając ponownie moduł tekstowy, przechodząc do efektów przewijania i włączając efekt pojawiania się i zanikania. Otóż ​​to!

• Włącz pojawianie się i zanikanie: tak
  • Początkowe krycie: 0%
  • Średnie krycie: 0% (przy 26%)
  • Końcowe krycie: 100% (przy 28%)
• Wyzwalacz efektu ruchu: środek elementu

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 wykazać się kreatywnością dzięki wbudowanym efektom przewijania Divi. Dokładniej, pokazaliśmy, jak mieszać kopiowanie na przewijaniu. Na początku kopia wydaje się znajdować pod obrazem. Po przewinięciu kopia pojawia się nad obrazem i łączy się z obrazem. 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.