Jak zmienić liczbę kolumn w module Divi Blog

Moduł bloga Divi może wyświetlać posty na blogu w układzie o pełnej szerokości lub w siatce. Jeśli wybierzesz układ siatki, maksymalna liczba kolumn, które możesz mieć, to trzy. W tym samouczku zamierzamy zbadać połączenie mocy CSS Grid z modułem Divi Blog, aby utworzyć dowolną liczbę kolumn. Wystarczy kilka fragmentów kodu CSS, aby Twój blog przekształcił się w piękny, wielokolumnowy układ siatki. Ponadto kolumny będą płynnie reagowały we wszystkich rozmiarach przeglądarek, więc nie musisz się martwić o aktualizowanie tych zapytań o media lub ustawień responsywnych. Po magii CSS Grid nadal będziesz mieć wbudowane ustawienia modułu bloga, aby projektować bloga wizualnie bez dodatkowego niestandardowego CSS. Tak więc, jeśli szukasz więcej kolumn na swoim blogu Divi, to załatwi sprawę i nie tylko.

zapowiedź

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

A oto pisak pokazujący układ siatki CSS, który dodamy do modułu bloga.

Pobierz układ za DARMO

Aby położyć swoje ręce na projekcie modułu bloga 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.

ŚCIĄGNIJ

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!

Subskrybuj nasz kanał YouTube

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

Kliknij przycisk Importuj.

W wyskakującym okienku przenoszenia 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?

Jak zmienić liczbę kolumn w module Divi Blog za pomocą siatki CSS?

Dlaczego siatka CSS?

Istnieje wiele sposobów tworzenia układów kolumn dla modułu bloga za pomocą CSS. Ale w tym przypadku najbardziej sensowne jest użycie siatki CSS. Właściwość CSS Grid jest popularnym sposobem tworzenia przewidywalnych i responsywnych układów siatki dla treści za pomocą zaledwie kilku linii CSS. Dzięki niemu możemy uporządkować wszystkie karty modułu bloga w w pełni responsywną siatkę. Krótko mówiąc, oferuje proste i kompletne rozwiązanie do dodawania dowolnego układu kolumn do swojego bloga Divi. W rzeczywistości użyliśmy go również do zbudowania układu siatki dla modułów Divi.

Zwróćmy teraz uwagę na moduł bloga.

Konfigurowanie modułu bloga z układem o pełnej szerokości

Divi Blog Module może być używany do dodawania bloga w dowolnym miejscu na Twojej stronie internetowej. To sprawia, że ​​tworzenie strony bloga w Divi jest naprawdę łatwe. Wszystko, co musisz zrobić, to dodać moduł bloga do strony za pomocą Divi Builder.

W tym samouczku użyjemy gotowego szablonu strony bloga z jednego z naszych darmowych pakietów układów, który ma już moduł bloga z podstawową stylizacją. Aby załadować gotowy układ strony bloga na swoją stronę, otwórz menu ustawień na dole i otwórz wyskakujące okienko Dodaj z biblioteki. Następnie wyszukaj i znajdź układ strony bloga Fashion Design i załaduj go na stronę.

Po załadowaniu układu znajdź moduł blogu używany do wyświetlania postów w blogu i otwórz ustawienia modułu blogu.

Ustaw liczbę postów

W ustawieniach bloga zaktualizuj zawartość, aby ograniczyć liczbę postów do 10. (Jest to głównie ze względów estetycznych, ponieważ nasza siatka ostatecznie będzie zawierać dwa rzędy po pięć postów na blogu na komputerze).

• Liczba postów: 10

Wybierz układ o pełnej szerokości

Ponieważ zamierzamy tworzyć układ kolumn dla naszego bloga za pomocą CSS Grid, musimy upewnić się, że układ modułu bloga ma pełną szerokość (nie siatka). Dzięki temu posty na blogu będą ułożone pionowo w normalnej kolejności dokumentu/strony.

