Jak przekształcić wiele elementów w abstrakcyjne efekty najechania w Divi
Opublikowany: 2019-05-18Jak już wiesz, Divi ma mnóstwo ustawień projektowych, które pozwalają tworzyć unikalne efekty najechania dla dowolnego elementu Divi (sekcje, wiersze lub moduły). Zwykle efekt najechania jest wyizolowany tylko dla jednego elementu. Na przykład, jeśli dodasz właściwość transform rotate do modułu po najechaniu myszą, ten obrót zostanie aktywowany po najechaniu na moduł. Jeśli jednak dodasz dodatkowy efekt najechania do wiersza zawierającego moduł, spowoduje to dodanie kolejnej warstwy efektów najechania kursorem na moduł. To otwiera drzwi dla niektórych wyjątkowo abstrakcyjnych efektów zawisu.
W tym samouczku dowiemy się, jak przekształcić wiele elementów w abstrakcyjne efekty najechania za pomocą wbudowanych ustawień Divi. A ponieważ w tym projekcie będziemy używać wierszy nieco inaczej, pokażę Ci, jak utworzyć układ siatki dla wierszy, aby móc zaprezentować te efekty najechania w galerii (jeśli chcesz).
Zacznijmy.
zapowiedź
Pobierz opcję Przekształć wiele elementów w układzie najechania za DARMO
Aby położyć swoje ręce na projektach 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 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.
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.
Przejdźmy do samouczka, dobrze?
Pierwsze kroki
Subskrybuj nasz kanał YouTube
Do tego samouczka potrzebne będą:
- Zainstalowany i aktywny motyw Divi
- Kilka zdjęć. Używam obrazów z naszych gotowych układów dostępnych z poziomu Divi Builder
Gdy będziesz gotowy, przejdź do pulpitu nawigacyjnego WordPress. Następnie utwórz nową stronę (Strony > Dodaj nową), nadaj swojej stronie tytuł i wdróż Divi Builder. Wybierz opcję „Buduj od podstaw”.
Teraz Twoje puste płótno czeka!
Abstrakcyjne efekty najechania na obraz
Ten pierwszy projekt połączy efekty najechania kursorem z transformacją ukośną w rzędzie i moduł obrazu, aby stworzyć efekt wachlarza dla naszego obrazu po najechaniu. Oprócz fajnego wyglądu, ten efekt może również służyć jako pomocna interakcja w interfejsie użytkownika, która informuje użytkownika, że po kliknięciu obrazu zobaczysz więcej obrazów. Możesz więc użyć obrazu jako linku do strony galerii, jeśli chcesz.
Oto jak to zrobić.
Najpierw utwórz nową zwykłą sekcję z jednokolumnowym wierszem.
Następnie dodaj moduł obrazu do wiersza.
Następnie dodaj wgraj obraz do modułu.
Dodaj efekty najechania modułu obrazu
Teraz możemy dodać kilka efektów najechania na transformację do obrazu, które będą skalować, obracać i pochylać obraz. Aby to zrobić, przejdź do opcji transformacji i zaktualizuj następujące elementy:
Przekształć skalę osi X i Y: 110%
Przekształć Obróć oś Z: 9deg
Przekształć pochylenie osi X i Y: 3deg
Otóż to! Dość proste. Teraz musimy dostosować wiersz, aby dodać kolejny efekt najechania, który aktywuje się po najechaniu na elementy.
Ustawienia wiersza
Aby ten projekt działał, rząd musi mieć taki sam rozmiar jak obraz w nim, aby obszar najechania był taki sam dla obu. Umożliwi nam to dodanie różnych efektów najechania zarówno dla modułu, jak i wiersza, które zostaną aktywowane po najechaniu kursorem na moduł (lub w tym przypadku na obraz). Działa to, ponieważ najechanie kursorem na moduł w rzędzie aktywuje efekty najechania w taki sam sposób, jak w przypadku najechania kursorem na wiersz. A ponieważ mamy inny efekt najechania na moduł, oba efekty najechania aktywują się po najechaniu na moduł. Dzięki temu możemy użyć kombinacji abstrakcyjnych efektów najechania za pomocą cienia pola, przekształcenia skosu i przekształcenia obrotu zarówno do wiersza, jak i modułu.
Mamy już efekty najechania naszego modułu dla naszego obrazu, teraz musimy dostosować rozmiar naszego wiersza. W zależności od rozmiaru obrazu, moduł powinien już obejmować całą szerokość wiersza, więc technicznie nie ma potrzeby dostosowywania szerokości wiersza. Ale w tym przykładzie zmniejszę wiersz, aby zrobić miejsce dla naszych efektów najechania.
Zaktualizuj ustawienia wiersza w następujący sposób:
Maksymalna szerokość: 400px
Ponieważ chcemy, aby wysokość naszego wiersza odpowiadała obrazowi w nim, musimy pozbyć się domyślnego dopełnienia górnego i dolnego:
Niestandardowe wypełnienie: 0px na górze, 0px na dole
Teraz musimy dodać obraz tła do kolumny wiersza. Ten obraz tła pojawi się za każdym razem, gdy moduł obrazu przekształci efekt najechania kursorem pochylony i obrócony.
Obraz tła kolumny 1: [wprowadź obraz]
Kontynuuj aktualizację wiersza z cieniem prostokątnym po najechaniu w następujący sposób:
Cień pudełka: patrz zrzut ekranu
Pozycja pozioma cienia ramki: 0px (domyślnie), -30px (najechanie)
Pozycja pionowa cienia ramki: 0px (domyślnie), -15px (najechanie)
Kolor cienia: #002f66
Ten cień pola dodaje efekt innego obrazu pojawiającego się za obrazem tła wiersza, który pojawi się po dodaniu naszych efektów najechania na transformację, które obrócą i przekrzywią obraz tła.
Na koniec jesteśmy gotowi dodać właściwość przekształcenia skośnego, aby dodać dodatkowy efekt najechania na wiersz.
Przekształć pochylenie osi X i Y: -3deg
Ostateczny wynik
Oto ostateczny wynik.
Będzie też ładnie skalować się na urządzeniach mobilnych.
Abstrakcyjne efekty najechania na wezwanie do działania (przykład 1)
Ustawienia wiersza
Utwórz nową zwykłą sekcję z jednym wierszem kolumny.
Następnie zaktualizuj ustawienia wiersza w następujący sposób:
Kolumna 1 Gradient tła w lewo Kolor: rgba (34,43,58,0.71)
Kolumna 1 Gradient prawego koloru tła: #222b3a
Obraz tła: [wstaw obraz]
Maksymalna szerokość: 400px
Niestandardowe wypełnienie: 0px na górze, 0px na dole
Wrócimy do ustawień wiersza, aby za chwilę uzupełnić nasze abstrakcyjne efekty najechania, ale na razie dodajmy do wiersza nasz moduł wezwania do działania.
Ustawienia modułu wezwania do działania
Otwórz ustawienia modułu wezwania do działania i zaktualizuj zawartość w następujący sposób:
Tytuł: Podróżuj z punktami
Tekst przycisku: Kliknij tutaj
Treść: tylko przez ograniczony czas
URL linku do przycisku: # (tylko po to, aby na razie aktywować przycisk)
Użyj koloru tła: NIE
Następnie zaktualizuj ustawienia projektu dla tekstu i odstępów modułu.
Czcionka tytułu: Gilda Display
Rozmiar tekstu przycisku: 16px
Kolor tekstu przycisku: #ffb238
Kolor tła przycisku: rgba (0,0,0,0)
Szerokość obramowania przycisku: 0px
Niestandardowe wypełnienie: 20% na górze, 20% na dole
Teraz dodaj obramowanie do modułu.
Szerokość obramowania: 2px
Kolor obramowania: #222b3a
To dba o nasz domyślny projekt. Teraz czas na zabawną część. Pamiętaj, ponieważ nasz wiersz i moduł mają zasadniczo ten sam rozmiar (wysokość i szerokość), obszar po najechaniu będzie taki sam dla obu. Innymi słowy, efekty najechania, które dodamy do wiersza i modułu, aktywują się po najechaniu na elementy. Dzięki temu możemy użyć kombinacji abstrakcyjnych efektów najechania za pomocą cienia pola, przekształcenia skosu i przekształcenia obrotu zarówno do wiersza, jak i modułu.
Zacznijmy od efektów najechania wiersza.
Efekty najechania na wiersz
Po pierwsze, możemy dodać cień pudełka po najechaniu na nasz wiersz. Otwórz ustawienia wiersza i zaktualizuj następujące elementy:
Cień pudełka: patrz zrzut ekranu
Pozycja pozioma cienia ramki: 0px (domyślnie), 90px (najechanie)
Pozycja pionowa cienia ramki: 0px (domyślnie), 80px (najechanie)
Siła rozprzestrzeniania się cieni w pudełku: 0px (domyślnie), -40px (najechanie)
Kolor cienia: #ffb238
Pamiętaj, że cień pudełka odziedziczy również opcje transformacji, które dodamy w następnej kolejności.
Teraz dodajmy właściwość przekształcania obracania i pochylania po najechaniu myszą.
Przekształć Obróć oś X (najechanie): 10deg
Przekształć oś X Skew (najechanie): -4deg
Przekształć oś skośną Y (najechanie): -4deg
To dba o efekty zawisu w rzędzie. Teraz musimy dodać efekt najechania do modułu Call to Action, który dopełni projekt.
Efekty najechania modułu wezwania do działania
Otwórz ustawienia modułu wezwania do działania i nadaj mu efekt najechania cieniem pola w następujący sposób:
Cień pudełka: patrz zrzut ekranu
Pozycja pozioma cienia pudełka: 0px
Pozycja pionowa cienia ramki: 0px (domyślnie), 30px (najechanie)
Kolor cienia: #ffffff
Na koniec dodaj skalę, obróć i pochyl właściwość przekształcenia po najechaniu kursorem w następujący sposób:
Skala transformacji osi X i Y (najechanie): 115%
Przekształć Obróć oś Z (najechanie): 9deg
Przekształć oś X Skew (najechanie): 3deg
Przekształć oś skośną Y (najechanie): 3deg
Zwiększenie rozmiaru modułu za pomocą funkcji skalowania po najechaniu myszą pomoże zminimalizować ryzyko, że użytkownik najedzie myszą na element wiersza zamiast na moduł.
Ostateczny wynik
Oto efekt końcowy efektu najechania. Zwróć uwagę, jak zarówno efekty najechania na wiersz, jak i efekty najechania modułu aktywują się po najechaniu myszą, aby pochylić elementy w abstrakcyjnym projekcie.
Oto, jak będzie wyglądał efekt najechania na telefonie komórkowym. Ponieważ jednak większość przeglądarek mobilnych wymaga dotknięcia, aby aktywować efekt najechania, możesz chcieć wyłączyć efekt najechania na urządzeniu mobilnym, aby uniknąć konieczności dwukrotnego stuknięcia przez użytkownika, jeśli używasz modułu jako łącza.
Abstrakcyjne efekty najechania na wezwanie do działania (przykład 2)
Aby przyspieszyć projektowanie tego kolejnego abstrakcyjnego efektu najechania, skopiujmy sekcję zawierającą nasz pierwszy przykład. Teraz wszystko, co musimy zrobić, to wprowadzić drobne poprawki do projektu i efekty najechania, aby uzyskać unikalny projekt.
Aktualizuj ustawienia wiersza
Najpierw zaktualizuj ustawienia wiersza w następujący sposób:
Przekształć Obróć oś Z: -5deg
Przekształć pochylenie osi X i Y: -4deg
Zaktualizuj ustawienia modułu wezwania do działania
Teraz dostosujmy ustawienia modułu w następujący sposób:
Najpierw usuń granicę…
Szerokość obramowania: 0px
Następnie zaktualizuj cień pudełka w następujący sposób:
Pole Cień Pozycja pozioma: 0px
Pozycja pionowa cienia pudełka: 110px
(upewnij się i wyłącz efekt najechania odziedziczony z poprzedniego projektu, który zduplikowałeś)
Kolor cienia: #ffb238
Teraz możemy zaktualizować nasze efekty najechania właściwością transformacji. Tutaj zasadniczo zmniejszamy nieco skalę i dodajemy wartości ujemne do naszych poprzednich właściwości transformacji obrotu i pochylenia, aby przesunąć element w przeciwnym kierunku po najechaniu myszą.
Zaktualizuj następujące opcje transformacji:
Przekształć skalę osi X i Y (najechanie): 110%
Przekształć Obróć oś Z (najechanie): -9deg
Przekształć oś X Skew (najechanie): -3deg
Przekształć oś skośną Y (najechanie): -3deg
Tworzenie układu siatki dla swoich wierszy
Ponieważ ten projekt wymaga, aby wiersz nadrzędny zawijał się wokół modułu i miał taką samą wysokość i szerokość, tak naprawdę nie masz możliwości tworzenia układu kolumn jak zwykle. Możesz jednak użyć właściwości flex do wyrównania wierszy poziomo w układzie siatki.
Aby to zrobić, najpierw zduplikuj wiersz zawierający twój moduł kilka razy, aby mieć trzy wiersze w jednej sekcji.
Następnie dodaj niestandardowy margines do każdego wiersza:
Margines niestandardowy: 50 pikseli góra, 50 pikseli dół
Następnie otwórz ustawienia sekcji i po prostu dodaj następujący niestandardowy kod CSS do elementu głównego.
display: flex; flex-wrap: wrap;
Teraz masz trzy kolumny wierszy, które będą odpowiadać rozmiarowi Twojej przeglądarki.
Końcowe przemyślenia
Przekształcanie wielu elementów po najechaniu kursorem zapewnia kolejny poziom kreatywności, który możesz odkryć. Przykłady w tym samouczku miały pokazać, co jest możliwe, ale możesz swobodnie modyfikować projekty dla własnego projektu. Jak można się spodziewać, jeśli chcesz, możesz stać się całkiem zwariowany. Ale możesz też być nieco bardziej konserwatywny, tworząc subtelny element projektu interakcji, taki jak przykład modułu obrazu w tym samouczku.
Czekam na kontakt z Państwem w komentarzach.
Pozdrawiam!