Jak stworzyć responsywny układ siatki obrazu z wezwaniami do działania i nakładkami po najechaniu kursorem w Divi

Responsywne układy siatki są idealne do prezentowania kolekcji obrazów z linkami (lub CTA), ponieważ dobrze wyglądają na każdym urządzeniu. Konstruktor Divi ma kilka fantastycznych wbudowanych modułów, które używają wyświetlaczy siatki, w tym siatki portfolio, siatki blogów i siatki galerii. Ale czasami możesz chcieć zbudować własny niestandardowy układ siatki obrazów z CTA. Daje to większą kontrolę nad projektem i treścią, które chcesz wyświetlić dla każdego elementu siatki, bez konieczności uciekania się do wtyczki.

Dzisiaj pokażemy, jak stworzyć responsywny układ siatki obrazu z CTA przy użyciu wbudowanych opcji projektowania Divi. Aby to zrobić, będziemy kreatywnie organizować siatkę za pomocą sekcji specjalistycznej i dodawać nakładki do każdego obrazu za pomocą modułu Call to Action.

Zacznijmy!

zapowiedź

Oto krótkie spojrzenie na projekt, który zbudujemy w tym samouczku.

Pobierz układ 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 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 sekcji do Biblioteki Divi, przejdź do Biblioteki Divi.

Kliknij przycisk Importuj.

W wyskakującym okienku przenośności wybierz zakładkę importu i wybierz plik do pobrania z komputera.

Następnie kliknij przycisk importu.

Po zakończeniu układ sekcji będzie dostępny w Divi Builder.

Przejdźmy do samouczka, dobrze?

Czego potrzebujesz, aby zacząć

Aby rozpocząć, musisz wykonać następujące czynności:

1. Jeśli jeszcze tego nie zrobiłeś, zainstaluj i aktywuj motyw Divi.
2. Utwórz nową stronę w WordPress i użyj Divi Builder, aby edytować stronę w interfejsie (konstruktor wizualny).
3. Wybierz opcję „Buduj od podstaw”.

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

Tworzenie responsywnego układu siatki obrazu za pomocą CTA i nakładek aktywowanych w Divi

Część 1: Tworzenie specjalnego układu sekcji

Aby rozpocząć, dodaj nową sekcję specjalizacyjną z układem lewego paska bocznego w proporcji 1/3 do 2/3.

Usuń domyślną sekcję zwykłą, aby pozostała tylko nowa sekcja specjalności.

Otwórz ustawienia sekcji i zaktualizuj kolor tła w następujący sposób:

• Kolor tła: #84dbda;

Na karcie projektu zaktualizuj opcje rozmiaru, szerokości i wypełnienia w następujący sposób:

• Wyrównaj wysokości kolumn: TAK
• Użyj niestandardowej szerokości rynny: TAK
• Szerokość rynny: 1
• Szerokość wewnętrzna: 100%
• Wewnętrzna maksymalna szerokość: 1080px (komputer), 500px (tablet i telefon)
• Wyściółka: góra 12vh, dół 12vh
• Dopełnienie kolumny 1: 0px na górze, 0px na dole

Po ustawieniu stylów sekcji dodaj do sekcji wiersz z jedną kolumną.

Ustawienia wiersza

Zaktualizuj ustawienia wiersza w następujący sposób:

• Szerokość rynny: 1
• Wyrównaj wysokości kolumn: TAK
• Padding: 0px na górze, 0px na dole

Aby utworzyć drugi wiersz, zduplikuj pierwszy wiersz.

Następnie zaktualizuj zduplikowany wiersz za pomocą układu dwukolumnowego.

Część 2: Dodawanie obrazów jako obrazów tła kolumny

Teraz, gdy wszystkie wiersze i kolumny są na swoim miejscu, jesteśmy gotowi do dodania naszych obrazów do naszego układu siatki. Aby upewnić się, że obrazy są responsywne w układzie siatki, dodamy każdy z naszych obrazów jako obrazy tła do każdej z czterech kolumn w całej sekcji. Ponieważ każdy obraz tła będzie miał rozmiar tła „okładka”, obraz zawsze wypełni całą kolumnę podczas dostosowywania rozmiaru przeglądarki.

Obraz tła kolumny w górnym rzędzie

Aby rozpocząć, otwórz ustawienia kolumny dla kolumny w górnym wierszu.

Następnie dodaj obraz tła do kolumny.

Obrazy tła kolumn w dolnym rzędzie

Następnie otwórz ustawienia dla kolumny 1 w drugim (dolnym) wierszu i dodaj również obraz tła do tej kolumny.

Następnie dodaj obraz tła do kolumny 2 w tym samym wierszu.

Sekcja specjalna Kolumna 1 Obraz tła

I na koniec otwórz ustawienia sekcji specjalistycznej i dodaj obraz tła do kolumny 1.

Część 3: Dodawanie wezwania do działania nakładki obrazu do każdej kolumny

