Jak stworzyć układ siatki CSS dla modułów Divi

Dla tych, którzy już znają budowanie stron internetowych w Divi, tworzenie niestandardowych układów siatki jest podstawowym aspektem Divi Builder. Po prostu utwórz wiersz i wybierz jeden z wielu wbudowanych układów kolumn dla tego wiersza. Gdy układ kolumn jest już na miejscu, po prostu dodajemy zawartość/moduły, które chcemy w każdej kolumnie. Ale co, jeśli chcielibyśmy mieć dodatkowy układ siatki dla tych modułów?

W tym samouczku zbadamy, jak rozwinąć układy siatki Divi, tworząc układy siatki CSS dla modułów Divi w jednej kolumnie. Właściwość CSS Grid (wraz z CSS Flex) jest popularnym sposobem tworzenia przewidywalnych i responsywnych układów siatki dla zawartości za pomocą zaledwie kilku wierszy CSS. Dzięki niemu możemy uporządkować wszystkie moduły w kolumnie w w pełni responsywną siatkę. Pomyśl o tym jako o dodatkowym układzie siatki dla modułów, które możesz dodać do dowolnej kolumny Divi. Ale jedną z najlepszych rzeczy w tej technice jest to, że każdy sąsiedni moduł będzie miał tę samą wysokość i szerokość bez kłopotów z próbą wykonania tego przy użyciu niestandardowego dopełnienia lub wartości wysokości w każdym module.

Być może najlepiej będzie, jeśli po prostu wskoczymy i pokażemy, jak to działa.

Zacznijmy!

zapowiedź

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

A oto rzut oka na tę samą technikę przy użyciu różnych modułów i wzorów z pakietu Fitness Gym Layout Pack.

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 niestandardowego układu siatki CSS dla modułów Divi

Część 1: Dodawanie modułów do kolumny Divi

Zanim zorganizujemy nasze moduły w układzie siatki, najpierw dodajmy wszystkie moduły, których chcemy użyć do naszej kolumny.

Aby rozpocząć, utwórz nowy jednokolumnowy wiersz w domyślnej zwykłej sekcji w Divi Builder.

Tworzenie modułów

W kolumnie wiersza dodaj nowy moduł tekstowy. Następnie zaktualizuj ustawienia zawartości modułu w następujący sposób:

1. Dodaj nagłówek H2 nad tekstem akapitu domyślnej treści treści
2. Kolor tła: #333333

Następnie zaktualizuj ustawienia projektu w następujący sposób:

1. Czcionka tekstu: Poppins
2. Kolor tekstu: jasny
3. Wybierz zakładkę H2 w sekcji Tekst nagłówka
4. Styl czcionki nagłówka 2: TT
5. Wypełnienie: 10% góra, 10% dół, 10% lewo 10% prawo

UWAGA : Dla uproszczenia będziemy trzymać się używania wielu modułów tekstowych z różnymi kolorami tła, aby pokazać rozróżnienie między każdym modułem. Ale, jak wyjaśnię później, możesz użyć dowolnej kombinacji modułów (moduły prezentacji, moduły wezwania do działania, moduły formularzy kontaktowych itp.).

Otwórz widok warstw (opcjonalnie) i utwórz kolejny moduł tekstowy w następujący sposób:

1. Powiel moduł tekstowy.
2. Otwórz ustawienia tekstu dla zduplikowanego modułu.
3. Zaktualizuj kolor tła
   • Kolor tła: #4c6085

Powtórz ten proces, aby utworzyć trzeci moduł tekstowy w następujący sposób:

1. Powiel poprzedni moduł tekstowy.
2. Otwórz ustawienia tekstu dla zduplikowanego modułu.
3. Zaktualizuj kolor tła
   • Kolor tła: #39a0ed

Powtórz ten proces jeszcze raz, aby utworzyć czwarty moduł tekstowy w następujący sposób:

