Jak wyzwalać przejścia obrazu za pomocą lepkich opcji Divi

Wszechstronność lepkich opcji Divi idzie dalej niż tylko używanie ustawień lepkiego nagłówka. Możesz go również użyć do wywołania zmian w swoim projekcie. Na przykład w tym samouczku użyjemy przyklejonych opcji Divi, aby wywołać przejście obrazu. Przejścia obrazu mają miejsce, gdy tylko odwiedzający zbliżają się do obrazu na zwoju. Odtworzymy dwa różne przykłady od zera, ale gdy już opanujesz podejście, będziesz mógł tworzyć własne unikalne przejścia obrazu, korzystając tylko z wbudowanych opcji Divi. Będziesz mógł również pobrać plik JSON za darmo!

Weźmy się za to!

Zapowiedź

Zanim przejdziemy do samouczka, przyjrzyjmy się ostatecznemu wynikowi 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!

1. Ogólne kroki

Dodaj sekcję #1

Rozstaw

W pierwszej części samouczka zbudujemy podstawy naszego projektu. Gdy już to zrobimy, możemy skupić się na zastosowaniu odpowiednich ustawień, aby uzyskać dwa przykłady z podglądu tego posta. Dodaj nową sekcję do strony, nad którą pracujesz, przejdź na kartę projektu sekcji i usuń wszystkie domyślne górne i dolne dopełnienie.

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

Dodaj nowy wiersz

Struktura kolumny

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

Rozmiary

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

• Maksymalna szerokość: 1480 pikseli
• Wyrównanie wierszy: Środek

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

Indeks Z

I ustaw indeks az w ustawieniach pozycji. Pomoże nam to upewnić się, że wiersz pozostanie poniżej następnego wiersza, który dodamy później w samouczku.

• Indeks Z: 1

Przepełnienia kolumn

Następnie otwórz ustawienia kolumny i ustaw przepełnienia na ukryte.

• Przepełnienie poziome: ukryte
• Przepełnienie pionowe: ukryte

Dodaj moduł obrazu do kolumny

Pozostaw puste pole obrazu

Jedynym modułem, którego potrzebujemy w tym wierszu, jest moduł obrazu. Pozostaw pole obrazu puste.

Zdjęcie w tle

Zamiast tego użyj wybranego obrazu tła.

• Rozmiar obrazu tła: okładka
• Pozycja obrazu tła: środek

Rozstaw

Aby umożliwić wyświetlenie obrazu, użyjemy niestandardowych wartości dopełnienia dla różnych rozmiarów ekranu.

• Górna wyściółka:
  • Pulpit: 300px
  • Tablet i telefon: 150px
• Dolna wyściółka:
  • Pulpit: 300px
  • Tablet i telefon: 150 pikseli

Dodaj sekcję #2

Rozstaw

Dodaj kolejną sekcję tuż pod poprzednią. Otwórz ustawienia przekroju i usuń domyślną górną wyściółkę w ustawieniach odstępów.

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

Dodaj nowy wiersz

Struktura kolumny

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

Indeks Z

Dodaj indeks az również dla tego wiersza.

• Indeks Z: 2

Dodaj moduł Call to Action do kolumny

Dodaj zawartość

W tym rzędzie jedynym modułem, którego potrzebujemy, jest moduł wezwania do działania. Dodaj wybraną treść.

Dodaj link do przycisku

Wraz z linkiem do przycisku.

Kolor tła

Następnie dodaj biały kolor tła.

• Kolor tła: #ffffff

Ustawienia tekstu

Przejdź do zakładki projektu i zmień ustawienia tekstu.

• Wyrównanie tekstu: do lewej
• Kolor tekstu: ciemny

Ustawienia tekstu tytułu

Stylizuj też tekst tytułu.

• Czcionka tytułu: Playfair Display
• Styl czcionki tytułu: kursywa
• Rozmiar tekstu tytułu
  • Pulpit: 45px
  • Tablet: 40px
  • Telefon: 35px
• Odstępy między literami tytułu: 1px

Ustawienia tekstu podstawowego

Jak również treść.

• Czcionka ciała: Karla
• Wysokość linii ciała: 2em

Ustawienia przycisków

Następnie nadaj styl przyciskowi.

• Użyj niestandardowych stylów dla przycisku: Tak
• Rozmiar tekstu przycisku: 18px
• Kolor tekstu przycisku: #000000
• Kolor gradientu 1: #ffffff
• Kolor gradientu 2: #ffdc91
• Typ gradientu: liniowy
• Pozycja startowa: 50%
• Pozycja końcowa: 50%

• Szerokość obramowania przycisku: 0px
• Promień obramowania przycisku: 0px
• Czcionka przycisku: Karla
• Styl czcionki przycisku: wielkie litery
• Pokaż przycisk: Tak

• Umieszczenie ikony przycisku: w lewo
• Pokaż tylko ikonę po najechaniu na przycisk: Nie
• Górna wyściółka: 10px
• Dolna wyściółka: 10px
• Lewa wyściółka: 15%
• Prawa wyściółka: 15%

Rozmiary

Zmieniamy również ustawienia rozmiaru dla różnych rozmiarów ekranu.

• Szerokość:
  • Komputer stacjonarny: 65%
  • Tablet: 80%
  • Telefon: 100%
• Wyrównanie modułu: Środek

Rozstaw

Następnie dodamy kilka niestandardowych wartości marginesów i dopełnienia do ustawień odstępów.

