Jak zrobić pięknego bloga w Divi?

Divi to bardzo popularny motyw z wizualnym kreator stron internetowych w WordPress. Można, dzięki niemu bez kodowania stworzyć bardzo ładne strony www praktycznie dla każdej branży. Jednak gdy masz dodać blog do takiej strony, zaczynają się problemy. W personalizacji motywu jest bardzo mało opcji dostosowania wyglądu bloga jak i strony z wpisami. Aby coś zmienić trzeba znać się na CSS aby nadać lepszy, ładniejszy wygląd.

Ten artykuł jest odpowiedzią na to wyzwanie. Pokażę Ci tutaj jak wykorzystać narzędzie Konstruktów motywów (Theme Builder), które jest w motywie Divi do stworzenia własnego wyglądu bloga, a także strony z pojedynczym wpisem. Dodatkowo udostępnię Ci gotowe kody CSS, które skopiujesz i wkleisz aby kilkoma kliknięciami zmienić wygląd listingu wpisów na blogu.

https://youtu.be/l9hcN91bUsg

Jak zmienić moduł blog w Divi na układ listy?

Krok #1: Ustaw moduł bloga na układ o pełnej szerokości

Przejdź do ustawień modułu blog na karcie Design i ustaw układ na pełną szerokość.

Krok #2: Dodaj klasę CSS do modułu bloga

Aby wpłynąć tylko na wybrany moduł Blog w witrynie, musimy użyć niestandardowej klasy CSS. Otwórz więc ustawienia modułu Divi Blog i przejdź do zakładki Zaawansowane. Tam rozwiń opcję Identyfikatory i klasy CSS.
Umieść klasę „ style-blog-list ” w polu Klasa CSS.

Krok #3: Dodanie niestandardowego CSS, który zmienia szerokość obrazu i treści z tytułem i zajawką wpisu.

Umieść poniższy kod CSS w polu Divi> Opcje motywu> Niestandardowy kod CSS.

/*Układ bloga w formie listy dla tablet i desktop*/
@media (min-width: 767px) {
/*szerokość dla obrazka wyróżniającego*/
.style-blog-list .entry-featured-image-url  {
width: 30%;
float: left;
margin-bottom: 0!important;
}
/*szerokość dla nagłówka, sekcji meta i zajawki*/
.style-blog-list .entry-title,
.style-blog-list .post-meta,
.style-blog-list .post-content {
width: 70%;
float: left;
padding-left: 30px;
}
/*dodajmy trochę "upiększaczy": dolne obramowanie oddzielające wpisy, odstępy między wpsiami */
.style-blog-list .et_pb_post:not(:last-child) {
border-bottom: 1px solid #dddddd!important;
padding-bottom: 10px;
margin-bottom: 20px;
border-radius: 0 !important;
}

Dużo lepiej, prawda? 😀

Jak wyświetlić listę ostatnich postów na blogu w obszarze paska bocznego za pomocą modułu bloga Divi?

Sprawa prezentuje się podobnie jak w wcześniejszym przykładzie. Jedynie co to dodajemy inny kod w polu Niestandardowy kod CSS i wpisujemy inną klasę CSS w ustawieniach modułu blog.

Do ustawień modułu blog w zakładce Zaawansowane rozwiń opcję Identyfikatory i klasy CSS i mieść klasę „style-blog-sidebar-list” w polu Klasa CSS.

Do pola Niestandardowy kod CSS dodaj poniższą kod:

/*styl listy wpisów na pasek boczny*/
/*szerokośc obrazka*/
.style-blog-sidebar-list .entry-featured-image-url {
	width: 100px;
	float: left;
	margin-bottom: 0!important;
}
/*szerokośc tekstu*/
.style-blog-sidebar-list .entry-title,
.style-blog-sidebar-list .post-meta {
	width: calc(100% - 100px);
	float: left;
	padding-left: 20px;
}
/*obrazek w kwadracie*/
.style-blog-sidebar-list .entry-featured-image-url {
	padding-top: 100px;
	display: block;
}
.style-blog-sidebar-list .entry-featured-image-url img {
	position: absolute;
	height: 100%;
	width: 100%;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	object-fit: cover;
}
/*odstępy miedzy wpisami i seperator pomiedzy nimi*/
	.style-blog-sidebar-list .et_pb_post:not(:last-child)
	{
	border-bottom: 1px solid #dddddd!important;
	padding-bottom: 10px;
	margin-bottom: 10px;
}
}

Gotowe.

Wtyczki, które pomogą jeszcze lepiej dostosować wygląd bloga.

1. Loops Blog

Skorzystaj z gotowych projektó blogów dla swoich witryn. Wybierz projekt bloga, który będzie najlepiej pasował do Twojej witryny, spośród ponad 50 nowoczesnych i czystych projektów!

• Ponad 50 gotowych szablonów blogów
• Import jednym kliknięciem
• Nowoczesny i czysty design
• Adaptacyjny rozmiar obrazu, w przeciwieństwie do większości istniejących układów, będziesz mógł używać obrazów wyróżniających w różnych rozmiarach
• Łatwa personalizacja
• Stylowe animacje
• 100% responsywny
• Nowe projekty blogów dodawane regularnie
• Nieograniczona liczba instalacji
• 30 dniowa gwarancja zwrotu pieniędzy
• Dożywotnie aktualizacje

---

2. Divi Blog Pro

Divi Blog Pro to rozwiązanie premium dla każdego, kto szuka responsywnej strony blogowej ze stroną internetową. Za pomocą tej wtyczki możesz zaprojektować swoją stronę bloga według własnego uznania. Nie są wymagane żadne umiejętności kodowania!

W ramach wtyczki otrzymujesz:

• 8+ różnych modułów bloga
• Obsługa niestandardowych postów dla modułów
• 4 Unikalne układy siatki do zaprezentowania
• Pokaż/Ukryj kategorię, datę, autora
• 3 opcje rodzaju paginacji, w tym „Załaduj więcej”
• 2 układy Masonry
• Unikalny moduł inteligentnej listy postów, aby zaprezentować swoje posty za pomocą dużych polecanych obrazów
• 4 Unikalne układy karuzeli do prezentacji Twoich postów
• Zaawansowane opcje filtrowania kategorii w celu uwzględnienia postów dla pętli

---

3. Divi Machine

Skorzystaj z wtyczki Divi Machine, aby tworzyć dynamiczne treści za pomocą Divi i zaawansowanych pól niestandardowych.
Buduj złożone witryny Divi, które wyświetlają dynamiczne pola, filtrując, przeszukując i nie tylko.

Twórz praktycznie każdy rodzaj witryny Divi z niestandardowymi typami postów. Niestandardowe typy wpisów umożliwiają budowanie dynamicznych treści, takich jak wypożyczalnie samochodów, nieruchomości, członkowie zespołu, referencje i wiele innych.

Wykorzystując moc wtyczki Advanced Custom Field (ACF), Divi Machine pomaga wyświetlać dane każdego niestandardowego postu, gdzie i jak chcesz. Potrzebujesz suwaka galerii lub przycisku pobierania pliku? Nie ma problemu.

Stworzyliśmy moduł, który działa w połączeniu z biblioteką Divi, aby wyświetlać Twoje posty na stronach archiwum/kategorii. Korzystanie z niestandardowego układu pętli utworzonego w bibliotece Divi zapewnia pełną kontrolę nad stylem treści.