Mega menu sú obľúbeným dizajnovým prvkom, ktorý vám môže dať webové stránky výbuch elegancie pri ponúkaní Návštevníci ďalšia navigačná vrstva. Existuje niekoľko spôsobov, ako pridať mega-menu do Divi. Jedna z najjednoduchších metód, ktoré som použil, jedoplnok tretej strany s názvom Divi Mega Pro .

Divi Mega Pro uľahčuje vytváranie mega menu pomocou aplikácie Divi Builder. Každú ponuku je možné pridať do ľubovoľného prvku pomocou triedy CSS. To znamená, že k ľubovoľnému odkazu v ponuke môžete pridať rozloženie Divi, ale môžete ísť ešte ďalej a pridať ich do ľubovoľného prvku rozloženia Divi iba pridaním triedy CSS.

Je ideálny na vytváranie ponúk a vyskakovacích okien s modulmi obchodu, obrázkami, posúvačmi, portfóliami, ikonami, reklamami, videami, blogmi atď. Funguje to aj s doplnkom Extra.

Vytvorte menu Mega Pro Mega

Do ponuky palubnej dosky sa pridáva ponuka Divi Mega Pro. Tu môžete zadať licenčný kľúč, pozrieť sa na ponuky, ktoré ste vytvorili, a vytvoriť novú ponuku. Po kliknutí na pridanie novej ponuky sa zobrazí editor typu príspevku v ponuke. Obrazovka je jednoduchá, ale deje sa tu toho veľa.

vydavateľ - megaponuku alebo popis môžete vytvoriť pomocou programu Divi Builder.

Mega Pro Background - môžete zvoliť farby pozadia a písma.

Zobraziť miesta - vyberte všetky stránky alebo pomenujte konkrétne stránky, potom zadajte výnimky.

Mega Pro Animácia - vyberte animáciu. Vyberte si z možností offset, offset, perspektíva, fade alebo scale.

Mega Pro Triggers - pridať spúšťač ako selektor CSS. Po uložení sa zobrazí trieda CSS, ktorú chcete prilepiť do poľa triedy CSS položky ponuky, modulu, riadku alebo sekcie. Na to sa klikne alebo umiestni kurzor myši, aby sa zobrazila ponuka. Ako spúšťač sa dá použiť všetko a nielen položka ponuky. To znamená, že program Divi Mega Pro môžete použiť aj na vytváranie kontextových okien alebo popisov nástrojov.

Nastavenia zobrazenia Mega Pro : vyberte smer zobrazenia (horný alebo dolný), zadajte horný a dolný okraj v pixeloch, vyberte percento šírky a aktivujte šípku. Aktivácia šípky odhalí viac prispôsobení, kde môžete zvoliť typ šípky (trojuholník alebo guľatý), zvoliť farbu, nastaviť šírku a výšku a zobraziť ukážku šípky.

prispôsobenie tlačidlo zatvorenia: aktivujte tlačidlo zatvorenia na pracovnej ploche alebo na mobilnom telefóne a prispôsobte tlačidlo zatvorenia. Ak to povolíte, zobrazia sa ukážky prispôsobení pre farbu textu, farbu pozadia, veľkosť písma, polomer okraja, výplň a zobrazenie.

Ďalšie parametre Mega Pro - zvoľte typ spúšťača (umiestnením kurzora myši alebo kliknutím), typ výstupu (umiestnením kurzora myši alebo kliknutím) a zadaním výstupného času.

Modely Divi Mega Pro

Vývojár poskytol pre Divi Mega Pro niekoľko modelov. Keď si zakúpite doplnok, tieto šablóny sú dostupné vo vašom účte na karte Šablóny rozloženia doplnkov. Sú skvelé, pretože vám pomôžu začať s návrhom svojich megabuzísk. Niekoľko uvediem vo svojich príkladoch.

Divi Mega Pro Menu

Len čo vytvoríte mega ponuku, zobrazí sa v zozname. Tu môžete upravovať, rýchlo upravovať alebo mazať ponuky. Môžete tiež vyhľadávať, filtrovať podľa dátumu, zobrazovať podľa stavu atď. Poskytuje tiež jedinečnú triedu Mega Pro, takže ich môžete skopírovať odtiaľto namiesto toho, aby ste každú otvorili, aby ste triedu získali.

Keď kopírujete triedu, nezabudnite ju vložiť bez ďalších medzier. Inak nebudú všetky mega ponuky na stránke fungovať.

Som si istý, že by to nebolo ľahké pridať, ale funkcia kopírovania a úpravy by bola užitočná. Rozloženia Divi môžete uložiť do svojej knižnice na opätovné použitie, ale to nezahŕňa okolité nastavenia.

Pridanie spúšte

V poli Mega Pro Triggers uvidíte jednu triedu Mega Pro. Skopírujte ho a vložte do poľa Trieda CSS prvku, ktorý chcete použiť ako spúšťač.

Ak chcete pridať pole Trieda CSS do položky ponuky, musíte povoliť triedy CSS. Na obrazovke ponuky vyberte možnosť Možnosti obrazovky a povoliť Triedy CSS.

