Jak utworzyć pasek informacyjny na blogu za pomocą modułu suwaka postów Divi

Znacznik wpisów na blogu to wygodne narzędzie do dynamicznego prezentowania wpisów na blogu (ostatnich, powiązanych itp.) w Twojej witrynie. Możesz myśleć o tym jako o pasku wiadomości dla postów na blogu WordPress.

Dzisiaj pokażemy Ci, jak stworzyć ticker postów na blogu za pomocą modułu suwaka postów Divi. Podobnie jak pasek wiadomości, pasek wiadomości na blogu, który zamierzamy utworzyć, będzie uproszczoną i kompaktową wersją modułu suwaka postów Divi. A ponieważ moduł suwaka postów ma wbudowane funkcje do prezentowania postów na różne sposoby, możesz go używać w dowolnym miejscu. Możesz użyć go na stronie głównej jako symbolu postu, aby wyświetlić ostatnie posty, lub możesz użyć go w nagłówku szablonu postu na blogu, aby wyświetlić posty powiązane z bieżącą kategorią.

Po tym, jak pokażemy Ci, jak utworzyć pasek wiadomości na blogu w Divi, pokażemy Ci również, jak zapisać go w bibliotece Divi, aby można go było dodać do nagłówka szablonu postu na blogu w Divi Builder.

Zacznijmy!

zapowiedź

Oto krótkie spojrzenie na pasek wiadomości na blogu, który zbudujemy w tym samouczku.

Oto, jak pasek wiadomości ładnie układa się na wyświetlaczu telefonu.

Pokażemy, jak dodać ticker posta, aby wyświetlać powiązane posty również w nagłówku szablonu postu na blogu.

Pobierz układ i szablon 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!

Zaimportuj układ do biblioteki Divi

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

Kliknij przycisk Importuj.

W wyskakującym okienku przenośności wybierz zakładkę importu i wybierz plik do pobrania z komputera. Będzie to plik JSON w folderze o nazwie „układ paska postów na blogu (biblioteka Divi)”.

Następnie kliknij przycisk importu.

Po zakończeniu układ sekcji będzie dostępny w Divi Builder.

Zaimportuj szablon nagłówka do Divi Theme Builder

Jeśli chcesz zaimportować szablon postu na blogu z paskiem postu dodanym do nagłówka, musisz przejść do Divi > Theme Builder.

Następnie użyj ikony przenoszenia w prawym górnym rogu strony, aby zaimportować plik JSON. Będzie to plik w folderze o nazwie „szablon nagłówka wpisu na blogu z paskiem wiadomości (Konstruktor motywów)”.

Przejdźmy do samouczka, dobrze?

Czego potrzebujesz, aby zacząć

Aby rozpocząć, musisz wykonać następujące czynności:

1. Jeśli jeszcze tego nie zrobiłeś, zainstaluj i aktywuj motyw Divi.
2. Utwórz nową stronę w WordPress i użyj Divi Builder, aby edytować stronę w interfejsie (konstruktor wizualny).
3. Wybierz opcję „Buduj od podstaw”.

Następnie będziesz mieć puste płótno, aby rozpocząć projektowanie w Divi.

Tworzenie paska wiadomości na blogu w Divi

Tworzenie rzędu

Na początek utwórzmy jednokolumnowy wiersz wewnątrz sekcji.

Ustawienia wiersza

Następnie zaktualizuj ustawienia projektu wiersza w następujący sposób:

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

Tworzenie tytułu paska wiadomości z modułem tekstowym

Teraz, gdy wiersz jest na swoim miejscu, dodaj do niego moduł tekstowy, aby utworzyć tytuł paska wiadomości.

Tekst tytułu i tło

Zaktualizuj treść, aby przeczytać „Ostatnie posty:”.

Następnie zaktualizuj kolor tła:

• Kolor tła: #333333

Ustawienia projektowe

Na karcie projektu zaktualizuj style tekstu w następujący sposób:

• Czcionka tekstu: Poppins
• Grubość czcionki tekstu: pół pogrubiona
• Styl czcionki tekstu: TT
• Kolor tekstu tekstu: rgba (255,255,255,0.7)
• Odstępy między literami tekstu: 1px
• Wysokość linii tekstu: 40px
• Wyrównanie tekstu: do środka

• Szerokość: 100%
• Maksymalna szerokość: 175px (komputer i tablet), 100% (telefon)

