Jak dodać widżety menu kategorii postów do globalnej stopki Divi

Kiedy budujesz niestandardową stopkę w Divi's Theme Builder, istnieje kilka sposobów na dodanie elementów stopki. Możesz wybrać stopkę opartą na module, w której dodajesz elementy stopki strony w modułach tekstowych z odpowiednimi linkami, ale możesz również zdecydować się na dodanie różnych widżetów stopki do swojego projektu za pomocą modułu paska bocznego Divi i stylizuj je za pomocą wbudowanego modułu Divi opcje. W dzisiejszym samouczku pokażemy, jak skorzystać z drugiej opcji. Dokładniej, pokażemy Ci, jak dodać widżety menu kategorii postów do stopki. Stosowany przez nas styl projektowania idealnie pasuje do pakietu układów przepisów żywnościowych. Zaczniemy od dodania różnych kategorii postów do naszej witryny. Następnie zbudujemy menu stopki w WordPressie. Następnie utworzymy nasze widżety i na koniec dodamy widżety do naszej niestandardowej stopki Divi w Divi Theme Builder. 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

Pobierz szablon globalnej stopki ZA DARMO

Aby położyć swoje ręce na darmowym szablonie globalnej stopki, musisz najpierw pobrać go 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. Skonfiguruj kategorie postów w swojej witrynie

Przejdź do swoich kategorii postów

W pierwszej części tego samouczka upewnimy się, że wszystkie kategorie postów są skonfigurowane, zanim zaczniemy dodawać je do niestandardowych menu stopki. Aby to zrobić, przejdź do kategorii postów w swoim zapleczu WordPress.

Skonfiguruj dowolną strukturę kategorii postów

Skonfiguruj wszystkie kategorie postów, które chcesz umieścić w stopce, jeśli jeszcze tego nie zrobiłeś. W tym samouczku będziemy potrzebować trzech różnych grup kategorii postów, ponieważ w naszej niestandardowej stopce umieścimy trzy różne widżety menu kategorii postów.

2. Utwórz kilka kategorii menu WordPress

Przejdź do menu

Następnie utworzymy osobne menu dla każdej grupy kategorii postów. Przejdź do menu w ustawieniach wyglądu swojej witryny WordPress.

Utwórz pierwszą stopkę menu

Dodaj pierwszą stopkę menu i nadaj mu rozpoznawalną nazwę.

• Nazwa menu: Stopka Menu #1

Dodaj kategorie postów

Dodaj swoją pierwszą grupę kategorii postów do tego nowego menu.

Utwórz drugie i trzecie menu stopki dla innych kategorii postów

Zrób to samo dla dwóch innych grup kategorii postów.

• Nazwa menu: Menu stopki #2

• Nazwa menu: Stopka Menu #3

3. Utwórz widżety w stopce

Przejdź do widżetów

Teraz, gdy mamy już nasze kategorie postów i menu kategorii postów, możemy umieścić je w naszych widżetach obszaru stopki. Aby to zrobić, przejdź do widżetów w swoim zapleczu WordPress.

Dodaj menu stopki #1 do obszaru stopki #1

Tam dodaj pierwszy widżet menu nawigacyjnego do obszaru stopki #1. W menu nawigacyjnym wybierz pierwsze menu stopki, które utworzyłeś w poprzedniej części tego samouczka.

Dodaj menu stopki #2 do obszaru stopki #2

Umieść menu drugiej kategorii postów w drugiej stopce.

Dodaj menu stopki #3 do obszaru stopki #3

I trzecie menu stopki w obszarze trzeciej stopki.

Dodaj ostatnie posty do obszaru stopki #4

Ostatnim potrzebnym widżetem, który dodamy do czwartego obszaru stopki, jest widżet ostatnich postów. Ten widżet będzie dynamicznie wyświetlać 5 ostatnich postów jako linki.

3. Zbuduj globalną stopkę wewnątrz Divi Theme Builder

Przejdź do kreatora motywów Divi i zacznij budować szablon stopki

Teraz, gdy nasze kategorie postów, menu kategorii postów i widżety są gotowe, nadszedł czas, aby przejść do Divi! Przejdź do Divi Theme Builder i zacznij tworzyć globalną lub niestandardową stopkę.

