Jak stworzyć rozszerzający się efekt najechania dla układów siatki w Divi

Dodanie rozszerzającego się efektu najechania do układu siatki to wyjątkowy sposób na zaangażowanie odbiorców w interakcję z zawartością strony. Pomysł polega na tym, aby zacząć od kompaktowego wyświetlania siatki, a następnie rozwinąć tę siatkę, aby wysunąć zawartość siatki na pierwszy plan, gdy użytkownik najedzie kursorem na element w Divi. Jest to świetne rozwiązanie do rozszerzania galerii obrazów, aby wyświetlić większą galerię (z większymi obrazami) po najechaniu myszą. Możesz także rozszerzyć grupę notek, aby zachęcić odwiedzających do zapoznania się z Twoimi usługami.

Zacznijmy.

zapowiedź

Oto zajawka przykładów rozszerzających się efektów najechania, które omówię w tym samouczku.

Pierwsze kroki

W tym samouczku wszystko, czego naprawdę potrzebujesz, to Divi. Będziemy również korzystać z gotowego układu strony informacyjnej agencji projektowej dostępnego w Divi Builder, aby rozpocząć projektowanie.

Aby rozpocząć, utwórz nową stronę, nadaj jej tytuł i kliknij, aby użyć Divi Builder. Następnie wybierz opcję Wybierz gotowy układ. Z okna wyskakującego ładowania z biblioteki wybierz pakiet układu agencji projektowej, a następnie kliknij, aby użyć strony Informacje o agencji projektowej.

Po załadowaniu układu na stronę opublikuj go. W tym samouczku będę używał konstruktora Divi na interfejsie. Aby to zrobić, wystarczy kliknąć przycisk „Build On The Front End” u góry edytora stron zaplecza.

Teraz możesz zacząć!

Rozwijanie Blurbs po najechaniu myszą

W tym pierwszym przykładzie pokażę, jak rozwinąć notki w drugiej części tego układu, które wyświetlają oferowane usługi.

Przenieś moduły Blurb, aby zajmowały tylko jeden rząd

Obecnie dział składa się z dwóch trzykolumnowych rzędów, w każdej z nich znajduje się notka.

Ponieważ dodamy nasz efekt najechania do jednego wiersza, musimy przenieść notki z dolnego rzędu do górnego. Upewnij się, że każda kolumna w górnym rzędzie zawiera dwie notki.

Następnie usuń pusty dolny wiersz.

Dostosowywanie modułów Blurb

Następnie użyjemy Multiselect, aby wybrać wszystkie sześć notatek, aby móc zastosować ten sam projekt do wszystkich jednocześnie. Aby to zrobić, przytrzymaj klawisz ctrl (lub cmd) i klikaj każdy z modułów notki, aż wszystkie zostaną wybrane. Następnie kliknij ikonę ustawień na jednej z notatek, aby otworzyć modalne ustawienia elementu.

Śmiało wyjmij zawartość znalezioną w polu zawartości, a następnie zaktualizuj ustawienia projektu w następujący sposób:

Rozmiar tekstu tytułu 16px
Szerokość: 150px
Wyrównanie modułu: środek
Niestandardowe dopełnienie: 10px góra, domyślnie dół, domyślnie po lewej, domyślnie po prawej

Nadanie modułom niestandardowej szerokości 150px powoduje, że tekst tytułu jest zablokowany na miejscu, gdy rozwijamy wiersz.

Zapisz zmiany i wyjdź z multiselect.

Spraw, aby centrum uwagi było bardziej wyraźne

Następnie otwórz ustawienia modułu notatek dla górnej notki w drugiej kolumnie zatytułowanej „Tożsamość marki”. Następnie zaktualizuj następujące elementy:

Rozmiar czcionki ikony: 120px
Rozmiar tekstu tytułu: 18px (domyślnie)

To po prostu sprawia, że ​​notatka centralna jest bardziej wyraźna jako środkowa część, z której inne notki będą rozszerzać się na zewnątrz.

Dostosowywanie wiersza do rozwijania po najechaniu kursorem

Aby rozbudować nasze moduły po najechaniu myszą, dostosujemy rozmiar i rozstaw rzędu. Otwórz ustawienia wiersza i zaktualizuj następujące elementy:

Szerokość niestandardowa: 750px
Szerokość rynny: 4
Niestandardowe dopełnienie (domyślnie): 150px po lewej, 150px po prawej
Niestandardowe wypełnienie (najechanie): 0px w lewo, 0px w prawo
Niestandardowe wypełnienie (tablet): 0px w lewo, 0px w prawo

Zmiana wartości dopełnienia po najechaniu myszą tworzy efekt rozszerzającego się najechania. Wiersz rozszerzy się o 150 pikseli w prawo i 150 pikseli w lewo.

Sprawdź efekt końcowy.

Tworzenie siatki kołowej

