Jak dodać przyklejone menu kategorii do szablonów blogów w Divi

Menu kategorii to wspaniały dodatek do każdego bloga. Dają blogerom możliwość zaprezentowania różnych dostępnych tematów, dzięki czemu czytelnicy mogą szybko i łatwo dotrzeć do interesujących ich treści. Dlatego ważne jest, aby mieć dobrze zaprojektowane menu kategorii we wszystkich szablonach związanych z blogiem w Twojej witrynie.

W tym samouczku pokażemy, jak dodać do swojego bloga przyklejone menu kategorii za pomocą narzędzia Divi's Theme Builder. Omówimy, jak utworzyć przyklejone menu kategorii za pomocą Divi Builder, a także jak dodać menu kategorii do różnych szablonów w Twojej witrynie, które tworzą Twój blog.

Zacznijmy.

zapowiedź

Oto przyklejone menu kategorii dodane do szablonu postu

Oto dolne menu kategorii przyklejonych na urządzeniu mobilnym.

Oto menu kategorii w szablonie strony kategorii.

A oto szybki i łatwy szablon bloga, który utworzymy za pomocą przyklejonego menu kategorii, zaczynając pod suwakiem postów i przyklejając się do góry strony podczas przewijania.

Pobierz szablon(y) ZA DARMO

Aby położyć ręce na szablonach z przyklejonym menu kategorii z tego samouczka, najpierw musisz je 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 już jesteś na liście, po prostu wpisz poniżej swój adres e-mail i kliknij pobierz. Nie będziesz iresubscribedi ani otrzymywać dodatkowych e-maili.

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 do swojej strony, po prostu rozpakuj plik zip i dodaj jeden z plików json do Divi Theme Builder za pomocą opcji Theme Builder Portability.

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. Pobierz Theme Builder Pack #6, aby rozpocząć nowy projekt.

Po tym jesteś gotowy do pracy.

Subskrybuj nasz kanał YouTube

Dodawanie przyklejonego menu kategorii drugorzędnej do szablonów bloga

Przesyłanie pakietu Theme Builder Pack nr 6

W tym samouczku użyjemy pakietu Theme Builder Pack #6. Po pobraniu pakietu z wpisu na blogu przejdź do pulpitu nawigacyjnego WordPress i przejdź do Divi > Theme Builder.

Następnie kliknij ikonę przenoszenia w prawym górnym rogu. W wyskakującym okienku przenośności wybierz kartę importowania i wybierz plik Divi-Theme-Builder-Pack-6-All.json. Następnie kliknij przycisk „Importuj szablony Divi Theme Builder”.

Spowoduje to zaimportowanie wszystkich szablonów do Theme Buildera.

Teraz jesteśmy gotowi do rozpoczęcia tworzenia naszego menu kategorii.

Tworzenie nowego menu kategorii w WordPress

Menu kategorii można utworzyć tak, jak normalne menu w WordPressie. Z pulpitu nawigacyjnego WordPress przejdź do Wygląd > Menu. Kliknij link do tworzenia nowego menu, nadaj menu nazwę i kliknij przycisk "Utwórz menu".

Pod pozycjami menu otwórz przełącznik Kategorie i wybierz wszystkie kategorie/strony, które chcesz dodać do menu. Upewnij się, że masz już utworzone kategorie dla elementów kategorii, aby pojawiały się w przełączniku kategorii. Pozycje menu kategorii przekierowują do strony kategorii dla określonej kategorii postów.

Projektowanie przyklejonego menu kategorii w obszarze treści szablonu posta.

Po utworzeniu menu kategorii nadszedł czas na zaprojektowanie naszego menu kategorii. Aby to zrobić, musimy dodać go do obszaru ciała jednego z szablonów. Ostatecznie dodamy menu kategorii do innych szablonów związanych z blogiem, ale na razie dodajmy je do szablonu wszystkich postów (lub szablonu postów).

Edytor układu szablonu otwartego obszaru ciała

W interfejsie Theme Builder znajdź szablon już przypisany do „Wszystkich postów” i kliknij ikonę edycji w obszarze Custom Body Area.

Dodaj nową sekcję i wiersz na górze szablonu

W edytorze układu szablonu utwórz nową sekcję z jednokolumnowym wierszem i przeciągnij ją na samą górę układu.

Dostosuj sekcję

Przed dodaniem modułu otwórz ustawienia sekcji i nadaj mu tło i dopełnienie w następujący sposób:

• Kolor tła: #f92c8b
• Wyściółka: 1vw góra, 1vw dół

Dostosuj wiersz

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

