Jak wizualnie zaprezentować kategorie postów na blogu w nagłówku Divi?

Podczas tworzenia globalnego nagłówka istnieje duże prawdopodobieństwo, że dołączysz element menu bloga. Jeśli nie masz wielu kategorii postów na blogu w swojej witrynie, wystarczy wybrać jeden element menu bloga. Jeśli jednak masz zestaw różnych kategorii i chcesz wyróżnić każdą z nich, możesz wypróbować inne podejście, na przykład wizualną prezentację każdej kategorii bloga w menu rozwijanym.

W tym samouczku pokażemy Ci dokładnie, jak to zrobić za pomocą Kreatora motywów Divi. Zbudujemy menu rozwijane za pomocą wbudowanych elementów i opcji Divi i połączymy je z pewnym kodem, który pozwoli nam umieścić menu rozwijane wewnątrz elementu menu bloga. 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 Global Header ZA DARMO

Aby położyć swoje ręce na darmowym globalnym nagłówku, 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!

Jak przesłać plik JSON

Rozpakuj spakowany folder, który udało Ci się pobrać powyżej. Następnie przejdź do swojej witryny WordPress> Divi> Biblioteka Divi i prześlij plik JSON.

Po zapisaniu układu w bibliotece Divi możesz przejść do Kreatora motywów Divi i zaimportować zapisany układ, klikając „Dodaj globalny nagłówek” lub „Dodaj niestandardowy nagłówek” i wybierając „Buduj globalny/niestandardowy nagłówek”. Przejdź do zakładki „Twoje zapisane układy” w Bibliotece Divi, wybierz układ przesłany w poprzednim kroku i zapisz wszystkie zmiany w Kreatorze motywów Divi.

Aby mieć działające menu od samego początku, będziesz musiał przejść przez pierwszą część tego samouczka poniżej; dodawanie klas CSS do pozycji menu na indywidualnym poziomie. Będziesz także musiał włączyć jedną z klas CSS wewnątrz modułu kodu, jak pokazano w części 5 tego samouczka.

1. Dodaj klasę CSS do pozycji menu Blog

Przejdź do menu w wyglądzie

W pierwszej części tego samouczka dodamy dwie niestandardowe klasy CSS do pozycji menu strony bloga w menu WordPress. Aby to zrobić, przejdź do menu na pulpicie WordPress.

Włącz opcję klasy CSS

W górnej części strony upewnij się, że masz włączoną opcję klas CSS w opcji ekranu.

Dodaj klasy CSS do pozycji menu bloga

Następnie znajdź element menu swojego bloga i dodaj do niego dwie klasy CSS. Upewnij się, że zostawiłeś spację między klasami CSS.

• Klasy CSS: pierwszy poziom pierwszy poziom-1

2. Utwórz niestandardowy nagłówek za pomocą kreatora motywów Divi

Przejdź do kreatora motywów Divi

Po ustanowieniu klasy CSS elementu menu nadszedł czas, aby przejść do Divi. Przejdź do Divi Theme Builder i wybierz „Dodaj globalny/niestandardowy nagłówek”.

Zacznij budować globalny nagłówek

Następnie wybierz „Buduj globalny nagłówek”, aby zostać przekierowanym do edytora szablonów.

Ustawienia sekcji

Kolor tła

W edytorze szablonów zauważysz sekcję. Otwórz tę sekcję i zastosuj biały kolor tła.

• Kolor tła: #FFFFFF

Rozstaw

Przejdź do zakładki projektu 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:

Rozmiary

Nie dodając jeszcze żadnych modułów, otwórz ustawienia wiersza i odpowiednio zmodyfikuj ustawienia rozmiaru:

• Użyj niestandardowej szerokości rynny: Tak
• Szerokość rynny: 1
• Szerokość: 95%
• Maksymalna szerokość: 100%

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

Dodaj moduł menu do wiersza

Wybierz menu

Następnie dodaj moduł menu i wybierz menu, które zmodyfikowałeś w pierwszej części tego samouczka.

Prześlij logo

Następnie prześlij logo.

