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

5 kwietnia 2021

Blog

69 / 100

Dla tych, którzy są już zaznajomieni z budowaniem 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 by było, gdybyśmy chcieli mieć dodatkowy układ siatki dla tych modułów?

W tym samouczku zamierzamy zbadać, jak rozszerzyć 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) to popularny sposób tworzenia przewidywalnych i responsywnych układów siatki dla treś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 związanych z próbą zrobienia tego przy użyciu niestandardowych wartości dopełnienia lub 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 spojrzenie na tę samą technikę przy użyciu różnych modułów i projektów z pakietu Fitness Gym Layout Pack.

Pobierz układ ZA DARMO

Aby położyć ręce na projektach z tego samouczka, musisz najpierw pobrać je za pomocą poniższego przycisku. Aby uzyskać dostęp do pobierania, musisz zapisać się na naszą codzienną listę e-mailową Divi, korzystając z poniższego formularza. Jako nowy subskrybent w każdy poniedziałek otrzymasz jeszcze więcej dobrodziejstw Divi i bezpłatny pakiet Divi Layout! Jeśli jesteś już na liście, wpisz poniżej swój adres e-mail i kliknij pobierz. Nie będziesz „ponownie subskrybować” ani otrzymywać dodatkowych e-maili.Pobierz za darmo

Pobierz za darmo

Dołącz do biuletynu Divi, a wyślemy Ci e-mailem kopię ostatecznego pakietu układu strony docelowej Divi, a także mnóstwo innych niesamowitych i bezpłatnych zasobów Divi, porad i wskazówek. Idź dalej, a błyskawicznie zostaniesz mistrzem Divi. Jeśli jesteś już subskrybentem, wpisz poniżej swój adres e-mail i kliknij Pobierz, aby uzyskać dostęp do pakietu układów.ŚCIĄGNIJ

Aby zaimportować układ sekcji do biblioteki Divi, przejdź do biblioteki Divi.

Kliknij przycisk Importuj.

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

Następnie kliknij przycisk importu.

pole powiadomienia divi

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

Przejdźmy do samouczka, dobrze?

Czego potrzebujesz, aby rozpocząć

rozwijanie zakładek narożnych

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 (kreator 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 wiersz z jedną kolumną do domyślnej zwykłej sekcji w Divi Builder.

układ siatki css dla modułów divi

Tworzenie modułów

Wewnątrz kolumny 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
  2. Kolor tła: # 333333
układ siatki css dla modułów divi

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

  1. Czcionka tekstu: Poppins
  2. Kolor tekstu: jasny
  3. Wybierz kartę H2 pod nagłówkiem Tekst
  4. Styl czcionki nagłówka 2: TT
  5. Wypełnienie: 10% na górze, 10% na dole, 10% na lewo, 10% na prawo
układ siatki css dla modułów divi

UWAGA : Dla uproszczenia będziemy trzymać się 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 blurb, moduły wezwań do akcji, moduły formularzy kontaktowych itp.).

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

  1. Powiel moduł tekstowy.
  2. Otwórz ustawienia tekstu dla powielonego modułu.
  3. Zaktualizuj kolor tła
    • Kolor tła: # 4c6085
układ siatki css dla modułów divi

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 powielonego modułu.
  3. Zaktualizuj kolor tła
    • Kolor tła: # 39a0ed
układ siatki css dla modułów divi

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 powielonego modułu.
  3. Zaktualizuj kolor tła
    • Kolor tła: # 13c4a3
układ siatki css dla modułów divi

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

układ siatki css dla modułów divi

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

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

Ustawienia wiersza

W tym przykładzie używamy układu jednokolumnowego, abyśmy mogli wyświetlić naszą siatkę modułów w układzie o pełnej szerokości. Będziemy więc musieli zaktualizować ustawienia wierszy, aby mieć pewność, że zajmuje on 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%
układ siatki css dla modułów divi

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

To jest kluczowy krok w samouczku, który tworzy układ dla modułów za pomocą właściwości CSS Grid.

Aby to zrobić, dodamy do kolumny trzy wiersze CSS, które określą układ naszych modułów.

Otwórz ustawienia kolumny i na karcie Zaawansowane wklej następujący kod CSS w głównym elemencie:

010203display:grid;grid-template-columns: 25% 25% 25% 25%;grid-auto-rows: auto;
układ siatki css dla modułów divi

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

wyświetlacz: siatka

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

grid-template-columns: 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 zostanie określona przez pionową wysokość zawartości (lub modułów) w wierszu (patrz zrzut ekranu powyżej).

grid-auto-rows: auto

Dostosuj układ siatki na urządzeniach mobilnych

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

Aby to zrobić, musimy po prostu 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 kartę tabletu pod głównym elementem i wklej następujący CSS:

010203display:grid;grid-template-columns: 50% 50%;grid-auto-rows: auto;
układ siatki css dla modułów divi

W przypadku wyświetlania telefonu potrzebujemy układu jednokolumnowego. Aby to utworzyć, wklej następujący kod CSS pod głównym elementem zakładki Telefon:

010203display:grid;grid-template-columns: 100%;grid-auto-rows: auto;
układ siatki css dla modułów divi

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

Dodawanie nowego modułu do siatki i jak on reaguje

Teraz, gdy każdy moduł znajduje się w siatce CSS, dodanie nowego modułu spowoduje przesunięcie pozostałych modułów w prawo i automatyczne utworzenie nowych wierszy 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.

układ siatki css dla modułów divi

