Jak dołączyć stały pasek boczny o pełnej wysokości do szablonu posta na blogu?

Decyzja o dodaniu paska bocznego do postów na blogu zależy wyłącznie od Ciebie. Niektórzy blogerzy w ogóle nie używają paska bocznego. Ten samouczek jest przeznaczony dla tych, którzy wolą używać paska bocznego, ale chcą, aby wyglądał trochę inaczej. Zazwyczaj paski boczne są ustawione statycznie, ale jeśli treść posta jest długa, oznacza to, że czytelnik będzie musiał przewinąć w górę, aby zobaczyć pasek boczny.

W tym projekcie szablonu postu na blogu utworzyliśmy stały pasek boczny o pełnej wysokości, który pozostaje na swoim miejscu podczas przewijania treści posta. Podczas odtwarzania samouczka pozostaw dwie otwarte karty w przeglądarce: jedną dla kreatora motywów, a drugą dla podglądu posta na blogu. W ten sposób możesz zobaczyć zmiany na bieżąco.

Zacznijmy!

Zapowiedź

Zanim zaczniemy, spójrzmy na stały pasek boczny o pełnej wysokości.

Pulpit

mobilny

Pobierz szablon stałego paska bocznego o pełnej wysokości za DARMO

Aby położyć ręce na bezpłatnym szablonie stałego paska bocznego o pełnej wysokości, 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!

Utwórz widżet paska bocznego

Przed rozpoczęciem pracy z szablonem stałego paska bocznego o pełnej wysokości utwórz niestandardowy widżet paska bocznego. Później dołączymy to do naszego paska bocznego w szablonie.

Otwórz kreatora widżetów

Kliknij „Wygląd” i wybierz „Widżety”.

Dodaj elementy do widżetu paska bocznego

Przeciągnij elementy „Ostatnie wpisy” i „Kategorie” do widżetu paska bocznego.

Dostosuj ustawienia elementów w widżecie

Wybierz wyświetlanie tylko 3 ostatnich postów i dodaj tytuł. Dodaj również tytuł do widżetu kategorii i nie zapomnij kliknąć „Zapisz” w obu polach, gdy skończysz.

• Tytuł ostatnich postów: Czytaj więcej:
• Kategorie Tytuł: Przeglądaj

2. Zacznij korzystać z kreatora motywów

Otwórz Kreatora motywów / Dodaj nowy szablon

Czas zacząć odtwarzać stały szablon paska bocznego o pełnej wysokości! Najpierw otwórz kreator motywów i dodaj nowy szablon.

Ustaw ustawienia szablonu

W ustawieniach szablonu wybierz „Wszystkie posty na blogu”. Jeśli chcesz użyć szablonu dla określonej kategorii lub tagu, zmodyfikuj odpowiednio ustawienia szablonu.

Dodaj niestandardową treść

Następnie kliknij „Dodaj niestandardową treść”.

Wybierz opcję Zbuduj niestandardową bryłę

Odtworzymy ten szablon od zera, więc śmiało wybierz „Zbuduj niestandardową bryłę”.

Buduj od podstaw

Po wejściu do wizualnego konstruktora ponownie wybierz opcję budowania od zera.

Odtwórz szablon ze stałym paskiem bocznym o pełnej wysokości

Ustawienia sekcji

Tło

Otwórz istniejącą sekcję w edytorze szablonów i dodaj tło gradientowe.

• Gradient tła
  • Kolor 1: biały #ffffff
  • Kolor 2: Jasnoszary #eaeaea

Rozstaw

Dodaj też trochę wyściółki.

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

Dodaj nowy wiersz

Struktura kolumny

Teraz dodaj wiersz o strukturze kolumnowej 3/4 – 1/4.

Rozmiary

Dostosuj rozmiar rzędu w następujący sposób.

• Niestandardowa szerokość rynny: 2
• Szerokość:
  • Komputer stacjonarny i tablet: 90%
  • Telefon: 100%
• Maksymalna szerokość:
  • Pulpit: 1920px
• Minimalna wysokość: 100vh

Ustawienia kolumny 1

Rozstaw

Przed dodaniem modułów dostosuj ustawienia kolumn. Kolumna 1 pierwsza.

• Wyściółka lewa i prawa
  • Tabletka: 2%
  • Telefon: 8%

Ustawienia kolumny 2

Tło

Następnie dodaj kolor tła do kolumny 2.

