Jak utworzyć dynamiczny pasek informacyjny posta dla szablonu postów na blogu Divi

Dodanie zawartości dynamicznej do szablonu posta na blogu jest niezbędne do zapewnienia takich rzeczy, jak tytuł posta, metadane, wyróżniony obraz itp. Zwykle te elementy dynamiczne są umieszczane jako zwykłe elementy statyczne w projekcie układu. Jednak pomocne może być utrzymywanie niektórych z tych dynamicznych elementów na pierwszym planie dla czytelników. Tutaj przydaje się dynamiczny pasek informacji o wpisie. Dynamiczny pasek informacji o wpisie pozostaje nieruchomy w górnej części przeglądarki (tak jak zrobiłby to stały nagłówek) i zawiera przydatne fragmenty dynamicznej treści i inne wezwania do działania. Na przykład możesz użyć tego paska, aby przypomnieć czytelnikom o wpisie, który aktualnie czytają, link do pozostawienia komentarza lub link do powiązanej kategorii.

W tym samouczku pokażemy, jak utworzyć dynamiczny pasek informacji o wpisie i dodać go do szablonu wpisu na blogu za pomocą Kreatora motywów Divi. Po zakończeniu ten pasek będzie działał bezproblemowo dla wszystkich postów na blogu w całej witrynie.

Zacznijmy!

zapowiedź

Oto krótkie spojrzenie na projekt, który zbudujemy w tym samouczku. Zwróć uwagę, jak linki kotwiczne („Zostaw komentarz” i „Zapisz się”) przekierowują użytkowników do odpowiedniego obszaru w poście.

Pobierz układ za DARMO

Aby położyć swoje ręce na projektach z tego samouczka, 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!

Aby zaimportować układ sekcji do Divi Theme Builder, przejdź do Divi Theme Builder.

Kliknij ikonę przenoszenia.

W wyskakującym okienku przenośności wybierz zakładkę importu i wybierz plik do pobrania z komputera.

Następnie kliknij przycisk importu.

Po zakończeniu szablon sekcji pojawi się w Divi Theme Builder.

Przejdźmy do samouczka, dobrze?

Część 1: Importowanie gotowych szablonów

W tym samouczku użyjemy kilku gotowych szablonów z naszego szóstego pakietu do tworzenia motywów. Zaimportujemy domyślny szablon witryny, który da nam działający globalny nagłówek, w którym dodamy pasek informacji o wpisie. I zamierzamy zaimportować szablon postu na blogu, aby przetestować nasze wyniki w poście na żywo.

WAŻNE: najlepiej byłoby zaimportować te szablony w witrynie testowej, aby nie zepsuć działającej witryny.

Importuj domyślny szablon strony internetowej

Najpierw musisz pobrać szósty DARMOWY pakiet Theme Builder Pack dla Divi. Następnie rozpakuj plik.

Z pulpitu nawigacyjnego WordPress przejdź do Divi> Kreator motywów. Następnie kliknij ikonę przenoszenia w prawym górnym rogu. W wyskakującym okienku przenoszenia wybierz kartę importu. Następnie wybierz domyślny plik json szablonu strony internetowej z pobranego folderu i kliknij przycisk importu. Spowoduje to zaimportowanie nowego domyślnego szablonu witryny z globalnym nagłówkiem i stopką.

Importuj szablon posta

Powtórz ten proces, aby zaimportować szablon posta z tego samego pobranego folderu. Otwórz wyskakujące okienko przenoszenia, wybierz plik json szablonu posta i kliknij przycisk importu. Dzięki temu otrzymasz szablon wpisu przypisany do wszystkich wpisów w Twojej witrynie wraz z domyślnym nagłówkiem i stopką.

Wyłącz globalne w nagłówku szablonu posta

Zamierzamy dodać nasz dynamiczny pasek informacyjny posta do nagłówka szablonu posta. Ponieważ jednak chcemy, aby pasek informacyjny posta znajdował się tylko w szablonie posta, musimy wyłączyć globalne w nagłówku, aby nasz pasek nie był dodawany do wszystkich nagłówków w całej witrynie. Aby wyłączyć globalne w globalnym nagłówku, otwórz menu ustawień w globalnym nagłówku i wybierz "Wyłącz globalne".

Teraz nagłówek powinien być szary z etykietą „Custom Header”. Po zakończeniu kliknij ikonę edycji, aby edytować szablon układu nagłówka.