Ustawienia sekcji

Kolor tła

W szablonie stopki zauważysz sekcję. Otwórz tę sekcję i dodaj do niej kolor tła. Styl, którego używamy w całym projekcie, idealnie pasuje do pakietu układów przepisów żywnościowych, ale podejście to będzie działać z każdym rodzajem projektu, który wybierzesz.

• Kolor tła: #ff7864

Zdjęcie w tle

Następnie dodaj obraz tła. Jeśli chcesz użyć dokładnie tego samego, co w tym samouczku, możesz go znaleźć w folderze, który możesz pobrać na początku tego samouczka.

• Rozmiar obrazu tła: Dopasuj

Rozstaw

Przejdź do zakładki projektu sekcji i usuń wszystkie domyślne górne i dolne wyściółki.

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

Dodaj wiersz nr 1

Struktura kolumny

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

Tło gradientowe

Nie dodając jeszcze żadnych modułów, otwórz ustawienia wiersza i zastosuj tło gradientowe.

• Kolor 1: rgba(10,10,10,0.05)
• Kolor 2: rgba(10,10,10,0.18)

Rozmiary

Przejdź do karty projektu wiersza i zmodyfikuj ustawienia rozmiaru w następujący sposób:

• Użyj niestandardowej szerokości rynny: Tak
• Szerokość rynny: 1
• Wyrównaj wysokości kolumn: Tak
• Maksymalna szerokość: 1680 pikseli

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

Ustawienia kolumny 1

Rozstaw

Następnie otwórz ustawienia kolumny 1 i dodaj kilka niestandardowych wartości dopełnienia na karcie projektu.

• Górna wyściółka: 5%
• Dolna wyściółka: 5%
• Lewa wyściółka: 5%
• Prawa wyściółka: 5%

Granica

Używamy również prawego obramowania na pulpicie.

• Szerokość prawego obramowania:
  • Pulpit: 2px
  • Tablet i telefon: 0px
• Kolor prawego obramowania: #ff7864

Ustawienia kolumny 2

Rozstaw

Następnie otwórz ustawienia kolumny 2 i zastosuj do nich następujące wartości dopełnienia:

• Górna wyściółka: 5%
• Dolna wyściółka: 5%
• Lewa wyściółka: 5%
• Prawa wyściółka: 5%

Dodaj moduł obrazu do kolumny 1

Prześlij logo

Czas dodać moduły, zaczynając od modułu obrazu w kolumnie 1. Prześlij wybrane logo i stylizuj je tak, jak chcesz.

Dodaj moduł tekstowy do kolumny 2

Dodaj zawartość H2

W drugiej kolumnie dodajemy moduł tekstowy z opisową zawartością H2.

Ustawienia tekstu H2

Przejdź do zakładki projektu i odpowiednio zmień ustawienia tekstu H2:

• Czcionka nagłówka 2: Kormoran Garamond
• Grubość czcionki nagłówka 2: Średnia
• Kolor tekstu nagłówka 2: #ffffff
• Rozmiar tekstu nagłówka 2:
  • Komputer stacjonarny i tablet: 40 pikseli
  • Telefon: 35px
• Nagłówek 2 Wysokość linii: 1,3 em

Dodaj wiersz nr 2

Struktura kolumny

Do następnego rzędu. W tym rzędzie umieścimy wszystkie nasze widżety. Wybierz następującą strukturę kolumn:

Kolor tła

Nie dodając jeszcze żadnych modułów, otwórz ustawienia wiersza i zastosuj kolor tła.

• Kolor tła: rgba (10,10,10,0.05)

Rozmiary

Przejdź do zakładki projektu i zmień ustawienia rozmiaru w następujący sposób:

• Użyj niestandardowej szerokości rynny: Tak
• Szerokość rynny: 1
• Wyrównaj wysokości kolumn: Tak
• Maksymalna szerokość: 1680 pikseli

Rozstaw

Usuń również wszystkie domyślne górne i dolne wyściółki.

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

Wszystkie odstępy między kolumnami

Następnie otwórz poszczególne kolumny i zastosuj do każdej z nich następujące wartości dopełnienia:

