Jak zaprojektować dynamiczne pole autora dla szablonu posta na blogu za pomocą Divi

Wzmianka o autorze posta w swoich postach na blogu jest niezbędna. Teraz, dzięki Divi's Theme Builder, możesz dodać do swoich postów dynamiczne pole autora obejmujące całą witrynę. Możesz także stylizować pudełko autora za pomocą wbudowanych opcji Divi, co może prowadzić do pięknego projektowania stron internetowych. W tym samouczku pokażemy Ci dokładnie, jak zaprojektować piękne dynamiczne pole autora w szablonie posta. Będziesz mógł również bezpłatnie pobrać plik JSON szablonu posta!

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 posta ZA DARMO

Aby położyć swoje ręce na darmowym szablonie posta, 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 postu

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 nowego szablonu we wszystkich swoich postach.

• Użyj na: wszystkie posty

Rozpocznij tworzenie treści szablonu

I zacznij budować ciało szablonu.

2. Zbuduj treść szablonu posta na blogu

Ustawienia sekcji

Kolor tła

W edytorze szablonów zauważysz sekcję. Otwórz ustawienia sekcji i dodaj kolor tła.

• Kolor tła: #270fff

Zdjęcie w tle

Prześlij obraz tła, który znajdziesz w spakowanym folderze, który udało Ci się pobrać na początku tego postu.

Dodaj nowy wiersz

Struktura kolumny

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

Rozmiary

Otwórz ustawienia wiersza i zmień maksymalną szerokość w ustawieniach rozmiaru.

• Maksymalna szerokość: 1380px

Dodaj moduł tytułu posta do kolumny

Elementy

Jedynym modułem, którego potrzebujemy w tym wierszu, jest moduł tytułu posta. Wyłączamy polecany obraz posta w ustawieniach elementów.

• Pokaż wyróżniony obraz: Nie

Ustawienia tekstu

Przejdź do zakładki projektowania modułu i zmień kolor tekstu w ogólnych ustawieniach tekstu.

• Kolor tekstu: jasny

Ustawienia tekstu tytułu

Następnie zmodyfikuj ustawienia tekstu tytułu.

• Czcionka tytułu: Work Sans
• Rozmiar tekstu tytułu: 7rem (komputer), 4rem (tablet), 2rem (telefon)
• Odstępy między literami tytułu: -2px

Ustawienia metatekstu

Wraz z ustawieniami tekstu meta.

• Meta Czcionka: Work Sans
• Rozmiar tekstu meta: 1rem

Dodaj nową sekcję

Rozstaw

Dodaj nową zwykłą sekcję do treści szablonu, otwórz ustawienia sekcji i usuń wszystkie domyślne górne dopełnienie.

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

Dodaj nowy wiersz

Struktura kolumny

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

Rozmiary

Otwórz ustawienia wiersza i zmień ustawienia rozmiaru w następujący sposób:

• Użyj niestandardowej szerokości rynny: Tak
• Szerokość rynny: 1
• Wyrównaj wysokości kolumn: Tak
• Maksymalna szerokość: 1380px

Rozstaw

Usuń również wszystkie domyślne górne wyściółki.

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

Ustawienia kolumny 1

Rozstaw

Następnie otwórz ustawienia kolumny 1 i dodaj niestandardowe wartości dopełnienia dla różnych rozmiarów ekranu.

• Górna wyściółka: 200px (komputer), 50px (tablet), 20px (telefon)
• Dolna wyściółka: 200px (komputer), 50px (tablet), 20px (telefon)
• Lewe wypełnienie: 100px (komputer), 50px (tablet), 20px (telefon)
• Prawe dopełnienie: 100px (komputer), 50px (tablet), 20px (telefon)

Cień Pudełka

Dodaj również cień do pierwszej kolumny.

• Siła rozmycia cieni w pudełku: 60px
• Kolor cienia: rgba (0,0,0,0,09)

Dodaj moduł treści posta do kolumny 1

Ustawienia tekstu

Czas zacząć dodawać moduły! Umieść moduł treści posta w kolumnie 1 i odpowiednio zmień ustawienia tekstu:

• Czcionka tekstu: Work Sans
• Rozmiar tekstu: 1 rem (komputer stacjonarny), 0,9 rem (tablet i telefon)
• Wysokość linii tekstu: 2,3 em

Ustawienia tekstu nagłówka

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

• Czcionka nagłówka: Work Sans
• Rozmiar tekstu nagłówka 2: 1,6 rem (H2), 1,5 rem (H3), 1,4 rem (H4), 1,3 rem (H5), 1,2 rem (H6)
• Wysokość linii nagłówka: 1,3 em

Identyfikator CSS

Uzupełnij ustawienia modułu, dodając identyfikator CSS.

• Identyfikator CSS: treść-wpisu na blogu

Dodaj moduł kodu do kolumny 1

Wstaw kod CSS nagłówka

Aby dodać trochę miejsca między różnymi elementami treści posta, dodamy moduł kodu do kolumny 1 i wstawimy następujące wiersze kodu CSS:

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

#blog-post-content p {
margin-top: 20px;
margin-bottom: 20px;
}
</style>

Dodaj moduł Osoba do kolumny 2

Treści dynamiczne

W drugiej kolumnie jedynym modułem, którego potrzebujemy, jest moduł Person. Wybierzemy następującą zawartość dynamiczną:

• Imię i nazwisko: Autor postu
• Stanowisko: Autor
• Treść: Biografia autora

Dynamiczna zawartość obrazu

Dodaj również dynamiczne zdjęcie profilowe autora do modułu.

• Zdjęcie: Zdjęcie profilowe autora

Wskaż kolor tła

Następnie dodaj biały kolor tła po najechaniu myszą.

• Kolor tła: #ffffff

