Szukasz klasycznego, ale kreatywnego sposobu na wyświetlanie postów na blogu w swojej witrynie? Jeśli tak, pokochasz ten gratisowy Divi. Zaprojektowaliśmy klasyczny szablon postów na blogu inspirowany maszyną do pisania, który automatycznie stosuje się do wszystkich postów na blogu w Twojej witrynie! W tym poście pokażemy również krok po kroku, jak odtworzyć projekt od podstaw w Theme Builder.

Weźmy się za to!

Zapowiedź

Zanim zagłębimy się w samouczek, rzućmy okiem na wyniki na różnych rozmiarach ekranu.

Pulpit

mobilny

Pobierz szablon wpisu na blogu inspirowanego maszyną do pisania za DARMO

Aby położyć swoje ręce na darmowym szablonie wpisu na blogu inspirowanym maszyną do pisania, najpierw musisz go pobrać za pomocą przycisku poniżej. Aby uzyskać dostęp do pobrania, musisz zapisać się na naszą listę e-mailową Divi Daily, korzystając z poniższego formularza. Jako nowy subskrybent otrzymasz jeszcze więcej dobroci Divi i darmowy pakiet Divi Layout w każdy poniedziałek! Jeśli jesteś już na liście, po prostu wpisz poniżej swój adres e-mail i kliknij pobierz. Nie będziesz „ponownie subskrybować” ani otrzymywać dodatkowych wiadomości e-mail.

Pobierz pliki

Pobierz za darmo

Dołącz do biuletynu Divi, a wyślemy Ci e-mailem kopię najlepszego pakietu układu strony docelowej Divi, a także mnóstwo innych niesamowitych i bezpłatnych zasobów, wskazówek i sztuczek Divi. Idź dalej, a w mgnieniu oka zostaniesz mistrzem Divi. Jeśli masz już subskrypcję, wpisz poniżej swój adres e-mail i kliknij Pobierz, aby uzyskać dostęp do pakietu układów.

POBIERANIE

Udało Ci się zasubskrybować. Sprawdź swój adres e-mail, aby potwierdzić subskrypcję i uzyskać dostęp do bezpłatnych cotygodniowych pakietów układów Divi!

1. Przejdź do kreatora motywów Divi i dodaj nowy szablon

Przejdź do kreatora motywów Divi i dodaj nowy szablon

Zacznij od przejścia do Divi Theme Builder. Tam dodaj nowy szablon.

Użyj szablonu we wszystkich postach

Użyj tego nowego szablonu we wszystkich swoich postach.

• Użyj na: wszystkie posty

Rozpocznij tworzenie treści szablonu

I zacznij budować ciało nowego szablonu.

2. Zacznij budować treść postu na blogu

Ustawienia sekcji

Kolor tła

W edytorze szablonów zauważysz sekcję. Otwórz tę sekcję i zmień kolor tła.

• Kolor tła: #fff4d8

Rozstaw

Następnie dodaj niestandardową górną i dolną wyściółkę.

• Górna wyściółka: 200px
• Dolna wyściółka: 200px

Granica

I uzupełnij ustawienia sekcji, dodając obramowanie.

• Szerokość obramowania: 100px (komputer), 20px (tablet i telefon)
• Kolor obramowania: #ffffff

Dodaj wiersz nr 1

Struktura kolumny

Kontynuuj, dodając nowy wiersz do sekcji, korzystając z następującej struktury kolumn:

Rozstaw

Nie dodając jeszcze żadnych modułów, otwórz ustawienia wiersza i usuń wszystkie domyślne górne i dolne dopełnienie.

• Górna wyściółka: 0px
• Dolna wyściółka: 0px

Dodaj moduł obrazu do kolumny

Załaduj obrazek

Następnie dodaj moduł obrazu do kolumny wiersza i prześlij wybraną ilustrację. Ilustracja, której używamy w tym samouczku, znajduje się w folderze do pobrania na początku tego samouczka.

Rozstaw

Przejdź do zakładki projektu modułu i zmień wartości odstępów w następujący sposób:

