Czy chcesz wyświetlić swoją stronę DIVI Blog jako wielokolumnową siatkę?
Moduł Divi's Blog może wyświetlać posty na blogu w układzie o pełnej szerokości lub siatce. Jeśli wybierzesz układ siatki, maksymalna liczba kolumn, które możesz mieć, to trzy.
W tym samouczku, wykorzystując zaledwie kilka fragmentów CSS, Twój blog zamieni się w piękny wielokolumnowy układ siatki. Ponadto kolumny będą płynne i responsywne we wszystkich rozmiarach przeglądarek, więc nie musisz się martwić aktualizacją zapytań o media ani ustawień responsywności.
Możesz również zapoznać się z naszym artykułem, aby wiedzieć Jak stworzyć stronę bloga za pomocą modułu DIVI Blog.
badanie
Zanim przejdziemy do tego samouczka, przyjrzyjmy się najpierw wynikowi, który chcemy osiągnąć.
Pobierz DIVI teraz !!!
Konfiguracja modułu Blog z układem pełnoekranowym
Moduł DIVI's Blog może być użyty do dodania bloga w dowolnym miejscu na twoim Witryna internetowa. To naprawdę ułatwia tworzenie strony bloga w Divi. Wszystko, co musisz zrobić, to dodać moduł Blog do strony za pomocą Divi Builder.
W tym samouczku użyjemy gotowego układu bloga z jednego z darmowe pakiety układów DIVI, który zawiera już moduł Blog z podstawowym stylem.
Aby załadować gotowy układ bloga:
- Utwórz nową stronę z pulpitu WordPress
- Nadaj mu odpowiednią nazwę i kliknij „Użyj Divi Builder”
- Kliknij „Wybierz układ”
- Wpisz w pasku wyszukiwania „Projektant mody” i wybierz układ „Strona bloga projektanta mody”
- Upewnij się, że wybrałeś układ bloga, a następnie kliknij „Wybierz układ”
Po załadowaniu układu znajdź moduł Blog używany do wyświetlania postów na blogu i otwórz ustawienia.
Ustaw liczbę postów
W ustawieniach bloga zaktualizuj plik treść 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).
- Liczba pozycji: 10
Wybierz układ pełnoekranowy
Ponieważ zamierzamy układać naszego bloga w kolumnach przy użyciu siatki CSS, musimy upewnić się, że układ modułu Blog to „Pełny ekran' (nie 'Siatka'). Dzięki temu posty na blogu będą ułożone pionowo w normalnej kolejności stron.
Aby zmienić układ modułu Blog, otwórz ustawienia modułu i pod zakładką Styl otwórz menu rozwijane Szablon i wybierz Pełny ekran .
Teraz każdy post na blogu zajmie całą szerokość kolumny (lub kontenera nadrzędnego).
Dodajmy obramowanie do postów na blogu. Zaktualizuj opcje obramowania w następujący sposób:
- Szerokość obramowania: 1px
- Kolor obramowania: rgba (150,104,70,0.35)
Dodawanie własnej klasy CSS do modułu Blog
Aby skutecznie 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ą CSS Grid
Teraz, gdy nasz moduł Blog jest skonfigurowany z układem pełnoekranowym, jesteśmy gotowi do dodania niestandardowego kodu CSS.
Zamierzamy wstawić moduł Code pod modułem Blog, aby dodać CSS do strony.
W polu wprowadzania kodu dodaj niezbędne znaczniki stylu, aby zawinąć dowolny kod CSS dodany 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 plik treść (lub moduły) w formie siatki.
display: grid;Druga linia CSS definiuje model kolumn siatki.
grid-template-columns : repeat(auto-fill, minmax (200px, 1fr));Trzeci rząd określa odstępy między elementami siatki.
gap : 20px ;W tym momencie pięciokolumnowa responsywna siatka jest gotowa do działania. W rzeczywistości, jeśli nie chcesz używać paginacji ani obramowań w swoich postach na blogu, możesz się tutaj zatrzymać.
Oto dotychczasowy wynik.
Dostosuj elementy siatki
Następnie możemy dodać kilka wierszy CSS, które są skierowane do elementów siatki, tak aby były wyrównane do góry każdego wiersza i miały trochę dopełnienia.
.et-blog-css-grid .et_pb_post {
align-self: start;
padding: 15px;
}
Usunięto paginację 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%);
}
Zobaczmy jak dotąd wynik!
Wskazówka: dostosuj rozmiar wszystkich polecanych obrazów (lub miniatur)
W tym momencie możesz zauważyć niespójność w wysokości obrazów prezentowanych w każdym poście na blogu. Jeśli chcesz, aby wszystkie były tej samej wysokości, możesz również użyć do tego 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;
}
Przy górnym marginesie wewnętrznym wynoszącym 56,25% 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
A oto końcowy podgląd naszego modułu Blog z naszymi nowymi kolumnami i siatką. Jak widać, siatka jest w pełni responsywna.
Pobierz DIVI teraz !!!
Wnioski
Zrobione ! W tym samouczku pokazaliśmy, jak rozmieścić posty na blogu w kolumnach.
Udało nam się przebudować cały moduł Divi Blog w płynny, pięciokolumnowy układ. Mam nadzieję, że zaoszczędzi to czas i zapewni więcej opcji tworzenia pięknych stron blogów. Możesz również skonsultować Jak stworzyć stronę bloga z modułem Divi's Blog
Zobacz także nasze zasoby, jeśli potrzebujesz więcej elementów do realizacji projektów tworzenia stron internetowych, zapoznaj się z naszym przewodnikiem na stronie 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.