Ustawienia tekstu menu

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

• Czcionka menu: Roboto Mono
• Styl czcionki menu: wielkie litery
• Kolor tekstu menu: #000000
• Rozmiar tekstu menu: 18px
• Odstępy między literami menu: -1px

Rozwijane ustawienia menu

Zmień też kolor linii menu rozwijanego.

• Kolor linii menu rozwijanego: #FFFFFF

Ustawienia ikon

Następnie zmień kolor ikony menu hamburgera w ustawieniach ikon.

• Kolor ikony menu hamburgerów: #000000

Klasa CSS

I uzupełnij ustawienia modułu, dodając klasę CSS.

• Klasa CSS: menu kategorii

3. Utwórz projekt rozwijanego bloga

Dodaj wiersz nr 2

Struktura kolumny

Po umieszczeniu wiersza zawierającego moduł menu nadszedł czas, aby utworzyć menu rozwijane zawierające wizualne kategorie blogów. Aby to zrobić, dodaj nowy wiersz z dwiema kolumnami o jednakowej wielkości. Cały wiersz będzie naszym rozwijanym menu dla pozycji menu bloga.

Kolor tła

Otwórz ustawienia wiersza i użyj białego koloru tła.

• Kolor tła: #FFFFFF

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
• Szerokość: 80vw (komputer stacjonarny), 100% (tablet i telefon)
• Maksymalna szerokość: 50vw (komputer stacjonarny), 100% (tablet i telefon)

Rozstaw

Następnie zmodyfikuj wartości dopełnienia.

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

Cień Pudełka

Używamy również subtelnego cienia pudełkowego.

• Siła rozmycia cieni w pudełku: 30px
• Kolor cienia: rgba(0,0,0,0.13) (komputer), rgba(0,0,0,0) (tablet i telefon)

Klasa CSS

Następnie dodamy do naszego wiersza dwie klasy CSS. Te klasy CSS (w połączeniu z pewnym kodem później) pomogą nam umieścić cały kontener wierszy w menu bloga jako menu rozwijane.

• Klasa CSS: rozwijane menu rozwijane menu-1

Pozycja

Przejdź do zakładki Zaawansowane i zmień również pozycję wiersza.

• Pozycja: bezwzględna (komputer), względna (tablet i telefon)
• Lokalizacja: u góry po prawej
• Przesunięcie pionowe: 100px (komputer), 0px (tablet i telefon)
• Indeks Z: 11

Obie kolumny główny element

Na koniec uzupełnij ustawienia wiersza, dodając jeden wiersz kodu CSS do głównego elementu każdej kolumny. Pomoże nam to zachować strukturę kolumn na mniejszych ekranach.

width: 50% !important;

Dodaj moduł tekstowy do kolumny 1

Dodaj nazwę kategorii

Czas na wizualne pokazanie naszych kategorii blogów! Dodaj pierwszy moduł tekstowy do kolumny 1 i dodaj tytuł kategorii do pola treści.

Dodaj link do kategorii

Następnie dodaj link do swojej kategorii.

Tło gradientowe

Następnie zastosuj następujące tło gradientowe:

• Kolor 1: rgba(0,0,0,0.08)
• Kolor 2: #0a0a0a
• Pozycja startowa: 60%
• Pozycja końcowa: 60%
• Umieść gradient nad obrazem tła: Tak

Zdjęcie w tle

Prześlij wybrany obraz tła. Jeśli chcesz uzyskać dokładnie taki sam wynik, jak w tym samouczku, prześlij jedną z ilustracji, które możesz znaleźć w folderze, który udało Ci się pobrać na początku tego postu.

• Rozmiar obrazu tła: rzeczywisty rozmiar
• Powtórzenie obrazu tła: Powtórz X (w poziomie)

Ustawienia tekstu

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

• Czcionka tekstu: Roboto Mono
• Grubość czcionki tekstu: pogrubiona
• Kolor tekstu: #ffffff
• Rozmiar tekstu: 1,9vw (komputer), 3vw (tablet), 3,5vw (telefon)
• Odstępy między literami tekstu: -0,1vw
• Wysokość linii tekstu: 1em