Teraz, gdy nasze obrazy tła zostały dodane do każdej kolumny układu siatki, dodamy moduł call to action do każdej kolumny, który będzie służył jako nakładka na obraz z przyciskiem CTA. Użycie modułu wezwania do działania jako nakładki na obraz tła kolumny pozwoli z łatwością dodać niestandardowe style nakładki tła i efekty najechania na obraz. Dodatkowo daje możliwość dodania niestandardowego CTA na obrazie. W tym przykładzie użyjemy po prostu elementu przycisku w module Call to action, ale możesz łatwo dodać do tytułu lub treści nad przyciskiem, a także korzystając z opcji treści.

Tworzenie modułu wezwania do działania

Aby dodać pierwsze wezwanie do działania nakładki graficznej, dodaj moduł wezwania do działania w kolumnie w górnym wierszu.

Zadowolony

Zaktualizuj treść wezwania do działania w następujący sposób:

• usuń tekst tytułu
• usuń treść
• URL linku przycisku: #
• Kolor tła: przezroczysty (komputer), rgba (255,235,77,0,5) (najechanie)

UWAGA: Dodanie „#” do adresu URL linku przycisku jest na razie tylko wypełniaczem, dzięki czemu przycisk się wyświetla. Dodanie półprzezroczystego koloru tła po najechaniu kursorem zapewni ładny niestandardowy kolor nakładki po najechaniu kursorem na moduł (i obraz za nim).

Style przycisków

Kontynuuj aktualizowanie ustawień projektu wezwania do działania dla przycisku w następujący sposób:

• Użyj niestandardowych stylów dla przycisku: TAK
• Rozmiar tekstu przycisku: 22px
• Kolor tekstu przycisku: #ffeb4d
• Kolor tła przycisku: #000 (na pulpicie), #ec5f00 (najedź)
• Szerokość obramowania przycisku: 0px
• Promień obramowania przycisku: 100px
• Czcionka przycisku: ruchome piaski
• Grubość czcionki przycisku: pół pogrubiona
• Wypełnienie przycisków: 0,5 em na górze, 0,5 em na dole, 2 em w lewo, 2 em w prawo

Rozmiar, wypełnienie i obramowanie

Następnie musimy upewnić się, że nasz moduł ma pewną wysokość, aby odsłonić obraz tła kolumny za nim. Aby to zrobić, dodamy trochę dopełnienia na górze i na dole modułu. Dodamy również subtelną ramkę do modułu, aby nieco oddzielić go od innych obrazów w układzie siatki.

Zaktualizuj następujące elementy:

• Szerokość: 100%
• Wyściółka: 15vh na górze, 15vh na dole
• Szerokość dolnego obramowania: 5px
• Szerokość lewej krawędzi: 5px
• Kolor obramowania: rgba (255,255,255,0,5)

UWAGA: Użycie jednostki długości vh do wypełnienia spowoduje, że wartość wypełnienia będzie względna do wysokości rzutni przeglądarki. Tak więc elementy siatki obrazu będą się zwiększać i zmniejszać w miarę zwiększania i zmniejszania wysokości okna przeglądarki.

Wyśrodkowanie treści CTA w pionie

Aby zapewnić, że zawartość w module wezwania do działania pozostanie wyśrodkowana w pionie, możemy dodać mały fragment niestandardowego CSS za pomocą właściwości flex.

W zakładce Zaawansowane dodaj następujący kod CSS do elementu głównego:

display:flex;
flex-direction:column;
justify-content:center;

Dodanie nakładki wezwania do działania do pozostałych kolumn

Teraz, gdy pierwszy moduł wezwania do działania ma już styl, skopiuj go i wklej do pozostałych 3 kolumn w układzie, w tym 2 kolumn w dolnym wierszu i 1 kolumny w sekcji specjalności.

Aby upewnić się, że moduł wezwania do działania obejmuje pełną wysokość kolumny 1 w sekcji specjalności, zaktualizuj minimalną wysokość do 100%.

• Minimalna wysokość: 100%

Normalnie nie działałoby to dla modułu w normalnej kolumnie. Ale ze względu na właściwość flex w kolumnie, moduł jest zasadniczo elementem podrzędnym flex, więc będzie działać wartość 100% min-height.

Otóż ​​to. Sprawdźmy efekt końcowy.

Ostateczny wynik

Oto ostateczny wynik responsywnego układu siatki obrazu na aktywnej stronie.

A oto efekty zawisu.

A oto, jak projekt reaguje na dostosowanie rozmiaru przeglądarki.

Końcowe przemyślenia

Responsywne układy siatki obrazów nadal są popularnym aspektem wielu stron internetowych. Aspekt wizualny zapewniany przez obraz tła w połączeniu z nakładką Call to Action może naprawdę sprawić, że te ważne linki nawigacyjne pojawią się. Ponadto responsywny charakter układu siatki obrazu będzie wyglądał świetnie na wszystkich urządzeniach, co zawsze jest koniecznością. Mam nadzieję, że przyda się w twoim następnym projekcie.

Czekam na kontakt z Państwem w komentarzach.

Pozdrawiam!