Czy znasz się na tworzeniu wspaniałych stron internetowych za pomocą Divi ? Prawdopodobnie powinieneś wiedzieć, że układ siatki jest podstawową funkcją Divi Builder. Zwykle zaczynasz od utworzenia wiersza i wybierasz utworzenie wielu kolumn dla tego wiersza. Po umieszczeniu kolumny w tym miejscu dodasz moduły. Możemy posunąć się dalej, dodając więcej siatek dla tych modułów.
W tym samouczku dowiemy się, jak rozszerzyć układ siatki Divi, tworząc układy siatki CSS dla modułów Divi z pojedynczą kolumną. Siatka CSS (za pomocą CSS Flex ) jest bardzo popularna do tworzenia responsywnych siatek dla treści za pomocą zaledwie kilku linii CSS. Możemy wtedy zorganizować wszystkie nasze moduły tak, aby były responsywne. Rozważ to jako dodatkowy układ modułów, które możesz dodać do kolumny Divi. Zaletą jest to, że wszystkie nasze moduły zagnieżdżone będą miały tę samą wysokość i szerokość bez konieczności ustawiania wartości dopełnienia i wysokości.
Podgląd wyniku końcowego
Zanim zaczniemy, zobaczmy, co będziesz w stanie osiągnąć pod koniec tego samouczka.
Tworzenie niestandardowego układu siatki CSS dla modułów Divi
Część 1: Dodawanie modułów do kolumny Divi
Jedną z pierwszych rzeczy, które musimy zrobić, jest zorganizowanie naszych modułów w układy siatki. Dodamy wszystkie moduły, których chcemy użyć do naszej kolumny. Zacznijmy od utworzenia nowego jednokolumnowego wiersza w domyślnej zwykłej sekcji.
Twórz niesamowite strony internetowe
Z najlepszym darmowym kreatorem stron Elementor
Zacząć teraz
Tworzenie modułów
W kolumnach dodamy moduł tekstowy. Następnie zmienimy ustawienia treści w następujący sposób :
- Dodaj nagłówek H2 nad tekstem akapitu
- Kolor tła: #444444
Zaktualizujemy również ustawienia projektu w następujący sposób:
- Czcionka tekstu: Poppins
- Kolor tekstu: jasny
- Wybierz zakładkę H2 w sekcji Tekst nagłówka
- Styl czcionki nagłówka 2: TT
- Dopełnienie: 10% góra, 10% dół, 10% lewo 10% prawo
UWAGA : Aby to uprościć, będziemy nadal używać wielu modułów tekstowych z różnymi kolorami tła, aby pokazać rozróżnienie między każdym modułem.
Przejdź do widoku warstw i utwórz kolejny moduł tekstowy w następujący sposób:
- Powiel moduł tekstowy.
- Otwórz ustawienia tekstu dla zduplikowanego modułu.
- Zaktualizuj kolor tła
- Kolor tła: #4c6085
Możesz powtórzyć ten proces, aby utworzyć trzeci moduł tekstowy w następujący sposób:
- Powiel poprzedni moduł tekstowy.
- Otwórz ustawienia tekstu dla zduplikowanego modułu.
- Zaktualizuj kolor tła
- Kolor tła: #39a0ed
Powtórzymy ten proces jeszcze raz, aby utworzyć czwarty moduł tekstowy w następujący sposób:
- Powiel poprzedni moduł tekstowy.
- Otwórz ustawienia tekstu dla zduplikowanego modułu.
- 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: Stwórzmy układ siatki CSS dla modułów
Teraz, gdy wszystkie nasze moduły zostały dodane, stwórzmy dla nich siatkę.
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. Teraz musimy zaktualizować ustawienia wierszy, aby upewnić się, że wiersz zajmuje 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 ważny 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
W drugim wierszu CSS zdefiniujemy szablon kolumny siatki. W takim przypadku nasza siatka będzie miała cztery kolumny o szerokości 25%.
kolumny-szablonów siatki: 25% 25% 25% 25%
Trzecia linia zawiera wiersze, które zostaną wygenerowane automatycznie. Oznacza to, że wysokość każdego wiersza będzie określona przez pionową wysokość zawartości (lub modułów) w wierszu.
grid-auto-rows: auto
Dostosuj układ siatki na urządzeniu mobilnym
Teraz w razie potrzeby musimy również dostosować układ siatki na urządzeniach mobilnych.
Aby to zrobić, wystarczy, że do tabletu i telefonu komórkowego dodamy kod CSS, który zmieni liczbę kolumn i szerokość każdej kolumny.
W tym przykładzie zmienimy układ siatki modułów na tabletach na dwie kolumny, z których każda ma 50% szerokości.
Otwórzmy opcje responsywne i wybierzmy kartę tabletu pod głównym elementem i wklejmy 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 modułach siatki
Dodawanie nowego modułu do siatki i jego reakcja
Teraz, gdy mamy każdy moduł w siatce, jeśli dodamy więcej modułów, drugi zostanie przesunięty w prawo i zostaną utworzone nowe wiersze. 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
W międzyczasie wszystkie moduły mają taką samą ilość treści, więc tak naprawdę nie widzimy, jak siatka poradzi sobie z modułami o różnych wysokościach. 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. Od teraz wysokość wiersza będzie również określana przez moduł z największą zawartością (lub wysokość pionową).
Zmiana pozycji modułów na siatce
Elementy siatki CSS można rozmieszczać za pomocą wbudowanego systemu numerowania w module 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 dla naszej struktury kolumn numer linii 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 do 4 na dole trzeciego wiersza.
Jeśli chcemy zmienić pozycję modułu (lub elementu siatki) w CSS Grid, możemy określić, gdzie chcemy umieścić 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. W tym celu wystarczy 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 poziomo, 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 przywrócimy moduł do pierwotnej lokalizacji. Przydaje się to do utrzymania głównego nagłówka u góry strony.
W tym celu wybierz kartę 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.
Teraz umieścimy trzeci moduł tekstowy (teraz w drugiej kolumnie górnego rzędu) w nowym miejscu 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;
Możemy teraz zmienić pozycję dla urządzeń mobilnych, dodając następujący kod CSS dla tabletów:
grid-column: auto;grid-row: auto;
W naszej ostatniej modyfikacji umieścimy siódmy moduł 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.
W tym celu otwórzmy ustawienia dla siódmego modułu tekstowego i wklejmy następujący niestandardowy CSS do głównego elementu:
grid-column: 4/5;grid-row: 2/4;
Teraz wklej następujący kod CSS do wyświetlania na tablecie.
grid-column: auto;grid-row: auto;Wyrównywanie zawartości modułu (lub elementu siatki) do środka
Prawdopodobnie masz już dość instrukcji, ale jeśli się na tym zatrzymamy, stracimy pomocny sposób wyrównania (lub wyśrodkowania) zawartości naszego modułu w pionie. Wyśrodkowanie zawartości modułu w pionie jest przyjemną cechą układu siatki, ponieważ sprawia, że wszystko jest bardziej symetryczne i estetyczne.
W tym celu możemy dodać fragment 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. Możemy użyć wielokrotnego wyboru, aby wybrać wszystkie moduły (lub elementy siatki), które nie mają jeszcze niestandardowego CSS do głównego elementu (ponieważ nie chcemy nadpisywać tych modułów niestandardowymi pozycjami). Następnie otwórz ustawienia elementu, otwierając ustawienia jednego z wybranych modułów. Na karcie Zaawansowane wklej następujący kod CSS w elemencie głównym:
display:flex;flex-direction:column;align-items:center;justify-content:center;
Możemy teraz 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.
Ostateczny wynik
Oto jak wygląda to, co zrobiliśmy do tej pory.
Czy zauważyłeś, jak moduły (lub elementy siatki) płynnie dopasowują się do różnych szerokości przeglądarki, aby uzyskać przyjemny, responsywny projekt.
Prawdziwy przykład przy użyciu różnych modułów i projektów
Jeśli chcesz zobaczyć prawdziwy przykład za pomocą tego systemu siatki, możesz użyć różnych modułów. Oto, co możesz stworzyć za pomocą tej techniki. Jest to dostępne w pakiecie układu siłowni fitness.
W całym swoim teraz
W tym samouczku pracowaliśmy nad stworzeniem układu 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żemy z niego uzyskać. 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. Jeśli jesteś uzależniony od CSS i chciałbyś dalej nurkować, powinieneś zapoznać się z tym kompletnym przewodnikiem, aby rozważyć więcej możliwości.
Będziemy zadowoleni, więc zobacz, jak odniosłeś sukces w sekcji komentarzy.