Rozmiary

Następnie zmień ustawienia rozmiaru.

• Szerokość: 99%
• Wyrównanie modułu: do lewej

Rozstaw

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

• Margines dolny: 10px
• Prawy margines: 1% (tablet i telefon)
• Górna wyściółka: 60% (komputer stacjonarny), 40% (tablet i telefon)
• Dolna wyściółka: 4%
• Lewa wyściółka: 2%

Główny element CSS

I uzupełnij ustawienia modułu, dodając jedną linię kodu CSS do głównego elementu modułu.

cursor: pointer;

Klonuj moduł tekstowy i umieść duplikat w kolumnie 2

Po ukończeniu pierwszego modułu tekstowego sklonuj moduł i umieść duplikat w kolumnie 2.

Modyfikuj moduł tekstowy w kolumnie 2

Zmień nazwę kategorii i łącze

Zmodyfikuj tytuł kategorii i link w module duplikatów.

Zmień obraz tła

Zmień też obraz tła. Możesz znaleźć ilustrację w folderze pobierania.

• Powtarzanie obrazu tła: bez powtórzeń

Zmień rozmiar

Zmień wyrównanie modułu w ustawieniach rozmiaru.

• Wyrównanie modułu: w prawo

Sklonuj oba moduły raz

Po ukończeniu obu modułów (po jednym w każdej kolumnie) możesz je sklonować raz.

Zmień nazwy kategorii i linki

Zmień nazwy kategorii i linki w zduplikowanych modułach.

Zmień obrazy tła

Wraz z obrazami tła. Nowe ilustracje znajdziesz w folderze, który udało Ci się pobrać na początku tego postu.

• Rozmiar obrazu tła: Dopasuj
• Powtarzanie obrazu tła: bez powtórzeń

• Rozmiar obrazu tła: Dopasuj
• Pozycja obrazu tła: dolny prawy

4. Dodaj kod CSS i JQuery

Dodaj moduł kodu poniżej modułu menu w wierszu nr 1

Po wypełnieniu wiersza zawierającego nazwy kategorii menu rozwijanego dodaj moduł kodu do pierwszego wiersza w swojej sekcji, tuż pod modułem menu.

Dodaj kod CSS

Dodaj następujące wiersze kodu CSS do modułu Code:

<style>
/* Enable class below once you're done editing the menu */  
  
/*  
.dropdown-menu {
visibility: hidden;
}*/
  
.category-menu .et_pb_menu__menu .dropdown-menu {
visibility: hidden;
opacity: 0;

-webkit-transition: 300ms all cubic-bezier(.4,0,.2,1);
-moz-transition: 300ms all cubic-bezier(.4,0,.2,1);   
-o-transition: 300ms all cubic-bezier(.4,0,.2,1); 
-ms-transition: 300ms all cubic-bezier(.4,0,.2,1);   
transition: 300ms all cubic-bezier(.4,0,.2,1);  
}
  
.category-menu .et_pb_menu__menu li.first-level:hover .dropdown-menu {
visibility: visible;
opacity: 1;
}
  
.category-menu  .et_pb_menu__menu li {
margin-top: 0px !important;
}  

.category-menu .et_pb_menu__menu li>a {
margin-top: 0px !important;
padding: 30px 20px !important;    
}

.category-menu .et_pb_menu__menu li.first-level>a:hover {
background-color: #00C995; 
}  
  
.category-menu .et_mobile_menu .dropdown-menu {
background-color: white; 
padding-top: 25px;
padding-bottom: 5px;
}   

.category-menu .et_mobile_menu li > a {
background-color: transparent;
position: relative;
}
  
.category-menu .et_mobile_menu .first-level > a:after {
font-family: 'ETmodules';
content: '\37';
color: black;
font-weight: normal;
position: absolute;
font-size: 16px;
top: 13px;
right: 10px;
}
  
.category-menu .et_mobile_menu .first-level > .icon-switch:after{
content: '\36';
color: #c9c9c9;
}
  