To dba o nasz tytuł paska pocztowego. Teraz zacznijmy budować pasek pocztowy.

Tworzenie paska postów na blogu za pomocą modułu suwaka postów na blogu

Aby utworzyć ticker postów na blogu, użyjemy modułu suwaka postów, a następnie uprościmy projekt, aby był naprawdę kompaktowy.

Dodaj moduł suwaka postów pod modułem tekstowym.

Opublikuj zawartość suwaka

W zakładce treści możesz wybrać liczbę postów, uwzględnione kategorie oraz sposób ich lub kolejność. W tym przykładzie zachowamy ustawienie domyślne, a suwak pokaże najnowsze posty.

Aby ukryć fragment posta, zaktualizuj następujące elementy:

• Użyj fragmentów posta: NIE
• Długość fragmentu: 0

Elementy i tło suwaka postu

Naprawdę, wszystko, co chcemy wyświetlić w suwaku, to tytuł posta i strzałki slajdów. W grupie opcji elementów ukryj wszystko oprócz strzałek.

• Pokaż kontrolki: NIE
• Pokaż przycisk Czytaj więcej: NIE
• Pokaż meta posta: NIE

Zamierzamy zachować opcję wyświetlania wyróżnionego obrazu jako tła każdego slajdu. Ale w przypadku kopii zapasowej upewnij się, że dodałeś następujący kolor tła:

• Kolor tła: #eeeeee

Ustawienia projektu suwaka postu

Style nakładek i strzałek

Na karcie projektu zaktualizuj nakładkę tła i kolor strzałek w następujący sposób:

• Użyj nakładki tła: TAK
• Kolor nakładki tła: rgba (248,248,248,0.9)
• Kolor strzałki: #ffffff (komputer), #ef51f7 (najedź)

Tekst tytułu

Następnie zaktualizuj style tekstu tytułu w następujący sposób:

• Czcionka tytułu: Poppins
• Grubość czcionki tytułu: Średnia
• Wyrównanie tekstu tytułu: do lewej
• Kolor tekstu tytułu: #333333
• Kolor tekstu tytułu (najechanie kursorem): #ef51f7
• Rozmiar tekstu tytułu: 16px (komputer), 14px (telefon)
• Wysokość wiersza tytułu: 40px
• Cień tekstu tytułu: patrz zrzut ekranu
• Kolor cienia tekstu tytułu: przezroczysty

Rozstaw

Musimy zrobić miejsce na moduł tekstowy tytułu paska wiadomości, abyśmy mogli umieścić nasz suwak posta po jego prawej stronie. Aby to zrobić, zaktualizuj następujące elementy:

• Margines: pozostało 175px (komputer i tablet), pozostało 0px (telefon)
• Padding: 0px na górze, 0px na dole, 0px w lewo, 0px w prawo

Automatyczna animacja

Suwak postu ma wbudowaną opcję dodawania automatycznej animacji. To zapewni nam funkcjonalność paska, którego potrzebujemy, aby zobaczyć posty bez konieczności klikania strzałek slajdów.

Dodaj automatyczną animację w następujący sposób:

• Automatyczna animacja: WŁĄCZONA
• Automatyczna prędkość animacji: 3500

Możesz swobodnie zwiększać lub zmniejszać prędkość do tego, co uważasz za najlepsze.

Zaawansowana stylizacja

Klasa CSS i niestandardowy CSS

W tym momencie suwak postu jest w większości działającym paskiem pocztowym. Istnieje jednak kilka zaawansowanych poprawek, które możemy dodać, aby uporządkować projekt.

Najpierw dodaj niestandardową klasę CSS w następujący sposób:

• Klasa CSS: et-post-ticker

Aby upewnić się, że tytuł posta pozostaje w jednym wierszu wewnątrz suwaka/paska i ukrywa przepełnienie wielokropkiem, dodaj następujący kod CSS do tytułu slajdu:

padding-bottom:0px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;

Aby nadać strzałkom slajdów bardziej wrażenie przycisków, dodaj następujący kod CSS do strzałek slajdów:

height: 40px;
width: 40px;
line-height:40px;
font-size: 28px;
text-align: center;
margin-top:-20px;
background:#333;

Dodatkowy CSS z modułem kodu do pozycjonowania strzałek slajdów

