Jak wywołać efekty zawisu dla modułu, kolumny i wiersza jednocześnie?

Jedną z najlepszych rzeczy w budowaniu witryny za pomocą Divi jest to, że każdy blok konstrukcyjny jest pełen opcji projektowych. Każdy moduł, kolumna, wiersz i sekcja zawiera ustawienia projektowe zarówno dla stanu domyślnego, jak i stanu najechania. Otwiera to drzwi do wywoływania wielu efektów najechania podczas łączenia tych elementów.

W tym samouczku pokażę, jak jednocześnie wywołać efekty najechania dla modułu, kolumny i wiersza. Sztuką jest upewnienie się, że wszystkie elementy mają ten sam rozmiar i przestrzeń do najechania. Ale gdy już masz elementy na swoim miejscu, możesz być niezwykle kreatywny dzięki efektom najechania i projektom.

Zacznijmy.

zapowiedź

Oto szybki przykład tego, jak wygląda jednoczesne wyzwalanie efektów najechania różnych elementów Divi.

Pobierz przykład projektu ZA DARMO

Aby położyć swoje ręce na projekcie z tego samouczka, najpierw musisz go 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!

Aby zaimportować układ na swoją stronę, po prostu wyodrębnij plik zip i przeciągnij plik json do Divi Builder.

Subskrybuj nasz kanał YouTube

Przejdźmy do samouczka, dobrze?

Zrozumienie, jak wyzwalać stany zawisu na wielu elementach Divi jednocześnie.

Każdy element w Divi (sekcja, wiersz lub moduł) ma swoją własną przestrzeń najechania, która jest zasadniczo wielkością samego elementu.

Każdy z tych elementów ma wbudowane opcje wskaźnika myszy, które są aktywowane po najechaniu kursorem na ten element lub którykolwiek z elementów podrzędnych, które zawiera.

Na przykład, jeśli dodałeś opcje najechania do sekcji, te opcje najechania staną się aktywne za każdym razem, gdy najedziesz na sekcję.

Następnie, jeśli najedziesz kursorem na miejsce najechania na wiersz wewnątrz sekcji, aktywujesz opcje najechania zarówno dla wiersza, jak i sekcji. Dzieje się tak, ponieważ wiersz jest elementem podrzędnym sekcji.

Za każdym razem, gdy najedziesz kursorem na kolumnę, aktywujesz stan najechania na kolumnę, wiersz i sekcję.

I wreszcie, za każdym razem, gdy najedziesz kursorem na moduł, wyzwalasz stan najechania dla modułu i wszystkich jego elementów nadrzędnych (kolumny, wiersza i sekcji).

Domyślnie każdy z tych elementów będzie miał odstępy (wypełnienie), które tworzą luki w przestrzeni najechania, co pozwala użytkownikowi na selektywne najeżdżanie na każdy element. Ale jeśli usuniesz odstępy między każdym elementem, będziesz mógł wywołać stany najechania dla wszystkich elementów jednocześnie.

Otwiera to drzwi dla wielu kombinacji efektów najechania, które mogą wystąpić jednocześnie, gdy połączysz opcje najechania dla każdego elementu i aktywujesz je we wspólnej przestrzeni najechania.

Przykład łączenia efektów zawisu

Oto przykład, jak to działa z Divi.

W poniższym przykładzie mamy wiersz z obrazem tła. Po najechaniu myszą mamy opóźniony cień pudełka, który pojawia się jako rodzaj elementu projektu obramowania.

Wewnątrz wiersza mamy kolumnę, która została wypełniona cieniem czarnej skrzynki. Po najechaniu kursorem cień kolumny jest stopniowo zmniejszany, aby odsłonić obraz tła wiersza.

Wewnątrz kolumny mamy moduł notki, który ma niebieskie tło. Po najechaniu myszą niebieskie tło zmienia się na półprzezroczysty niebieski kolor, dzięki czemu można zobaczyć obraz tła.

Ponieważ między każdym elementem jest odstęp, możemy zobaczyć konkretny efekt najechania każdego elementu, gdy najedziemy kursorem na każdą pojedynczą przestrzeń najechania.

Ale jeśli usuniemy odstępy i nadamy wierszowi niestandardową szerokość, wszystkie elementy będą dzielić tę samą przestrzeń najechania. Lub inaczej mówiąc, moduł zajmuje całą przestrzeń kolumny i wiersza. Kiedy więc najedziemy kursorem na moduł, efekty najechania na moduł, kolumnę i wiersz są aktywowane jednocześnie.

Opóźnienia przejścia działają świetnie z tą konfiguracją