• Kolor lewego gradientu tła: #f92c8b
• Prawy kolor gradientu tła: #ffd625
• Kierunek gradientu: 90 stopni
• Padding: 0px na górze, 0px na dole
• Zaokrąglone rogi: 20px

Dodaj moduł menu

W jednokolumnowym wierszu dodaj nowy moduł menu.

Następnie wybierz utworzone wcześniej menu kategorii z menu rozwijanego. Po wybraniu pozycje menu pojawią się w menu.

Zaprojektuj moduł menu pasujący do szablonu

Usuń domyślny kolor tła, aby był widoczny kolor tła wiersza.

Aktualizacja następujących ustawień projektowych:

• Styl: wyśrodkowany
• Czcionka menu: Ubuntu
• Grubość czcionki menu: pogrubiona
• Styl czcionki menu: TT (wielkość liter)
• Kolor tekstu menu: #ffffff
• Odstępy między literami menu: 2px
• Wysokość linii menu: 2em
• Kolor tła menu rozwijanego: #ffffff
• Kolor linii menu rozwijanego: #f92c8b

• Kolor tekstu menu rozwijanego: #222222
• Kolor tekstu menu mobilnego: #222222
• Kolor ikony menu Hamburger: #ffffff
• Czcionka ikony menu hamburgera: 40px
• Szerokość: 90%
• Wyrównanie modułu: Środek

Widoczność sekcji i wierszy

Aby żadne menu rozwijane nie były ukrywane, musimy upewnić się i ustawić widoczność naszej sekcji i wiersza na widoczny. Ponadto będziemy musieli również nadać indeksowi z wysoką liczbę, aby zachować całą kolejność menu ponad wszelką inną treścią na stronie. Będzie to potrzebne, aby zmaksymalizować widoczność menu rozwijanego na urządzeniach mobilnych, a także menu przyklejonego.

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

• Przepełnienie poziome: Widoczne
• Przepełnienie pionowe: Widoczne
• Indeks Z: 999

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

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

Przyklejanie sekcji (zawierającej menu)

Jest to oczywiście opcjonalne, ale aby utworzyć przyklejone menu kategorii, otwórz ustawienia sekcji i dodaj następujący niestandardowy kod CSS do elementu głównego:

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

Powiel sekcję, aby utworzyć menu dolnej kategorii

Aby poprawić wrażenia użytkownika na urządzeniach mobilnych, możemy stworzyć kolejne menu kategorii, które zostanie umieszczone na dole strony. Aby utworzyć menu, po prostu zduplikuj sekcję zawierającą właśnie utworzone menu.

Zoptymalizuj dolne przyklejone menu dla urządzeń mobilnych

Zaktualizuj Sticky CSS z dolnym pozycjonowaniem.

Ponieważ będziemy potrzebować tego menu tylko do „przyklejenia się” na urządzeniu mobilnym, otwórz ustawienia sekcji i usuń niestandardowy CSS dla komputerów stacjonarnych. Następnie dodaj następujący niestandardowy kod CSS na karcie tabletu.

position: -webkit-sticky !important;
position: sticky !important;
bottom: 0px;

Zmień kierunek menu rozwijanego dla dolnego menu kategorii

Ponieważ menu będzie znajdować się u dołu ekranu na urządzeniu mobilnym, zmień kierunek menu rozwijanego:

• Kierunek menu rozwijanego: w górę

Dodaj etykietę menu „Kategorie”

Aby dodać etykietę obok ikony menu mobilnego, na karcie Zaawansowane w Ustawieniach menu dodaj następujący niestandardowy kod CSS do elementu Przed:

position: absolute !important;
color: #ffffff!important;
font-size: 16px;
content: "Categories";
line-height: 2em;
left: 50%;
margin-left: -110px;

Oto jak dotychczas wyglądało menu na urządzeniach mobilnych.

Ukryj górne menu na urządzeniu mobilnym

Aby uniknąć przepełnienia nagłówka na telefonie komórkowym, wyłącz górne menu na telefonie i tablecie. Spowoduje to wyświetlenie tylko górnego przyklejonego menu na pulpicie.

Zapisz oba menu/wiersze w bibliotece Divi.

Zakończyliśmy tworzenie dwóch menu kategorii dla układu. Aby ułatwić dodawanie ich do innych szablonów, możemy zapisać je w naszej bibliotece Divi. Aby zapisać górne menu, wybierz ikonę „Dodaj do biblioteki” z menu sekcji. Następnie nadaj układowi nazwę i kliknij przycisk "Zapisz w bibliotece".

