Czy chcesz utworzyć responsywny układ siatki obrazu za pomocą DIVI ?
Konstruktor Divi posiada fantastyczne wbudowane moduły wykorzystujące widoki siatki,
Czasami jednak możesz chcieć stworzyć własny, niestandardowy układ siatki obrazów z linkami CTA. Daje to większą kontrolę nad projektem i treść który chcesz wyświetlić dla każdego elementu siatki bez konieczności uciekania się do wtyczki.
Dzisiaj pokażemy Ci, jak stworzyć responsywny układ siatki obrazów z linkami CTA, korzystając z wbudowanych opcji projektowania Divi.
Zacznijmy!
badanie
Oto krótki przegląd wyników, które otrzymamy na końcu tego samouczka.
Utwórz stronę za pomocą Divi Theme Builder
W panelu WordPress utwórz nową stronę internetową, przechodząc do Strony >> Dodaj
Zobacz także: Jak stworzyć przesuwane i push menu w DIVI?
Następnie nadaj tytuł swojej stronie, a następnie kliknij „ Użyj Divi Builder ”.
Następnie kliknij „ zacznij budować«
Tworzenie specjalnego układu sekcji
Dodaj nową sekcję „Specjalność”. układ lewego paska bocznego jedna trzecia dwie trzecie.
Wybierz układ kolumn, jak pokazano na poniższym zrzucie ekranu:
Usuń sekcję domyślną, aby pozostała tylko nowa sekcja wyspecjalizowana.
Otwórz ustawienia sekcji i zmień kolor tła w następujący sposób:
- Tło: #84dbda
Pod zakładką Styl, zaktualizuj następujące opcje:
- Wyrównaj wysokości kolumn: TAK
- Użyj niestandardowej szerokości rynny: TAK
- Szerokość rynny: 1
- Szerokość wewnętrzna: 100%
Czytaj także: Jak unosić posty na blogu w DIVI?
- Maksymalna szerokość wnętrza: 1px (komputer), 080px (tablet i telefon)
- Margines wewnętrzny (górny i dolny): 12vh
- Wypełnienie kolumny 1 (góra i dół): 0px
Po umieszczeniu stylów sekcji dodaj do sekcji wiersz z jedną kolumną.
Ustawienia linii
Zaktualizuj parametry linii w następujący sposób:
- Użyj niestandardowej szerokości rynny: TAK
- Rozstaw kolumn: 1
- Zharmonizuj wysokości kolumn: TAK
- Margines wewnętrzny (górny i dolny): 0px
Utwórz drugą linię, powielając pierwszą.
Następnie zmień zduplikowany wiersz na układ dwukolumnowy.
Dodawanie obrazów jako obrazów tła kolumn
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 w układzie siatki są responsywne, dodamy każdy z naszych obrazów jako obrazy tła do każdej z czterech kolumn w sekcji.
Ponieważ każdy obraz tła będzie miał rozmiar tła " pokrywa ", obraz zawsze wypełni całą kolumnę podczas dostosowywania rozmiaru przeglądarki.
Obraz tła kolumny w górnym wierszu
Aby rozpocząć, otwórz ustawienia kolumny w górnym wierszu.
Następnie dodaj obraz tła do kolumny.
Obrazy tła kolumny w dolnym wierszu
Następnie otwórz ustawienia dla kolumny 1 w drugim (dolnym) wierszu, a także dodaj obraz tła do tej kolumny.
Następnie dodaj obraz tła do kolumny 2 tego samego wiersza.
Obraz tła w kolumnie 1 sekcji
I na koniec otwórz ustawienia sekcji „specjalność” i dodaj obraz tła do kolumny 1.
Dodanie modułu „Call to Action” nałożonego na obrazy w każdej kolumnie
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.
Użycie nakładki modułu „Wezwanie do działania” na obrazie tła kolumny umożliwi łatwe dodawanie niestandardowych stylów nakładki tła i efektów najechania na obraz tła kolumny.
W tym przykładzie użyjemy po prostu elementu przycisku z modułu Action Call, ale możesz go łatwo dodać do treść tytułu lub treści nad przyciskiem.
Dodamy pierwszy moduł „Call to Action” w górnej kolumnie wiersza.
Treść
Zaktualizuj ustawienia modułu „Wezwanie do działania” w następujący sposób:
- usuń tekst tytułu
- usuń treść
- URL linku przycisku: #
UWAGA : Dodanie znaku „#” do adresu URL linku przycisku jest na razie tylko wypełniaczem, aby przycisk był wyświetlany. Dodanie półprzezroczystego koloru tła po najechaniu kursorem zapewni ładny niestandardowy kolor nakładki po najechaniu kursorem na moduł (i obraz za nim).
- Kolor tła: przezroczysty (komputer), rgba (255,235,77,0.5) (najechanie)
Style przycisków
Przejdź do zakładki Styl i zmodyfikuj ustawienia przycisków modułu „Call to action” w następujący sposób:
- Użyj niestandardowych stylów dla przycisku: TAK
- Rozmiar tekstu przycisku: 22px
- Kolor tekstu przycisku: #ffeb4d
- Przycisk tła: #000000 (pulpit), #ec5f00 (najedź)
Zobacz także: Jak stworzyć przesuwane i przesuwane menu w DIVI
- Szerokość obramowania przycisku: 0 pikseli
- Promień obramowania przycisku: 100 pikseli
- Czcionka przycisku: ruchome piaski
- Przycisk przyciemniania światła: pół pogrubiony
- Przycisk wypełnienia: 0,5 em góra, 0,5 em dół, 2 em w lewo, 2 em w prawo
Rozmiar, wypełnienie i krawędzie
Następnie musimy upewnić się, że nasz moduł ma określoną wysokość, aby odsłonić obraz tła kolumny za nim.
W tym celu dodamy do modułu marginesy wewnętrzne (Górny i Dolny).
Dodamy również subtelną ramkę do modułu, aby nieco oddzielić go od innych obrazów w układzie siatki.
Zastosuj następujące ustawienia:
- Szerokość: 100%
- Margines wewnętrzny (górny i dolny): 15vh
- Szerokość dolnego obramowania: 5px
- Szerokość lewego obramowania: 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. Dzięki temu elementy siatki obrazu będą rosły i zmniejszały się proporcjonalnie do wysokości okna przeglądarki.
Wyśrodkowanie w pionie treści modułu „Call to action”
Aby mieć pewność, że treść modułu „Action Call” pozostaje wyśrodkowany w pionie, możemy dodać mały fragment niestandardowego CSS, korzystając z właściwości flex.
W zakładce Zaawansowane dodaj następujący kod CSS do głównego elementu:
display:flex;
flex-direction:column;
justify-content:center;
Dodano nakładkę z wezwaniem do działania do innych kolumn
Teraz, gdy pierwszy moduł „wezwania do działania” jest dostosowany, skopiuj go i wklej do pozostałych 3 kolumn układu, w tym 2 kolumn w dolnym wierszu i 1 kolumny w sekcji.
Aby upewnić się, że moduł „Wezwanie do działania” obejmuje całą wysokość kolumny 1 w sekcji specjalistycznej, ustaw minimalną wysokość na 100%.
- Minimalna wysokość: 100%
To koniec ! Zobaczmy efekt końcowy.
Ostateczny wynik
Oto wynik końcowy responsywnego układu siatki obrazu na stronie internetowej z efektami najechania.
I tak reaguje siatka podczas dostosowywania rozmiaru przeglądarki.
Pobierz DIVI teraz !!!
Wnioski
Responsywne układy siatki obrazów nadal są popularnym aspektem wielu stron internetowych. Atrakcyjność wizualna zapewniana przez obraz tła w połączeniu z nakładką wezwania do działania może naprawdę wyświetlić te ważne linki nawigacyjne.
Ponadto responsywny charakter układu siatki obrazu będzie wyglądał świetnie na wszystkich urządzeniach, co zawsze jest koniecznością.
Mamy nadzieję, że ten poradnik przyda Ci się w przyszłych projektach tworzenia Witryna internetowa. Jeśli masz jakiekolwiek wątpliwości lub sugestie, znajdź nas w sekcja komentarzy przedyskutować to.
Możesz jednak również skonsultować się nasze zasoby jeśli potrzebujesz więcej elementów do ukończenia projektów tworzenia stron internetowych.
Możesz również śledzić nasz przewodnik na Tworzenie bloga WordPress lub ten na Divi: najlepszy motyw WordPress wszechczasów.
Ale w międzyczasie udostępnij ten artykuł w różnych sieciach społecznościowych.
...