1. Powiel poprzedni moduł tekstowy.
2. Otwórz ustawienia tekstu dla zduplikowanego modułu.
3. Zaktualizuj kolor tła
   • Kolor tła: #13c4a3

Aby utworzyć kolejne cztery moduły, użyj funkcji wielokrotnego wyboru, aby wybrać wszystkie cztery moduły. Następnie skopiuj i wklej moduły w tej samej kolumnie, aby utworzyć łącznie osiem modułów tekstowych.

Część 2: Tworzenie układu siatki CSS dla modułów

Teraz, gdy nasze moduły są na miejscu, jesteśmy gotowi do stworzenia naszej siatki CSS dla tych modułów.

Ustawienia wiersza

W tym przykładzie używamy układu jednokolumnowego, dzięki czemu możemy wyświetlić naszą siatkę modułów w układzie o pełnej szerokości. Musimy więc zaktualizować ustawienia wierszy, aby upewnić się, że wiersz obejmuje całą szerokość strony. Musimy również usunąć domyślną szerokość rynny, aby żadne dodatkowe marginesy nie były dodawane do naszych modułów.

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

• Szerokość rynny: 1
• Szerokość: 100%
• Maksymalna szerokość: 100%

Dodawanie siatki CSS do kolumny w celu zbudowania układu siatki dla modułów

Jest to kluczowy krok w samouczku, który tworzy układ modułów przy użyciu właściwości CSS Grid.

W tym celu dodamy do kolumny trzy wiersze CSS, które określą układ naszych modułów.

Otwórz ustawienia kolumn i pod zakładką Zaawansowane wklej następujący kod CSS w elemencie głównym:

display:grid;
grid-template-columns: 25% 25% 25% 25%;
grid-auto-rows: auto;

Pierwsza linia CSS przedstawia zawartość (lub moduły) zgodnie z modułem siatki CSS.

wyświetlanie:siatka

Druga linia CSS definiuje szablon kolumny siatki. W takim przypadku siatka będzie miała cztery kolumny, z których każda ma 25% szerokości (patrz zrzut ekranu powyżej).

kolumny-szablonów siatki: 25% 25% 25% 25%

Trzeci wiersz CSS określa, że ​​wiersze będą generowane automatycznie w razie potrzeby z rozmiarem (lub wysokością) ustawionym na auto. Oznacza to, że wysokość każdego wiersza będzie określona przez pionową wysokość treści (lub modułów) w wierszu (patrz zrzut ekranu powyżej).

grid-auto-rows: auto

Dostosuj układ siatki na urządzeniu mobilnym

W razie potrzeby będziemy również musieli dostosować układ siatki na urządzeniach mobilnych.

Aby to zrobić, wystarczy dodać dodatkowy CSS do każdego tabletu telefonu komórkowego, który zmienia liczbę kolumn i szerokość każdej kolumny.

W tym przykładzie zmienimy układ siatki modułów na tablecie na dwie kolumny, z których każda ma 50% szerokości.

Otwórz opcje responsywne i wybierz zakładkę tabletu pod głównym elementem i wklej następujący kod CSS:

 display:grid;
grid-template-columns: 50% 50%;
grid-auto-rows: auto; 

W przypadku wyświetlacza telefonu chcemy mieć układ jednokolumnowy. Aby to utworzyć, wklej następujący kod CSS w zakładce Telefon Główny element:

 display:grid;
grid-template-columns: 100%;
grid-auto-rows: auto; 

Część 3: Wprowadzanie zmian w elementach siatki (lub modułach)

Dodawanie nowego modułu do siatki i jego reakcja

Teraz, gdy każdy moduł znajduje się w siatce CSS, dodanie nowego modułu przesunie pozostałe moduły w prawo i automatycznie utworzy nowe wiersze w razie potrzeby.

Ponieważ i tak potrzebujemy jeszcze jednego modułu dla tego układu, zduplikuj pierwszy moduł tekstowy, aby zobaczyć, jak inne moduły dostosowują się w siatce.

