Ponieważ nowe opcje doboru rozmiaru Divi zostały wydane, istnieje kilka samouczków, które pokazują, jak tworzyć odsłonięcia po najechaniu myszką. W tych samouczkach treść zamaskowany został umieszczony pionowo. Jednakże w niektórych przypadkach może zaistnieć potrzeba utworzenia poziomego boniowania. W tym samouczku pokażemy, jak odsłonić obrazy za pomocą siatek najechanych kursorem i opcji przepełnienia. Divi. Wykonanie tej pracy wymaga nieco innego podejścia. Użyjemy rzędu jednej kolumny i umieścimy wszystkie moduły jeden pod drugim. Po najechaniu myszą zmienimy kolumnę w poziomą siatkę. Możesz również pobrać plik JSON za darmo!
Chodźmy.
badanie
Zanim przejdziemy do samouczka, przyjrzyjmy się, jak to wygląda na różnych rozmiarach ekranu.
Zacznijmy od nowa!
Dodaj nową sekcję
Zacznij od dodania nowej regularnej sekcji do strony, nad którą pracujesz.
Dodaj nową linię
Struktura kolumny
Kontynuuj dodawanie nowego wiersza, używając następującej struktury kolumn:
Domyślne tło gradientowe
Nie dodając jeszcze żadnych modułów, otwórz ustawienia wierszy i dodaj następujące tło gradientowe:
- Kolor 1: #b1ffc4
- Kolor 2: #ffffff
- Typ gradientu: promieniowy
- Kierunek promieniowy: środek
- Pozycja początkowa: 28%
- Pozycja końcowa: 28%
Najechanie kursorem na tło gradientowe
Zmień tło gradientowe po najechaniu kursorem.
- Kolor 1: #b1ffc4
- Kolor 2: #ffffff
- Typ gradientu: promieniowy
- Kierunek promieniowy: w lewo
- Pozycja początkowa: 5%
- Pozycja końcowa: 5%
rozstaw
Przejdź do ustawień odstępów, a następnie zmień wartości dopełnienia i marginesu.
- Top Padding: 0px
- Dolne wypełnienie: 0px
- Górny margines: 50px
- Dolny margines: 50px
Domyślna granica
Dodaj promień obramowania o długości 50 pikseli w prawym górnym i prawym dolnym rogu.
Najedź na granicę
Podczas przesuwania kursora przywróć rogi do „0px”.
Domyślny cień
Następnie dodaj subtelny cień pudełkowy, korzystając z następujących ustawień:
- Box Shadow Blur Force: 50px
- Kolor cienia: rgba (0,0,0,0.09)
Hover Box Shadow
Usuń cień pola po najechaniu kursorem, zmieniając kolor cienia na całkowicie przezroczysty.
- Kolor cienia: rgba (0,0,0,0)
Dodaj moduł tekstowy do kolumny
Dodaj zawartość H2
Czas zacząć dodawać moduły, zaczynając od modułu tekstowego. Wejdz do treść H2 według własnego wyboru.
Ustawienia tekstu H2
Przejdź do zakładki Projekt i odpowiednio zmień ustawienia tekstu H2:
- Tytuł 2 Czcionka: Acme
- Nagłówek 2 Styl czcionki: podkreślony
- Tytuł 2 Kolor podkreślenia: #00ff3f
- Tytuł 2 Kolor tekstu: #000000
- Nagłówek 2 Rozmiar tekstu: 3vw
rozstaw
Następnie dodaj niestandardowe wartości wypełnienia.
- Najlepsze wypełnienie: 6vw
- Wyściółka u dołu: 7vw
- Lewe wypełnienie: 2vw
Dodaj moduł obrazu do kolumny
Załaduj obrazek
Drugim modułem, którego potrzebujemy w tej kolumnie, jest moduł obrazu. Prześlij wybrany obraz poziomy.
świetlna skrzynka
Następnie włącz opcję lightbox w ustawieniach linku.
- Otwórz w przeglądarce: tak
zaklejania
I wymuś pełną szerokość obrazu w ustawieniach rozmiaru. Dzięki temu obraz będzie reagował na wszystkie rozmiary ekranów.
- Wymuś pełną szerokość: Tak
Dwukrotnie sklonuj moduł obrazu
Po ukończeniu pierwszego modułu obrazu możesz go skopiować dwukrotnie.
Zmień obrazy
Zmień obrazy w dwóch duplikatach. Upewnij się, że przesyłane obrazy mają ten sam wymiar co pierwsze zdjęcie.
Dodaj efekt najechania na linię
zaklejania
Teraz, gdy mamy już za sobą podstawowe ustawienia wierszy i modułów, czas stworzyć efekt najechania! Zaczniemy od zmiany wysokości i szerokości linii oraz ukrycia przepełnień. Otwórz ustawienia rozmiaru linii i wprowadź następujące zmiany:
- Użyj niestandardowej szerokości rynny: Tak
- Szerokość rynny: 1
- Szerokość: 20%
- Maksymalna szerokość: 100%
- Wysokość: 15.9vw
Unieś
Po najechaniu kursorem przywróć szerokość do „100%”. Umożliwi to wyświetlenie obrazów po najechaniu kursorem na wiersz.
- Szerokość: 100%
widoczność
Przejdź do następnej zakładki zaawansowanej i ukryj przepełnienia. Zapewni to, że obrazy zostaną zamaskowane przed odwiedzający najedź (komputer) lub kliknij (tablet/mobile) na moduł tekstowy.
- Przelew poziomy: ukryty
- Przelew pionowy: ukryty
Przejścia
Zmieniamy także czas trwania przejścia w ustawieniach przejścia.
- Czas przejścia: 0ms
Mistrz przesuwania kolumny
Aby utworzyć siatkę po najechaniu myszką, otworzymy ustawienia kolumn, przejdziemy do zakładki Opcje zaawansowane i w głównym elemencie najechania umieścimy następujące linie kodu CSS:
wyświetlacz: siatka; kolumny szablonu siatki: 20% 25% 25% 25%; przerwa w siatce: 10px;
Klonuj linię dwa razy
Po ukończeniu pierwszej linii możesz ją sklonować tyle razy, ile chcesz. W tym konkretnym przykładzie projektu klonujemy linię dwukrotnie.
Zmień gradientowe tło wiersza nr 1
Zmień kolor pierwszego gradientu tła gradientu drugiego rzędu.
- Kolor 1: #ffdc96
Zmień tło gradientowe linii nr 2
Zrób to samo dla trzeciego rzędu.
- Kolor 1: #b7c7ff
Zmień kopię modułu tekstowego i kolor podkreślenia dwóch duplikatów
Kontynuuj, zmieniając kolor podkreślenia duplikatów modułu tekstowego z kopią i gotowe!
- Podkreśl kolor nr 1: #ffaa00
- Kolor podkreślenia nr 2: #0037ff
końcowe przemyślenia
W tym samouczku pokazaliśmy, jak wyświetlać obrazy w poziomych siatkach przy użyciu opcji przepełnienia. Divi. Obrazy zostały ujawnione po najechaniu kursorem na komputer i kliknięciu na tablecie/telefonie. Chociaż ujawniliśmy obrazy, możesz ujawnić treść według własnego wyboru, modyfikując parametry w generatorze. Mamy nadzieję, że ten samouczek zainspiruje Cię do stworzenia własnych alternatywnych projektów siatki! Jeśli masz jakieś pytania lub sugestie, zostaw komentarz w sekcji komentarzy poniżej!