Prilepte triedu CSS do poľa ponuky. Teraz táto položka ponuky zobrazí mega ponuku pri umiestnení kurzora myši a po kliknutí vás prevedie na stránku.

Všimnete si, že Divi Mega Pro je tiež voľbou v možnostiach odkazu na ponuku. Sú skvelé na pridanie položky ponuky do ponuky, ktorá vlastne nikam nevedie. Pridajte triedu CSS ako každú inú položku ponuky.

Kontaktovať sekciu v mega menu

Ponuka sa otvára kurzorom myši. Ak chcem, kedykoľvek môžem kliknúť na odkaz Kontakt a otvoriť stránku s kontaktmi. Ak by som chcel iba to, aby sa mega ponuka zobrazila, mohol by som použiť odkaz na hlavnú ponuku Kontakt a premenovať ju (ako v príklade vyššie).

V tomto som mierne zmenil farby pomocou nastavenia pozadia a zobrazenia namiesto použitia nástroja Divi Builder. V dolnej časti ponuky pridáva pruh.

Jednoduchá výzva na akciu so stĺpcami ponuky

Toto je jeden z modelov, ktoré pridávajú viac stĺpcov. Vykonávam úpravy farieb pozadia a písma. Tiež som pridal šíp a urobil šírku 75%.

Možnosti farby pozadia a písma pridávajú o niečo viac, aby vynikli. Ponechal som predvolené zarovnanie, ktoré umiestňuje ponuku napravo od obrazovky. Polohu môžete upraviť v nastaveniach.

karty

Šablóna karty obsahuje kódový modul s jQuery na vytvorenie efektu vznášania.

Pridal som obsah na karty a prispôsobil ich webu. Každý z odkazov vľavo zobrazuje vo väčšine ponúk inú kartu.

Informácie o konfiguráciách bublín

Pre tento som pridal triedu CSS do nejakej reklamy, aby sa pri otvorení kurzora otvorilo malé vyskakovacie okno. Vyskakovacie okno je iba obrázok s tieňom dole.

Na obrázku vyššie sa moja myš vznáša nad slovami LIVE WEBITE. Zatiaľ som neprispôsobil umiestnenie, ale je ľahké urobiť ho, kdekoľvek chcete.

Pre tento účel som vytvoril vyskakovacie okno na zobrazenie obrázka s textom. Nastavil som smer zobrazenia na Nízky a aby sa zobrazil vedľa obrázka, ktorý chcem pridať, pridal som okraj -300.

Keď na ňu umiestnim kurzor myši, vyskakovacie okno sa zobrazí vľavo a hore na obrázku. Pridal som priehľadnú farbu pozadia, farbu orámovania, výplň a zaoblený obrys.

Licencia a dokumentácia

Máte na výber medzi štyrmi licenciami:

• Jedno miesto - 15 dolárov ročne
• Tri stránky - 29 dolárov ročne
• Neobmedzené stránky - 59 dolárov ročne
• Neobmedzená životnosť - 129 dolárov jednorazovo

Dokumentácia poskytuje videoprezentácia a článok na webe vysvetľuje funkcie a krok za krokom vysvetľuje, ako používať doplnok.

[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”]STIAHNUŤ TÉMU DIVI [/vcex_button][/vc_column=][vc_column width] /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”]STIAHNUŤ TEMPLATES DIVI[/vcex_button][/vc_column][/vc_row]

Ďalšie výukové programy spoločnosti Divi

• 5 webové stránky pre použitie v hoteli Divi tému
• Ako pridať text na produktoch Divi WooCommerce
• Ako zmeniť farbu ponuky medzi stránkami Divi
• Ako si prispôsobiť mriežky blogu s Divi
• Ako používať role Divi editor na WordPress
• Ako vytvoriť posuvník Divi na celej obrazovke
• Ako zmeniť farbu ponúk medzi stránkami Divi
• Funkcie, ktoré pravdepodobne neviete o Divi
• Ako používať Divi Builder na WordPress
• Ako používať modul posúvania videa Divi
• Ako používať modul Divi Builder Flip
• Ako pridať modul posudkov na Divi Builder
• Ako používať textový modul Divi
• Ako vytvoriť posúvač na Divi
• Ako upraviť rolu používateľa Divi
• Ako používať modul Divi Social Media
• Ako používať modul obchodu na tému WordPress Divi
• Ako používať modul bočného panela Divi
• Ako používať modul tabuľky cien Divi
• Ako používať titulný modul publikácií Divi
• Ako pridať video modul Divi
• Ako používať navigačný modul článku
• Ako používať vyhľadávací modul Divi
• Ako používať modul peňaľenky Divi
• Ako používať osobný modul na nástroji Divi Builder
• Ako používať modul peňaženky s filtrom Divi
• Ako používať posuvný modul s plnou šírkou
• Ako používať modul obrazu Divi Builder
• Ako používať navigačný modul v celej šírke nástroja Divi Builder
• Ako používať modul galérie obrázkov
• Ako používať modul kariet Divi Builder s plnou šírkou
• Ako používať portálový modul Divi s plnou šírkou
• Ako používať modul záhlavia Divi s plnou šírkou
• Ako používať počítací modul Divi
• Ako používať posúvač článkov v aplikácii Divi Builder
• Ako používať modul Divi Email Optin