Aby zmienić układ modułu blogu, otwórz ustawienia modułu blogu i na karcie projektu otwórz menu rozwijane Układ i wybierz opcję Pełna szerokość .

Teraz każdy post na blogu powinien obejmować całą szerokość kolumny (lub kontenera nadrzędnego).

Dla zabawy, dodajmy obramowanie do postów na blogu, abyśmy mogli lepiej zorientować się, jak będzie wyglądał układ naszej siatki, gdy dodamy nasz CSS. Zaktualizuj opcje obramowania w następujący sposób:

• Szerokość obramowania: 1px
• Kolor obramowania: rgba (150,104,70,35)

Dodawanie niestandardowej klasy CSS do modułu bloga

Aby efektywnie kierować ten konkretny moduł bloga (a nie inny) za pomocą naszego CSS, musimy nadać naszemu modułowi niestandardową klasę CSS. W zakładce Zaawansowane dodaj następującą klasę CSS:

• Klasa CSS: et-blog-css-grid

Tworzenie układu wielokolumnowego za pomocą siatki CSS

Teraz, gdy nasz moduł bloga jest skonfigurowany z układem o pełnej szerokości, jesteśmy gotowi do dodania naszego niestandardowego kodu CSS. Na razie użyjemy modułu kodu, aby dodać CSS do strony. Ale kiedy skończymy, zawsze możesz przenieść CSS do preferowanej lokalizacji (np. Niestandardowy CSS w opcjach motywu lub style.css motywu podrzędnego).

Dodaj nowy moduł kodu pod modułem bloga.

W polu wprowadzania kodu dodaj niezbędne tagi stylu potrzebne do zawinięcia dowolnego kodu CSS dodanego do strony.

Wewnątrz tagów stylu wklej następujący fragment kodu CSS:

.et-blog-css-grid > div {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 20px;
}

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

wyświetlanie:siatka;

Drugi wiersz CSS definiuje szablon kolumny siatki.

kolumny szablonu siatki: powtórz (automatyczne wypełnianie, minmax(200px, 1fr));

Trzecia linia określa odstępy między elementami siatki (np. szerokość rynny).

odstęp: 20px;

Jak działają kolumny siatki CSS

W takim przypadku siatka będzie wielokrotnie dodawać kolumny zgodnie z potrzebami, aby wypełnić pozostałą przestrzeń kontenera siatki. Każda kolumna będzie miała minimalną szerokość 200 pikseli i maksymalną szerokość 1 fr (czyli dokładnie to samo, co auto). Oznacza to, że gdy kontener nadrzędny (wiersz/kolumna Divi) ma maksymalną szerokość 1080px, siatka będzie miała 5 kolumn. Każda kolumna będzie miała szerokość 200px (minimalna szerokość), co odpowiada 1000px. Dodaj 4 przerwy w siatce po 20 pikseli, a otrzymasz łącznie 1080 pikseli. Gdy widok zsunie siatkę poniżej 1080px, magia CSS Grid przejmuje kontrolę i wypełnia każdą dostępną przestrzeń postami na blogu, aż osiągną szerokość 200px. Nowe wiersze będą domyślnie tworzone automatycznie, gdy będą potrzebne.

Aby uzyskać więcej kolumn, możesz zmienić wartość minmax 200 pikseli na mniejszą lub zwiększyć maksymalną szerokość wiersza Divi do wartości większej niż 1080 pikseli.

Oto pisak pokazujący funkcjonalność CSS Grid Layout, którą tutaj dodaliśmy.

W tym momencie pięciokolumnowa responsywna siatka jest gotowa do działania. W rzeczywistości nie planujesz używać paginacji ani obramowań w swoich postach na blogu, możesz zatrzymać się właśnie tutaj.

Oto dotychczasowy wynik.

Stylizacja pocztówki na blogu (lub elementu siatki)

