Jak zmienić obraz po najechaniu za pomocą Divi

Wiedza o tym, jak zmienić obraz po najechaniu kursorem, może się przydać w przypadku każdego rodzaju witryny, nad którą pracujesz. Co więcej, pomaga dodać subtelną interakcję do stron. Możesz na przykład użyć go, aby nadać dodatkową perspektywę referencji, stronom i stronom zespołu. Dzięki nowym opcjom najechania w Divi możesz zmienić obraz po najechaniu kursorem, korzystając tylko z wbudowanych opcji. Łącząc tła kolumn i filtr krycia, dostaniesz się tam w mgnieniu oka.

Weźmy się za to!

Zapowiedź

Zanim zagłębimy się w samouczek, spójrzmy na cztery przykłady, które odtworzymy od podstaw

Ogólne kroki

Dodaj nową sekcję

W pierwszej części tego samouczka przejdziemy przez kilka ogólnych kroków. Te ogólne kroki pomogą nam zaoszczędzić czas, skupiając się na pierwszych trzech przykładach. Otwórz nową lub istniejącą stronę i dodaj do niej zwykłą sekcję.

Dodaj nowy wiersz

Struktura kolumny

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

Obraz tła kolumny 1

Nie dodając jeszcze żadnych modułów, otwórz ustawienia wiersza i dodaj obraz tła do pierwszej kolumny. Wybierz obraz, który chcesz wyświetlić po najechaniu myszą.

• Kolumna 1 Powtórzenie obrazu tła: Bez powtórzeń

Dodaj obraz do kolumny 1

Załaduj obrazek

Kontynuuj, dodając moduł obrazu do pierwszej kolumny i prześlij obraz, który ma się pojawić przed najechaniem myszą.

Dodaj moduł tekstu tytułu do kolumny 2

Dodaj zawartość

W drugiej kolumnie najpierw potrzebujemy tytułowego modułu tekstowego. Śmiało i dodaj trochę treści H3.

Ustawienia tekstu nagłówka

Następnie przejdź do ustawień tekstu nagłówka i wprowadź zmiany.

• Czcionka nagłówka 3: Baloo Tamma
• Kolor tekstu nagłówka 3: #eda96a
• Rozmiar tekstu nagłówka 3: 100px (komputer), 70px (tablet), 50px (telefon)
• Nagłówek 3 Odstępy między literami: -4px

• Tekst nagłówka 3 Długość pozioma cienia: 0,04 em
• Tekst nagłówka 3 Długość pionowa cienia: 0,04 em
• Nagłówek 3 Kolor cienia tekstu: rgba (0,0,0,0.6)

Rozstaw

Na koniec dodaj górny margines w ustawieniach odstępów.

• Margines górny: 100px (komputer), 50px (tablet i telefon)

Dodaj moduł rozdzielający do kolumny 2

Pokaż dzielnik

Dodaj moduł dzielnika tuż pod tytułem Moduł tekstowy w kolumnie 2.

• Pokaż dzielnik: tak

Kolor dzielnika

Następnie zmień kolor separatora.

• Kolor dzielnika: #e25300

Style

I wybierz inny styl dzielnika w ustawieniach stylów.

• Styl dzielnika: w kropki

Rozmiary

Zwiększ wagę rozdzielacza również w ustawieniach rozmiaru.

• Waga dzielnika: 3px

Dodaj moduł tekstu podstawowego do kolumny 2

Dodaj zawartość

Do ostatniego modułu! Dodaj body Text Module do drugiej kolumny z wybraną zawartością.

Ustawienia tekstu

Następnie zmień ustawienia tekstu.

• Rozmiar tekstu: 16px
• Wysokość linii tekstu: 2,3 em
• Orientacja tekstu: wyjustuj

Klonuj sekcję dwukrotnie

Po wykonaniu wszystkich ogólnych kroków sklonuj sekcję, którą zbudowałeś dwukrotnie. Teraz będziemy mieli osobną sekcję dla każdego z pierwszych trzech przykładów.

Utwórz przykład #1

Zastosuj dodatkowe ustawienia do modułu obrazu

Domyślne krycie

Zacznijmy tworzyć pierwszy przykład! Jedyne, co tutaj zrobimy, to utworzenie przejścia najechania kursorem, bez żadnych dodatkowych efektów. Aby to zrobić, otwórz moduł obrazu i przejdź do ustawień filtrów. Upewnij się, że domyślna wartość krycia to 100%.

• Krycie: 100%

Krycie najechania

Zmień krycie po najechaniu kursorem.

• Krycie: 0%

Przejścia

Na koniec utwórz płynne przejście, zwiększając czas trwania przejścia.

• Czas trwania przejścia: 1200 ms

Utwórz przykład #2

Zastosuj dodatkowe ustawienia do modułu obrazu