Jak siatka reaguje na moduły z różną ilością treści

Obecnie wszystkie moduły tekstowe mają taką samą ilość treści, więc trudno jest zobaczyć, jak układ siatki obsługuje moduły o różnej zawartości. Aby zobaczyć, jak to działa, zmień ilość tekstu akapitowego w każdym module. Zauważ, że moduły pozostaną na tej samej wysokości co moduł z największą zawartością w tym samym wierszu. Wysokość wiersza zostanie również określona przez moduł z największą zawartością (lub wysokość pionową).

Zmiana pozycji modułów (lub elementów siatki)

Elementy CSS Grid można pozycjonować za pomocą wbudowanego systemu numerowania wierszy modułu siatki. Każda linia na siatce reprezentuje liczbę. W przypadku kolumn numery wierszy zaczynają się od 1 i są kontynuowane poziomo. Każdy numer wiersza znajduje się na początku i na końcu każdej kolumny. Tak więc w naszej czterokolumnowej strukturze numer wiersza zaczyna się od 1 po lewej stronie pierwszej kolumny i kończy się na 5 po prawej stronie czwartej kolumny. A ponieważ mamy trzy wiersze, numery wierszy zaczynają się od 1 na górze pierwszego wiersza i kontynuują do 4 na dole trzeciego wiersza.

Aby zmienić pozycję modułu (lub elementu siatki) w CSS Grid, możemy określić, gdzie chcemy umieścić określony moduł w siatce. Zastąpi to domyślne umieszczenie modułu w siatce.

W tym przykładzie przeniesiemy pierwszy moduł tekstowy na inną pozycję. W tym celu musimy dodać do modułu dwie linie CSS.

Otwórz ustawienia pierwszego modułu tekstowego i wklej następujący niestandardowy CSS do głównego elementu:

grid-column: 2/4;
grid-row: 2/3;

Pierwszy wiersz CSS definiuje położenie modułu (lub elementu siatki) w poziomie, mówiąc modułowi, aby zaczynał się w wierszu kolumny 2 i kończył w wierszu kolumny 4.

kolumna siatki: 2/4

Drugi wiersz CSS definiuje położenie modułu (lub elementu siatki) w pionie, mówiąc modułowi, aby zaczynał się w wierszu 2 i kończył w wierszu 3.

wiersz siatki: 2/3

W przypadku wyświetlania na tablecie i telefonie chcemy przywrócić moduł do pierwotnej lokalizacji. Przydaje się to do utrzymania głównego nagłówka u góry strony.

Aby to zrobić, wybierz zakładkę tabletu pod opcją responsywną dla głównego elementu i wklej następujący kod CSS:

grid-column: auto;
grid-row: auto;

Teraz pozycja modułu powróci do pierwotnego (automatycznego) przepływu elementów siatki.

Przejdźmy dalej i umieśćmy kilka dodatkowych modułów (lub elementów siatki) za pomocą tej metody.

Zamierzamy umieścić trzeci moduł tekstowy (teraz w drugiej kolumnie górnego rzędu) w nowej lokalizacji w siatce. Ta nowa pozycja rozpocznie się w wierszu kolumny 1 i zakończy w wierszu kolumny 2, a także zacznie się w wierszu 2 i zakończy w wierszu 4.

Aby to zrobić, otwórz ustawienia trzeciego modułu tekstowego i wklej następujący niestandardowy CSS do głównego elementu:

grid-column: 1/2;
grid-row: 2/4;

Teraz możemy zmienić pozycję z powrotem na telefon komórkowy, dodając następujący kod CSS dla tabletu:

grid-column: auto;
grid-row: auto;

