Jak dynamicznie utworzyć prosty, przyjazny dla użytkownika szablon postu na blogu za pomocą Divi

Udostępniając nowe posty na blogu w swojej witrynie, należy maksymalnie ułatwić użytkownikom czytanie. Oznacza to pozbycie się jak największej liczby elementów rozpraszających uwagę, przy jednoczesnym dopasowaniu marki do Twojej witryny. Ważne jest również, aby umożliwić odwiedzającym kontrolowanie rozmiaru tekstu za pomocą przeglądarki, w tym przypadku przydaje się jednostka względnej czcionki rem. Pozwala ludziom dostosować rozmiar czcionki wyświetlanej w przeglądarce. W tym samouczku zbudujemy piękny i prosty szablon postu na blogu, który w dużym stopniu uwzględnia wrażenia użytkownika. Będziesz mógł również pobrać plik JSON za darmo!

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 prosty, przyjazny dla użytkownika szablon postu na blogu ZA DARMO

Aby położyć ręce na darmowym, prostym, przyjaznym dla UX szablonie posta na blogu, 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!

Subskrybuj nasz kanał YouTube

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

Przejdź do kreatora motywów Divi

Zacznij od przejścia do Divi Theme Builder.

Utwórz nowy szablon

Utwórz nowy szablon i używaj go we wszystkich swoich postach.

• Użyj na: wszystkie posty

2. Rozpocznij tworzenie treści na blogu

Następnie zacznij tworzyć niestandardową treść szablonu posta.

Dodaj wiersz nr 1 do istniejącej sekcji

Struktura kolumny

W edytorze szablonów dodaj nowy wiersz do sekcji, która już tam jest, używając następującej struktury kolumn:

Rozmiary

Nie dodając jeszcze żadnych modułów, otwórz ustawienia wiersza i zmień ustawienia rozmiaru w następujący sposób:

• Użyj niestandardowej szerokości rynny: Tak
• Szerokość rynny: 1

Ramka kolumny 1 i 2

Dodaj prawe obramowanie do pierwszej i drugiej kolumny.

• Szerokość prawego obramowania: 1px (komputer), 0px (tablet i telefon)
• Kolor prawego obramowania: #333333

Dodaj moduł tekstowy do każdej kolumny

Treści dynamiczne

Kontynuuj, dodając moduł tekstowy do każdej kolumny i wybierz dynamiczną zawartość dla każdego modułu osobno.

• Moduł tekstowy w kolumnie 1: Kategorie postów

• Moduł tekstowy w kolumnie 2: Data publikacji posta

• Moduł tekstowy w kolumnie 3: Liczba komentarzy do posta
• Po: Komentarze

Ustawienia tekstu

Przejdź do zakładki projektu każdego modułu i zmień ustawienia tekstu w następujący sposób:

• Czcionka tekstu: Lato
• Rozmiar tekstu: 1,1 rem
• Odstępy między literami tekstu: 1px
• Wysokość linii tekstu: 2em

Dodaj wiersz nr 2

Struktura kolumny

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

Dodaj moduł tekstowy nr 1 do kolumny

Treści dynamiczne

Dodaj moduł tekstowy i wybierz dynamiczną zawartość tytułu posta.

• Treść dynamiczna: tytuł posta

• Przed: <H1>
• Po: </H1>

Ustawienia tekstu H1

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

• Czcionka nagłówka: Playfair Display
• Wyrównanie tekstu nagłówka: do środka
• Rozmiar tekstu nagłówka: 6.2rem (komputer), 3.2rem (tablet), 2.3rem (telefon)

Rozstaw

Następnie dodaj niestandardowy górny i dolny margines.

• Górny margines: 50px
• Margines dolny: 100px

Dodaj moduł tekstowy nr 2 do kolumny

Treści dynamiczne

Dodaj kolejny moduł tekstowy tuż pod poprzednim i wybierz dynamiczną zawartość fragmentu posta.

• Treść dynamiczna: fragment postu

Ustawienia tekstu

Zmień ustawienia tekstowe modułu w następujący sposób:

• Czcionka tekstu: Lato
• Rozmiar tekstu: 1,1 rem
• Odstępy między literami tekstu: 1px
• Wysokość linii tekstu: 2em
• Wyrównanie tekstu: do środka

Dodaj wiersz nr 3

Struktura kolumny

Dodaj kolejny wiersz do sekcji, korzystając z następującej struktury kolumn:

Wyświetlacz

Upewnij się, że kolumny pozostają obok siebie, dodając jeden wiersz kodu CSS do głównego elementu wiersza.

display: flex;

Dodaj moduł obrazu do kolumny 1

Treści dynamiczne

Kontynuuj, dodając moduł obrazu do kolumny 1 i wybierz dynamiczną zawartość zdjęcia profilowego autora.

• Treść dynamiczna: zdjęcie profilowe autora

Wyrównanie

Przejdź do zakładki projektu modułu i zmień wyrównanie obrazu.

• Wyrównanie obrazu: w prawo

Rozmiary

Następnie zmodyfikuj szerokość.

• Szerokość: 50px

Rozstaw

Dodaj prawy margines na tablecie i telefonie.

• Prawy margines: 20px (tablet i telefon)

Granica

I uzupełnij ustawienia modułu, dodając trochę promienia obramowania do ustawień obramowania.

• Wszystkie rogi: 100px

Dodaj moduł tekstowy do kolumny 2

Treści dynamiczne

W drugiej kolumnie potrzebujemy modułu tekstowego. Wybierz dynamiczną treść autora posta.

