Pobierz DARMOWY szablon wpisu na blogu z dwustronnym paskiem bocznym z Divi

Chociaż paski boczne istnieją od dawna, nadal są często używane w sieci. Pomagają pokazać różne elementy, które są powiązane z postem, takie jak polecane posty i formularze optin e-mail, nie zaniedbując głównego celu, jakim jest rzeczywista treść posta. Teraz, dzięki kreatorowi motywów Divi, istnieje mnóstwo sposobów na stworzenie szablonu postu na blogu. W tym samouczku pokażemy, jak dodać dwustronny pasek boczny do szablonu posta. 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

Subskrybuj nasz kanał YouTube

Pobierz szablon postu na bloga ZA DARMO

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

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 kreatora Divi Theme Builder. Tam dodaj nowy szablon.

Użyj szablonu we wszystkich postach

Używamy tego nowego szablonu we wszystkich postach.

• Użyj na: wszystkie posty

Rozpocznij tworzenie treści szablonu

Cóż, w takim razie zacznij budować treść szablonu.

2. Zacznij budować treść postu na blogu

Dodaj nową sekcję

Kolor tła

Po wejściu do Divi Theme Builder zauważysz sekcję. Otwórz tę sekcję i zmień kolor tła.

• Kolor tła: #f4f4f4

Rozstaw

Zmodyfikuj również wartości odstępów sekcji na różnych rozmiarach ekranu.

• Górna wyściółka: 50px (komputer), 20px (tablet), 10px (telefon)
• Dolna wyściółka: 50px (komputer), 20px (tablet), 10px (telefon)

Dodaj nowy wiersz

Struktura kolumny

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

Rozmiary

Nie dodając jeszcze żadnych modułów, otwórz ustawienia wiersza i odpowiednio zmodyfikuj ustawienia rozmiaru:

• Użyj niestandardowej szerokości rynny: Tak
• Szerokość rynny: 2
• Szerokość: 100%
• Maksymalna szerokość: 95%

Rozstaw

Następnie usuń wszystkie domyślne górne i dolne wyściółki.

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

Kolumna 2

Kolor tła

Następnie otwórz ustawienia kolumny 2 i zmień kolor tła na biały.

• Kolor tła: #ffffff

Cień Pudełka

Dodaj również cień do kolumny.

• Siła rozmycia cieni w pudełku: 80px
• Siła rozprzestrzeniania się cieni w pudełku: -21px
• Kolor cienia: rgba (0,0,0,0,08)

Dodaj moduł obrazu do kolumny 2

Treści dynamiczne

Czas zacząć dodawać moduły! W drugiej kolumnie umieścimy wszystkie moduły związane z samym wpisem na blogu, zaczynając od modułu obrazu. Użyj dynamicznej zawartości polecanego obrazu.

• Obraz: Polecany obraz

Rozmiary

Następnie przejdź do karty projektu modułu i wymuś pełną szerokość modułu obrazu.

• Wymuś pełną szerokość: tak

Dodaj moduł tytułu posta do kolumny 2

Elementy

Przejdźmy do drugiego modułu, którym jest moduł tytułu posta. Wyłącz polecany obraz w ustawieniach elementów.

• Pokaż wyróżniony obraz: Nie

Ustawienia tekstu tytułu

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

• Czcionka tytułu: Oxygen
• Rozmiar tekstu tytułu: 2vw (komputer), 4vw (tablet), 6vw (telefon)
• Wysokość wiersza tytułu: 1,2 em

Ustawienia metatekstu

Następnie wprowadź kilka zmian w ustawieniach metatekstu.

• Meta Czcionka: Otwórz Sans
• Kolor tekstu meta: #ffc023
• Rozmiar tekstu Meta: 1vw (komputer), 2vw (tablet), 3vw (telefon)

Rozstaw

Zmodyfikuj również wartości odstępów.

• Górny margines: 100px
• Lewy margines: 4vw
• Prawy margines: 4vw