Następnie możemy dodać kilka wierszy CSS, które są skierowane na elementy siatki (lub pocztówki na blogu), tak aby były wyrównane do górnej części każdego wiersza i miały trochę dopełnienia.

.et-blog-css-grid .et_pb_post {
  align-self: start;
  padding: 15px;
}

Usuwanie stronicowania z siatki

Obecnie, jeśli masz aktywną paginację w module blogu, będzie ona traktowana jako ostatni element siatki w siatce CSS. Aby całkowicie usunąć paginację z siatki, możemy nadać jej pozycję bezwzględną i umieścić ją bezpośrednio pod modułem bloga. Aby to zrobić, dodaj następujący kod CSS:

.et-blog-css-grid > div > div {
  width: 100%;
  position: absolute;
  bottom: 0;
  transform: translate(0%, 150%);
}

Teraz łącza stronicowania są bezpiecznie poza siatką, dzięki czemu nie są przesuwane na różnych szerokościach okien ekranu.

Sprawdźmy dotychczasowy wynik!

Dodatkowa wskazówka: dostosuj rozmiar wszystkich polecanych obrazów (lub miniatur)

W tym momencie możesz zauważyć niespójność wysokości prezentowanych obrazów na każdej pocztówce na blogu. Jeśli chcesz, aby wszystkie były tej samej wysokości, możesz również użyć dodatkowego CSS.

.et-blog-css-grid .entry-featured-image-url {
  padding-top: 56.25%;
}
.et-blog-css-grid .entry-featured-image-url img {
  position: absolute;
  height: 100%;
  width: 100%;
  top: 0;
  object-fit: cover;
}

Pierwszy fragment kodu jest skierowany do wskazanego kontenera obrazu i dodaje procent wypełnienia, które zasadniczo dostosowuje wysokość kontenera obrazu. Ale pierwszy fragment nie działa, dopóki nie ustawimy wyróżnionego obrazu tak, aby był idealnie wyśrodkowany w kontenerze obrazu. W tym celu nadajemy obrazowi pozycję bezwzględną i używamy opcji „dopasowanie do obiektu: okładka”, aby obraz obejmował całą szerokość i wysokość kontenera.

Przy 56,25% górnego wypełnienia powinniśmy uzyskać proporcje 16:9 dla wszystkich naszych obrazów.

Możesz dostosować dopełnienie kontenera obrazu, aby uzyskać żądany współczynnik proporcji obrazu.

Ostateczny wynik

Oto kolejne spojrzenie na cały CSS, który dodaliśmy do modułu kodu, z kilkoma komentarzami.

/* create css grid column template */
.et-blog-css-grid > div {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 20px;
}
/* style css grid item or blog post */
.et-blog-css-grid .et_pb_post {
  align-self: start;
  padding: 15px;
}

/* remove pagination from blog module grid with absolute position */
.et-blog-css-grid > div > div {
  width: 100%;
  position: absolute;
  bottom: 0;
  transform: translate(0%, 150%);
}

/* Resize Featured Image Thumbnails */
.et-blog-css-grid .entry-featured-image-url {
  padding-top: 56.25%;
}
.et-blog-css-grid .entry-featured-image-url img {
  position: absolute;
  height: 100%;
  width: 100%;
  top: 0;
  object-fit: cover;
}

A oto ostatnie spojrzenie na nasz moduł bloga z naszymi nowymi kolumnami i układem siatki.

Końcowe przemyślenia

Zawsze zaskakuje mnie to, co można osiągnąć za pomocą zaledwie kilku linijek CSS za pomocą CSS Grid. W tym przypadku udało nam się przebudować cały moduł bloga Divi do płynnego, pięciokolumnowego układu. Najlepsze jest to, że nie musisz się martwić o korzystanie z zapytań o media! Mamy nadzieję, że zaoszczędzi to czas i zapewni więcej opcji tworzenia pięknych stron blogów.

Czekam na kontakt z Państwem w komentarzach.

Dzięki!