Powtórz ten sam proces, aby zapisać również dolne menu w bibliotece. Po prostu upewnij się i nadaj mu nazwę, którą zapamiętasz.

Ostateczny wynik szablonu postu na blogu

Zobaczmy, jak wygląda post na żywo z naszym nowym menu kategorii przyklejonych.

Widok pulpitu (górne menu)

Widok mobilny (dolne menu)

Dodawanie przyklejonego menu kategorii drugorzędnej do szablonu strony kategorii

Ponieważ mamy nasze sekcje menu dodane do Biblioteki Divi, możemy dodać je do dowolnego układu szablonu. Następnym szablonem, do którego dodamy menu kategorii, jest szablon strony kategorii.

Edytuj obszar treści szablonu strony kategorii

Znajdź szablon przypisany do „Wszystkie strony kategorii” i kliknij ikonę edycji w niestandardowym obszarze ciała.

Dodaj górne menu kategorii z biblioteki

W edytorze układu szablonu kliknij niebieską ikonę plusa, aby dodać nową sekcję. Następnie wybierz zakładkę Dodaj z biblioteki i wybierz z listy górne menu kategorii.

Następnie przenieś sekcję na górę układu szablonu.

Dodaj dolne menu kategorii z biblioteki

Następnie kliknij, aby dodać nową sekcję na samym dole układu. Następnie dodaj dolne menu kategorii z biblioteki.

Zaktualizuj kolor aktywnego łącza dla menu

W przypadku tego szablonu dobrym pomysłem jest zaktualizowanie koloru aktywnego linku, ponieważ elementy menu będą zawierać linki do stron kategorii korzystających z tego szablonu. Otwórz ustawienia górnego menu i zaktualizuj następujące elementy:

• Aktywny kolor łącza: #4160fd

Teraz, gdy odwiedzasz stronę kategorii, aktywny link będzie miał kolor niebieski.

Wynik końcowy szablonu strony kategorii

Dodawanie przyklejonego menu kategorii do szablonu strony bloga

Możemy również dodać nasze przyklejone menu kategorii do strony bloga naszej witryny. Strona bloga to w zasadzie strona główna Twojego bloga i zwykle zawiera kanał wszystkich Twoich postów na blogu. Dzięki Divi Theme Builder możemy stworzyć szablon strony bloga i łatwo dodać menu kategorii.

Tworzenie szablonu bloga

Najpierw zduplikuj szablon strony kategorii.

Następnie przypisz zduplikowany szablon do bloga.

Edytuj niestandardową treść szablonu bloga.

Dostosuj układ szablonu bloga

Użyj edytora układu szablonu, aby zaprojektować szablon bloga. Na razie dajmy mu po prostu ładny suwak postów o pełnej szerokości u góry strony. Aby to zrobić, utwórz nową sekcję o pełnej szerokości.

Dodaj suwak postów o pełnej szerokości

Następnie dodaj do sekcji moduł Post Slider o pełnej szerokości.

Ustaw zawartość, aby pobrać „Wpisy na bieżącej stronie”. Następnie upewni się, że pobiera odpowiednią zawartość dynamiczną dla strony bloga.

Zaktualizuj ustawienia suwaka postów o pełnej szerokości w następujący sposób:

• Czcionka tytułu: Ubuntu
• Grubość czcionki tytułu: Średnia
• Czcionka ciała: Ubuntu

Przenieś menu pod suwakiem postów

W przypadku tego układu przeciągnijmy suwak postów na górę strony, aby górne menu kategorii przyklejonych znajdowało się pod suwakiem.

Utwórz i przypisz stronę postów (lub bloga)

Upewnij się, że masz stronę bloga wyznaczoną w WordPress. Aby to zrobić, przejdź do Ustawienia> Czytanie. Następnie, aby wyświetlić stronę główną, wybierz stronę statyczną. Następnie wybierz stronę, której chcesz użyć dla strony Posty.

Ostateczny wynik szablonu strony bloga

Zwróć uwagę, jak menu kategorii staje się przyklejone, gdy dociera do górnej części strony.

Końcowe przemyślenia

Przyklejone menu kategorii może naprawdę przenieść Twój blog na wyższy poziom. Budowanie jednego to tak naprawdę proste użycie Divi Builder. A Theme Builder ułatwia dodawanie menu w dowolnym miejscu w witrynie. Dodatkowo możesz nawet utworzyć oddzielne przyklejone menu dla urządzeń mobilnych, aby zapewnić użytkownikom jak najlepsze wrażenia. Mam nadzieję, że przyda się to na twoim własnym blogu lub następnym projekcie.

Czekam na kontakt z Państwem w komentarzach.

Pozdrawiam!