Mega jelovnici popularan su element dizajna koji vam može dati web stranica provala elegancije dok se nudi posjetitelji dodatni navigacijski sloj. Postoji nekoliko načina za dodavanje mega-izbornika u Divi. Jedna od najlakših metoda koju sam koristio je dadodatak treće strane pod nazivom Divi Mega Pro .

Divi Mega Pro olakšava stvaranje mega izbornika pomoću Divi Builder. Svaki se izbornik može dodati bilo kojem elementu pomoću CSS klase. To znači da možete dodati Divi izgled bilo kojoj poveznici u izborniku, ali možete ići još dalje i dodati ih bilo kojem elementu Divi izgleda samo dodavanjem CSS klase.

Idealno je za stvaranje izbornika i skočnih prozora s modulima trgovine, slikama, klizačima, portfeljima, ikonama, blurbom, videozapisima, blogovima itd. Također radi s Extra.

Stvorite Mega Pro Mega izbornik

Izbornik Divi Mega Pro dodan je izborniku nadzorne ploče. Ovdje možete unijeti svoj licencni ključ, vidjeti izbornike koje ste stvorili i stvoriti novi izbornik. Kada kliknete za dodavanje novog izbornika, vidjet ćete uređivač za vrstu posta na izborniku. Zaslon je jednostavan, ali ovdje se puno toga događa.

izdavač - možete stvoriti mega-izbornik ili opis s alatom Divi Builder.

Pozadina Mega Pro - možete odabrati boje pozadine i fonta.

Pogledajte lokacije - odaberite sve stranice ili imenujte određene stranice, a zatim unesite iznimke.

Mega Pro Animacija - odaberite animaciju. Odaberite između pomaka, pomaka, perspektive, blijeđenja ili skaliranja.

Mega Pro okidači - dodati okidač kao CSS selektor. Jednom kad ga spremite, vidjet ćete CSS klasu koju ćete zalijepiti u polje CSS klase stavke izbornika, modula, retka ili odjeljka. Na to se klikne ili zadrži pokazivač za prikaz izbornika. Sve se može koristiti kao okidač, a ne samo stavka izbornika. To znači da Divi Mega Pro možete koristiti i za izradu skočnih prozora ili opisa.

Postavke zaslona Mega Pro : odaberite smjer prikaza (gore ili dolje), unesite gornju i donju marginu u pikselima, odaberite postotak širine i aktivirajte strelicu. Aktiviranje strelice otkriva više prilagodbi gdje možete odabrati vrstu strelice (trokut ili okrugla), odabrati boju, postaviti širinu i visinu te pregledati strelicu.

prilagodbe gumb za zatvaranje: aktivirajte gumb za zatvaranje na radnoj površini ili na mobitelu i prilagodite gumb za zatvaranje. Ako ga omogućite, pregledavaju se prilagodbe za boju teksta, boju pozadine, veličinu fonta, radijus obruba, ispunu i prikaz.

Dodatni parametri Mega Pro - odaberite vrstu okidača (lebdio ili kliknuo), vrstu izlaza (lebdio ili kliknuo) i unesite izlazno kašnjenje.

Divi Mega Pro modeli

Programer je osigurao nekoliko modela za Divi Mega Pro. Kada kupite dodatak, ovi predlošci dostupni su na vašem računu, na kartici Predlošci izgleda dodatka. Izvrsne su za pomoć u započinjanju dizajniranja mega menija. U svojim ću se primjerima poslužiti nekoliko njih.

Divi Mega Pro izbornik

Jednom kada stvorite mega meni, on će se pojaviti na popisu. Ovdje možete uređivati, brzo uređivati ​​ili brisati izbornike. Također možete pretraživati, filtrirati po datumu, pregledavati po statusu itd. Također pruža jedinstvenu Mega Pro klasu, tako da ih možete kopirati odavde, umjesto da otvarate svaku da biste dobili klasu.

Kad kopirate klasu, obavezno je zalijepite bez dodatnih razmaka. Inače svi mega-meniji na stranici više neće raditi.

Siguran sam da to ne bi bilo lako dodati, ali značajka kopiranja i uređivanja bila bi korisna. Divi rasporede možete spremiti u svoju knjižnicu za ponovnu upotrebu, ali to ne uključuje okolne postavke.

Dodavanje okidača

U polju Mega Pro Triggers vidjet ćete jednu Mega Pro klasu. Kopirajte ga i zalijepite u polje CSS klase stavke koju želite koristiti kao okidač.

Da biste dodali polje CSS klase stavci izbornika, morate omogućiti CSS klase. Na zaslonu izbornika odaberite Opcije zaslona i omogućite CSS klase.

Zalijepite CSS klasu u polje izbornika. Sada će ova stavka izbornika prikazati mega izbornik pri prelasku pokazivača i odvesti vas na stranicu na klik.

Primijetit ćete da je Divi Mega Pro također opcija u opcijama veza na izborniku. Izvrsne su za dodavanje stavke u izbornik koja zapravo nikamo ne vodi. Dodajte CSS klasu kao i bilo koju drugu stavku izbornika.

Kontaktirajte odjeljak na mega izborniku