• Kolor tła: biały #ffffff

Rozstaw

Uwzględnij też odstępy.

• Wyściółka lewa i prawa
  • Komputer stacjonarny: 3%
  • Tablet i telefon: 14%

Granica

Następnie podaj zaokrąglone rogi kolumny.

• Zaokrąglone rogi
  • Tablet i komputer stacjonarny: 15px

niestandardowe CSS

Przejdź do zakładki zaawansowane i dodaj kilka linii kodu CSS do głównego elementu. Pomoże nam to utworzyć pasek boczny o pełnej wysokości na komputerze.

• Główny element
  • min-wysokość: 100%

min-height: 100%;

Pozycja

Na koniec, aby stworzyć efekt stałego paska bocznego, dodaj stałą pozycję do kolumny.

• Pozycja
  • Pulpit: Naprawiono
  • Tablet i telefon: domyślne
• Lokalizacja: u góry po prawej

Dodaj moduł tytułu posta nr 1

Elementy

Czas dodać moduły! Zacznij od modułu tytułu pierwszego posta w kolumnie 1 i włącz tylko tytuł.

• Pokaż tytuł: Tak

Dynamiczny obraz tła

Następnie przejdź do ustawień tła i użyj wyróżnionego obrazu jako dynamicznego obrazu tła.

Tekst tytułu

Stylizuj ustawienia tekstu tytułu.

• Czcionka tytułu: Bai Jamjuree
• Styl czcionki tytułu: wielkie litery
• Kolor tekstu tytułu: #e98074
• Rozmiar tekstu tytułu:
  • Pulpit: 45px
  • Tablet: 35px
  • Telefon: 25px
• Odstępy między literami tytułu: 3px
• Wysokość wiersza tytułu: 1,3 em

Rozstaw

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

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

Granica

Uwzględnij też zaokrąglone rogi.

• Wszystkie rogi: 15px

Tytuł CSS

I uzupełnij ustawienia modułu, dodając trzy wiersze kodu CSS do elementu tytułu modułu w zakładce Zaawansowane.

background-color: rgba(255,255,255,0.56);
padding-top: 2%;
padding-bottom: 2%;

Dodaj moduł tytułu posta nr 2

Elementy

Teraz dodaj kolejny moduł tytułu posta. Wybierz następujące elementy.

• Meta
• Autor
• Kategorie postów

Meta tekst

Otwórz kartę projektu i nadaj styl metatekstowi.

• Czcionka: Bai Jamjuree
• Waga: średnia
• Kolor: Szary #8e8d8a
• Rozmiar
  • Pulpit: 20px
  • Tablet i telefon: 15px
• Odstępy między literami: 2px

Rozmiary

Dostosuj też rozmiar.

• Szerokość: 90%
• Wyrównanie modułu: Środek

Rozstaw

Uzupełnij ustawienia tego modułu z pewnymi odstępami.

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

Dodaj moduł treści posta

Tło

Następnie dodaj moduł treści posta z białym tłem.

• Kolor tła: biały #ffffff

Tekst

Teraz dostosuj styl tekstu głównego.

• Czcionka: Lato
• Kolor: Szary #8e8d8a
• Rozmiar: 16px

Tekst nagłówka

Kontynuuj, stylizując wszystkie style tekstu nagłówka.

• H1
  • Czcionka: Bai Jamjuree
  • Waga: średnia
  • Kolor: Koral #e98074
  • Rozmiar
    • Pulpit: 45px
    • Tablet: 33px
    • Telefon: 30px
  • Odstępy między literami: 1px
• H2
  • Czcionka: Bai Jamjuree
  • Waga: średnia
  • Kolor: Koral #e98074
  • Rozmiar
    • Pulpit: 35px
    • Tablet i telefon: 25px
  • Odstępy między literami: 1px
• H3
  • Czcionka: Bai Jamjuree
  • Waga: Regularna
  • Kolor: Ciemnoszary #606060
  • Rozmiar
    • Pulpit: 25px
    • Tablet i telefon: 22px
  • Odstępy między literami: 1px
• H4
  • Czcionka: Bai Jamjuree
  • Waga: Regularna
  • Kolor: Ciemnoszary #606060
  • Rozmiar
    • Pulpit: 22px
    • Tablet: 20px
    • Telefon: 18px
  • Odstępy między literami: 1px