Tworzenie dynamicznego paska informacyjnego posta

Dodawanie sekcji i wiersza

W edytorze układu nagłówka utwórz nową zwykłą sekcję pod bieżącą sekcją zawierającą nagłówek.

Następnie dodaj pół jednej czwartej jednej czwartej wiersza kolumny do sekcji.

Ustawienia sekcji

Otwórz ustawienia sekcji i zaktualizuj następujące elementy:

• Kolor tła: #eceffe
• Padding: 10px góra, 10px dół

Ustawienia wiersza

Po dodaniu ustawień sekcji otwórz ustawienia wiersza i zaktualizuj następujące elementy:

• Szerokość rynny: 1
• Padding: 0px na górze, 0px na dole

Na karcie Zaawansowane dodaj następujący niestandardowy kod CSS do elementu głównego:

display:flex !important;
flex-wrap: nowrap;
align-items: center;

Dzięki temu kolumny w dół stosu na urządzeniu mobilnym.

Dodaj dynamiczną zawartość tytułu posta

Pierwszym elementem dynamicznej treści, który dodamy do paska, jest tytuł posta. Będzie to pomocne przypomnienie czytelnikowi, jaki tytuł posta aktualnie czyta.

Dodaj moduł tekstowy

Aby utworzyć tytuł posta jako zawartość dynamiczną, utwórz nowy moduł tekstowy w skrajnej lewej kolumnie.

Dodaj tytuł posta/archiwum jako zawartość dynamiczną

Następnie kliknij ikonę "Użyj zawartości dynamicznej", unosząc kursor nad obszarem treści ustawień tekstu. Wybierz z listy „Tytuł postu/archiwum”.

Otwórz ustawienia zawartości dynamicznej dla tytułu posta/archiwum i dodaj następujące elementy w polu wprowadzania przed:

You're Reading: 

Następnie zapisz zmiany.

Ustawienia projektowe

Na karcie Projekt dostosuj styl tytułu dynamicznego w następujący sposób:

• Czcionka tekstu: Ubuntu
• Grubość czcionki tekstu: średnia
• Kolor tekstu tekstu: #121212
• Tekst Rozmiar tekstu: 14px (komputer), 12px (tablet), 11px (telefon)

Dodaj informacje o kategoriach postów dynamicznych

Aby utworzyć informacje o kategoriach postów, zduplikuj moduł tekstowy zawierający tytuł posta.

Następnie otwórz ustawienia modułu zduplikowanego tekstu i dodaj kategorie postów jako zawartość dynamiczną do treści.

Otwórz Ustawienia zawartości dynamicznej kategorii postów i zaktualizuj następujące elementy:

• Przed: W
• Separator kategorii: &

Zaktualizuj kolor linku

Na karcie projektu zaktualizuj kolor łącza w następujący sposób:

• Kolor tekstu łącza: #4160fd

Dodawanie informacji o liczbie komentarzy dynamicznych

Kolejną przydatną informacją, którą dodamy do paska informacji o wpisie, jest liczba komentarzy, która przypomina użytkownikowi o angażowaniu się w własne komentarze, jeśli chce. Licznik komentarzy będzie również zawierał link do komentarzy do posta.

Aby utworzyć dynamiczną informację o liczbie komentarzy, zduplikuj moduł tekstowy z kategoriami i przeciągnij go do środkowej kolumny.

Następnie dodaj komentarz do wpisu jako zawartość dynamiczną do treści tekstu.

Otwórz Ustawienia licznika postów i dodaj następujące elementy:

• Po: komentarz(y)

Dodawanie wezwania do działania „Zostaw komentarz”

Oprócz liczby komentarzy dodamy proste wezwanie do działania, aby zostawić komentarz. Link będzie linkiem kotwicy, który przewija się do sekcji komentarzy na dole posta.

Aby utworzyć wezwanie do działania, zduplikuj moduł Tekst w kolumnie 2 z liczbą komentarzy.

Następnie otwórz ustawienia tekstu duplikatu i dodaj następujący link html do treści:

<a href="#respond">Leave a Comment</a>

Dodawanie przycisku subskrypcji

Ostatnią rzeczą, jaką dodamy do paska informacji o poście, jest przycisk subskrypcji. Będzie to również link do kotwicy, który przeniesie użytkownika do sekcji szablonu posta, która zawiera formularz zgody na e-mail.

Aby to zrobić, dodaj moduł przycisku w skrajnej prawej kolumnie.