Tytuł CSS

I uzupełnij ustawienia modułu, dodając trochę dolnego marginesu do elementu CSS tytułu w zakładce Zaawansowane.

margin-bottom: 20px;

Dodaj moduł treści posta do kolumny 2

Ustawienia tekstu

Przejdź do następnego modułu, który jest modułem treści posta, który zawiera całą zawartość Twoich dynamicznych postów na blogu. Zmień odpowiednio ustawienia tekstowe modułu:

• Czcionka tekstu: Otwórz Sans
• Rozmiar tekstu: 0,9vw (komputer), 1,8vw (tablet), 3vw (telefon)
• Wysokość linii tekstu: 2,2 em

Ustawienia tekstu nagłówka

Następnie wprowadź również zmiany w ustawieniach tekstu nagłówka.

• Czcionka nagłówka: tlen
• Rozmiar tekstu H2: 1,5vw (komputer), 3vw (tablet), 4vw (telefon)
• H3, H4, H5 i H6 Rozmiar tekstu: 1.3vw (komputer), 2.5vw (tablet), 3.5vw (telefon)

Rozstaw

Używamy również pewnych niestandardowych wartości marginesów i dopełnienia.

• Lewy margines: 4vw
• Prawy margines: 4vw
• Górna wyściółka: 50px
• Dolna wyściółka: 100px

Klasa CSS

Uzupełnij ustawienia modułu, dodając klasę CSS. W następnej części tego samouczka użyjemy tej klasy CSS, aby dodać trochę odstępów do tytułów i akapitów.

• post-content-spacer

Dodaj moduł kodu do kolumny 2

Wstaw kod CSS

Jak wspomniano w poprzednim kroku tego posta, użyjemy niestandardowego kodu CSS, aby dodać spację między nagłówkami i akapitami. W tym celu użyjemy modułu kodu w kolumnie 2. Wstaw następujące wiersze kodu CSS:

<style>

.post-content-spacing h2,
.post-content-spacing h3,
.post-content-spacing h4,
.post-content-spacing h5,
.post-content-spacing h6 {
margin-top: 50px;
margin-bottom: 50px;
}

.post-content-spacing p {
margin-top: 20px;
margin-bottom: 20px;
}

</style>

Dodaj moduł e-mail Optin do kolumny 3

Dodaj zawartość

Czas zacząć dodawać elementy paska bocznego! Możesz dodać dowolny moduł. Zaczniemy od modułu Email Optin w kolumnie 3. Użyj wybranej kopii.

Konto e-mail

Kontynuuj, łącząc konto e-mail z modułem.

Pola

Następnie wyłącz pole nazwiska w ustawieniach pól.

• Pokaż pole nazwiska: Nie

Kolor tła

Zmień odpowiednio kolor tła:

• Kolor tła: #ffc023

Ustawienia pól

Przejdź do zakładki projektu modułu i zmodyfikuj ustawienia pól w następujący sposób:

• Czcionka pól: Open Sans
• Rozmiar tekstu w polach: 0,8vw (komputer), 1,8vw (tablet), 3vw (telefon)

Ustawienia tekstu tytułu

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

• Czcionka tytułu: Oxygen
• Grubość czcionki tytułu: pogrubiona
• Rozmiar tekstu tytułu: 1vw (komputer), 3vw (tablet), 5vw (telefon)
• Wysokość wiersza tytułu: 1,5 em

Ustawienia przycisków

Kontynuuj, stylizując przycisk.

• Użyj niestandardowych stylów dla przycisku: Tak
• Rozmiar tekstu przycisku: 0.9vw (komputer), 1.8vw (tablet), 3vw (telefon)
• Kolor tekstu przycisku: #ffc023
• Kolor tła przycisku: #f4f4f4
• Szerokość obramowania przycisku: 0px

• Promień obramowania przycisku: 0px
• Czcionka przycisku: tlen