• Treść dynamiczna: autor posta

Ustawienia tekstu

Przejdź do zakładki projektu i odpowiednio zmień ustawienia tekstu:

• Czcionka tekstu: Lato
• Rozmiar tekstu: 1,1 rem
• Odstępy między literami tekstu: 1px

Rozstaw

Następnie dodaj kilka niestandardowych wartości marginesów.

• Górny margines: 15px
• Lewy margines: 20px (tablet i telefon)

Dodaj wiersz #4

Struktura kolumny

Dodaj kolejny wiersz do sekcji, korzystając z następującej struktury kolumn:

Dodaj moduł tekstowy do kolumny

Pozostaw puste pole zawartości

Dodaj moduł tekstowy do kolumny i upewnij się, że pole zawartości zostało puste.

Dynamiczny obraz tła

Dodaj dynamiczną zawartość polecanego obrazu do obrazu tła modułu.

• Treść dynamiczna: polecany obraz

Rozmiary

Kontynuuj, modyfikując ustawienia rozmiaru modułu dla różnych rozmiarów ekranu.

• Szerokość: 800px (komputer), 500px (tablet), 300px (telefon)
• Wyrównanie modułu: Środek

Rozstaw

Dodaj również niestandardowe górne i dolne wyściółki w różnych rozmiarach ekranu.

• Górna wyściółka: 400px (komputer), 250px (tablet), 150px (telefon)
• Dolna wyściółka: 400px (komputer), 250px (tablet), 150px (telefon)

Granica

I dodaj trochę promienia obramowania do ustawień obramowania, aby zmienić moduł w okrąg.

• Wszystkie rogi: 500px

Dodaj nową sekcję

Do następnej regularnej sekcji.

Dodaj wiersz nr 1

Struktura kolumny

Dodaj nowy wiersz, korzystając z następującej struktury kolumn:

Dodaj moduł treści posta do kolumny

Ustawienia tekstu

Dodaj moduł Post Content do kolumny, przejdź do zakładki projektu modułu i odpowiednio zmień ustawienia tekstu:

• Czcionka tekstu: Lato
• Rozmiar tekstu: 1,1 rem
• Odstępy między literami tekstu: 1px
• Wysokość linii tekstu: 2,3 em

Ustawienia tekstu nagłówka

Zmodyfikuj również ustawienia tekstu nagłówka.

• Czcionka nagłówka: Playfair Display
• Rozmiar tekstu H2: 3,5 rem (komputer stacjonarny), 2 rem (tablet i telefon)
• Rozmiar tekstu H3: 2,5 rem (komputer stacjonarny), 1,5 rem (tablet i telefon)
• Rozmiar tekstu H4: 2.3rem (komputer stacjonarny), 1.3rem (tablet i telefon)
• Rozmiar tekstu H5 i H6: 2rem (komputer stacjonarny), 1rem (tablet i telefon)

Dodaj wiersz nr 2

Struktura kolumny

Dodaj kolejny wiersz do sekcji, korzystając z następującej struktury kolumn:

Rozstaw

Dodaj niestandardowy górny margines do wiersza.

• Górny margines: 100px

Dodaj moduł komentarzy do kolumny

Ustawienia pól

Jedynym modułem, którego potrzebujemy w tym wierszu, jest moduł komentarzy. Zmień ustawienia pól w następujący sposób:

• Kolor tła pól: #ffffff
• Pola Czcionka: Lato
• Rozmiar tekstu pól: 1.1rem

• Wszystkie rogi: 0px
• Szerokość obramowania pól: 1px
• Kolor obramowania pól: #000000

Ustawienia obrazu

Zmień też ustawienia obrazu.

• Wszystkie rogi: 100px

Ustawienia tekstu tytułu

Następnie zmodyfikuj ustawienia tekstu tytułu.

• Poziom nagłówka tytułu: H2
• Czcionka tytułu: Playfair Display
• Rozmiar tekstu tytułu: 3rem (komputer), 2rem (tablet i telefon)
• Wysokość wiersza tytułu: 1.4em

Ustawienia metatekstu

Nadaj również styl metatekstowi.

• Meta Czcionka: Wyświetlacz Playfair
• Rozmiar tekstu meta: 1.4rem

Ustawienia tekstu komentarza

W ustawieniach tekstu komentarza używamy następujących ustawień:

• Czcionka komentarza: Lato
• Rozmiar tekstu komentarza: 1.1rem
• Odstępy między literami komentarza: 1px
• Wysokość wiersza komentarza: 2em

Ustawienia tekstu przycisku

I uzupełnij ustawienia modułu, stylizując przycisk w następujący sposób:

• Użyj niestandardowych stylów dla przycisku: Tak
• Rozmiar tekstu przycisku: 1,1 rem
• Kolor tekstu przycisku: #ffffff
• Kolor tła przycisku: #000000
• Szerokość obramowania przycisku: 0px
• Promień obramowania przycisku: 0px
• Odstępy między przyciskami: 1px
• Czcionka przycisku: Lato

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

3. Zapisz zmiany szablonu i kreatora motywów

Po zakończeniu projektowania szablonu zapisz wszystkie zmiany Divi Theme Builder i wyświetl podgląd wyników w swoich postach!

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 pokazaliśmy, jak stworzyć piękny i prosty szablon postu na blogu, który koncentruje się na wrażeniach użytkowników podczas czytania. Zmodyfikuj ten szablon posta za pomocą wbudowanych opcji Divi, aby dopasować go do brandingu Twojej witryny. Udało Ci się również pobrać szablonowy plik JSON za darmo! 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.