• H5
  • Czcionka: Bai Jamjuree
  • Waga: średnia
  • Kolor: Ciemnoszary #606060
  • Rozmiar: 16px
  • Odstępy między literami: 1px
• H6
  • Czcionka: Bai Jamjuree
  • Waga: Regularna
  • Kolor: Ciemnoszary #606060
  • Rozmiar: 16px
  • Odstępy między literami: 1px

Rozstaw

Dodaj też ustawienia odstępów.

• Górny margines: 40px
• Górna wyściółka: 10%
• Dolna wyściółka: 10%
• Lewa wyściółka: 10%
• Prawa wyściółka: 10%

Granica

Na koniec dodaj trochę zaokrąglonych rogów.

• Zaokrąglona ramka: 15px

Dodaj moduł komentarzy

Elementy

Aby uzupełnić pierwszą kolumnę, dodaj moduł komentarzy. Włącz następujące elementy:

• Przycisk odpowiedzi
• Liczba komentarzy

Pola

Na karcie projektu dostosuj styl pól.

• Kolor tła: Jasnoszary #f7f7f7
• Kolor tekstu: szary #8e8d8a
• Czcionka: Bai Jamjuree
• Rozmiar tekstu: 17px
• Zaokrąglone rogi: 15px

Tekst licznika komentarzy

Nadaj także styl tekstowi licznika komentarzy.

• Poziom nagłówka: H3
• Czcionka: Bai Jamjuree
• Kolor: Koral #e98074
• Rozmiar: 22px
• Odstępy między literami: 1px

Tekst tytułu formularza

Następnie tytuł formularza.

• Poziom nagłówka: H3
• Czcionka: Bai Jamjuree
• Kolor: Koral #e98074
• Rozmiar: 18px
• Odstępy między literami: 1px

Meta tekst

Nadaj również styl metatekstowi.

• Czcionka: Bai Jamjuree
• Kolor: #606060
• Rozmiar: 14px
• Odstępy między literami: 1px

Tekst komentarza

Nie zapomnij o tekście komentarza.

• Czcionka: Bai Jamjuree
• Rozmiar: 1px

Przycisk

Teraz stylizuj przyciski.

• Style niestandardowe
• Rozmiar tekstu: 18px
• Kolor tekstu: biały #ffffff
• Kolor tła: Koral #e98074
• Promień obramowania przycisku: 15px
• Czcionka przycisku: Bai Jamjuree

Rozmiary

Dostosuj również rozmiar wiersza.

• Szerokość: 90%

Rozstaw

Jak również ustawienia odstępów.

• Górna wyściółka: 8%
• Wyściółka lewa i prawa: 4%

Moduł dodawania osoby

Tekst

Przejdź do stałej kolumny paska bocznego i dodaj moduł osoby.

• Nazwa: Dynamiczny autor postu
• Przed: Napisane przez:

Tekst tytułu

Na karcie projektu stylizuj tekst nagłówka w następujący sposób:

• Poziom nagłówka: H4
• Czcionka: Bai Jamjuree
• Kolor: Koral #e98074
• Rozmiar: 2vh
• Odstępy między literami: 2px

Rozmiary

Następnie dostosuj rozmiar.

• Minimalna wysokość:
  • Komputer stacjonarny: 3vh
  • Tablet i telefon: auto
• Maksymalna wysokość:
  • Komputer stacjonarny: 3vh
  • Tablet i telefon: auto

Rozstaw

Dodaj też niestandardowe odstępy.

• Górny margines
  • Komputer stacjonarny: 6vh
  • Tablet i telefon: 10vh

Dodaj moduł obrazu

Obraz

Teraz dodaj moduł obrazu. Wybierz dynamiczną zawartość zdjęcia autora.

• Obraz: Dynamiczne zdjęcie profilowe autora

Wyrównanie

Przejdź do zakładki projektu i wybierz następujące wyrównanie:

• Wyrównanie obrazu: do lewej

Rozmiary

Następnie dostosuj rozmiar modułu.

• Maksymalna szerokość: 15vh
• Wyrównanie modułu: do lewej
• Maksymalna wysokość
  • Komputer stacjonarny: 15vh

Granica

Na koniec dodaj zaokrąglone rogi do ustawień obramowania.

• Zaokrąglone rogi: 15px

Dodaj moduł paska bocznego

Zadowolony

Teraz nadszedł czas na dodanie widżetów paska bocznego za pomocą modułu paska bocznego.

• Obszar widżetów: pasek boczny

