Mega menuer er et populært designelement, der kan give din Websted et udbrud af elegance, mens du tilbyder besøgende et ekstra navigationslag. Der er flere måder at tilføje mega-menuer til Divi. En af de nemmeste metoder, jeg har brugt, er atet tredjeparts plug-in kaldet Divi Mega Pro .

Divi Mega Pro gør det nemt at oprette mega-menuer ved hjælp af Divi Builder. Hver menu kan føjes til ethvert element ved hjælp af en CSS-klasse. Dette betyder, at du kan tilføje et Divi-layout til ethvert link i menuen, men du kan gå endnu længere og tilføje dem til ethvert element i et Divi-layout bare ved at tilføje en CSS-klasse.

Det er ideelt til at oprette menuer og pop op-vinduer med butiksmoduler, billeder, skydere, porteføljer, ikoner, blurb, videoer, blogs osv. Det fungerer også med Extra.

Opret en Mega Pro Mega Menu

opret en mega-menu divi med divi mega.png

Divi Mega Pro-menuen føjes til dashboardmenuen. Her kan du indtaste din licensnøgle, se de menuer, du har oprettet, og oprette en ny menu. Når du klikker for at tilføje en ny menu, vil du se en editor til menuposttypen. Skærmen er enkel, men der foregår meget her.

design af en Mega Pro.png menu

Publisher - du kan oprette mega-menuen eller et værktøjstip ved hjælp af Divi Builder.

ændre baggrunden for mega menu.png

Mega Pro Baggrund - du kan vælge baggrunds- og skrifttypefarver.

vælg placeringen af ​​menu.png

Se steder - vælg alle sider eller navngiv specifikke sider, og indtast derefter undtagelser.

vælg animationen af ​​menu.png

Mega Pro Animation - vælg en animation. Vælg mellem offset, offset, perspektiv, fade eller skala.

vælg trigger css.png

Mega Pro Triggers - tilføj en trigger som en CSS-vælger. Når du har gemt det, vil du se den CSS-klasse, som du skal indsætte i CSS-klassefeltet i et menupunkt, modul, række eller sektion. Dette er hvad der klikkes eller holdes over for at få vist menuen. Alt kan bruges som udløser og ikke kun som et menupunkt. Dette betyder, at du også kan bruge Divi Mega Pro til at oprette pop op-vinduer eller værktøjstip.

konfigurationsmenu stil divi.png

Mega Pro skærmindstillinger : vælg visningsretningen (øverst eller nederst), indtast top- og bundmargenerne i pixels, vælg en procentdel af bredden og aktiver en pil. Aktivering af pilen afslører flere tilpasninger, hvor du kan vælge piletype (trekant eller rund), vælge farve, indstille bredde og højde og få vist pilen.

tilpasning af divi.png knapper

tilpasninger luk-knappen: aktiver luk-knappen på skrivebordet eller på mobilen og tilpas luk-knappen. Hvis du aktiverer det, vises der tilpasninger til tekstfarve, baggrundsfarve, skriftstørrelse, kantradius, udfyldning og visning.

Yderligere konfiguration divi mega pro.png

Yderligere parametre Mega Pro - vælg typen af ​​trigger (svævet eller klikket), typen af ​​output (svævet eller klikket) og indtast udgangsforsinkelsen.

Divi Mega Pro-modeller

forskellige skabeloner tilgængelige divi mega pro.png

Udvikleren har leveret flere modeller til Divi Mega Pro. Når du køber pluginet, er disse skabeloner tilgængelige på din konto i fanen Plugin Layout Templates. Disse er gode til at hjælpe dig med at begynde at designe dine mega-menuer. Jeg vil bruge nogle få i mine eksempler.

Divi Mega Pro Menu

divi mega pro.png menu

Når du opretter en mega-menu, vises den på listen. Her kan du redigere, hurtigt redigere eller slette menuerne. Du kan også søge, filtrere efter dato, se efter status osv. Det giver også den unikke Mega Pro-klasse, så du kan kopiere dem herfra i stedet for at åbne hver enkelt for at få klassen.

Når du kopierer klassen, skal du huske at indsætte den uden yderligere mellemrum. Ellers fungerer alle mega-menuerne på siden ikke mere.

