Mega menu jsou oblíbeným designovým prvkem, který vám může dát Webové stránky výbuch elegance při nabízení Návštěvníci další navigační vrstva. Existuje několik způsobů, jak přidat mega-menu do Divi. Jedna z nejjednodušších metod, kterou jsem použil, jeplug-in třetích stran s názvem Divi Mega Pro .

Divi Mega Pro usnadňuje vytváření mega nabídek pomocí nástroje Divi Builder. Každou nabídku lze přidat do libovolného prvku pomocí třídy CSS. To znamená, že můžete přidat rozložení Divi na libovolný odkaz v nabídce, ale můžete jít ještě dále a přidat je do libovolného prvku rozložení Divi pouhým přidáním třídy CSS.

Je ideální pro vytváření nabídek a vyskakovacích oken s moduly obchodu, obrázky, posuvníky, portfolii, ikonami, reklamami, videi, blogy atd. Funguje také s Extra.

Vytvořte menu Mega Pro Mega

Nabídka Divi Mega Pro je přidána do nabídky palubní desky. Zde můžete zadat svůj licenční klíč, zobrazit nabídky, které jste vytvořili, a vytvořit novou nabídku. Když kliknete a přidáte novou nabídku, uvidíte editor typu příspěvku nabídky. Obrazovka je jednoduchá, ale tady se toho děje hodně.

vydavatel - můžete vytvořit mega-menu nebo nápovědu pomocí Divi Builder.

Mega Pro pozadí - můžete vybrat barvy pozadí a písma.

Zobrazit místa - vyberte všechny stránky nebo pojmenujte konkrétní stránky a zadejte výjimky.

Mega Pro Animace - vyberte animaci. Vyberte si z offsetu, offsetu, perspektivy, fade nebo scale.

Mega Pro Triggers - přidat spoušť jako selektor CSS. Jakmile ji uložíte, uvidíte třídu CSS, kterou hodláte vložit do pole třídy CSS položky nabídky, modulu, řádku nebo sekce. Na toto se klikne nebo umístí ukazatel myši, aby se zobrazila nabídka. Jako spouštěč lze použít vše, nejen položku nabídky. To znamená, že můžete také použít Divi Mega Pro k vytváření vyskakovacích oken nebo nápovědy.

Nastavení zobrazení Mega Pro : vyberte směr zobrazení (horní nebo dolní), zadejte horní a dolní okraj v pixelech, zvolte procento šířky a aktivujte šipku. Aktivace šipky odhalí další přizpůsobení, kde můžete vybrat typ šipky (trojúhelník nebo kulatý), zvolit barvu, nastavit šířku a výšku a zobrazit náhled šipky.

přizpůsobení tlačítko Zavřít: aktivujte tlačítko Zavřít na ploše nebo na mobilu a přizpůsobte tlačítko Zavřít. Pokud ji povolíte, zobrazí se náhled přizpůsobení pro barvu textu, barvu pozadí, velikost písma, poloměr ohraničení, výplň a zobrazení.

Další parametry Mega Pro - vyberte typ spouštěče (při umístění kurzoru nebo kliknutí), typu výstupu (při umístění kurzoru nebo kliknutí) a zadejte výstupní zpoždění.

Modely Divi Mega Pro

Vývojář poskytl několik modelů pro Divi Mega Pro. Při zakoupení pluginu jsou tyto šablony k dispozici ve vašem účtu na kartě Šablony rozvržení pluginu. Jsou skvělé, protože vám pomohou začít s návrhem vašich mega nabídek. Ve svých příkladech použiji několik.

Divi Mega Pro Menu

Jakmile vytvoříte mega nabídku, zobrazí se v seznamu. Zde můžete upravovat, rychle upravovat nebo mazat nabídky. Můžete také vyhledávat, filtrovat podle data, prohlížet podle stavu atd. Poskytuje také jedinečnou třídu Mega Pro, takže je můžete zkopírovat odtud místo otevření každé třídy a získání třídy.

Když kopírujete třídu, nezapomeňte ji vložit bez dalších mezer. Jinak nebudou všechna mega-menu na stránce fungovat.

Jsem si jistý, že by nebylo snadné přidat, ale funkce kopírování a úpravy by byla užitečná. Rozložení Divi můžete uložit do své knihovny pro opakované použití, ale to nezahrnuje okolní nastavení.

Přidání spouště

V poli Spouštěče Mega Pro uvidíte jednu třídu Mega Pro. Zkopírujte a vložte jej do pole Třída CSS prvku, který chcete použít jako spouštěč.

Chcete-li přidat pole Třída CSS do položky nabídky, musíte povolit třídy CSS. Na obrazovce nabídky vyberte Možnosti obrazovky a povolit třídy CSS.

Vložte třídu CSS do pole nabídky. Nyní tato položka nabídky zobrazí mega nabídku při najetí myší a po kliknutí vás přenese na stránku.

Všimnete si, že Divi Mega Pro je také možnost v možnostech odkazu v nabídce. Jsou skvělé pro přidání položky nabídky do nabídky, která ve skutečnosti nikam nevede. Přidejte třídu CSS jako kteroukoli jinou položku nabídky.

Kontaktní sekce v mega menu

