Jak wyświetlać obrazy za pomocą poziomych siatek w najechaniu i ukrytego przepełnienia w Divi

Odkąd pojawiły się nowe opcje rozmiaru Divi, stworzyliśmy kilka samouczków, które pokazują, jak tworzyć odsłony po najechaniu. W tych samouczkach ukryta zawartość została umieszczona pionowo. Jednak w niektórych przypadkach zamiast tego warto utworzyć boniowanie poziome. W tym poście pokażemy, jak ujawniać obrazy za pomocą siatek najechania i opcji przepełnienia Divi. Wykonanie tej pracy wymaga nieco innego podejścia. Użyjemy wiersza jednokolumnowego i umieścimy wszystkie moduły pod sobą, a po najechaniu kursorem przekształcimy kolumnę w poziomą siatkę. Będziesz mógł również pobrać plik JSON za darmo!

Weźmy się za to.

Zapowiedź

Zanim zagłębimy się w samouczek, rzućmy okiem na wyniki na różnych rozmiarach ekranu.

Pulpit

mobilny

Pobierz układ Hover Grids ZA DARMO

Aby położyć ręce na darmowym układzie siatek, musisz najpierw pobrać go 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!

Zacznijmy odtwarzać!

Subskrybuj nasz kanał YouTube

Dodaj nową sekcję

Zacznij od dodania nowej zwykłej sekcji do strony, nad którą pracujesz.

Dodaj nowy wiersz

Struktura kolumny

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

Domyślne tło gradientowe

Nie dodając jeszcze żadnych modułów, otwórz ustawienia wiersza i dodaj następujące tło gradientowe:

• Kolor 1: #b1ffc4
• Kolor 2: #ffffff
• Typ gradientu: Promieniowy
• Kierunek promieniowy: Środek
• Pozycja startowa: 28%
• Pozycja końcowa: 28%

Unosić tło gradientowe

Zmień tło gradientowe po najechaniu myszą.

• Kolor 1: #b1ffc4
• Kolor 2: #ffffff
• Typ gradientu: Promieniowy
• Kierunek promieniowy: w lewo
• Pozycja startowa: 5%
• Pozycja końcowa: 5%

Rozstaw

Przejdź do ustawień odstępów, a następnie zmień wartości dopełnienia i marginesów.

• Górna wyściółka: 0px
• Dolna wyściółka: 0px
• Górny margines: 50px
• Margines dolny: 50px

Domyślna ramka

Następnie dodaj promień obramowania „50px” w prawym górnym i prawym dolnym rogu.

Wskaż granicę

Przywróć rogi do „0px” po najechaniu.

Domyślny cień pudełka

Następnie dodaj subtelny cień do pudełka, korzystając z następujących ustawień:

• Siła rozmycia cieni w pudełku: 50px
• Kolor cienia: rgba (0,0,0,0,09)

Wskaż cień pola

Usuń cień pudełka po najechaniu kursorem, zastępując kolor cienia całkowicie przezroczystym.

• 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. Wprowadź wybrane przez siebie treści H2.

Ustawienia tekstu H2

Przejdź do zakładki projektu i odpowiednio zmień ustawienia tekstu H2:

• Czcionka nagłówka 2: Acme
• Styl czcionki nagłówka 2: Podkreślenie
• Nagłówek 2 Kolor podkreślenia: #00ff3f
• Kolor tekstu nagłówka 2: #000000
• Rozmiar tekstu nagłówka 2: 3vw

Rozstaw

Następnie dodaj kilka niestandardowych wartości dopełnienia.

• Górna wyściółka: 6vw
• Dolna wyściółka: 7vw
• Lewa wyściółka: 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.

Lightbox

Włącz opcję lightbox w ustawieniach linków dalej.

• Otwórz w Lightbox: Tak

Rozmiary

I wymuś pełną szerokość obrazu w ustawieniach rozmiaru. Dzięki temu obraz będzie responsywny na wszystkich rozmiarach ekranu.

• Wymuś pełną szerokość: tak

Klonuj moduł obrazu dwa razy

Po ukończeniu pierwszego modułu obrazu możesz go sklonować dwukrotnie.

Zmień obrazy

Zmień obrazy w obu duplikatach. Upewnij się, że przesyłane obrazy mają taki sam wymiar jak pierwszy obraz.

Dodaj efekt najechania na wiersz

Rozmiary

Teraz, gdy zakończyliśmy podstawowe ustawienia wierszy i modułów, czas wprowadzić efekt najechania! Zaczniemy od zmodyfikowania wysokości i szerokości wiersza oraz ukrycia przepełnień. Otwórz ustawienia rozmiaru wiersza i wprowadź następujące zmiany:

• Użyj niestandardowej szerokości rynny: Tak
• Szerokość rynny: 1
• Szerokość: 20%
• Maksymalna szerokość: 100%
• Wzrost: 15,9 vw

Rozmiar po najechaniu kursorem

Przywróć szerokość do „100%” po najechaniu. Umożliwi to wyświetlenie obrazów po najechaniu na wiersz.

• Szerokość: 100%

Widoczność

Przejdź do zakładki Zaawansowane i ukryj przepełnienia. Dzięki temu obrazy będą ukryte, zanim odwiedzający najadą kursorem (komputer) lub klikną (tablet/urządzenie mobilne) w module tekstowym.

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

Przejścia

Zmieniamy również czas trwania przejścia w ustawieniach przejść.

• Czas trwania przejścia: 0 ms

Główny element zawisu kolumny

Aby utworzyć siatkę po najechaniu myszą, otwieramy ustawienia kolumn, przechodzimy do zakładki zaawansowane i umieszczamy następujące wiersze kodu CSS w głównym elemencie hover:

display: grid;
grid-template-columns: 20% 25% 25% 25%;
grid-gap: 10px;

Klonuj rząd dwa razy

Po ukończeniu pierwszego rzędu możesz go sklonować dowolną liczbę razy. W tym konkretnym przykładzie projektu klonujemy wiersz dwukrotnie.

Zmień zduplikowany wiersz #1 gradientowe tło

Zmień pierwszy kolor gradientu tła gradientu drugiego wiersza.

• Kolor 1: #ffdc96

Zmień zduplikowany wiersz #2 gradientu tła

Zrób to samo dla trzeciego rzędu.

• Kolor 1: #b7c7ff

Zmień kolor kopiowania i podkreślenia modułu tekstowego obu duplikatów

Kontynuuj, modyfikując kolor podkreślenia obu duplikatów modułu tekstowego wraz z kopią i gotowe!

• Podkreśl kolor #1: #ffaa00
• Podkreśl kolor #2: #0037ff

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 wyświetlać obrazy w poziomych siatkach po najechaniu za pomocą opcji przepełnienia Divi. Obrazy zostały ujawnione po najechaniu na pulpit i kliknięciu na tablecie/telefonie. Chociaż ujawniliśmy obrazy, możesz ujawnić dowolne treści, dostosowując ustawienia w kreatorze. Mamy nadzieję, że ten samouczek zainspiruje Cię również do stworzenia własnych alternatywnych projektów siatek najazdu! Jeśli masz jakieś pytania lub sugestie, koniecznie zostaw 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.