Na karcie projekt zaktualizuj style przycisków w następujący sposób:

• Rozmiar tekstu przycisku: 14px (komputer), 12px (tablet), 11px (telefon)
• Kolor tekstu przycisku: #ffffff
• Kolor gradientu tła przycisku po lewej stronie: #7e5ce6
• Prawy gradient tła przycisku: #25b8ee
• Szerokość obramowania przycisku: 0px
• Promień obramowania przycisku: 100px
• Odstępy między przyciskami: 2px
• Czcionka przycisku: Ubuntu
• Waga czcionki przycisku: pogrubiona
• Styl czcionki przycisku: TT
• Padding (komputer): 10px góra, 10px dół, 20px w lewo, 20px w prawo
• Wypełnienie (tablet): 6px góra, 6px dół, 14px po lewej, 14px po prawej

Aby dodać link kotwiczny do przycisku, przejdź do zakładki treści i dodaj następujący adres URL linku do przycisku:

• URL linku przycisku: #subscribe

Ten link nie będzie działał, dopóki nie dodamy odpowiedniego identyfikatora CSS do sekcji zawierającej formularz zgody na e-mail w treści szablonu posta.

Wyłącz kolumnę 1 na telefonie komórkowym

W telefonie komórkowym jest tylko tyle miejsca na stały bar. Dlatego będziemy musieli podejmować decyzje, jakie informacje uwzględnić. W tym przykładzie zostawimy dwie kolumny z wezwaniami do działania na urządzeniach mobilnych i wyłączymy kolumnę z tytułem posta i kategoriami.

Aby to zrobić, otwórz ustawienia dla kolumny 1. W zakładce Zaawansowane wyłącz widoczność na telefonie i tablecie.

Nadanie sekcji stałej pozycji i wysokiego wskaźnika Z

Po zakończeniu projektowania możemy teraz nadać sekcji stałą pozycję. Chodzi o to, aby początkowo ukryć pasek za sekcją z nagłówkiem. Następnie, gdy użytkownik przewinie, spod nagłówka zostanie wyświetlony stały pasek informacji o wpisie.

Otwórz ustawienia sekcji i zaktualizuj następujące elementy:

• Pozycja: Naprawiono
• Indeks Z: 998

Zauważ, że indeks z to 998, ponieważ chcę, aby stały pasek znajdował się nad resztą treści w poście.

Aktualizuj nagłówek sekcji Indeks Z

Ponieważ sekcja paska informacji o wpisie ma wyższy indeks z, będzie wyświetlana nad sekcją z nagłówkiem. Aby to naprawić, otwórz ustawienia sekcji dla sekcji z nagłówkiem i dodaj następujące elementy:

• Indeks Z: 999 (jeden więcej niż odcinek z paskiem)

Zapisz zmiany w edytorze układu.

Dodaj identyfikator CSS do wiersza zgody e-mail w szablonie treści

Przycisk subskrypcji CTA, który dodajemy do paska, nadal potrzebuje kotwicy, czyli miejsca, do którego można „przeskoczyć” w szablonie posta. Ponieważ CTA ma na celu „subskrypcję”, potrzebujemy go, aby przejść do formularza opi-in w e-mailu.

Aby to zrobić, otwórz obszar „niestandardowa treść” szablonu posta w kreatorze motywów.

Znajdź wiersz z formularzem zgody na pocztę e-mail u dołu układu i dodaj następujący identyfikator CSS:

• Identyfikator CSS: subskrybuj

Umożliwi to linkowi zakotwiczenia przycisku subskrypcji przewinięcie do tego konkretnego obszaru szablonu.

Po zakończeniu zapisz zmiany w układzie i kreatorze motywów.

Ostateczny wynik

Aby zobaczyć ostateczny wynik, po prostu otwórz i obejrzyj post na żywo na stronie. Zwróć uwagę, jak linki kotwiczne („Zostaw komentarz” i „Subskrybuj”) wysyłają użytkowników do odpowiedniego obszaru w poście.

Końcowe przemyślenia

Mamy nadzieję, że ten dynamiczny pasek informacji o wpisie przyda się do poprawy UX Twoich postów na blogu Divi. Zachęcamy do eksperymentowania również z innymi informacjami. Jestem pewien, że istnieje sposób na umieszczenie tam powiązanego posta z modułem bloga.

Czekam na kontakt z Państwem w komentarzach.

Pozdrawiam!