V tomto tutoriáli vám ukážeme, ako vytvoriť tlačidlo rozbaľovacej ponuky pomocou modulu ponuky Divi na celú šírku. Za týmto účelom najskôr vytvoríme ponuku vo WordPresse. Potom použijeme modul ponuky Divi na celú šírku, aby sme zobrazili toto menu s vlastnými štýlmi pomocou nástroja na tvorbu súborov Divi a trochy vlastných CSS. Výsledkom je praktické a štýlové tlačidlo rozbaľovacej ponuky.
Začnime.
prehľad
Tu je prehľad tlačidla rozbaľovacej ponuky, ktorý integrujeme do tohto tutoriálu.
Čo potrebujete, aby ste začali
Ak chcete začať, ak ste tak ešte neurobili, nainštalujte a aktivujte Divi téma nainštalovaný (alebo doplnok Divi Builder, ak nepoužívate Divi téma). Na navrhnutie tlačidla rozbaľovacej ponuky použijeme na začiatku tvorca Divi.
To je všetko!
Vytvorte ponuku v WordPress
Predtým, ako začneme vytvárať rozbaľovaciu ponuku pomocou aplikácie Divi Builder, je potrebné najskôr vytvoriť ponuku WordPress, ktorú by sme chceli použiť pre modul ponuky na celú šírku. Ak to chcete urobiť, prejdite na hlavný panel WordPress a prejdite do časti Vzhľad> Ponuky. Potom vytvorte novú ponuku kliknutím na odkaz vytvoriť novú ponuku, zadaním názvu ponuky a kliknutím na tlačidlo „Vytvoriť ponuku“.
Zatiaľ môžete vytvoriť vlastné odkazy s „#“ ako zástupným znakom adresy URL spolu s textom odkazu.
Štruktúrujte položky ponuky tak, aby položka ponuky najvyššej úrovne mala odkaz „Viac informácií“ s tromi položkami podponuky.
Potom nezabudnite ponuku uložiť.
Ako vytvoriť tlačidlo rozbaľovacej ponuky s modulom ponuky celej šírky Divi
Po vytvorení ponuky môžeme pomocou aplikácie Divi začať navrhovať tlačidlo rozbaľovacej ponuky. Ak chcete spustiť projekt, vytvorte vo WordPress novú stránku a pomocou editora Divi Builder upravte stránku v klientskom rozhraní (vizuálny builder).
Potom budete mať prázdne plátno, aby ste mohli začať navrhovať v Divi.
Vytvorte falošný obsah
Najskôr pridajte riadok jedného stĺpca do predvolenej štandardnej sekcie.
Pridajte textový modul
Potom do riadku pridajte textový modul s nasledujúcim obsahom:
Divi Menu Váš obsah sa zobrazí tu. Tento text môžete upraviť alebo odstrániť vložene alebo v module Nastavenia obsahu. Môžete tiež štylizovať každý aspekt tohto obsahu v module Dizajnové nastavenia a dokonca na tento text v modulu Pokročilé nastavenia použiť vlastné CSS.
Potom aktualizujte parametre návrhu nasledovne:
Polstrovacia časť
Potom aktualizujte nastavenie sekcie nasledujúcimi položkami:
- Výplň: 0px dole
Riadkovanie a ohraničenie
Po aktualizácii výplne sekcie otvorte nastavenia linky a priraďte jej výplň a mierne ohraničenie.
- Čalúnenie: 10vw hore, 10vw dole, 5vw vľavo, 5vw vpravo
- Šírka ohraničenia: 1px
Vytvorenie tlačidla rozbaľovacej ponuky
Na vytvorenie tlačidla rozbaľovacej ponuky použijeme modul ponuky na celú šírku. Toto nám umožní pridať predtým vytvorené menu.
Pridanie ponuky plnej šírky
Ak chcete vytvoriť modul ponuky s plnou šírkou, pridajte novú sekciu s plnou šírkou pod aktuálnu štandardnú sekciu.
Potom do riadku pridajte modul ponuky s plnou šírkou.
V rozbaľovacom okne nastavení ponuky na celú šírku (pod položkou Obsah) vyberte pomocou rozbaľovacej ponuky ponuku, ktorú chcete zobraziť. Malo by ísť o rovnaké menu, ktoré sme vytvorili predtým s názvom „rozbaľovacie tlačidlo“.
Potom z ponuky odstráňte predvolenú farbu bieleho pozadia.
Po pridaní ponuky s modulom ponuky s plnou šírkou uložte nastavenia. K dokončeniu dizajnu sa trochu vrátime. Zatiaľ však do časti s celou šírkou pridáme pozadie.
Aktualizujte vzhľad sekcie plnej šírky
Otvorte nastavenia pre sekciu s plnou šírkou a aktualizujte nasledujúce:
- Ľavý gradient pozadia: # 0047d6
- Pravý gradient pozadia Farba: # 45b2ff
- Maximálna šírka: 240px
- Zarovnanie sekcie: stred
Nastavil som maximálnu šírku sekcie na 240px, pretože sa zhoduje so šírkou predvolenej šírky rozbaľovacej ponuky v Divi. Je to dobrá veľkosť aj pre tlačidlo na počítači a mobile.
- Zaoblené rohy: 5px
Na karte Spresnenie pridajte nasledujúcu triedu CSS, pretečenie a index Z.
- Trieda CSS: rozbaľovacie tlačidlo
- Horizontálny prepad: viditeľný
- Vertikálny prepad: viditeľný
- Z index: 14
Trieda CSS je potrebná, aby sme mohli v tejto časti neskôr zamerať naše externé CSS. Prepad je potrebné nastaviť ako viditeľný, aby sme videli rozbaľovaciu ponuku. A index Z vám pomôže udržať rozbaľovaciu ponuku nad všetkým ostatným obsahom na stránke.
Navrhnite menu Fulwidth
Teraz sme pripravení navrhnúť modul ponuky Fulwidth. Otvorte nastavenia modulu ponuky s plnou šírkou a aktualizujte nasledujúce položky:
- Vytvorte odkazy na ponuku v plnej šírke: ÁNO
- Farba rozbaľovacieho textu: #ffffff
- Farba textu mobilnej ponuky: #ffffff
- Zarovnanie textu: stred
- Farba pozadia rozbaľovacej ponuky: # 45b2ff
- Farba rozbaľovacej ponuky: #ffffff
- Farba pozadia ponuky: #45b2ff
- Písmo Menu: Kódovať bez kondenzácie
- Hmotnosť ponuky písma: Semi Bold
- Farba textu ponuky: #ffffff
- Veľkosť textu ponuky: 16px
- Rozstup v ponuke: 2px
- Animácia rozbaľovacej ponuky: Rozbaľte
Umiestnite rozbaľovacie tlačidlo
Aby tlačidlo prekrývalo dolný okraj, musíme pridať záporný horný okraj, ktorý je presne polovicou výšky tlačidla.
- Marža: -40.5px vysoká
Ako vidíte, kurzorový priestor ešte nezaberá celú oblasť tlačidiel a rozbaľovacia ponuka je stále vpravo. Na vyriešenie tohto problému môžeme pridať vlastné CSS.
Pridáva sa vlastný CSS
Pred pridaním vlastného CSS nezabudnite pridať CSS ID „drop down“ do sekcie plnej šírky (nie do modulu).
Bez ID CSS nebudú nižšie uvedené CSS fungovať.
Ak chcete pridať vlastný CSS, otvorte nastavenia stránky a vložte nasledujúci kód do vlastného vstupného poľa CSS.
.dropdown-button .et_pb_fullwidth_menu .fullwidth-menu-nav> ul {padding-top: 0px! important; } .dropdown-button .fullwidth-menu li> a {padding-bottom: 0px; výška riadku: 81px; } .dropdown-button .fullwidth-menu li li a {padding: 6px 0px; výška riadku: 1.6em; } .dropdown-button .et_mobile_menu li a: hover, .nav ul li a: hover, .dropdown-button .fullwidth-menu a: hover {opacity: 1; } .dropdown-button .et_pb_fullwidth_menu_fullwidth .et_pb_row {odsadenie: 0 0! dôležité; } .dropdown-button .fullwidth-menu li {display: block; } .rozbaľovacie tlačidlo. ponuka plnej šírky .menu-položka-má-deti> a: prvé dieťa: po {vpravo: 20px; }
Toto je konečný výsledok
záverečné myšlienky
Vytvorenie tlačidla rozbaľovacej ponuky pomocou modulu ponuky Divi na celú šírku zahŕňa niekoľko kľúčových krokov. Najskôr vo WordPresse vytvoríme ponuku, ktorú chceme integrovať do modulu. Potom použijeme program Divi builder a upravíme modul ponuky na celú šírku podľa našich predstáv. Potom pridáme vlastné CSS, aby sme vyleštili dizajn na ploche aj na mobile. Výsledkom je krásna (a užitočná) rozbaľovacia ponuka rozbalená pre umiestnenie kurzora myši a kliknutie na mobilnú stránku. Dúfam, že vám to bude užitočným doplnkom k súprave nástrojov pre návrh.