Jeśli chcesz utworzyć okrągły układ siatki, który się rozszerza, wystarczy kilka drobnych korekt.

Najpierw zduplikuj jedną z zewnętrznych notatek i przeciągnij ją nad dużą notkę w drugiej kolumnie. Następnie usuń tekst tytułu ze środkowej notki z dużą ikoną.

Aby wyrównać notki w pionie, możesz dodać mały fragment niestandardowego kodu CSS. Otwórz ustawienia wiersza i dodaj następujący niestandardowy kod CSS do elementu głównego:

align-items: center;

Teraz sprawdź wynik.

Rozszerzanie siatki w prawo

Możesz także rozwinąć siatkę w lewo lub w prawo. Po prostu uporządkuj swoje moduły, a następnie zaktualizuj niestandardowe wypełnienie wiersza. Na przykład, jeśli chcesz rozwinąć zawartość w prawo, ustaw domyślne niestandardowe dopełnienie na 0 pikseli w lewo i 300 pikseli w prawo.

Jak to wygląda na urządzeniach mobilnych

Oto, do czego powróci projekt na tablecie i smartfonie. Rozszerzający się efekt najechania nie będzie również aktywny na urządzeniach mobilnych.

Dodawanie rozszerzającego efektu najechania do galerii obrazów

Możesz także rozwinąć galerię obrazów po najechaniu myszą za pomocą modułu galerii, aby zaprezentować większy układ siatki z większymi obrazami. Aby to zrobić, zlokalizuj sekcję na dole strony „Nasza praca”.

Następnie dodaj nowy jednokolumnowy wiersz pod wierszem z trzema obrazami. W wierszu dodaj moduł galerii.

Zaktualizuj ustawienia modułu galerii w następujący sposób:

Dodaj do galerii 4 obrazy o tych samych wymiarach, aby wyglądały tak samo w całym rzędzie.

Liczba obrazów: 4
Pokaż tytuł i podpis: NIE
Pokaż paginację: Nie

Następnie przejdź do karty projektu i zaktualizuj następujące elementy:

Kolor ikony powiększenia: #353740
Kolor nakładki po najechaniu kursorem: rgba(252,210,29,0.92)

Szerokość (na biurku): 40%
Szerokość (najechanie): 100%
Szerokość (tablet): 100%

Zmiana szerokości modułu galerii po najechaniu myszą tworzy efekt rozszerzającego się najechania. Ustawienie szerokości tabletu na 100% zapobiega również występowaniu efektu najechania na urządzeniu mobilnym.

Oto jak wygląda do tej pory.

Nadal musimy zaktualizować nasze ustawienia wierszy, aby nieco poprawić funkcjonalność i dopasować układ.

Otwórz ustawienia wiersza i zaktualizuj następujące elementy:

Szerokość niestandardowa: 80%
Szerokość rynny: 2
Wyrównaj wysokości kolumn: TAK

Zatrzymywanie efektu rozszerzającego się najechania przed przesuwaniem zawartości w dół strony

Jeśli chcesz, aby galeria obrazów rozwijała się bez przesuwania zawartości strony w dół, możesz to zrobić, ustawiając minimalną wysokość w wierszu. zapewni to lepszy UX, zwłaszcza z przyciskiem znajdującym się bezpośrednio pod galerią.

Przejdź do ustawień wiersza i dodaj następujący niestandardowy kod CSS w elemencie głównym:

min-height: 350px

Następnie dodaj następujący niestandardowy kod CSS w głównym elemencie kolumny:

margin: auto;

Wyrównywanie wysokości kolumn aktywuje właściwość css „display: flex” na zapleczu, która pozwala „margin: auto” na wyrównanie zawartości kolumny do pionowego wyśrodkowania w wierszu, który ma teraz minimalną wysokość 350 pikseli. Dowiedz się więcej o tej koncepcji w naszym pełnym artykule o tym, jak wyrównać zawartość w pionie w Divi.

Sprawdź efekt końcowy.

Dodawanie kolejnych zdjęć do galerii

Możesz również dodać 4 obrazy do galerii i zwiększyć minimalną wysokość wiersza do 475 pikseli w celu uzyskania następującego wyniku.

Jak to wygląda na urządzeniach mobilnych

Oto jak galeria będzie wyglądać na urządzeniach mobilnych. Rozszerzający się efekt najechania nie jest aktywny.

Końcowe przemyślenia

Podane przykłady to tylko kilka sposobów używania Divi do tworzenia rozszerzającego się efektu najechania na całą zawartość siatki. Ale jestem pewien, że możesz go używać w niezliczonych innych przypadkach użycia. Możesz rozbudować moduły portfolio, moduły sklepu, a nawet moduły bloga. Więc wykaż się kreatywnością i baw się dobrze, odkrywając możliwości na własną rękę.

Czekam na kontakt z Państwem w komentarzach poniżej.

Pozdrawiam!