Nabídka se otevře při najetí myší. Kdykoli chci kliknout na odkaz Kontakt a otevřít stránku kontaktu. Kdybych jen chtěl, aby se mega nabídka zobrazila, mohl bych použít odkaz na hlavní nabídku Kontakt a přejmenovat ji (jako v příkladu výše).

V tomto jsem mírně změnil barvy pomocí nastavení pozadí a zobrazení, spíše než pomocí Divi Builder. Přidá lištu do spodní části nabídky.

Jednoduchá výzva k akci se sloupci nabídky

Toto je jeden z modelů, které přidávají více sloupců. Provádím úpravy barev pozadí a písma. Také jsem přidal šíp a vytvořil šířku 75%.

Možnosti pozadí a písma přidávají o něco více, aby vynikly. Nechal jsem výchozí zarovnání, které umístí nabídku napravo od obrazovky. Polohu můžete upravit v nastavení.

Karty

Šablona karty obsahuje modul kódu s jQuery k vytvoření efektu přechodu.

Přidal jsem obsah na karty a přizpůsobil je webu. Každý z odkazů vlevo zobrazuje ve většině nabídek jinou záložku.

Info Konfigurace bublin

V tomto případě jsem přidal třídu CSS do nějaké reklamy, takže se otevře malé vyskakovací okno při přechodu. Vyskakovací okno je pouze obrázek se stínem níže.

Na obrázku výše se moje myš vznáší nad slovy LIVE WEBSITE. Dosud jsem neupravil umístění, ale je snadné ho zobrazit kdekoli chcete.

Pro tento jsem vytvořil vyskakovací okno, které zobrazilo obrázek s nějakým textem. Nastavil jsem směr zobrazení na Nízký a aby se zobrazil vedle obrázku, který chci přidat, přidal jsem okraj -300.

Když na ni najedu myší, objeví se vyskakovací okno nalevo a nahoře. Přidal jsem průhlednou barvu pozadí, barvu ohraničení, výplň a zaoblený obrys.

Licence a dokumentace

Máte na výběr mezi čtyřmi licencemi:

• Jedno místo - 15 $ ročně
• Tři stránky - 29 $ ročně
• Neomezený počet stránek - 59 $ ročně
• Neomezená životnost - 129 $ jednorázově

Dokumentace poskytuje videoprezentace a článek na webu vysvětluje funkce a vysvětluje, jak krok za krokem používat plugin.

[vc_row center_row=”yes”][vc_column width=”1/2″][vcex_button target=”blank” layout=”expanded” align=”center” font_family=”Raleway” font_weight=”700″ style=”flat” custom_background=”#18b69d” custom_hover_background=”#118d7a” custom_color=”#ffffff” custom_hover_color=”#ffffff” icon_right=”fa fa-download”]STÁHNOUT TÉMA DIVI [/vcex_button][/vc_column=][vc_column /1″][vcex_button url=”https://www.elegantthemes.com/affiliates/idevaffiliate.php?id=2&url=23065&tid40632=tutorials” target=”blank” layout=”expanded” align=”center” font_family = ”Raleway” font_weight=”1″ style=”flat” custom_background=”#c700e” custom_hover_background=”#4226d8f” custom_color=”#ffffff” custom_hover_color=”#ffffff” icon_right=”fa fa-download”]STAŽTE SI TEMPLATES DIVI[/vcex_button][/vc_column][/vc_row]

Ostatní výukové programy Divi

• 5 webové stránky pro použití v hotelu Divi téma
• Jak přidat text na produkt Divi WooCommerce
• Jak změnit barvu nabídky mezi stránkami Divi
• Jak přizpůsobit mřížky blogu s Divi
• Jak používat role Divi editor na WordPress
• Jak vytvořit posuvník Divi na celé obrazovce
• Jak změnit barvu nabídek mezi stránkami Divi
• Funkce, které pravděpodobně nevíte o Divi
• Jak používat Divi Builder na WordPress
• Jak používat modul posunu videa Divi
• Jak používat modul Divi Builder Flip
• Jak přidat zkušební modul na Divi Builder
• Jak používat textový modul Divi
• Jak vytvořit posuvník na Divi
• Jak upravit roli uživatele Divi
• Jak používat modul Divi Social Media
• Jak používat modul obchodu na téma WordPress Divi
• Jak používat modul bočního panelu Divi
• Jak používat modul tabulky ceny Divi
• Jak používat titulní modul publikací Divi
• Jak přidat video modul Divi
• Jak používat navigační modul článku
• Jak používat vyhledávací modul Divi
• Jak používat modul peněženky Divi
• Jak používat modul osob na nástroji Divi Builder
• Jak používat modul peněz s filtrem Divi
• Jak používat posuvný modul s plnou šířkou
• Jak používat modul obrazu Divi Builder
• Jak používat navigační modul plné šířky nástroje Divi Builder
• Jak používat modul galerie obrázků
• Jak používat modul karty Divi Builder Full-Width Card
• Jak používat portálový modul Divi s plnou šířkou
• Jak používat modul záhlaví Divi s plnou šířkou
• Jak používat počítací modul Divi
• Jak používat posuvník článků v Divi Builderu
• Jak používat modul Divi Email Optin