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:


/*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! 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 🙂

by Paulina Kanak

właścicielka domen Canaq.net | Canaq.pl

© Copyright 2014 | Wszelkie prawa zastrzeżone
cq.canaq@gmail.com

Pin It on Pinterest