W celu ostatecznego rozmieszczenia siatki modułów niestandardowych umieścimy siódmy moduł tekstowy (teraz w ostatniej kolumnie drugiego rzędu) w nowej lokalizacji w siatce. Ta nowa pozycja rozpocznie się w wierszu kolumny 4 i zakończy w wierszu kolumny 5, a także zacznie się w wierszu 2 i zakończy w wierszu 4.

Aby to zrobić, otwórz ustawienia siódmego modułu tekstowego i wklej następujący niestandardowy CSS do głównego elementu:

grid-column: 4/5;
grid-row: 2/4;

Następnie wklej następujący kod CSS do wyświetlania na tablecie, tak jak w przypadku poprzednich modułów.

grid-column: auto;
grid-row: auto;

Wyrównywanie zawartości modułu (lub elementu siatki) do środka

Moglibyśmy na tym poprzestać, ale stracilibyśmy pomocny sposób wyrównania (lub wyśrodkowania) zawartości naszego modułu w pionie. Wyśrodkowanie zawartości modułu (lub elementu siatki) w pionie jest wygodną cechą układu siatki, ponieważ sprawia, że ​​wszystko jest bardziej symetryczne i estetyczne.

Aby to zrobić, możemy dodać fragment kodu CSS, który używa właściwości flex CSS, aby wyrównać i uzasadnić zawartość do środka. Musimy dodać ten fragment kodu do każdego z modułów. Aby to zrobić, możemy użyć multiselect, aby zaznaczyć wszystkie moduły (lub elementy siatki), które nie mają jeszcze niestandardowego CSS do głównego elementu (nie chcemy zastępować tych modułów niestandardowymi pozycjami). Następnie otwórz ustawienia elementu, otwierając ustawienia jednego z wybranych modułów. W zakładce Zaawansowane wklej następujący kod CSS do głównego elementu:

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

Teraz możemy wrócić do naszych pozostałych trzech modułów (moduł #1, #3 i #7) indywidualnie i dodać ten sam fragment kodu CSS oprócz kodu CSS, który został użyty do nadania modułowi niestandardowej pozycji w siatce. Pamiętaj, aby dodać fragment kodu CSS do istniejącego kodu CSS zarówno dla komputerów stacjonarnych, jak i tabletów.

Dodaj CSS do pierwszego modułu tekstowego

Dodaj CSS do trzeciego modułu tekstowego

Dodaj CSS do siódmego modułu tekstowego

Ostateczny wynik

Oto końcowy wynik naszego niestandardowego układu siatki CSS dla naszych modułów tekstowych.

Zwróć uwagę, jak moduły (lub elementy siatki) płynnie dopasowują się do różnych szerokości przeglądarki, aby uzyskać przyjemny, responsywny projekt.

Przykład przy użyciu różnych modułów i projektów

Trudno dostrzec pełny potencjał wykorzystania siatki CSS do tworzenia układów modułów przy użyciu wyłącznie modułów tekstowych. Pomyślałem więc, że pokażę Ci projekt, który stworzyłem, wykonując te same kroki w tym samouczku, używając różnych modułów i elementów projektu z naszego Pakietu Układu Fitness Gym.

Oto jest…

Dołączyłem również ten układ wraz z układem modułu tekstowego z bezpłatnym pobieraniem opisanym na początku tego postu.

Zapraszam na przejażdżkę!

Końcowe przemyślenia

W tym samouczku pokazaliśmy, jak stworzyć układ siatki CSS dla modułów Divi. Chociaż proces opiera się na niestandardowym CSS, to zaskakująco niewiele, biorąc pod uwagę potężne wyniki, jakie może mieć. Fajnie jest móc kontrolować układ wszystkich modułów na poziomie kolumny, gdy jest to potrzebne do uzyskania bardziej unikalnych układów Divi. Aby uzyskać więcej informacji na temat siatki CSS, zapoznaj się z tym kompletnym przewodnikiem, aby rozważyć więcej możliwości.

Czekam na kontakt z Państwem w komentarzach.

Pozdrawiam!