Domyślne odstępy

Przejdźmy do drugiego przykładu! Otwórz moduł obrazu w kolumnie 1 i upewnij się, że nie ma tam domyślnego niestandardowego dopełnienia.

Odstępy najechania

Kontynuuj, dodając dolną wyściółkę po najechaniu kursorem, aby obraz po najechaniu mógł zwiększyć rozmiar.

• Dolna wyściółka: 100px

Cień Pudełka

Dodajemy również domyślny cień pudełka, który znika po najechaniu myszą.

• Pozycja pozioma cienia pudełka: -55px
• Pozycja pionowa cienia pudełka: -50px
• Siła rozprzestrzeniania się cieni w pudełku: -10px
• Kolor cienia: #eda96a

Domyślne krycie

Następnie przejdź do ustawień filtrów i upewnij się, że domyślne krycie to 100%.

• Krycie: 100%

Krycie najechania

Usuń krycie modułu po najechaniu kursorem. Umożliwi to wyświetlenie tła kolumny i stworzenie efektu „obrazu po najechaniu”.

• Krycie: 0%

Przejścia

Na koniec zwiększ czas trwania przejścia w ustawieniach przejść modułu obrazu.

• Czas trwania przejścia: 1200 ms

Utwórz przykład #3

Dodaj tło gradientowe do kolumny 1

W trzecim przykładzie zaczynamy od otwarcia ustawień wiersza i dodania promieniowego tła gradientowego do pierwszej kolumny. To da obrazowi po najechaniu kursorem okrągły kształt.

• Kolor 1: rgba (43,135,218,0)
• Kolor 2: #ffffff
• Kolumna 1 Typ gradientu: Promieniowy
• Kolumna 1 Kierunek promieniowy: Środek
• Pozycja początkowa kolumny 1: 60%
• Pozycja końcowa kolumny 1: 60%

Zastosuj dodatkowe ustawienia do modułu obrazu

Domyślne krycie

Kontynuuj, otwierając moduł obrazu w kolumnie 1 i upewniając się, że domyślne krycie wynosi 100%.

• Krycie: 100%

Krycie najechania

Usuń krycie po najechaniu kursorem, aby tło kolumny było widoczne.

• Krycie: 0%

Utwórz przykład #4

Dodaj nowy wiersz

Struktura kolumny

Do ostatniego przykładu! Tutaj potrzebujemy nowego wiersza z 6 kolumnami.

Obraz tła kolumny 1

Nie dodając jeszcze żadnych modułów, otwórz ustawienia wiersza i dodaj obraz tła, który chcesz wyświetlić po najechaniu myszą jako obraz tła kolumny 1.

• Kolumna 1 Powtórzenie obrazu tła: Bez powtórzeń

Powtórz dla wszystkich kolumn w rzędzie

Powtórz poprzedni krok dla każdej kolumny w wierszu.

Rozmiary

Następnie przejdź do ustawień rozmiaru wiersza i usuń wszystkie odstępy między kolumnami.

• Stwórz ten wiersz o pełnej szerokości: Tak
• Użyj niestandardowej szerokości rynny: 1

Dodaj moduł obrazu do kolumny 1

Załaduj obrazek

Kontynuuj, dodając moduł obrazu do pierwszej kolumny i przesyłając obraz, który ma być wyświetlany domyślnie.

Domyślne krycie

Upewnij się, że domyślne krycie tego modułu wynosi 100%.

• Krycie: 100%

Krycie najechania

I usuń krycie po najechaniu kursorem, aby zamiast tego było wyświetlane tło kolumny.

• Krycie: 0%

Przejścia

Zwiększ czas trwania przejścia, aby uzyskać płynne przejście.

• Czas trwania przejścia: 800ms

Clone Image Module 3 razy i umieść duplikaty w pozostałych kolumnach

Po zakończeniu modyfikowania modułu obrazu w kolumnie 1 możesz go sklonować i umieścić duplikaty w pozostałych kolumnach. Pamiętaj, aby zmienić również obrazy.

Zapowiedź

Teraz, gdy przeszliśmy przez wszystkie kroki i wszystkie cztery przykłady, przyjrzyjmy się po raz ostatni wszystkim trzem utworzonym przez nas przykładom.

Końcowe przemyślenia

Zmiana obrazu po najechaniu myszą może pomóc wprowadzić tę dodatkową interakcję do sekcji referencji dotyczących stron i stron zespołu. W tym samouczku pokazaliśmy Ci prosty sposób na uzyskanie różnych rodzajów obrazów po najechaniu kursorem, korzystając tylko z wbudowanych opcji Divi! Jeśli masz jakieś pytania lub sugestie, koniecznie zostaw komentarz w sekcji komentarzy poniżej!

Polecane zdjęcie autorstwa LovArt / shutterstock.com