Chtěli byste vědět, jak přizpůsobit košík a ikony vyhledávání modulu Divi Fullwidth Menu?
Menu vašeho Webové stránky je jednou z nejdůležitějších částí vašeho Webové stránky z důvodu přímého dopadu, který může mít na to, jak uživatelé procházejí vaším webem obsah.
Dobře navržený panel nabídek může znamenat velký rozdíl tím, že zjednoduší navigaci, zvýrazní klíčové stránky a zlepší celkovou uživatelskou zkušenost.
Modul Divi "Fullwidth Menu" nabízí velkou flexibilitu tím, že vám umožňuje přizpůsobit si nákupní košík a ikony vyhledávání, jak uznáte za vhodné.
V tomto tutoriálu vám ukážeme tři různé návrhy modulu „Nabídka plné šířky“ s různým stylem ikon nákupního košíku a vyhledávání.
Začněme!
přehled
Zde je náhled toho, co budeme navrhovat.
První design
U prvního návrhu umístíme jednu z ikon vlevo a druhou vpravo výběrem centrované struktury nabídky. Změníme také barvu při najetí myší.
Druhý design
U druhého návrhu umístíme dvě ikony na pravou stranu a při najetí myší změníme barvu.
Třetí provedení
U třetího návrhu používáme další CSS pro přizpůsobení ikon.
Čtěte také: Divi: Jak přizpůsobit modul "Časovač odpočítávání" pomocí GIF
Přizpůsobení nákupního košíku a ikon vyhledávání v modulu Divi "Fullwidth Menu".
Vytvořte globální záhlaví
U každého ze tří návrhů menu začneme otevřením tvůrce témata z Divi.
Chcete-li to provést, přejděte na hlavní panel WordPress na Divi > Tvůrce motivů
poté klikněte na tlačítko Přidat globální záhlaví
Pak si vyberte Sestavit globální záhlaví
Vložte novou sekci v plné šířce.
Poté smažte předchozí sekci.
Vložte modul Nabídka plné šířky.
Nahrajte své logo z nabídky.
Nyní jsme připraveni pokračovat.
První design
Náš první návrh bude obsahovat vestavěné efekty hoveru Divi pro změnu barvy textu a ikon při vznášení. Začněme.
Začněte otevřením nastavení modulu a přidáním pozadí.
- Pozadí: #fbf9f4
Přejděte na kartu Design a vyberte rozvržení loga.
- Styl: Inline Centered Logo
Nyní změňme některá nastavení textu nabídky.
- Barva aktivního odkazu: #09148c
- Písmo nabídky: Ruby
- Tloušťka písma nabídky: Tučné
- Styl písma: TT a U (velká a podtržená)
Dále nastavte barvu textu nabídky, velikost textu a mezery mezi písmeny.
- Barva textu nabídky: #000000
- Velikost textu nabídky: 21px
- Mezera mezi písmeny: 1px
Chceme do této nabídky přidat efekty přechodu, takže změňte barvu textu nabídky při přechodu. Při umístění kurzoru nastavte jinou barvu textu nabídky.
- Barva textu nabídky (umístění kurzoru): #b70018
Poté přejděte do nastavení Rozbalovací nabídka pod záložkou Design.
- Barva pozadí rozbalovací nabídky: #fbf9f4
- Barva řádku rozbalovací nabídky: #b70018
- Barva textu nabídky: #000000
Chceme, aby se barva textu rozbalovací nabídky také změnila při umístění kurzoru, takže pro toto nastavení vyberte možnosti umístění kurzoru a nastavte jinou barvu textu.
- Barva textu rozevírací nabídky (přejetí myší): #b70018
- Rozbalovací nabídka Barva aktivního odkazu: #b70018
- Barva pozadí mobilní nabídky: #fbf9f4
- Barva textu mobilní nabídky: #000000
Opět chceme, aby se barva textu mobilní nabídky změnila při najetí myší. Vyberte možnosti umístění kurzoru pro toto nastavení a poté nastavte jinou barvu textu při umístění kurzoru.
- Barva textu nabídky pro mobil (přejetí myší): #b70018
Přizpůsobení nákupního košíku a ikony vyhledávání
Nyní pojďme přidat a upravit ikony nákupního košíku a vyhledávání. Pod záložkou Obsah, jdi na Prvky a povolte ikonu nákupního košíku a ikonu vyhledávání.
- Zobrazit ikonu nákupního košíku: ANO
- Zobrazit ikonu hledání: ANO
Vraťte se na kartu Design a otevřete nastavení ikon. Každá z našich ikon bude při umístění kurzoru černá a červená. Nejprve nastavte černou barvu.
- Barva ikony nákupního košíku: #000000
- Barva ikony vyhledávání: #000000
- Barva ikony nabídky Hamburger: #000000
Dále vyberte ikonu pro umístění kurzoru a přidejte barvu.
- Barva ikony nákupního košíku (umístění myši): #b70018
- Barva ikony vyhledávání (umístění kurzoru): #b70018
- Barva ikony nabídky hamburger (umístění kurzoru): #b70018
Nastavit velikost ikony.
- Velikost písma ikony nákupního košíku: 25 px
- Velikost písma ikony vyhledávání: 25 px
Přejděte do sekce Vzdálenosta poté nastavte horní a spodní vycpávku.
- Výplň (nahoře a dole): 5px
Nakonec přidáme ohraničení horní a dolní části modulu Menu. Otevřete nastavení ohraničení.
- Šířka horního okraje: 3px
- Šířka spodního okraje: 3px
Konečný návrh
A zde je náš konečný návrh.
Druhý design
Náš druhý návrh bude používat vestavěné efekty hoveru Divi ke změně velikosti ikon nabídky a textu při vznášení. Začněme.
Nejprve do modulu Menu přidáme gradient pozadí. Gradient má tři zastávky, nastavení jsou následující:
- Přechodové zastávky:
- 0 %: rgba (255,255,255,0 XNUMX XNUMX)
- 23 %: rgba (252,199,76,0.65 XNUMX XNUMX)
- 82 %: rgba (232,119,255,0.32 XNUMX XNUMX)
Nastavte typ přechodu a polohu přechodu.
- Typ gradientu: Kuželový
- Pozice gradientu: Spodní
Poté přejděte na kartu Design a nastavte rozvržení (Nákres).
- Styl: Střed
Přejděte do sekce Text nabídky k přizpůsobení designu textu nabídky.
- Barva aktivního odkazu: #FFFFFF
- Nabídka písem: Syne
- Tloušťka písma: Tučné
- Styl písma nabídky: TT (velká písmena)
- Nabídka barev textu: #FFFFFF
Nyní nastavte velikost textu nabídky a mezery mezi písmeny.
- Velikost textu nabídky: 20px
- Mezera mezi písmeny nabídky: 2px
Vzhledem k tomu, že chceme, aby se velikost textu naší nabídky při najetí myší zvětšila, vyberte možnost přechodu.
- Velikost textu nabídky: 22px
Dále změňte nastavení návrhu z rozevírací nabídky.
- Barva pozadí rozbalovací nabídky: #fcda90
- Barva řádku rozbalovací nabídky: #FFFFFF
- Nabídka barev textu: #FFFFFF
- Rozbalovací nabídka Barva aktivního odkazu: #FFFFFF
Nastavte pozadí mobilní nabídky a barvu textu.
- Barva pozadí mobilní nabídky: #fcda90
- Barva textu mobilní nabídky: #FFFFFF
Přizpůsobení nákupního košíku a ikony vyhledávání
Nyní začněme upravovat ikony nabídky. Jít do Prvky pod záložkou Obsah a povolte ikonu nákupního košíku a ikonu vyhledávání.
- Ikona nákupního košíku prasnice: ANO
- Zobrazit ikonu hledání: ANO
Vraťte se na kartu Design a otevřete nastavení ikon.
- Barva ikony nákupního košíku: #ffffff
- Barva ikony vyhledávání: #ffffff
- Barva ikony menu hamburger: #ffffff
Ikony budou mít při najetí myší tmavě oranžovou barvu. Vyberte možnost krytu a nastavte barvu.
- Barva ikony nákupního košíku (přejetí myší): #fcac00
- Barva ikony vyhledávání (přejetí myší): #fcac00
- Barva ikony nabídky hamburger (umístění kurzoru): #fcac00
Dále nastavte velikost písma pro nákupní košík a ikony vyhledávání.
- Velikost písma ikony nákupního košíku: 25 px
- Velikost písma ikony vyhledávání: 25 px
Chcete-li zvětšit velikost ikony při umístění kurzoru, vyberte možnost umístění kurzoru.
- Velikost písma ikony nákupního košíku (umístění kurzoru): 30 px
- Velikost písma ikony vyhledávání (přejetím myší): 30 px
Nakonec přejděte do sekce Vzdálenost a nastavte horní a spodní polstrování.
- Výplň (nahoře a dole): 5 pixelů
Konečný návrh
Zde je konečný návrh našeho druhého rozložení nabídky.
Třetí provedení
Pro náš konečný návrh přidáme za ikony košíku kruh na pozadí pomocí vlastního CSS.
Čtěte také: Divi: Jak vytvořit přilnavou a rozbalitelnou nabídku pro najetí myší
Začněme.
Nejprve přidejte do modulu barvu pozadí.
- Pozadí: #efb6ac
Poté přejděte na kartu Design a otevřete možnost Text nabídky.
- Barva aktivního odkazu: #e84322
- Písmo menu: Cinzel
- Nabídka tloušťky písma: Ultra tučné
Chceme, aby se při najetí myší změnila barva textu nabídky. Nejprve nastavte barvu textu nabídky.
- Nabídka Barva textu (Desktop): #e7644a
Klikněte na ikonu při najetí a nastavte barvu textu při umístění.
- Barva textu nabídky (umístění kurzoru): #e84322
Dále nastavte velikost textu nabídky a mezery mezi písmeny.
- Velikost textu nabídky: 21px
- Mezera mezi písmeny nabídky: 1px
Chceme také, aby se mezery mezi písmeny rozšířily při umístění kurzoru, takže pro nastavení vyberte možnost přechodu.
- Mezera mezi písmeny nabídky: 2px
Nastavte zarovnání textu doleva.
- Zarovnání textu: vlevo
Dále změňte následující nastavení z rozevírací nabídky.
- Barva pozadí rozbalovací nabídky: #efb6ac
- Barva řádku rozbalovací nabídky: #e7644a
Čtěte také: Divi: Jak vytvořit sekci Reference ve formě mřížky
- Barva textu rozevírací nabídky
- Desktop: #e7644a
- Umístěte kurzor: #e84322
- Rozbalovací nabídka Barva aktivního odkazu: #e84322
Nastavte pozadí mobilní nabídky a barvu textu.
- Barva pozadí mobilní nabídky: #efb6ac
- Barva textu mobilní nabídky:
- Desktop: #e7644a
- Umístěte kurzor: #e84322
Přizpůsobení nákupního košíku a ikony vyhledávání
Nejprve přejděte na Prvky pod záložkou Obsah a povolte ikonu nákupního košíku a ikonu vyhledávání.
- Zobrazit ikonu nákupního košíku: ANO
- Zobrazit ikonu Nákupu: ANO
Poté se vraťte na kartu Design a otevřete nastavení ikon. Nastavte barvu ikony.
- Barva ikony nákupního košíku: #e7644a
- Barva ikony vyhledávání: #e7644a
- Barva ikony menu hamburger: #e7644a
Barva těchto ikon se změní při najetí myší. Povolte možnosti umístění kurzoru a nastavte barvu.
- Barva ikony nákupního košíku (umístění kurzoru): #e84322
- Barva ikony vyhledávání (umístění kurzoru): #e84322
- Barva ikony nabídky Hamburger (umístění kurzoru): #e84322
Chceme také, aby se velikost ikony při najetí myší zvětšila. Nejprve nastavte velikost písma ikony.
- Velikost písma ikony nákupního košíku: 22 px
- Velikost písma ikony vyhledávání: 22 px
Dále nastavte velikost písma ikony při umístění kurzoru.
- Velikost písma ikony nákupního košíku (umístění kurzoru): 26 px
- Velikost písma ikony vyhledávání (přejetím myší): 26 px
Pak přejděte do sekce Vzdálenost a přidejte horní a spodní vycpávku.
- Výplň (nahoře a dole): 5 pixelů
Nakonec můžeme do globální hlavičky přidat vlastní CSS a přidat kruhy za nákupní košík a ikonu vyhledávání.
Tento CSS si můžete přizpůsobit, jak chcete, aby odpovídal vašemu návrhu modulu Menu.
Otevřete nastavení šablony záhlaví a přejděte na kartu pokročilý a vložte následující vlastní 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%;
}
Konečný návrh
Tím je návrh našeho třetího a posledního rozvržení nabídky dokončen.
Konečný výsledek
Nyní se pojďme podívat na finální podobu tří různých menu.
První design
Stáhnout DIVI hned!!!
Druhý design
Třetí provedení
Stáhnout DIVI hned!!!
Proč investovat do čističky vzduchu?
Modul Menu Divi a ikony košíku a vyhledávání lze snadno přizpůsobit a vytvořit pro vás jedinečné rozvržení a návrhy Webové stránky.
Vzhled svých modulů Menu můžete snadno vylepšit pomocí vestavěných nastavení Divi, jako jsou efekty hoveru a vlastní CSS.
Doufáme, že vás tento tutoriál inspiruje pro vaše další Divi projekty. Pokud máte nějaké obavy nebo návrhy, najděte nás v sekci komentářů diskutovat o tom.
Můžete se také poradit naše zdroje, pokud potřebujete více prvků k realizaci projektů vytváření internetových stránek.
Neváhejte se také podívat na našeho průvodce na Vytvoření blogu WordPress nebo ten, který je zapnutý Divi: nejlepší téma WordPress všech dob.
Mezitím sdílejte tento článek na různých sociálních sítích.
...