Izbornik se otvara lebdenjem. Uvijek mogu kliknuti vezu Kontakt da bih otvorio stranicu za kontakt ako to želim. Ako bih samo želio da se prikaže mega izbornik, mogao bih samo upotrijebiti vezu glavnog izbornika Kontakt i preimenovati ga (kao u gornjem primjeru).

U ovom sam malo promijenio boje koristeći pozadinu i postavke zaslona, ​​a ne Divi Builder. Dodaje traku na dnu izbornika.

Jednostavan poziv na akciju sa stupcima izbornika

Ovo je jedan od modela koji dodaju više stupaca. Prilagodim boje pozadine i fonta. Također sam dodao strelicu i napravio širinu od 75%.

Opcije boje pozadine i fonta dodaju malo više kako bi se istaknule. Ostavio sam zadano poravnanje, koje postavlja izbornik s desne strane zaslona. Pozicioniranje možete prilagoditi u postavkama.

kartice

Predložak kartice uključuje modul koda s jQueryjem za stvaranje efekta lebdenja.

Karticama sam dodao sadržaj i prilagodio ih web mjestu. Svaka od poveznica s lijeve strane prikazuje različitu karticu u većini izbornika.

Informacije o konfiguracijama mjehurića

Za ovu sam dodala CSS klasu u neku zamućenost tako da se otvara mali skočni prozor pri lebdenju. Skočni prozor je samo slika sa sjenkom ispod.

Na slici iznad moj miš lebdi iznad riječi ŽIVA WEB STRANICA. Još nisam prilagodio pozicioniranje, ali lako je učiniti da se pojavi bilo gdje gdje želite.

Za ovaj sam stvorio skočni prozor za prikaz slike s nekim tekstom. Postavio sam smjer prikaza na Nisko i, kako bih ga prikazao pored slike koju želim dodati, dodao sam marginu od -300.

Skočni prozor se sada pojavljuje s lijeve i gornje strane slike kad zadržim pokazivač iznad njega. Dodao sam prozirnu boju pozadine, boju obruba, ispunu i zaokruženi obris.

Licenca i dokumentacija

Imate izbor između četiri licence:

• Jedno web mjesto - 15 USD godišnje
• Tri web mjesta - 29 dolara godišnje
• Neograničena web mjesta - 59 USD godišnje
• Neograničeno trajanje - 129 USD jednokratno

Dokumentaciju pruža video demonstracija, a članak na web mjestu objašnjava značajke i, korak po korak, objašnjava kako koristiti dodatak.

[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”]PREUZMI DIVI TEMU [/vcex_button][/vc_column][vc_column width=” 1 /2″][vcex_button url=”https://www.elegantthemes.com/affiliates/idevaffiliate.php?id=23065&url=40632&tid1=tutorials” target=”blank” layout=”expanded” align=”center” font_family = ”Raleway” font_weight=”700″ style=”flat” custom_background=”#c4226e” custom_hover_background=”#8d184f” custom_color=”#ffffff” custom_hover_color=”#ffffff” icon_right=”fa fa-download”]PREUZMITE predlošci DIVI[/vcex_button][/vc_column][/vc_row]

Ostali Divi tutoriali

• 5 web stranice za restoran korištenja Divi temu
• Kako dodati tekst na proizvod Divi WooCommerce
• Kako promijeniti boju izbornika između Divi stranica
• Kako personalizirati rešetke bloga s Divi-jem
• Kako koristiti uređivač uloga Divija na WordPressu
• Kako stvoriti klizač Divi na cijelom zaslonu
• Kako promijeniti boju izbornika između Divi stranica
• Značajke koje vjerojatno ne znate o Divi-ju
• Kako koristiti Divi Builder na WordPressu
• Kako koristiti modul za pomicanje videozapisa Divi
• Kako koristiti modul Divi Builder Flip
• Kako dodati testimonijalni modul na Divi Builderu
• Kako koristiti tekstualni modul Divi
• Kako stvoriti klizač na Divi
• Kako urediti Divi korisničku ulogu
• Kako koristiti modul Divi Social Media
• Kako se koristi modul trgovine na temi WordPress Divi
• Kako koristiti modul Divi bočne trake
• Kako koristiti modul Divi Table Table
• Kako koristiti naslovni modul Divi publikacija
• Kako dodati video modul Divi
• Kako koristiti navigacijski modul članka
• Kako koristiti modul Divi pretraživanja
• Kako koristiti modul Divi wallet
• Kako koristiti modul osobe na Divi Builderu
• Kako koristiti modul lisnice pomoću Divi filtar
• Kako koristiti modul klizača pune širine
• Kako koristiti modul Divi Builder Image
• Kako koristiti navigacijski modul pune širine Divi Buildera
• Kako se koristi modul galerije slika
• Kako koristiti modul Divi Builder za cijelu širinu kartice
• Kako koristiti modul Divi punog širine portfelja
• Kako se koristi Divi zaglavni modul pune širine
• Kako koristiti modul Divi Counter
• Kako koristiti klizač članaka na Divi Builderu
• Kako koristiti modul Divi Email Optin