• Górna wyściółka przycisków: 15px
• Dolna wyściółka przycisku: 15px

Cień Pudełka

I uzupełnij ustawienia modułu, dodając subtelny cień pudełka.

• Siła rozmycia cieni w pudełku: 80px
• Siła rozprzestrzeniania się cieni w pudełku: -21px
• Kolor cienia: rgba (0,0,0,0,08)

Dodaj moduł śledzenia mediów społecznościowych do kolumny 3

Dodaj wybrane sieci społecznościowe

Następnym modułem, którego potrzebujemy w kolumnie 3, jest moduł śledzenia w mediach społecznościowych. Dodaj wybrane sieci społecznościowe.

Resetuj style sieci społecznościowych indywidualnie

Kontynuuj, resetując style przedmiotów indywidualnie dla każdej sieci społecznościowej.

Ustawienia ikon

Następnie wróć do ogólnych ustawień modułu i zmień kolor ikony.

• Kolor ikony: #ffc023

Dodaj moduł blogu do kolumny 1

Elementy

W kolumnie 1 jedynym dodawanym modułem jest moduł Blog. Wyłącz autora w ustawieniach elementów.

• Pokaż autora: Nie

Układ

Następnie przejdź do zakładki projektu modułu i zmień układ.

• Układ: Siatka

Ustawienia tekstu tytułu

Następnie zmodyfikuj ustawienia tekstu tytułu.

• Czcionka tytułu: Oxygen
• Grubość czcionki tytułu: pogrubiona
• Rozmiar tekstu tytułu: 1vw (komputer), 3vw (tablet), 5vw (telefon)
• Wysokość wiersza tytułu: 1,5 em

Ustawienia tekstu podstawowego

Wprowadź też pewne zmiany w ustawieniach tekstu podstawowego.

• Czcionka ciała: Open Sans
• Rozmiar tekstu ciała: 0,7vw (komputer), 1,8vw (tablet), 3vw (telefon)
• Wysokość linii ciała: 2,2 em

Ustawienia metatekstu

Następnie odpowiednio dostosuj ustawienia metatekstu:

• Meta Czcionka: Otwórz Sans
• Kolor tekstu meta: #ffc023
• Rozmiar tekstu Meta: 0,8vw (komputer), 1,8vw (tablet), 3vw (telefon)

Granica

Usuń również domyślną ramkę modułu.

• Szerokość obramowania układu siatki: 0px

Cień Pudełka

I użyj subtelnego cienia pudełkowego.

• Siła rozmycia cieni w pudełku: 80px
• Siła rozprzestrzeniania się cieni w pudełku: -21px
• Kolor cienia: rgba (0,0,0,0,08)

Widoczność

Teraz chcemy, aby moduł bloga pojawiał się w kolumnie 1, gdy ktoś przegląda post na komputerze. Jednak na mniejszych ekranach chcemy, aby treść posta była na pierwszym miejscu. Dlatego ukryjemy cały moduł na tablecie i telefonie.

Klonuj moduł bloga i umieść duplikat w kolumnie 3

Następnie sklonujemy moduł Blog i umieścimy duplikat w trzeciej kolumnie.

Zmień widoczność

Chcemy, aby ten moduł pojawił się w kolumnie 3 tylko na mniejszych urządzeniach, dlatego ukryjemy cały moduł na pulpicie.

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

Po zakończeniu tworzenia szablonu postu na blogu (upewnij się, że dodałeś również moduł komentarzy!), możesz zapisać wszystkie zmiany w Kreatorze motywów i wyświetlić wynik na swojej stronie!

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 dodać dwustronny pasek boczny do szablonu posta na blogu za pomocą Kreatora motywów Divi. Co więcej, udostępniliśmy plik JSON układu za darmo, dzięki czemu możesz przechowywać go w pobliżu na wypadek, gdyby był potrzebny w przyszłych projektach! Jeśli masz jakieś pytania, 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.