• Górny margines: -150px
• Lewy margines: -12vw (komputer), 0px (tablet i telefon)

Dodaj wiersz nr 2

Struktura kolumny

Do następnego rzędu. Użyj następującej struktury kolumn:

Dodaj moduł tekstowy do kolumny 1

Treści dynamiczne

Dodaj moduł tekstowy do pierwszej kolumny wiersza i użyj następującej zawartości dynamicznej:

• Treść: Data publikacji posta

• Format daty: 08/06/1999 m/d/Y

Ustawienia tekstu

Zmień odpowiednio ustawienia tekstu:

• Czcionka tekstu: Special Elite
• Grubość czcionki tekstu: pogrubiona
• Kolor tekstu: #000000
• Rozmiar tekstu: 1.4rem

Trzykrotne klonowanie modułu tekstowego

Po zakończeniu ustawień modułu tekstowego możesz sklonować cały moduł trzy razy.

Zmień zawartość dynamiczną

Zmodyfikuj dynamiczną zawartość zduplikowanych modułów w następujący sposób:

• Duplikat #1: Kategorie postów
• Duplikat #2: Autor postu
• Duplikat #3: Liczba komentarzy
  • Po: Komentarze
  • Link do obszaru komentarzy: Tak

Umieść dwa moduły tekstowe w kolumnie 2

Kontynuuj, umieszczając dwa ostatnie moduły tekstowe w drugiej kolumnie wiersza,

Zmień kolor tekstu linku kategorii i liczbę komentarzy

W razie potrzeby zmodyfikuj również kolor tekstu linku.

• Kolor tekstu łącza: #000000

Zmień orientację tekstu modułów w kolumnie 2

I uzupełnij moduły tekstowe w kolumnie 2, modyfikując ich wyrównanie tekstu na różnych rozmiarach ekranu.

• Wyrównanie tekstu: w prawo (komputer stacjonarny), w lewo (tablet i telefon)

Dodaj wiersz nr 3

Struktura kolumny

Do następnego rzędu! Użyj następującej struktury kolumn:

Dodaj moduł tekstowy do kolumny

Treści dynamiczne

Dodaj moduł tekstowy do kolumny wiersza i użyj następującej zawartości dynamicznej:

• Treść: Tytuł posta/archiwum

• Przed:

• Później:

Ustawienia tekstu H1

Przejdź do zakładki projektowania modułu i zmień ustawienia tekstu H1 w następujący sposób:

• Czcionka nagłówka: Special Elite
• Kolor tekstu nagłówka: #000000
• Rozmiar tekstu nagłówka: 3,5 rem (komputer stacjonarny), 2,5 rem (tablet), 2 rem (telefon)
• Wysokość linii nagłówka: 1,5 em

Rozstaw

Dodaj również niestandardowy górny i dolny margines.

• Górny margines: 150px
• Margines dolny: 150px

Dodaj moduł treści posta do kolumny

Ustawienia tekstu

Przejdźmy do następnego modułu, którym jest moduł Post Content. Zmodyfikuj odpowiednio ustawienia tekstu:

• Czcionka tekstu: Special Elite
• Rozmiar tekstu: 1.2rem
• Wysokość linii tekstu: 2,5 em

Ustawienia tekstu nagłówka

Zmień także różne ustawienia tekstu nagłówka.

• Czcionka nagłówka: Special Elite
• Kolor tekstu nagłówka: #000000
• Rozmiar tekstu nagłówka 2: 2rem (H2), 1,9rem (H3), 1,8rem (H4), 1,7rem (H5), 1,6rem (H6)

Identyfikator CSS

I przypisz do modułu identyfikator CSS.

• Identyfikator CSS: post-content-moduł

Dodaj moduł kodu do kolumny

Dodaj kod CSS nagłówka

Teraz, aby dodać niestandardowy margines do różnych nagłówków, dodamy następujący niestandardowy kod CSS do modułu kodu:

<style>
#post-content-module h2, h3, h4, h5, h6 {
margin-top: 70px;
margin-bottom: 70px;
}
</style>