Jak siatka reaguje na moduły z różnymi ilościami zawartości

Right now, all the text modules have the same amount of content so it is hard to see how the grid layout handles modules with varying amounts of content. To see how this works, change the amount of paragraph text within each module. Notice that the modules will remain the same height as the module with most content in the same row. And the row height will also be determined by the module with the most content (or vertical height).

układ siatki css dla modułów divi

Changing the Position of Modules (or grid items)

Elementy siatki CSS można pozycjonować za pomocą wbudowanego systemu numeracji linii 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 rzędu i kontynuują do 4 na dole trzeciego rzędu.

układ siatki css dla modułów divi

Aby zmienić pozycję modułu (lub elementu siatki) w siatce CSS, możemy określić, gdzie ma być umieszczony dany moduł w siatce. Spowoduje to zastąpienie domyślnego umieszczenia modułu w siatce.

W tym przykładzie przeniesiemy pierwszy moduł tekstowy w inne miejsce. Aby to zrobić, musimy dodać do modułu dwie linie kodu CSS.

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

0102grid-column: 2/4;grid-row: 2/3;
układ siatki css dla modułów divi

Pierwsza linia CSS definiuje poziome położenie modułu (lub elementu siatki), nakazując modułowi rozpoczęcie w linii kolumny 2 i zakończenie w linii kolumny 4.

siatka-kolumna: 2/4

Drugi wiersz CSS definiuje pozycję modułu (lub elementu siatki) w pionie, nakazując modułowi rozpoczęcie w wierszu 2, a zakończenie w wierszu 3.

rząd siatki: 2/3

W przypadku tabletu i telefonu chcemy przywrócić moduł do pierwotnej lokalizacji. Jest to pomocne w utrzymaniu głównego nagłówka u góry strony.

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

0102grid-column: auto;grid-row: auto;
układ siatki css dla modułów divi

Now the position of the module will go back to the original (automatic) flow of the grid items.

Let’s go ahead and position a few more modules (or grid items) using this method.

We are going to position the third text module (now in the second column of the top row) at a new set location within the grid. This new position will start at column line 1 and end on column line 2 and also start at row line 2 and end on row line 4.

układ siatki css dla modułów divi

To do this, open the settings for the third text module and paste the following custom CSS to the main element:

0102grid-column: 1/2;grid-row: 2/4;
układ siatki css dla modułów divi

Now we can change, the position back to on mobile by adding the following CSS for tablet:

0102grid-column: auto;grid-row: auto;
układ siatki css dla modułów divi

W celu ostatecznego umieszczenia niestandardowego modułu w siatce umieścimy siódmy moduł tekstowy (teraz w ostatniej kolumnie drugiego wiersza) w nowym ustawionym położeniu w siatce. Ta nowa pozycja rozpocznie się w wierszu kolumny 4 i zakończy w wierszu kolumny 5, a także rozpocznie się w wierszu wiersza 2 i zakończy w wierszu wiersza 4.

układ siatki css dla modułów divi

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

0102grid-column: 4/5;grid-row: 2/4;
układ siatki css dla modułów divi

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

0102grid-column: auto;grid-row: auto;
układ siatki css dla modułów divi

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

Moglibyśmy na tym poprzestać, ale przegapilibyś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 wyrównać zawartość do środka. Musimy dodać ten fragment do każdego z modułów. Aby to zrobić, możemy użyć multiselect, aby wybrać wszystkie moduły (lub elementy siatki), które nie mają jeszcze niestandardowego CSS do głównego elementu (nie chcemy nadpisywać tych modułów niestandardowymi pozycjami). Następnie otwórz ustawienia elementu, otwierając ustawienia dla jednego z wybranych modułów. Na karcie Zaawansowane wklej następujący CSS do głównego elementu:

01020304display:flex;flex-direction:column;align-items:center;justify-content:center;
układ siatki css dla modułów divi

Teraz możemy wrócić do naszych pozostałych trzech modułów (moduł 1, 3 i 7) 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 pod istniejącym kodem CSS zarówno dla komputerów stacjonarnych, jak i tabletów.

Dodaj CSS do pierwszego modułu tekstowego

układ siatki css dla modułów divi
układ siatki css dla modułów divi

Dodaj CSS do trzeciego modułu tekstowego

układ siatki css dla modułów divi

Dodaj CSS do siódmego modułu tekstowego

układ siatki css dla modułów divi

Ostateczny wynik

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

układ siatki css dla modułów divi

Zwróć uwagę, jak moduły (lub elementy siatki) dostosowują się płynnie na różnych szerokościach przeglądarki, aby uzyskać ładny, responsywny projekt.

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

Trudno jest zobaczyć pełny potencjał wykorzystania siatki CSS do tworzenia układów modułów przy użyciu samych 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 Fitness Gym Layout.

Oto jest…

układ siatki css dla modułów divi

Dołączyłem również ten układ wraz z układem modułu tekstowego do bezpłatnego pobrania opisanego na początku tego postu.

Zapraszam na przejażdżkę!

Końcowe przemyślenia

W tym samouczku pokazaliśmy, jak utworzyć układ siatki CSS dla modułów Divi. Chociaż proces opiera się na niestandardowych CSS, 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, aby uzyskać bardziej unikalne układy Divi. Aby uzyskać więcej informacji na temat siatki CSS, zapoznaj się z tym kompletnym przewodnikiem, aby rozważyć więcej możliwości.

Nie mogę się doczekać wiadomości od Ciebie w komentarzach.

Twoje zdrowie!