Pamiętaj, że w powyższym przykładzie występują opóźnienia przejścia w efektach najechania na wiersze i kolumny, które naprawdę dobrze podkreślają funkcjonalność tej koncepcji. Gdybyśmy próbowali dodać podobną kombinację efektów najechania tylko do modułu, nie moglibyśmy skorzystać z zastosowania różnych opóźnień i czasów trwania przejścia do każdego efektu najechania osobno.

Odtworzenie przykładu projektu w Divi

Aby dać ci instrukcje, jak to działa w prawdziwym świecie Divi, odtwórzmy opisany powyżej przykład.

Czego potrzebujesz, aby zacząć

Aby rozpocząć, będziesz potrzebować:

1. Zainstalowany i aktywny motyw Divi
2. Nowa strona utworzona w celu zbudowania od podstaw na interfejsie użytkownika (konstruktor wizualny)
3. Obrazy, które mają być wykorzystane do pozorowanych treści

Następnie będziesz mieć puste płótno, aby rozpocząć projektowanie w Divi.

Dodawanie sekcji i wiersza

Pierwszą rzeczą, którą musisz zrobić, to utworzyć zwykłą sekcję z jednokolumnowym wierszem.

Zaktualizuj ustawienia wierszy i kolumn

Następnie otwórz ustawienia wiersza i nadaj wierszowi obraz tła.

Następnie musimy usunąć domyślne dopełnienie, aby nie było przerwy w przestrzeni po najechaniu między wierszem a kolumną.

• Padding: 0px na górze, 0px na dole

Następnie dodaj następujący cień do wiersza po najechaniu.

• Cień pudełka: patrz zrzut ekranu
• Siła rozmycia cieni w pudełku: 0px
• Siła rozprzestrzeniania się cienia pola: 0px (komputer), 10px (najechanie)
• Kolor cienia: #063c68

Następnie zaktualizuj opcje przejścia o czas trwania i opóźnienie w następujący sposób:

• Czas trwania przejścia: 500 ms
• Opóźnienie przejścia: 700ms

Teraz otwórz ustawienia kolumny i zaktualizuj następujące elementy:

• Cień pudełka: patrz zrzut ekranu
• Siła rozmycia cieni w pudełku: 0px
• Siła rozprzestrzeniania się cienia w pudełku: 200px (komputer), 0px (najechanie)
• Kolor cienia: #000000
• Czas trwania przejścia: 500 ms
• Opóźnienie przejścia: 200 ms

Dodaj moduł Blurb

Teraz dodaj moduł notki do rzędu.

Następnie zaktualizuj notkę w następujący sposób:

• Obraz: [wstaw zdjęcie rozmycia]
• Kolor tła: #0c71c3
• Kolor tła (najechanie): rgba (12 113 195 0,35)

• Wyrównanie tekstu: do środka
• Kolor tekstu: jasny
• Padding: 20px góra, 20px dół, 20px lewo, 20px prawo

Ostateczny wynik

Sprawdź efekt końcowy.

Końcowe myśli i wskazówki

Zrozumienie sposobu wyzwalania stanów najechania dla wielu elementów Divi jednocześnie otwiera kilka ekscytujących możliwości projektowych. Przykład w tym poście przedstawia tylko kilka z wielu kombinacji efektów najechania, które są możliwe, gdy połączysz stany najechania modułu, kolumny i wiersza. Co więcej, nie zbadaliśmy nawet możliwości, które wiążą się z połączeniem opcji najechania na sekcję, co dałoby jeszcze więcej opcji najechania. Podczas samodzielnego odkrywania tych efektów najechania, oto kilka wskazówek i pomysłów, które pomogą Ci w tym.

• Użyj cienia pudełka zamiast obramowań – obramowania faktycznie dodają dodatkowe miejsce do elementu, co może powodować niechciane przerwy w najechaniu. Cienie pudełkowe dodają element projektu, który nie dodaje rzeczywistej przestrzeni.
• Eksploruj efekty najazdu przejścia w tle – każdy element Divi ma opcje najechania w tle, które można łączyć w celu uzyskania warstw kreatywnych efektów najechania.
• Użyj opcji przekształcenia po najechaniu — opcje przekształcenia po najechaniu mogą dodać element kreatywny, taki jak skalowanie i obracanie elementów po najechaniu myszą. Jednak obracanie wielu elementów po najechaniu może być trudne, ponieważ spowoduje to przeskakiwanie.
• Skorzystaj z opcji przejścia — dodanie różnych czasów trwania przejścia i opóźnień w stanie najechania każdego elementu może stworzyć unikalne animacje najechania.

Mam nadzieję, że ten samouczek zainspiruje Cię do odkrywania niesamowitych kombinacji efektów zawisu w Divi.

Czekam na kontakt z Państwem w komentarzach.

Pozdrawiam!