Dodaj sekcję #2

Kolor tła

Dodaj kolejną sekcję do szablonu posta, otwórz ustawienia sekcji i zmień kolor tła sekcji.

• Kolor tła: #fff4d8

Granica

Dodaj też obramowanie.

• Szerokość obramowania: 100px (komputer), 20px (tablet i telefon)
• Szerokość górnej krawędzi: 0px
• Kolor obramowania: #ffffff

Dodaj nowy wiersz

Struktura kolumny

Kontynuuj, dodając nowy wiersz do sekcji, korzystając z następującej struktury kolumn:

Dodaj moduł komentarzy do kolumny

Ustawienia pól

Jedynym modułem, którego potrzebujemy w tym wierszu, jest moduł komentarzy. Zmień odpowiednio ustawienia pól:

• Kolor tła pól: rgba(0,0,0,0)
• Kolor tekstu pól: #000000
• Dolne wypełnienie pól: 50px
• Czcionka pól: Special Elite
• Rozmiar tekstu pól: 1.2rem

• Szerokość dolnego obramowania pól: 1px
• Kolor dolnego obramowania pól: #000000

Ustawienia liczby komentarzy

Wraz z ustawieniami liczby komentarzy.

• Licznik komentarzy Poziom nagłówków: H2
• Czcionka licznika komentarzy: Special Elite
• Kolor tekstu licznika komentarzy: #000000
• Rozmiar tekstu licznika komentarzy: 2rem

Ustawienia tekstu tytułu formularza

Wprowadź również pewne zmiany w ustawieniach tekstu tytułu formularza.

• Poziom nagłówka tytułu formularza: H3
• Czcionka tytułu formularza: Special Elite
• Kolor tekstu tytułu formularza: #000000
• Rozmiar tekstu tytułu formularza: 1,5 rem

Ustawienia metatekstu

Następnie zmień ustawienia tekstu meta.

• Meta Czcionka: Special Elite
• Kolor tekstu meta: #000000
• Rozmiar tekstu meta: 1,5 rem

Ustawienia tekstu komentarza

Wprowadzimy również pewne zmiany w ustawieniach tekstu komentarza.

• Czcionka komentarza: Special Elite
• Rozmiar tekstu komentarza: 1.2rem
• Wysokość wiersza komentarza: 2,5 em

Ustawienia przycisków

Kontynuuj stylizując przycisk w następujący sposób:

• Użyj niestandardowych stylów dla przycisku: Tak
• Rozmiar tekstu przycisku: 1.2rem
• Kolor tekstu przycisku: #ffffff
• Tło przycisku: #000000
• Szerokość obramowania przycisku: 0px
• Promień obramowania przycisku: 0px

• Czcionka przycisku: Special Elite

Kod CSS treści komentarza

I uzupełnij ustawienia modułu, dodając górny margines do treści komentarza w zakładce Zaawansowane.

margin-top: 100px;

3. Zapisz wszystkie zmiany kreatora motywów i wyniki podglądu

Po utworzeniu niestandardowej treści posta na blogu w szablonie możesz zapisać wszystkie zmiany i wyświetlić wyniki w swoich postach na blogu!

Zapowiedź

Teraz, gdy przeszliśmy przez wszystkie kroki, przyjrzyjmy się ostatecznemu wynikowi na różnych rozmiarach ekranu.

Pulpit

mobilny

Końcowe przemyślenia

W tym poście udostępniliśmy klasyczny szablon postu na blogu inspirowany maszyną do pisania, który można było pobrać za darmo i wykorzystać w następnym projekcie Divi! Odtworzyliśmy również od podstaw projekt szablonu posta. Jeśli masz jakieś pytania lub sugestie, możesz zostawić komentarz w sekcji komentarzy poniżej.

Jeśli chcesz dowiedzieć się więcej o Divi i zdobyć więcej gratisów Divi, zasubskrybuj nasz biuletyn e-mailowy i kanał YouTube, dzięki czemu zawsze będziesz jedną z pierwszych osób, które poznają i będą czerpać korzyści z tych bezpłatnych treści.