Ustawienia tekstu tytułu

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

• Poziom nagłówka tytułu: H3
• Czcionka tytułu: Work Sans
• Rozmiar tekstu tytułu: 1,1 rem

Ustawienia tekstu podstawowego

Zmodyfikuj również ustawienia tekstu podstawowego.

• Czcionka ciała: Work Sans
• Rozmiar tekstu ciała: 0,9 rem
• Wysokość linii ciała: 2em

Ustawienia tekstu pozycji

Następnie zmień ustawienia tekstu czcionki pozycji.

• Czcionka pozycji: Work Sans
• Rozmiar tekstu pozycji: 0.9rem

Rozmiar domyślny

Zmień wysokość w ustawieniach rozmiaru.

• Wysokość: 160px (komputer stacjonarny), auto (tablet i telefon)

Rozmiar po najechaniu kursorem

I przywróć wysokość do automatycznego najechania.

• Wysokość: auto

Rozstaw

Następnie dodajemy trochę miejsca wokół modułu za pomocą niestandardowego dopełnienia.

• Górna wyściółka: 50px
• Dolna wyściółka: 50px
• Lewa wyściółka: 50px
• Prawe wypełnienie: 50px

Domyślna ramka

I użyjemy też obramowania.

• Szerokość lewej krawędzi: 0px (komputer), 4px (tablet i telefon)
• Kolor lewej krawędzi: #270fff

Wskaż granicę

Zmodyfikuj szerokość obramowania po najechaniu kursorem.

• Szerokość lewej krawędzi: 4px

Domyślny cień pudełka

Następnie dodaj cień pudełkowy.

• Siła rozmycia cieni w pudełku: 60px
• Kolor cienia: rgba(0,0,0,0) (komputer), rgba(0,0,0,0.11) (tablet i telefon)

Wskaż cień pola

Zmień kolor cienia po najechaniu myszą.

• Kolor cienia: rgba(0,0,0,0.11)

Filtry domyślne

Idąc dalej, zmienimy krycie.

• Krycie: 41% (komputer stacjonarny), 100% (tablet i telefon)

Po najechaniu na filtry

Przywróć krycie do 100% po najechaniu kursorem.

• Krycie: 100%

Główny element CSS

Aby dodać lepki efekt, który można było zauważyć na podglądzie tego posta, dodamy kilka linii niestandardowego CSS do głównego elementu modułu.

position: sticky;
position: -webkit-sticky;
top: 50px !important;

CSS obrazu członka

Upewniamy się, że zdjęcie profilowe autora jest wyrównane do lewej, dodając jeden wiersz kodu CSS do obrazu elementu członkowskiego modułu.

text-align: left;

Widoczność domyślna

Aby ukryć zawartość modułu na pulpicie, zmienimy przepełnienia w zakładce Zaawansowane.

• Przepełnienie poziome: ukryte
• Przepełnienie pionowe: ukryte

Widoczność najechania

Sprawimy, że zawartość pojawi się po najechaniu kursorem, zmieniając przepełnienia na widoczne.

• Przepełnienie poziome: Widoczne
• Przepełnienie pionowe: Widoczne

Dodaj nową sekcję

Dodaj kolejną sekcję do swojego projektu.

Dodaj nowy wiersz

Struktura kolumny

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

Rozmiary

Otwórz ustawienia wiersza i odpowiednio zmień ustawienia rozmiaru:

• Użyj niestandardowej szerokości rynny: Tak
• Szerokość rynny: 1
• Wyrównaj wysokości kolumn: Tak
• Maksymalna szerokość: 1380px

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
• Górne dopełnienie pól: 20px
• Dolne wypełnienie pól: 20px
• Czcionka pól: Work Sans
• Rozmiar tekstu pól: 1rem

Ustawienia liczby komentarzy

Zmodyfikuj również ustawienia tekstu liczby komentarzy.

• Licznik komentarzy Poziom nagłówków: H2
• Czcionka liczby komentarzy: Work Sans
• Rozmiar tekstu licznika komentarzy: 1,5 rem

Ustawienia tekstu tytułu formularza

Następnie zmień ustawienia tekstu tytułu formularza.

• Poziom nagłówka tytułu formularza: H3
• Czcionka tytułu formularza: Work Sans
• Rozmiar tekstu tytułu formularza: 1.2rem

Ustawienia metatekstu

Zmodyfikuj również ustawienia tekstu meta.

• Meta Czcionka: Work Sans
• Rozmiar tekstu meta: 1rem

Ustawienia tekstu komentarza

Zmieniamy też ustawienia tekstu komentarza.

• Czcionka komentarza: Work Sans
• Rozmiar tekstu komentarza: 1rem
• Wysokość wiersza komentarza: 2,3 em

Ustawienia przycisków

Uzupełnij ustawienia modułu, stylizując przycisk.

• Użyj niestandardowych stylów dla przycisku: Tak
• Rozmiar tekstu przycisku: 1rem
• Kolor tekstu przycisku: #ffffff
• Kolor tła przycisku: #270fff
• Szerokość obramowania przycisku: 0px
• Promień obramowania przycisku: 0px

• Czcionka przycisku: Work Sans

3. Zapisz zmiany w kreatorze motywów i wyświetl wyniki

Po zakończeniu tworzenia szablonu upewnij się, że zapisałeś wszystkie zmiany, wyjdź z Kreatora motywów i zobacz wyniki 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 zaprojektować piękne dynamiczne pudełko autora, korzystając z wbudowanych opcji Divi, funkcji dynamicznej i Kreatora motywów. Dzięki połączeniu tych trzech rzeczy, dostosowanie szablonu posta na blogu i uznanie autora posta w kreatywny sposób jest teraz łatwiejsze niż kiedykolwiek. Udało Ci się również pobrać 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.