Układ

Najpierw dostosuj układ.

• Pokaż separator granicy: Nie

Tekst tytułu

Następnie zmodyfikuj ustawienia tekstu tytułu.

• Czcionka: Bai Jamjuree
• Waga: średnia
• Kolor: Koral #e98074
• Rozmiar: 2vh
• Odstępy między literami: 2px

Tekst główny

Kontynuuj z tekstem głównym.

• Czcionka: Bai Jamjuree
• Waga: Lekka
• Kolor: Ciemnoszary #7f7f7f
• Kolor najechania: Koral #e98074
• Rozmiar: 1,5vh
• Odstępy między literami: 1px
• Wysokość linii: 1,8 em

Rozmiary

Dostosuj również rozmiar modułu.

• Minimalna wysokość
  • Komputer stacjonarny: 12vh
  • Tablet i telefon: auto
• Maksymalna wysokość
  • Komputer stacjonarny: 12vh
  • Tablet i telefon: auto

Rozstaw

Nie zapomnij dodać odstępów.

• Górna wyściółka
  • Komputer stacjonarny: 1vh
  • Tablet i telefon: 3vh

niestandardowe CSS

Na koniec dodaj kilka linii kodu CSS w zakładce Zaawansowane.

• Widget: padding-bottom: 0vh;

padding-bottom: 0vh;

• Tytuł: padding-bottom: 2vh;

padding-bottom: 2vh;

Dodaj opcję e-mail

Tekst

Następnym modułem, którego potrzebujemy na naszym pasku bocznym, jest moduł e-mail optin. Dodaj wybrane przez siebie treści.

• Tytuł: Aktualizacje
• Przycisk: Subskrybuj

Konto e-mail

Następnie połącz swój e-mail z formularzem.

• Dostawca usług: Twój dostawca poczty e-mail
• Lista: Twoja wybrana lista

Pola

W ustawieniach pól używamy tylko pola imienia.

• Pokaż pole imienia

Tło

Następnie wyłącz domyślne tło.

• Użyj koloru tła: nie

Układ

Przejdź do karty projektu i zmodyfikuj ustawienia układu.

• Układ: ciało na górze, formularz na dole
• Pełna szerokość imienia: Nie
• Pełna szerokość e-maila: Nie

Pola

Następnie zmień styl pól w następujący sposób:

• Kolor tła: Jasnoszary #f7f7f7
• Kolor tekstu: #606060
• Wyściółka górna i dolna: 1vh
• Lewa wyściółka: 1vh
• Czcionka: Bai Jamjuree
• Rozmiar tekstu: 1,5 vh
• Odstępy między literami: 1px
• Zaokrąglone rogi: 15px

Tekst tytułu

Stylizuj też tekst tytułu.

• Poziom nagłówka: H4
• Czcionka: Bai Jamjuree
• Kolor: Koral #e98074
• Rozmiar: 2vh
• Odstępy między literami: 2px
• Wysokość linii: 1em

Przycisk

Następnie przycisk.

• Style niestandardowe
• Rozmiar tekstu: 1,5 vh
• Kolor tekstu: biały #ffffff
• Kolor tła: Koral #e98074
• Promień graniczny: 15px
• Odstępy między literami: 2px
• Czcionka: Bai Jamjuree
• Wyściółka górna i dolna: 1vh

Rozstaw

I uzupełnij ustawienia modułu i samouczek, dodając do modułu kilka niestandardowych wartości odstępów. Otóż ​​to! Upewnij się, że zapisałeś wszystkie zmiany w kreatorze motywów po zakończeniu tworzenia treści szablonu.

• Górna wyściółka
  • Komputer stacjonarny i tablet: 0vh
• Dolna wyściółka
  • Komputer stacjonarny: 2vh
  • Tablet i telefon: 6vh
• Wyściółka lewa i prawa
  • Komputer stacjonarny i tablet: 0vh

Zapowiedź

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

Pulpit

mobilny

To jest okład!

Skończyliśmy odtwarzać stały pasek boczny o pełnej wysokości dla szablonów postów na blogu. Jeśli pobrałeś szablon z powyższego linku, nie zapomnij skonfigurować widżetów paska bocznego, jak pokazano w pierwszej części tego samouczka.

Czy jesteś osobą z paskiem bocznym, czy bez paska bocznego? Daj nam znać w komentarzach, jeśli masz jakieś myśli lub pytania!