Jeg er sikker på, at det ikke ville være let at tilføje, men en kopierings- og redigeringsfunktion ville være praktisk. Du kan gemme Divi-layoutene i dit bibliotek til genbrug, men dette inkluderer ikke de omgivende indstillinger.

Tilføjelse af en trigger

vælg vælger divi.png

I feltet Mega Pro Triggers vil du se en enkelt Mega Pro-klasse. Kopier og indsæt det i CSS-klasse-feltet på det element, du vil bruge som udløser.

klasser css.jpg

For at føje CSS-klasse-feltet til et menupunkt, skal du aktivere CSS-klasser. Fra menuskærmen skal du vælge Skærmindstillinger og aktiver CSS klasser.

tilføj en klasse css menu divi.png

Indsæt CSS-klassen i menufeltet. Nu viser dette menupunkt mega-menuen, når du holder markøren, og fører dig til siden ved klik.

divi mega menu design pro.png

Du vil bemærke, at Divi Mega Pro også er en mulighed i menulinkindstillingerne. De er gode til at tilføje et menupunkt til menuen, der faktisk ikke går nogen steder. Tilføj CSS-klassen som ethvert andet menupunkt.

Kontakt sektion på mega menuen

kontakt sektion mega menu pro.png

Menuen åbnes svævende. Jeg kan altid klikke på linket Kontakt for at åbne kontaktsiden, hvis jeg vil. Hvis jeg bare ville have mega-menuen vist, kunne jeg bare bruge linket Kontakt hovedmenu og omdøbe det (som i eksemplet ovenfor).

I denne ændrede jeg farverne lidt ved hjælp af baggrunds- og skærmindstillingerne i stedet for at bruge Divi Builder. Det tilføjer en bjælke nederst i menuen.

Enkel opfordring til handling med menukolonner

design kontakt sektion divi mega pro.png

Dette er en af ​​de modeller, der tilføjer flere kolonner. Jeg foretager justeringer af baggrunds- og skrifttypefarver. Jeg tilføjede også en pil og lavede bredden 75%.

ændre baggrundsfarve divi mega pro.png

Baggrundsfarven og skrifttypemulighederne tilføjer lidt mere for at få det til at skille sig ud. Jeg forlod standardjusteringen, som placerer menuen til højre for skærmen. Du kan justere placeringen i indstillingerne.

faner

menu design med faner mega menu divi.png

Faneskabelonen indeholder et kodemodul med jQuery for at skabe svæveeffekten.

demo menu med fan divi mega pro.png

Jeg tilføjede indhold til fanerne og tilpassede dem til webstedet. Hvert af linkene til venstre viser en anden fane i det meste af menuen.

Info Bubbles konfigurationer

demo infobulles divi.png

Til denne tilføjede jeg CSS-klassen til en eller anden blurb, så den åbner en lille pop-up-svæver. Pop-up er kun et billede med en skygge nedenfor.

På billedet ovenfor svæver min mus over ordene LIVE WEBSITE. Jeg har ikke justeret placeringen endnu, men det er let at få det til at vises hvor som helst du vil.

design info bull divi mega pro.png

Til denne oprettede jeg en popup for at vise et billede med lidt tekst. Jeg har indstillet skærmretningen til Lav, og for at få den til at vises ud for det billede, jeg vil tilføje, har jeg tilføjet en margen på -300.

resultat info bubble divi.png

Pop op vises nu til venstre og øverst på billedet, når jeg holder markøren over det. Jeg tilføjede en gennemsigtig baggrundsfarve, kantfarve, udfyldning og afrundet omrids.

Licens og dokumentation

licens og demonstration.png

Du har valget mellem fire licenser:

  • Enkelt websted - $ 15 pr. År
  • Tre steder - $ 29 om året
  • Ubegrænsede websteder - $ 59 pr. År
  • Ubegrænset levetid - $ 129 én gang

Dokumentationen leveres af en videodemonstration, og en artikel på websitet forklarer funktionerne og trin for trin forklarer, hvordan man bruger 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=”flad” custom_background=”#18b69d” custom_hover_background=”#118d7a” custom_color=”#ffffff” custom_hover_color=”#ffffff” icon_right=”fa fa-download”]DOWNLOAD DIVI TEMA [/vcex_button][/vc_column 1 ][vc_column" /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”]DOWNLOAD THE TEMPLATES DIVI[/vcex_button][/vc_column][/vc_row]

Andre Divi tutorials