Zmiana ilości kolumn w module Blog, w motywie Divi odbywa się poprzez dodanie krótkiego kodu CSS do ustawień motywu. I tutaj uspokajam od razu wszystkie osoby, które nie mają pojęcia co to jest za kod, albo na samo hasło CSS zamykają przeglądarki: to nic strasznego, tym bardziej, że podam Ci kod i krok po kroku pokażę jak wprowadzić zmiany. Prawda jest taka, użycie niewielkiej modyfikacji kodem CSS nie spowoduje żadnego krytycznego błędu na Twojej stronie, ona nie wybuchnie, i nie stracisz przez to żadnych danych. Co najwyżej, jeżeli podczas wprowadzania zmian popełnisz jakiś błąd, kod nie zadziała – usuniesz go i spróbujesz raz jeszcze.
Przede wszystkim musisz wiedzieć, że wstawiając na swoją stronę moduł Blog, i 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
- Dodaj nowy wpis, projekt lub stronę i za pomocą The Divi Builder (w polskiej wersji Generator Divi) i wstaw moduł Blog.
- 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, (możesz ustawić NIE, ale o wiele lepiej blog prezentuje się, jeżeli jest wyświetlany z obrazkiem)
- 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:
[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%;
}
}
[/css]
Gotowe! Pamiętaj, żeby po wprowadzeniu kodu zapisać zmiany. Przechodząc teraz na swoją stronę, w której umieściłeś moduł Blog, powinieneś zobaczyć mniej więcej coś takiego:
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ć. Nie ma tego złego – ćwicz i testuj – nic nie popsujesz. 🙂 To co może różnić się od zdjęcia powyżej to wysokość kafelków. Ja wiem, że większość osób nie przywiązuje do tego wagi i nie przeszkadza im, że jeden kafelek jest krótszy, a drugi dłuższy, ale ja mam na tym punkcie totalnego świra, więc jeżeli chcesz wyrównać wysokość kafelków na blogu to zajrzyj do wpisu Divi: Jak zmienić wysokość kafelka w module blog?, a jeżeli chcesz standardowe czytaj dalej zamienić w przycisk, to tutaj znajdziesz rozwiązanie: Jak „czytaj dalej” na blogu zamienić w przycisk?.
Trzymam za Ciebie kciuki i wierze, że sobie poradzisz. Gdyby jednak coś poszło nie tak, to koniecznie napisz w komentarzu, albo daj nam znać mailowo na adres: cq.canaq@gmail.com 🙂
NAJNOWSZE KOMENTARZE