• Górna wyściółka: 5%
• Dolna wyściółka: 5%
• Lewa wyściółka: 5%
• Prawa wyściółka: 5%

Kolumna 1 Obramowanie

Następnie dodamy obramowanie do kolumny 1.

• Szerokość prawego obramowania:
  • Komputer stacjonarny i tablet: 2px
  • Telefon: 0px
• Kolor prawego obramowania: #ff7864

Kolumna 2 Obramowanie

W drugiej kolumnie używamy tego samego obramowania, z kilkoma różnymi wartościami responsywnymi.

• Szerokość prawego obramowania:
  • Pulpit: 2px
  • Telefon i tablet: 0px
• Kolor prawego obramowania: #ff7864

Kolumna 3 Obramowanie

I wreszcie, dodamy prawą ramkę również do trzeciej kolumny.

• Szerokość prawego obramowania:
  • Komputer stacjonarny i tablet: 2px
  • Telefon: 0px
• Kolor prawego obramowania: #ff7864

Dodaj moduł paska bocznego do kolumny 1

Czas dodać nasze widżety menu kategorii postów! Aby to zrobić, użyjemy wbudowanego modułu paska bocznego Divi. Dodaj jeden do pierwszej kolumny wiersza.

Wybierz obszar stopki #1

Wybierz pierwszy obszar stopki. Jest to powiązane z naszym pierwszym menu kategorii postów, które stworzyliśmy.

• Obszar widżetów: obszar stopki nr 1

Układ

Przejdź do zakładki projektu modułu i wyłącz separator granic.

• Pokaż separator granicy: Nie

Ustawienia tekstu podstawowego

Zmodyfikuj również ustawienia tekstu podstawowego.

• Czcionka ciała: Montserrat
• Waga czcionki ciała: średnia
• Kolor tekstu ciała: #ffffff
• Rozmiar tekstu ciała: 13px

Rozstaw

I uzupełnij ustawienia modułu, dodając górną i dolną wyściółkę do ustawień odstępów.

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

Klonuj moduł paska bocznego dwa razy i umieść duplikaty w kolumnie 2 i 3

Po ukończeniu pierwszego modułu paska bocznego możesz go sklonować dwukrotnie i umieścić duplikaty w kolumnie 2 i 3.

Zmień obszary stopki

Zmodyfikuj obszar widżetów dla każdego duplikatu, aby wyświetlić różne menu kategorii postów, które utworzyłeś.

• Obszar widżetów: obszar stopki #2

• Obszar widżetów: obszar stopki #3

Dodaj moduł paska bocznego do kolumny 4

Teraz w ostatniej kolumnie dodajemy nowy moduł paska bocznego.

Wybierz obszar stopki #4

W tym module wybieramy czwarty utworzony przez nas obszar stopki zawierający nasze najnowsze posty.

• Obszar widżetów: obszar stopki #4

Ustawienia tekstu tytułu

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

• Czcionka tytułu: Cormorant Garamond
• Kolor tekstu tytułu: #ffffff
• Rozmiar tekstu tytułu: 30px

Ustawienia tekstu podstawowego

Wprowadź też pewne zmiany w ustawieniach tekstu podstawowego.

• Czcionka ciała: Montserrat
• Waga czcionki ciała: średnia
• Kolor tekstu: #dddddd
• Rozmiar tekstu ciała: 13px

Rozstaw

I uzupełnij ustawienia modułu i ten samouczek, dodając niestandardowe górne i dolne dopełnienie do ustawień odstępów modułu. Otóż ​​to! Upewnij się, że zapisałeś wszystkie zmiany Divi Theme Builder przed wyświetleniem wyniku na swojej stronie.

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

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 samouczku pokazaliśmy, jak połączyć Kreator motywów Divi z widżetami stopki WordPress i modułem paska bocznego Divi. Mówiąc dokładniej, pokazaliśmy, jak dodać widżety menu kategorii postów do globalnej stopki, aby ułatwić nawigację odwiedzających. Takie podejście pomoże Ci stylizować elementy stopki za pomocą wbudowanych opcji Divi, zachowując jednocześnie menu stopki i widżety w zapleczu WordPress. Udało Ci się również pobrać plik JSON za darmo! Jeśli masz jakieś pytania lub sugestie, 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.