Czy chcesz wiedzieć, jak dostosować ikony koszyka i wyszukiwania w module Divi Fullwidth Menu?
Menu Twojego Witryna internetowa jest jedną z najważniejszych części twojego Witryna internetowa ze względu na bezpośredni wpływ, jaki może to mieć na sposób, w jaki użytkownicy poruszają się po Twojej witrynie treść.
Dobrze zaprojektowany pasek menu może mieć duże znaczenie, upraszczając nawigację, wyróżniając kluczowe strony i poprawiając ogólne wrażenia użytkownika.
Moduł Divi „Fullwidth Menu” oferuje dużą elastyczność, umożliwiając dostosowanie koszyka na zakupy i ikon wyszukiwania według własnego uznania.
W tym samouczku pokażemy Ci trzy różne projekty modułu „Menu o pełnej szerokości” z różnym stylem koszyka na zakupy i ikon wyszukiwania.
Zacznijmy!
badanie
Oto podgląd tego, co będziemy projektować.
Pierwszy projekt
W pierwszym projekcie umieszczamy jedną z ikon po lewej, a drugą po prawej, wybierając wyśrodkowaną strukturę menu. Po najechaniu myszą zmienimy również kolor.
Drugi projekt
W przypadku drugiego projektu umieszczamy dwie ikony po prawej stronie i zmieniamy kolor po najechaniu myszą.
Trzeci projekt
W trzecim projekcie używamy dodatkowego CSS, aby dostosować ikony.
Czytaj także: Divi: Jak dostosować moduł „Odliczanie czasu” za pomocą GIF
Dostosowanie koszyka na zakupy i ikon wyszukiwania modułu Divi „Fullwidth Menu”
Utwórz globalny nagłówek
Dla każdego z trzech projektów menu zaczniemy od otwarcia kreatora motywy z Divi.
Aby to zrobić, z pulpitu WordPress przejdź do Divi > Kreator motywów
Następnie kliknij przycisk Dodaj globalny nagłówek
Następnie wybierz Zbuduj globalny nagłówek
Wstaw nową sekcję o pełnej szerokości.
Następnie usuń poprzednią sekcję.
Włóż moduł Menu o pełnej szerokości.
Prześlij swoje logo z menu.
Jesteśmy teraz gotowi do kontynuowania.
Pierwszy projekt
Nasz pierwszy projekt będzie zawierał wbudowane efekty najechania Divi, aby zmienić kolor tekstu i ikon po najechaniu myszą. Zaczynajmy.
Zobacz też: Divi: Jak dodać ikonę hamburgera do modułu Menu
Zacznij od otwarcia ustawień modułu i dodania tła.
- Tło: #fbf9f4
Przejdź do zakładki Wnętrze i wybierz układ logo.
- Styl: Logo wyśrodkowane w linii
Zmieńmy teraz niektóre ustawienia tekstu menu.
- Aktywny kolor łącza: #09148c
- Czcionka menu: Ruby
- Grubość czcionki menu: pogrubiona
- Styl czcionki: TT i U (Wielkie i podkreślone)
Następnie ustaw kolor tekstu menu, rozmiar tekstu i odstępy między literami.
- Kolor tekstu menu: #000000
- Rozmiar tekstu menu: 21px
- Odstępy między literami: 1px
Chcemy dodać efekty najechania do tego menu, więc zmień kolor tekstu menu po najechaniu myszą. Ustaw inny kolor tekstu menu po najechaniu myszą.
- Kolor tekstu menu (najechanie kursorem): #b70018
Następnie przejdź do ustawień Menu rozwijane pod zakładką Wnętrze.
- Kolor tła menu rozwijanego: #fbf9f4
- Kolor linii menu rozwijanego: #b70018
- Kolor tekstu menu: #000000
Chcemy, aby kolor tekstu w menu rozwijanym również zmieniał się po najechaniu myszą, więc wybierz opcje najechania kursorem dla tego ustawienia i ustaw inny kolor tekstu.
- Kolor tekstu menu rozwijanego (najechanie kursorem): #b70018
- Kolor aktywnego łącza w menu rozwijanym: #b70018
- Kolor tła menu mobilnego: #fbf9f4
- Kolor tekstu menu mobilnego: #000000
Ponownie chcemy, aby kolor tekstu w menu mobilnym zmieniał się po najechaniu myszą. Wybierz opcje aktywowania tego ustawienia, a następnie ustaw inny kolor tekstu po najechaniu myszą.
- Kolor tekstu w menu mobilnym (najechanie kursorem): #b70018
Dostosowywanie koszyka na zakupy i ikony wyszukiwania
Teraz dodajmy i dostosujmy ikony koszyka na zakupy i wyszukiwania. Pod zakładką Treść, przejdź do Elementy i włącz ikonę koszyka na zakupy i ikonę wyszukiwania.
- Pokaż ikonę koszyka na zakupy: TAK
- Pokaż ikonę wyszukiwania: TAK
Wróć do zakładki Wnętrze i otwórz ustawienia ikon. Każda z naszych ikon będzie czarno-czerwona po najechaniu kursorem. Najpierw ustaw kolor czarny.
- Kolor ikony koszyka na zakupy: #000000
- Kolor ikony wyszukiwania: #000000
- Kolor ikony menu hamburgerów: #000000
Następnie wybierz ikonę najechania i dodaj kolor po najechaniu.
- Kolor ikony koszyka na zakupy (najechanie kursorem): #b70018
- Kolor ikony wyszukiwania (najechanie kursorem): #b70018
- Kolor ikony menu Hamburger (najechanie kursorem): #b70018
Ustaw rozmiar ikony.
- Ikona koszyka na zakupy Rozmiar czcionki: 25 pikseli
- Ikona wyszukiwania Rozmiar czcionki: 25 pikseli
Przejdź do sekcji Rozstaw, a następnie ustaw górną i dolną wyściółkę.
- Dopełnienie (góra i dół): 5px
Na koniec dodamy obramowanie na górze i na dole modułu Menu. Otwórz ustawienia granic.
- Szerokość górnej krawędzi: 3px
- Szerokość dolnego obramowania: 3px
Ostateczny projekt
A oto nasz ostateczny projekt.
Drugi projekt
Nasz drugi projekt użyje wbudowanych efektów najechania Divi, aby zmienić rozmiar ikon menu i tekstu po najechaniu myszą. Zaczynajmy.
Najpierw dodamy gradient tła do modułu Menu. Gradient ma trzy przystanki, ustawienia są następujące:
- Gradient zatrzymuje się:
- 0%: rgba (255,255,255,0)
- 23%: rgba (252,199,76,0.65)
- 82%: rgba (232,119,255,0.32)
Ustaw rodzaj i pozycję gradientu.
- Typ gradientu: Stożkowy
- Pozycja gradientu: dół
Następnie przejdź do zakładki Wnętrze i ustaw układ (układ).
- Styl: wyśrodkowany
Przejdź do sekcji Tekst menu aby dostosować projekt tekstu menu.
- Kolor aktywnego łącza: #FFFFFF
- Menu czcionek: Syne
- Waga czcionki: pogrubiona
- Styl czcionki menu: TT (wielkie litery)
- Menu koloru tekstu: #FFFFFF
Teraz ustaw rozmiar tekstu menu i odstępy między literami.
- Rozmiar tekstu menu: 20px
- Odstępy między literami menu: 2px
Ponieważ chcemy, aby rozmiar tekstu w naszym menu zwiększał się po najechaniu kursorem, wybierz opcję najechania.
- Rozmiar tekstu menu: 22px
Następnie zmień ustawienia projektu z menu rozwijanego.
- Kolor tła menu rozwijanego: #fcda90
- Kolor linii menu rozwijanego: #FFFFFF
- Menu koloru tekstu: #FFFFFF
- Rozwijane menu Kolor aktywnego łącza: #FFFFFF
Ustaw tło i kolor tekstu mobilnego menu.
- Kolor tła menu mobilnego: #fcda90
- Kolor tekstu w menu mobilnym: #FFFFFF
Dostosowywanie koszyka na zakupy i ikony wyszukiwania
Teraz zacznijmy dostosowywać nasze ikony menu. Iść do Elementy pod zakładką Treść i włącz ikonę koszyka na zakupy i ikonę wyszukiwania.
- Siać ikona koszyka na zakupy: TAK
- Pokaż ikonę wyszukiwania: TAK
Wróć do zakładki Wnętrze i otwórz ustawienia ikon.
- Kolor ikony koszyka na zakupy: #ffffff
- Kolor ikony wyszukiwania: #ffffff
- Kolor ikony menu Hamburger: #ffffff
Po najechaniu kursorem ikony będą miały ciemnopomarańczowy kolor. Wybierz opcję okładki i ustaw kolor.
- Kolor ikony koszyka (najechanie kursorem): #fcac00
- Kolor ikony wyszukiwania (najechanie kursorem): #fcac00
- Kolor ikony menu Hamburger (najechanie kursorem): #fcac00
Następnie ustaw rozmiar czcionki dla ikon koszyka i wyszukiwania.
- Shoppin Ikona koszyka Rozmiar czcionki: 25 px
- Ikona wyszukiwania Rozmiar czcionki: 25 pikseli
Aby zwiększyć rozmiar ikony po najechaniu kursorem, wybierz opcję najechania.
- Rozmiar czcionki ikony koszyka (najechanie kursorem): 30 pikseli
- Rozmiar czcionki ikony wyszukiwania (najechanie): 30 pikseli
Na koniec przejdź do sekcji Rozstaw i ustaw górną i dolną wyściółkę.
- Dopełnienie (góra i dół): 5px
Ostateczny projekt
Oto ostateczny projekt naszego drugiego układu menu.
Trzeci projekt
W naszym ostatecznym projekcie dodamy kółko tła za ikonami koszyka za pomocą niestandardowego kodu CSS.
Czytaj także: Divi: Jak stworzyć lepkie i rozwijalne menu podręczne
Zacznijmy.
Najpierw dodaj kolor tła do modułu.
- Tło: #efb6ac
Następnie przejdź do zakładki Wnętrze i otwórz opcję Tekst menu.
- Aktywny kolor łącza: #e84322
- Czcionka menu: Cinzel
- Menu grubości czcionki: Ultra Bold
Chcemy, aby kolor tekstu menu zmieniał się po najechaniu myszą. Najpierw ustaw kolor tekstu menu.
- Menu koloru tekstu (komputer): #e7644a
Kliknij ikonę po najechaniu kursorem i ustaw kolor tekstu po najechaniu kursorem.
- Kolor tekstu menu (najechanie kursorem): #e84322
Następnie ustaw rozmiar tekstu menu i odstępy między literami.
- Rozmiar tekstu menu: 21px
- Odstępy między literami menu: 1px
Chcemy również, aby odstępy między literami zwiększały się po najechaniu kursorem, więc wybierz opcję najechania dla ustawień.
- Odstępy między literami menu: 2px
Ustaw wyrównanie tekstu do lewej.
- Wyrównanie tekstu: do lewej
Następnie zmień następujące ustawienia z menu rozwijanego.
- Kolor tła menu rozwijanego: #efb6ac
- Kolor linii menu rozwijanego: #e7644a
Czytaj także: Divi: Jak stworzyć sekcję Referencje w formie siatki
- Kolor tekstu menu rozwijanego
- Pulpit: #e7644a
- Najedź: #e84322
- Kolor aktywnego łącza w menu rozwijanym: #e84322
Ustaw tło i kolor tekstu mobilnego menu.
- Kolor tła menu mobilnego: #efb6ac
- Kolor tekstu w menu mobilnym:
- Pulpit: #e7644a
- Najedź: #e84322
Dostosowywanie koszyka na zakupy i ikony wyszukiwania
Najpierw przejdź do Elementy pod zakładką Treść i włącz ikonę koszyka na zakupy i ikonę wyszukiwania.
- Pokaż ikonę koszyka na zakupy: TAK
- Pokaż ikonę zakupów: TAK
Następnie wróć do zakładki Wnętrze i otwórz ustawienia ikon. Ustaw kolor ikony.
- Kolor ikony koszyka na zakupy: #e7644a
- Kolor ikony wyszukiwania: #e7644a
- Kolor ikony menu hamburgerów: #e7644a
Kolor tych ikon zmieni się po najechaniu kursorem. Włącz opcje najechania i ustaw kolor.
- Kolor ikony koszyka na zakupy (najechanie kursorem): #e84322
- Kolor ikony wyszukiwania (najechanie kursorem): #e84322
- Kolor ikony menu Hamburger (najechanie kursorem): #e84322
Chcemy również, aby po najechaniu kursorem zwiększał się rozmiar ikon. Najpierw ustaw rozmiar czcionki ikony.
- Ikona koszyka na zakupy Rozmiar czcionki: 22 pikseli
- Ikona wyszukiwania Rozmiar czcionki: 22 pikseli
Następnie ustaw rozmiar czcionki ikony po najechaniu myszą.
- Rozmiar czcionki ikony koszyka (najechanie kursorem): 26 pikseli
- Rozmiar czcionki ikony wyszukiwania (najechanie): 26 pikseli
Następnie przejdź do sekcji Rozstaw i dodaj górną i dolną wyściółkę.
- Dopełnienie (góra i dół): 5px
Na koniec możemy dodać niestandardowy kod CSS do globalnego nagłówka, aby dodać kółka za koszykiem i ikoną wyszukiwania.
Możesz dostosować ten CSS tak, jak chcesz, aby pasował do Twojego projektu modułu Menu.
Otwórz ustawienia szablonu nagłówka, a następnie przejdź do zakładki Zaawansowane i wstaw następujący niestandardowy kod CSS.
.et_pb_menu__icon.et_pb_menu__cart-button,
.et_pb_menu__icon.et_pb_menu__search-button {
padding: 2% 2% 2% 2%;
background-color:#F7D5C2;
border-radius: 50%;
}
Ostateczny projekt
To kończy projekt naszego trzeciego i ostatniego układu menu.
Ostateczny wynik
Przyjrzyjmy się teraz ostatecznemu projektowi trzech różnych menu.
Pierwszy projekt
Pobierz DIVI teraz !!!
Drugi projekt
Trzeci projekt
Pobierz DIVI teraz !!!
Wnioski
Moduł menu Divi oraz ikony koszyka i wyszukiwania można łatwo dostosować, aby stworzyć unikalne układy i projekty dla Twojej witryny Witryna internetowa.
Możesz łatwo poprawić wygląd swoich modułów Menu, korzystając z wbudowanych ustawień Divi, takich jak efekty najechania i niestandardowy CSS.
Mamy nadzieję, że ten samouczek zainspiruje Cię do kolejnych projektów Divi. Jeśli masz jakiekolwiek wątpliwości lub sugestie, znajdź nas w sekcja komentarzy przedyskutować to.
Możesz również skonsultować nasze zasoby, jeśli potrzebujesz więcej elementów do realizacji swoich projektów tworzenia stron internetowych.
Nie wahaj się również skonsultować z naszym przewodnikiem na temat Tworzenie bloga WordPress lub ten na Divi: najlepszy motyw WordPress wszechczasów.
Ale w międzyczasie udostępnij ten artykuł w różnych sieciach społecznościowych.
...
