V tomto kurzu vám ukážeme, jak vytvořit tlačítko rozevírací nabídky pomocí modulu nabídky Divi na celou šířku. Za tímto účelem nejprve vytvoříme nabídku ve WordPressu. Poté použijeme modul nabídky Divi na celou šířku k zobrazení tohoto menu s vlastními styly pomocí nástroje Divi builder a trochu vlastního CSS. Výsledkem je praktické a stylové tlačítko rozevírací nabídky.
Začněme.
přehled
Zde je přehled tlačítka rozevírací nabídky, který budeme integrovat do tohoto tutoriálu.
Co potřebujete, abyste mohli začít
Chcete-li začít, pokud jste tak ještě neučinili, nainstalujte a aktivujte Divi téma nainstalován (nebo plugin Divi Builder, pokud nepoužíváte Divi téma). Na začátku použijeme Divi builder k návrhu tlačítka rozbalovací nabídky.
A je to !
Vytvořte nabídku v WordPress
Než začneme vytvářet rozbalovací nabídku pomocí nástroje Divi Builder, musíme nejprve vytvořit nabídku WordPress, kterou bychom chtěli použít pro modul nabídky na celou šířku. Chcete-li to provést, přejděte na řídicí panel WordPress a přejděte do části Vzhled> Nabídky. Poté vytvořte novou nabídku kliknutím na odkaz vytvořit novou nabídku, zadáním názvu nabídky a kliknutím na tlačítko „Vytvořit nabídku“.
Prozatím můžete vytvořit vlastní odkazy s „#“ jako zástupným symbolem adresy URL spolu s textem odkazu.
Strukturujte položky nabídky tak, aby položka nabídky nejvyšší úrovně obsahovala odkaz „Další informace“ se třemi položkami podřízené nabídky.
Poté nezapomeňte nabídku uložit.
Jak vytvořit tlačítko rozbalovací nabídky s modulem nabídky Divi s plnou šířkou
Po vytvoření nabídky můžeme začít navrhovat tlačítko rozevírací nabídky pomocí Divi. Chcete-li zahájit projekt, vytvořte ve WordPress novou stránku a pomocí nástroje Divi Builder upravte stránku na front-endu (vizuální builder).
Poté budete mít prázdné plátno, abyste mohli začít navrhovat v Divi.
Vytvořte falešný obsah
Nejprve přidejte řádek jednoho sloupce do výchozí standardní sekce.
Přidat textový modul
Poté do řádku přidejte textový modul s následujícím obsahem:
Nabídka Divi Váš obsah se zobrazí zde. Upravte nebo odeberte tento text vložený nebo v modulu Nastavení obsahu. Můžete také upravit každý aspekt tohoto obsahu v modulu Nastavení návrhu a dokonce použít vlastní CSS na tento text v modulu Pokročilé nastavení.
Poté aktualizujte návrhové parametry následujícím způsobem:
Vycpávková část
Poté aktualizujte nastavení sekce pomocí následujících položek:
- Výplň: 0px dolů
Řádkování a ohraničení
Po aktualizaci výplně sekce otevřete nastavení řádku a přiřaďte výplně a mírnému ohraničení.
- Čalounění: 10vw nahoře, 10vw dole, 5vw vlevo, 5vw vpravo
- Šířka hranice: 1px
Vytvoření tlačítka rozevírací nabídky
Aby bylo možné vytvořit tlačítko rozevírací nabídky, budeme používat modul nabídky na celou šířku. To nám umožní přidat dříve vytvořené menu.
Přidání nabídky plné šířky
Chcete-li vytvořit modul nabídky plné šířky, přidejte pod aktuální standardní sekci novou sekci plné šířky.
Poté do řádku přidejte modul nabídky plné šířky.
V rozbalovacím okně nastavení nabídky na celou šířku (pod Obsahem) vyberte z rozevírací nabídky nabídku, kterou chcete zobrazit. Mělo by se jednat o stejné menu, které jsme vytvořili dříve s názvem „rozbalovací nabídka“.
Potom odeberte výchozí barvu pozadí bílé nabídky.
Jakmile přidáte nabídku s modulem nabídky s plnou šířkou, uložte nastavení. K dokončení tohoto modulu se trochu vrátíme, abychom dokončili design. Ale prozatím přidáme pozadí do sekce celé šířky.
Aktualizujte design sekce plné šířky
Otevřete nastavení pro sekci s plnou šířkou a aktualizujte následující:
- Levý přechod na pozadí: # 0047d6
- Pravý přechod na pozadí Barva: # 45b2ff
- Maximální šířka: 240px
- Sekce Zarovnání: střed
Nastavil jsem maximální šířku sekce na 240px, protože to odpovídá šířce výchozí šířky rozevírací nabídky v Divi. Je to také dobrá velikost pro tlačítko na počítači a mobilních zařízeních.
- Zaoblené rohy: 5px
Na kartě Upřesnit přidejte následující třídu CSS, přetečení a index Z.
- Třída CSS: rozbalovací tlačítko
- Horizontální přetečení: viditelné
- Vertikální přetečení: viditelné
- Z index: 14
Třída CSS je nutná, abychom mohli v této části později zacílit naše externí CSS. Přetečení je třeba nastavit na viditelné, abychom viděli rozevírací nabídku. A index Z vám pomůže udržet rozevírací seznam nad veškerým ostatním obsahem na stránce.
Navrhněte nabídku Fulwidth
Nyní jsme připraveni navrhnout modul nabídky Fulwidth. Otevřete nastavení modulu nabídky na celou šířku a aktualizujte následující:
- Vytvořte odkazy na celou šířku nabídky: ANO
- Barva rozevíracího seznamu: #ffffff
- Barva textu mobilní nabídky: #ffffff
- Zarovnání textu: střed
- Barva pozadí rozbalovací nabídky: # 45b2ff
- Barva rozbalovací nabídky: #ffffff
- Barva pozadí nabídky: #45b2ff
- Nabídka písem: Kódování bez kondenzace
- Váha nabídky písma: Semi Bold
- Barva textu nabídky: #ffffff
- Velikost textu nabídky: 16px
- Nabídka: 2px
- Animace rozbalovací nabídky: Rozbalte
Umístěte rozevírací tlačítko
Aby tlačítko překrývalo spodní okraj, musíme přidat záporný horní okraj, který je přesně polovinou výšky tlačítka.
- Marže: -40.5px vysoká
Jak vidíte, prostor vznášení ještě nezabírá celou oblast tlačítek a rozevírací nabídka je stále vpravo. Abychom tento problém vyřešili, můžeme přidat vlastní CSS.
Přidání vlastního CSS
Před přidáním vlastního CSS nezapomeňte přidat CSS ID „rozevírací“ do sekce plné šířky (nikoli do modulu).
Bez ID CSS níže uvedené CSS nebude fungovat.
Chcete-li přidat vlastní CSS, otevřete nastavení stránky a vložte následující kód do vlastního vstupního pole 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 řádku: 81 pixelů; } .dropdown-button .fullwidth-menu li li a {padding: 6px 0px; výška řádku: 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 {odsazení: 0 0! important; } .dropdown-button .fullwidth-menu li {display: block; } .dropdown-button .fullwidth-menu .menu-item-has-children> a: first-child: after {right: 20px; }
Zde je konečný výsledek
Závěrečné myšlenky
Vytvoření tlačítka rozevírací nabídky pomocí modulu nabídky Divi na celou šířku zahrnuje několik klíčových kroků. Nejprve vytvoříme nabídku ve WordPressu, kterou chceme integrovat do modulu. Poté použijeme Tvůrce Divi a stylizujeme modul nabídky na celou šířku podle našich představ. Poté přidáme vlastní CSS, abychom vyleštili design na ploše i na mobilu. Výsledkem je krásná (a užitečná) rozevírací nabídka, která je k dispozici pro umístění kurzoru myši a kliknutí na mobilním zařízení. Doufám, že vám to bude užitečným doplňkem k vaší sadě nástrojů pro návrh.
