Chcete pridať ikonu hamburgeru do modulu ponuky divi ?
Ak zabudujete hlavičku divi, existuje niekoľko spôsobov, ako to urobiť.
Ukážeme vám, ako pridať ikonu hamburgeru do modulu ponuky divi. Táto ikona hamburgera sa už štandardne zobrazuje na menších obrazovkách. V tomto návode sa však postaráme o to, aby sa ikona hamburgera objavila aj na pracovnej ploche.
To dáva vašej hlavičke minimálny vzhľad a zároveň pridáva interakciu.
Poďme.
prehľad
Predtým, ako sa pustíme do tohto tutoriálu, pozrime sa rýchlo na výsledok.
Stiahnite si DIVI teraz!!!
Vytvorte novú šablónu globálnej hlavičky pomocou Divi Builder
Prejdite do Divi Theme Builder
Na hlavnom paneli WordPress prejdite na „Divi > Tvorca tém“ potom kliknite „Pridať globálnu hlavičku“
Pridajte novú globálnu hlavičku
Zobrazí sa rozbaľovacia ponuka. Ak chcete začať stavať od začiatku, pokračujte výberom „Vytvoriť globálnu hlavičku“.
Navrhovanie globálneho dizajnu hlavičky
Nastavenia sekcií
Farba pozadia
Keď ste v editore šablón, je čas začať navrhovať hlavičku. Všimnete si, že už existuje sekcia. Otvorte nastavenia sekcie a pridajte farbu pozadia.
- Farba pozadia: #f6f9fb
vzdialenosť
Prepnúť na kartu dizajn časti a upravte nasledujúce parametre.
- Výplň (horná a dolná časť): 0 pixelov
Pridať nový riadok
Štruktúra stĺpca
Pokračujte pridaním nového riadka s použitím nasledujúcej štruktúry stĺpcov:
dimenzovanie
Otvorte nastavenia linky, prejdite na kartu dizajn a zmeňte maximálnu šírku v nastaveniach veľkosti.
- Maximálna šírka: 1 pixelov
vzdialenosť
Potom zmeňte hornú a spodnú výplň v nastaveniach rozstupov.
- Výplň (horná a dolná časť): 5 pixelov
Pridajte do stĺpca modul ponuky
Vyberte ponuku, ktorú chcete pridať
Potom pridajte modul ponuky do stĺpca riadka a vyberte dynamickú ponuku podľa vlastného výberu.
Stiahnite si logo
Stiahnite si a logo.
Odstrániť farbu pozadia
Potom z modulu odstráňte predvolenú bielu farbu pozadia.
Nastavenia textu ponuky
Prepnúť na kartu dizajn modulu a podľa toho upravte textové parametre menu:
- Ponuka písma: Poppins
- Hrúbka písma ponuky: polotučné
- Farba textu: #003e51
- Veľkosť textu ponuky: 16px
- Zarovnanie textu: vpravo
Nastavenia rozbaľovacej ponuky
Potom zmeňte nastavenia z rozbaľovacej ponuky.
- Farba riadku rozbaľovacej ponuky: #7159c8
Nastavenia ikon
Zmeňte aj nastavenia ikon.
- Farba ikony nákupného košíka: #670ffff
- Farba ikony vyhľadávania: #670ffff
- Farba ikony menu hamburger: #670ffff
dimenzovanie
Potom prejdite na nastavenia veľkosti a priraďte maximálnu šírku logo.
- logo Maximálna šírka: 280 pixelov
vzdialenosť
Odstráňte tiež predvolený spodný okraj z modulu.
- Okraj (dole): 0px
Urobte sekciu lepivou
Teraz, keď je naša ponuka na mieste, urobíme aj sekciu lepivou. Otvorte nastavenia sekcie, prejdite na kartu pokročilý a použite nasledujúce nastavenia:
- Sticky Position: Stick to Top
- Odsadenie od okolitých lepkavých prvkov: ÁNO
- Predvolené a rýchle štýly prechodu: ÁNO
Farba pozadia v lepkavom stave
Potom zmeňte farbu pozadia sekcie na lepkavý stav.
- Farba pozadia: #ffffff
Lepkavý tieň v tvare krabice
Na sekciu tiež aplikujte tieň boxu.
- Farba tieňa (počítač): rgba (0,0,0,0)
- Farba tieňa (lepkavá): rgba (0,0,0,0.04)
Do modulu Menu bola pridaná ikona hamburgeru
Pridajte CSS ID do modulu ponuky
Najprv otvorte nastavenia modulu Menu a prejdite na kartu pokročilý a priradiť CSS ID.
- CSS ID: divi-menu
Pridajte modul Kód pod modul ponuky
Ďalej pridajte modul Kód pod modul ponuky.
Pridajte značky skriptu a štýlu
Použijeme kód CSS a JQuery. Aby sme sa na to pripravili, pridáme značky štýlu a skriptu.
Pridajte kód CSS
Medzi značky štýlu vložíme nasledujúce riadky 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;
}
Pridajte JQuery
Pridajte riadky otváracieho kódu JQuery
Ďalej budeme mať kód JQuery. Medzi značky skriptu pridajte nasledujúce riadky kódu JQuery:
jQuery(function($){
$(document).ready(function(){
});
});
Vytvorte premenné
Ďalej vytvorte nejaké premenné.
var toggleIcon = $('<div class="toggle-icon"></div>');
var desktopMenu = $('#divi-menu .et_pb_menu__menu>nav');
Umiestnite ikonu prepínača do modulu ponuky
Potom umiestnite premennú ikony prepínača do modulu ponuky pomocou nasledujúceho riadku kódu:
toggleIcon.insertAfter(desktopMenu);
Pridajte funkciu kliknutia
Pridávame aj funkciu kliknutia.
toggleIcon.click(function(){
desktopMenu.toggleClass('reveal-menu-items');
$(this).toggleClass('icon-switch');
});
Uložiť zmeny Divi Theme Builder
Teraz, keď je všetko na svojom mieste, všetko, čo musíte urobiť, je uložiť všetky zmeny Divi Theme Builder a zobraziť výsledok!
prehľad
Teraz, keď sme prešli všetkými krokmi, poďme sa naposledy pozrieť na konečný výsledok.
Stiahnite si DIVI teraz!!!
záver
V tomto článku sme vám ukázali, ako byť kreatívny s vašou globálnou hlavičkou v Divi Theme Builder.
Konkrétne sme vám ukázali, ako pridať ikonu ponuky hamburgeru aj na plochu. V predvolenom nastavení sa na tablete a mobile zobrazuje ikona hamburgeru.
Dúfame, že vás tento návod inšpiruje pre vaše ďalšie Divi projekty. Ak máte nejaké obavy alebo návrhy, nájdite nás v časť s komentármi diskutovať o tom.
Môžete sa tiež poradiť naše zdroje, ak potrebujete viac prvkov na dokončenie projektov tvorby webových stránok. Alebo si pozrite aj nášho sprievodcu na Tvorba blogu WordPress alebo jeden na Divi: najlepšia téma WordPress všetkých čias.
Ale medzičasom zdieľajte tento článok na rôznych sociálnych sieťach.
...