W tym momencie domyślna funkcjonalność strzałek slajdów będzie wyświetlana tylko po najechaniu kursorem, a strzałki zostaną umieszczone po prawej i lewej stronie slajdu. Aby poprawić wrażenia użytkownika i uczynić go bardziej podobnym do paska wiadomości, możemy wyświetlać strzałki zawsze i umieszczać je po prawej stronie suwaka.

Aby to zrobić, dodaj nowy moduł kodu pod suwakiem postu.

Następnie wklej następujący kod CSS, upewniając się, że zawiera on niezbędne tagi stylu.

.et-post-ticker.et_pb_slider:hover .et-pb-arrow-prev,
.et-post-ticker .et-pb-arrow-prev {
  right: 40px !important;
  opacity: 1 !important;
  left: auto !important;
}
.et-post-ticker.et_pb_slider:hover .et-pb-arrow-next,
.et-post-ticker .et-pb-arrow-next {
  right: 0px !important;
  opacity: 1 !important;
}
.et-post-ticker .et_pb_slide {
  padding: 0 84px 0 3% !important;
}

Ostateczny wynik

Oto wynik końcowy na aktywnej stronie.

Zwróć uwagę, jak ticker wpisu obsługuje przepełnienie tekstu tytułu.

A oto jak pasek wiadomości ładnie układa się na wyświetlaczu telefonu.

Dodawanie paska wiadomości do nagłówka szablonu postu na blogu

Jednym z oczywistych przypadków użycia tego paska wiadomości jest wyświetlanie najnowszych postów w rzeczywistym nagłówku szablonu postu na blogu. Oto jak możesz to zrobić.

Zapisywanie wiersza w bibliotece Divi

Najpierw zapisz wiersz zawierający elementy, które składają się na nasz ticker postów, do Biblioteki Divi. Możesz to zrobić, klikając ikonę z trzema kropkami w rzędzie i wybierając „Zapisz w bibliotece”. Następnie nadaj układowi nazwę i kliknij przycisk „Zapisz w bibliotece”.

Dodawanie wiersza paska pocztowego do szablonu nagłówka

Edytuj niestandardowy nagłówek

Po zapisaniu wiersza w bibliotece jesteśmy gotowi, aby dodać go do niestandardowego nagłówka. W tym przykładzie upewnij się, że szablon jest przypisany do „Wszystkie posty”. Następnie kliknij, aby edytować niestandardowy nagłówek tego szablonu.

Wstaw wiersz (pasek pocztowy) z biblioteki

W edytorze układu nagłówka kliknij, aby dodać nowy wiersz w dowolnym miejscu, w którym ma być wyświetlany pasek wiadomości.

W trybie modalnym Wstaw wiersz wybierz kartę Dodaj z biblioteki. Znajdź zapisany wcześniej w bibliotece wiersz paska postów na blogu i wybierz go.

Teraz w nagłówku pojawi się pasek wiadomości.

Zaprezentuj podobne posty dla bieżącej kategorii

Ponieważ ten ticker posta będzie wyświetlany tylko w postach na blogu, możemy wybrać wyświetlanie tylko postów związanych z bieżącą kategorią.

Najpierw musimy zaktualizować tekst tytułu w naszym module tekstowym na „Powiązane posty:”.

Następnie otwórz ustawienia suwaka postów. W obszarze Uwzględnione kategorie wybierz opcję Bieżąca kategoria.

Teraz każdy post na blogu będzie miał w nagłówku pasek, który wyświetla powiązane posty według bieżącej kategorii.

Wynik w szablonie posta na blogu

Oto automatyczna animacja w akcji.

Oto jak możesz kliknąć strzałki nawigacyjne, aby przejść do następnych i poprzednich postów. A kliknięcie tytułu posta prowadzi do tego posta.

A oto jak to wygląda na tablecie i telefonie.

Końcowe przemyślenia

Jak się dowiedzieliśmy, możemy łatwo utworzyć pasek informacyjny na blogu, upraszczając projekt modułu suwaka Divi i wprowadzając kilka niestandardowych poprawek do strzałek nawigacyjnych. I nie zapominaj, że zawsze możesz łatwo dostosować styl, korzystając ze wszystkich opcji wbudowanych w suwak postów. Mamy nadzieję, że przyda się to wszystkim blogerom i programistom internetowym.

Czekam na kontakt z Państwem w komentarzach.

Pozdrawiam!