.category-menu .et_mobile_menu .dropdown-menu {
display: none;
visibility: visible;
}
  
.category-menu .et_mobile_menu .dropdown-menu.reveal-items {
display: block;
}
  
</style>

Dodaj kod JQuery

Wraz z niektórymi narzędziami JQuery, które pomogą umieścić wiersz zawierający kategorie w elemencie menu bloga. Upewnij się, że umieszczasz kod JQuery między tagami skryptu, jak widać na poniższym zrzucie ekranu.

jQuery(function($){
$(document).ready(function(){
  

$('.dropdown-menu').each(function(i){
  
i = i + 1;
  
var $dropdown = $('.dropdown-menu-' + i);
var $mainMenuItem = $('.first-level-' + i + '>a');
$dropdown.insertAfter($mainMenuItem);
  
});  
  
var $firstLevel = $('.et_mobile_menu .first-level > a');
var $allDropdowns = $('.et_mobile_menu .dropdown-menu');

$firstLevel.off('click').click(function() {

$(this).attr('href', '#');  
var $thisDropdown = $(this).siblings(); 

$thisDropdown.slideToggle();
$(this).toggleClass('icon-switch');

var dropdownSiblings = $allDropdowns.not($thisDropdown);   
dropdownSiblings.slideUp();

var $thisFirstLevel = $(this);
var $firstLevelSiblings = $firstLevel.not($thisFirstLevel);
$firstLevelSiblings.removeClass('icon-switch');  

});      
  
});
});

5. Włącz klasę CSS po zakończeniu dostosowywania elementów rozwijanych bloga

Jak tylko skończysz dostosowywać wszystkie elementy rozwijane, będziesz miał jedną rzecz do zrobienia: ukrycie całego wiersza zawierającego elementy menu rozwijanego. To, w połączeniu z funkcją ładowania w naszym kodzie, zapobiegnie wyświetlaniu menu rozwijanego podczas ładowania strony. Po włączeniu tej klasy CSS nie zobaczysz już drugiego wiersza w programie Visual Builder, ale będziesz mieć do niego dostęp w trybie szkieletowym i/lub tymczasowo wyłączyć klasę CSS podczas wprowadzania zmian w menu rozwijanym. Aby włączyć klasę, usuń nawiasy „/* */” na początku i na końcu klasy CSS.

6. Dodawanie większej liczby rozwijanych kategorii postów

Klonuj wiersz kategorii bloga

Jeśli chcesz dodać więcej menu rozwijanych kategorii, możesz sklonować cały utworzony wiersz listy rozwijanej.

Uzyskaj dostęp do powielonego wiersza w panelu Warstwy

Ponieważ używamy pozycjonowania bezwzględnego na pulpicie, wiersze zostaną umieszczone jeden na drugim. Aby uzyskać dostęp do poszczególnych wierszy, otwórz panel warstw w Divi Builder i otwórz ustawienia duplikatu wiersza.

Zmień klasę CSS zduplikowanych wierszy

Zmień drugą klasę CSS w zduplikowanym wierszu. Upewnij się, że numer, którego używasz, jest kolejnym.

• Klasa CSS: rozwijane menu rozwijane-menu-2

Dodaj klasy CSS do elementów menu w wyglądzie

Następnie wróć do menu WordPress na pulpicie nawigacyjnym i dodaj następujące klasy CSS do innego elementu menu i gotowe:

• Klasy CSS: pierwszy poziom pierwszy poziom-2

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 poście pokazaliśmy, jak wykazać się kreatywnością dzięki nagłówkowi Divi i pozycji menu bloga. Mówiąc dokładniej, pokazaliśmy, jak wizualnie uwzględniać kategorie blogów jako elementy menu rozwijanego, które świetnie wyglądają na wszystkich rozmiarach ekranu. Takie podejście pomoże Ci wyróżnić każdą inną kategorię blogów, zachowując jednocześnie minimalny wygląd i styl na pierwszy rzut oka. Udało Ci się również pobrać plik JSON za darmo! Jeśli masz jakieś pytania, 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.