Chcete přidat ikonu hamburgeru do modulu Menu? divi ?
Pokud zabudujete záhlaví divi, existuje několik způsobů, jak to udělat.
Ukážeme vám, jak přidat ikonu hamburgeru do modulu Menu divi. Tato ikona hamburgeru se již ve výchozím nastavení zobrazuje na menších obrazovkách. Ale v tomto tutoriálu se ujistíme, že se ikona hamburgeru objeví i na ploše.
To dává vaší hlavičce minimální vzhled a zároveň přidává interakci.
Pojďme.
přehled
Než se ponoříme do tohoto tutoriálu, pojďme se rychle podívat na výsledek.
Stáhnout DIVI hned!!!
Vytvořte novou šablonu globálního záhlaví pomocí Divi Builderu
Přejděte do Divi Theme Builder
Na hlavním panelu WordPress přejděte na „Divi > Tvůrce motivů' pak klikněte 'Přidat globální záhlaví'
Přidejte novou globální hlavičku
Zobrazí se rozbalovací nabídka. Chcete-li začít stavět od začátku, pokračujte výběrem "Vytvořit globální záhlaví".
Návrh globálního návrhu záhlaví
Nastavení sekce
Barva pozadí
Jakmile jste v editoru šablon, je čas začít navrhovat záhlaví. Všimnete si, že již existuje sekce. Otevřete nastavení sekce a přidejte barvu pozadí.
- Barva pozadí: #f6f9fb
vzdálenost
Přepnout na kartu Design části a upravte následující parametry.
- Výplň (nahoře a dole): 0 pixelů
Přidat nový řádek
Struktura kolony
Pokračujte přidáním nového řádku pomocí následující struktury sloupců:
dimenzování
Otevřete nastavení linky, přejděte na kartu Design a změňte maximální šířku v nastavení velikosti.
- Maximální šířka: 1 pixelů
vzdálenost
Poté změňte horní a spodní výplň v nastavení mezer.
- Výplň (nahoře a dole): 5px
Přidejte do sloupce modul nabídky
Vyberte nabídku, kterou chcete přidat
Dále přidejte modul Menu do sloupce řádku a vyberte dynamickou nabídku podle svého výběru.
Stáhnout logo
Stáhnout a logo.
Odstraňte barvu pozadí
Dále z modulu odeberte výchozí bílou barvu pozadí.
Nastavení textu nabídky
Přepnout na kartu Design modulu a podle toho upravte textové parametry menu:
- Nabídka písem: Poppins
- Tloušťka písma nabídky: Polotučné
- Barva textu: #003e51
- Velikost textu nabídky: 16px
- Zarovnání textu: vpravo
Nastavení rozevírací nabídky
Poté změňte nastavení z rozevírací nabídky.
- Barva řádku rozbalovací nabídky: #7159c8
Nastavení ikon
Změňte také nastavení ikon.
- Barva ikony nákupního košíku: #670fff
- Barva ikony vyhledávání: #670fff
- Barva ikony menu hamburger: #670ffff
dimenzování
Poté přejděte do nastavení velikosti a přiřaďte maximální šířku logo.
- logo Maximální šířka: 280 pixelů
vzdálenost
Odstraňte také výchozí spodní okraj z modulu.
- Okraj (dole): 0px
Make Section Sticky
Nyní, když je naše nabídka na místě, uděláme také sekci lepivou. Otevřete nastavení sekce, přejděte na kartu pokročilý a použijte následující nastavení:
- Sticky Position: Stick To Top
- Odsazení od okolních lepivých prvků: ANO
- Výchozí a rychlé styly přechodu: ANO
Barva pozadí v lepkavém stavu
Poté změňte barvu pozadí sekce na lepivý stav.
- Barva pozadí: #ffffff
Lepkavý stín pole stavu
Na sekci také použijte stín krabice.
- Barva stínu (počítač): rgba (0,0,0,0)
- Barva stínu (lepkavá): rgba (0,0,0,0.04)
Do modulu Menu přidána ikona hamburgeru
Přidejte CSS ID do modulu nabídky
Nejprve otevřete nastavení modulu Menu a přejděte na kartu pokročilý a přiřadit CSS ID.
- CSS ID: divi-menu
Přidejte modul Kód pod modul Menu
Dále přidejte modul Kód pod modul Menu.
Přidejte značky skriptu a stylu
Použijeme kód CSS a JQuery. Abychom se na to připravili, přidáme značky stylu a skriptu.
Přidejte kód CSS
Mezi značky stylu vložíme následující řádky kódu CSS:
.toggle-icon:after {
content: "61";
font-size: 32px;
font-family: ETmodules !important;
color: #003e51;
position: absolute;
top: 26px;
right: 0;
cursor: pointer;
}
#divi-menu .et_pb_menu__menu>nav {
margin-right: 38px;
visibility: hidden;
opacity: 0;
-webkit-transition: .1s ease-in-out;
-moz-transition: .1s ease-in-out;
-o-transition: .1s ease-in-out;
transition: .1s ease-in-out;
transform: translateY(50%);
}
.reveal-menu-items {
opacity: 1 !important;
visibility: visible !important;
transform: translateY(0%) !important;
}
.icon-switch:after {
content: '4d';
font-size: 32px;
font-family: ETmodules !important;
color: #003e51;
position: absolute;
top: 26px;
right: 0;
cursor: pointer;
}
Přidejte JQuery
Přidejte řádky úvodního kódu JQuery
Dále budeme mít kód JQuery. Přidejte následující řádky kódu JQuery mezi značky skriptu:
jQuery(function($){
$(document).ready(function(){
});
});
Vytvořte proměnné
Dále vytvořte nějaké proměnné.
var toggleIcon = $('<div class="toggle-icon"></div>');
var desktopMenu = $('#divi-menu .et_pb_menu__menu>nav');
Umístěte ikonu přepínání do modulu Menu
Dále umístěte proměnnou ikony přepínače do modulu Menu pomocí následujícího řádku kódu:
toggleIcon.insertAfter(desktopMenu);
Přidejte funkci kliknutí
Přidáváme také funkci kliknutí.
toggleIcon.click(function(){
desktopMenu.toggleClass('reveal-menu-items');
$(this).toggleClass('icon-switch');
});
Uložte změny Divi Theme Builder
Nyní, když je vše na svém místě, zbývá pouze uložit všechny úpravy Divi Theme Builder a zobrazit výsledek!
přehled
Nyní, když jsme prošli všemi kroky, pojďme se naposledy podívat na konečný výsledek.
Stáhnout DIVI hned!!!
Proč investovat do čističky vzduchu?
V tomto článku jsme vám ukázali, jak být kreativní s globální hlavičkou v Divi Theme Builder.
Konkrétně jsme vám ukázali, jak přidat ikonu nabídky hamburgeru také na plochu. Ve výchozím nastavení se na tabletu a mobilu zobrazuje ikona hamburgeru.
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 dokončení projektů tvorby webových stránek. Nebo se podívejte také 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.
...
