Zmiana ilości kolumn w module Blog, w motywie Divi odbywa się poprzez dodanie kodu CSS do ustawień motywu. Wybierając na zakładce Design, w pozycji Układ Graficzny: Siatka, zawsze będą to 3 kolumny w przypadku kiedy korzystasz z pełnej szerokości i nie używasz sidebaru, lub 2 kolumny, jeżeli korzystasz z sidebaru po lewej lub prawej stronie. Za pomocą kodu CSS będziesz mógł dowolnie zmieniać liczbę kolumn.
Blog z 4 kolumnami bez sidebaru
Na zakładce Zawartość ustaw:
Liczbę postów – wpisz ilość jaką chcesz wyświetlać na pierwszej stronie jaką chcesz
Kategorię wpisów, które mają się na blogu pojawić
Zawartość: pokaż fragment
Pokaż Obraz główny: TAK,
Pokaż przycisk czytaj mnie: TAK lub NIE – zależy od Ciebie
Pokaż autora: TAK lub NIE – zależy od Ciebie
Pokaż datę: TAK lub NIE – zależy od Ciebie
Pokaż liczbę komentarzy: TAK lub NIE – zależy od Ciebie
Pokaż paginację: TAK lub NIE – zależy od Ciebie, ale zalecam ustawić ją na TAK
Na zakładce Design ustaw:
Układ graficzny: Siatka
Na zakładce Zaawansowane:
podaj Klasę CSS: cq-blog-styling lub jakąkolwiek inną, będziemy jej używać w kodzie.
Zapisz zmiany klikając w Zapisz i wyjdź, a następnie zapisz szkic lub opublikuj stronę, wpis lub projekt, w zależności od tego, gdzie wstawiłeś moduł Blog.
Teraz przejdź do zakładki Divi, w lewym, bocznym panelu WordPressa, wybierz Opcje szablonów graficznych i na zakładce General (ogólne) zjedź na sam dół strony, do pola Niestandardowy CSS. W polu niestandardowy CSS wklej poniższy kod CSS:
/*Styl dla modułu blog siatka*/
@media only screen and ( min-width: 981px) {
.cq-blog-styling.et_pb_blog_grid .et_pb_salvattore_content[data-columns]::before {
content: '4 .column.size-1of4′ !important;
}
.cq-blog-styling .column.size-1of4 {
width: 24% !important;
margin: 0.5%;
}
.cq-blog-styling .column.size-1of4:nth-child(4n) {
margin-right: 0%;
}
}
Gotowe!
Wartościami w kodzie, w pozycji width i margin czy margin-right możesz operować dowolnie, ale jeżeli diametralnie obniżysz lub zwiększysz ich wartość, to cały układ może się rozjechać.