• Górny margines:
  • Pulpit: -150px
  • Tablet:-50px
  • Telefon: 0px
• Margines dolny: 50px
• Górna wyściółka: 150px
• Dolna wyściółka: 150px

Cień Pudełka

A my uzupełnimy ustawienia modułu, dodając subtelny cień pudełka.

• Siła rozmycia Box Shadwo: 30px
• Kolor cienia: rgba(0,0,0,0.11)

2. Zastosuj lepki efekt do rzędu

Otwórz wiersz w sekcji #1

Teraz, gdy stworzyliśmy podstawy naszego projektu, nadszedł czas na zastosowanie efektu klejenia. Ten lepki efekt pomoże nam zmieniać style, gdy ludzie przewijają się obok elementu. Element, do którego dodamy nasz efekt przyklejania, to wiersz w pierwszej sekcji, który zawiera obraz.

Zastosuj lepki efekt

Ważne jest, aby upewnić się, że dolny limit lepkości jest ustawiony na sekcję. Początkowe i końcowe punkty naszego wiersza są takie same jak w sekcji, dzięki czemu wiersz nie staje się lepki, ale stosowane są lepkie style. Lepkie przesunięcie górne określa, w którym momencie zaczyna się przejście. Gdyby ta wartość wynosiła na przykład zero, oznaczałoby to, że góra przeglądarki musiałaby dotknąć górnej części wiersza, aby rozpocząć przejście. Ustawiając przyklejony górny offset na „300px”, tworzymy to przejście wcześniej.

• Lepka pozycja: trzymaj się u góry
• Przyklejony górny offset: 300px
• Dolny limit lepkości: sekcja
• Przesunięcie od otaczających lepkich elementów: Tak
• Domyślne i trwałe style przejścia: Tak

Upewnij się, że górne przesunięcie jest równe nad pierwszą sekcją

Ponieważ ustawiliśmy lepkie przesunięcie górne na „300px”, potrzebujemy miejsca na górze naszej strony, aby to się stało. Jeśli używasz tego projektu gdzieś w połowie swojej strony, nie musisz się martwić o ten krok. Jeśli jednak używasz tego podejścia na górze strony, będziesz musiał zmodyfikować lepkie przesunięcie górne lub dodać wystarczająco dużo miejsca u góry. Dodamy górny margines do naszej pierwszej sekcji, aby wygenerować to miejsce.

• Górny margines: 400px

3. Zastosuj efekt Ken Burn do modułu obrazu

Teraz, gdy nasz wiersz stał się przyklejony, możemy zacząć stosować style przyklejone do wiersza i wszystkich jego elementów podrzędnych. Chociaż możliwości są nieograniczone, pokazujemy dwa różne przykłady i pokazujemy, jak je osiągnąć. Aby ułatwić zabawę z dwoma różnymi przykładami, sklonujemy obie sekcje raz i umieścimy je poniżej pierwszych.

Przykład 1

Ustawienia przyklejonych wierszy

Cień Pudełka

Aby odtworzyć przykład nr 1, który widzieliście w podglądzie tego posta, otwórz ustawienia wiersza i zastosuj następujące ustawienia cienia pola:

• Pozycja pionowa cienia pudełka: 0px
• Siła rozprzestrzeniania się cieni w pudełku: 0px
• Kolor cienia: rgba(0,0,0,0)

• Lepka pozycja pionowa: 100px
• Lepki kolor cienia: #ffdc91

Przemiana

Uwzględnij również płynne przejście w zakładce Zaawansowane.

• Czas trwania przejścia: 500 ms
• Krzywa prędkości przejścia: łatwość

Ustawienia modułu obrazu lepkiego

Skala transformacji

Następnie otwórz moduł obrazu i zastosuj efekt skali transformacji w stanie lepkim.

• Oba: 100%

• Lepkie oba: 130%

Przemiana

Zapewnij płynne przejście, odpowiednio modyfikując ustawienia przejścia modułu:

• Czas trwania przejścia: 1200 ms
• Krzywa prędkości przejścia: łatwość

Przykład #2

Ustawienia przyklejonych wierszy

Przekształć Tłumacz

Przejdźmy do drugiego przykładu! Otwórz ustawienia wiersza i zastosuj następujące ustawienia tłumaczenia transformacji:

• Prawo: 20%

• Przyklejony w prawo: 0%

Przemiana

Zmodyfikuj również ustawienia przejścia wiersza.

• Czas trwania przejścia: 500 ms
• Krzywa prędkości przejścia: łatwość

Ustawienia modułu obrazu lepkiego

Filtry

Następnie otwórz moduł obrazu i baw się z filtrami w stanie domyślnym i lepkim.

• Nasycenie: 0%
• Jasność: 50%

• Nasycenie lepkie: 100%
• Lepka jasność: 100%

Przemiana

Uzupełnij ustawienia modułu i ten samouczek, zmieniając ustawienia przejścia w następujący sposób:

• Czas trwania przejścia: 500 ms
• Krzywa prędkości przejścia: łatwość

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 lepkim opcjom Divi. Dokładniej, pokazaliśmy, jak wyzwalać przejścia obrazów. Gdy tylko ludzie przewijają obraz, zmieniają się style obrazu, co skutkuje pięknym przejściem. Zajęliśmy się dwoma różnymi przykładami, ale możliwości są nieograniczone. 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.