Megamenyer är ett populärt designelement som kan ge din webbplats en explosion av elegans samtidigt som du erbjuder besökare ett extra navigationslager. Det finns flera sätt att lägga till megamenyer till Divi. En av de enklaste metoderna jag har använt är atten tredjeparts plug-in som heter Divi Mega Pro .

Divi Mega Pro gör det enkelt att skapa mega-menyer med Divi Builder. Varje meny kan läggas till valfritt element med hjälp av en CSS-klass. Det betyder att du kan lägga till en Divi-layout i valfri länk i menyn, men du kan gå ännu längre och lägga till dem i alla element i en Divi-layout bara genom att lägga till en CSS-klass.

Det är perfekt för att skapa menyer och popup-fönster med butiksmoduler, bilder, skjutreglage, portföljer, ikoner, oskärpa, videor, bloggar etc. Det fungerar också med Extra.

Skapa en Mega Pro Mega-meny

skapa en divi mega-meny med divi mega.png

Divi Mega Pro-menyn läggs till i instrumentpanelmenyn. Här kan du ange din licensnyckel, se menyerna du har skapat och skapa en ny meny. När du klickar för att lägga till en ny meny ser du en redigerare för menyposttypen. Skärmen är enkel, men det händer mycket här.

designa en meny Mega Pro.png

utgivare - du kan skapa megamenyn eller en verktygstips med Divi Builder.

ändra megameny background.png

Mega Pro Bakgrund - du kan välja bakgrunds- och teckensnittsfärger.

välj meny location.png

Visa platser - välj alla sidor eller namnge specifika sidor och ange undantag.

välj meny animation.png

Mega Pro Animation - välj en animering. Välj mellan offset, offset, perspektiv, blekning eller skala.

välj trigger css.png

Mega Pro Triggers - lägg till en trigger som en CSS-väljare. När du har sparat den ser du CSS-klassen som du klistrar in i CSS-klassfältet i ett menyalternativ, modul, rad eller avsnitt. Det här är vad man klickar på eller svävar för att visa menyn. Allt kan användas som utlösare och inte bara som ett menyalternativ. Detta innebär att du också kan använda Divi Mega Pro för att skapa popup-fönster eller verktygstips.

konfigurationsmeny stil divi.png

Mega Pro-skärminställningar : Välj visningsriktning (upp eller ner), ange topp- och bottenmarginaler i pixlar, välj en procentandel av bredden och aktivera en pil. Att aktivera pilen visar fler anpassningar där du kan välja piltyp (triangel eller rund), välja färg, ställa in bredd och höjd och förhandsgranska pilen.

knappanpassning divi.png

anpassningar stäng-knappen: aktivera stäng-knappen på skrivbordet eller på mobilen och anpassa stäng-knappen. Om du aktiverar det förhandsgranskas anpassningar för textfärg, bakgrundsfärg, teckenstorlek, kantradie, fyllning och visning.

ytterligare konfiguration divi mega pro.png

Ytterligare parametrar Mega Pro - välj typ av utlösare (svävad eller klickad), typ av utgång (svävad eller klickad) och ange utgångsfördröjningen.

Divi Mega Pro-modeller

olika mallar tillgängliga divi mega pro.png

Utvecklaren har tillhandahållit flera modeller för Divi Mega Pro. När du köper plugin-programmet finns dessa mallar tillgängliga i ditt konto på fliken Mallar för plugin-layout. Dessa är bra för att hjälpa dig att börja designa dina mega-menyer. Jag kommer att använda några i mina exempel.

Divi Mega Pro-menyn

meny divi mega pro.png

När du väl har skapat en megameny visas den i listan. Här kan du redigera, snabbt redigera eller radera menyerna. Du kan också söka, filtrera efter datum, visa efter status etc. Det ger också den unika Mega Pro-klassen så att du kan kopiera dem härifrån istället för att öppna var och en för att få klassen.

När du kopierar klassen måste du klistra in den utan ytterligare mellanrum. Annars fungerar inte alla mega-menyer på sidan.

Jag är säker på att det inte skulle vara lätt att lägga till, men en kopierings- och redigeringsfunktion skulle vara praktisk. Du kan spara Divi-layouterna i ditt bibliotek för återanvändning, men det inkluderar inte de omgivande inställningarna.

Lägga till en trigger

välj selector divi.png

I Mega Pro Triggers-fältet ser du en enda Mega Pro-klass. Kopiera och klistra in den i CSS-klassfältet för det objekt du vill använda som utlösare.

klasser css.jpg

För att lägga till CSS-klassfältet i ett menyalternativ måste du aktivera CSS-klasser. Välj på menyskärmen Alternativ för skärm och aktivera CSS-klasser.

lägg till en klass css-meny divi.png

Klistra in CSS-klassen i menyfältet. Nu kommer detta menyalternativ att visa mega-menyn på svävaren och ta dig till sidan vid klick.

menydesign divi mega pro.png

Du kommer att märka att Divi Mega Pro också är ett alternativ i menylänkalternativen. De är bra för att lägga till ett menyalternativ till menyn som faktiskt inte går någonstans. Lägg till CSS-klassen som alla andra menyalternativ.

Kontakta sektionen på huvudmenyn

kontaktsektion mega menu pro.png

Menyn öppnas i svävar. Jag kan alltid klicka på länken Kontakt för att öppna kontaktsidan om jag vill. Om jag bara ville att mega-menyn skulle visas kunde jag bara använda länken Kontakt Huvudmeny och byta namn på den (som i exemplet ovan).

I den här ändrade jag färgerna något med hjälp av bakgrunds- och skärminställningarna snarare än med Divi Builder. Det lägger till en stapel längst ner på menyn.

Enkel uppmaning till handling med menykolumner

design kontakt avsnitt divi mega pro.png

Detta är en av modellerna som lägger till flera kolumner. Jag gör justeringar i bakgrunds- och teckensnittsfärger. Jag lade också till en pil och gjorde bredden 75%.

ändra bakgrundsfärg divi mega pro.png

Bakgrundsfärgen och teckensnittsalternativen lägger till lite mer så att den sticker ut. Jag lämnade standardjusteringen, vilket placerar menyn till höger om skärmen. Du kan justera positioneringen i inställningarna.

flikar

menydesign med flikar mega menu divi.png

Flikmallen innehåller en kodmodul med jQuery för att skapa svävareffekten.

demomeny med tab divi mega pro.png

Jag lade till innehåll på flikarna och anpassade dem till webbplatsen. Var och en av länkarna till vänster visar en annan flik i det mesta av menyn.

Info Bubbles konfigurationer

demo tooltips divi.png

För den här lade jag till CSS-klassen i någon blurb så att den öppnar en liten popup på svävaren. Pop-up är bara en bild med en skugga nedan.

I bilden ovan svävar min mus över orden LIVE WEBBPLATS. Jag har inte justerat positioneringen än, men det är lätt att få den att visas var du vill.

design info bull divi mega pro.png

För den här skapade jag en popup för att visa en bild med lite text. Jag ställde in visningsriktningen på Låg och för att få den att visas bredvid den bild jag vill lägga till lade jag till en marginal på -300.

resultat info bubble divi.png

Pop-up-fönstret visas nu till vänster och överst på bilden när jag svävar över den. Jag lade till transparent bakgrundsfärg, kantfärg, fyllning och rundade konturer.

Licens och dokumentation

licens och demonstration.png

Du har valet mellan fyra licenser:

  • Enstaka webbplats - $ 15 per år
  • Tre platser - $ 29 per år
  • Obegränsade webbplatser - $ 59 per år
  • Obegränsad livstid - $ 129 en gång

Dokumentationen tillhandahålls av en videodemonstration och en artikel på webbplatsen förklarar funktionerna och steg för steg förklarar hur du använder 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=”platt” custom_background=”#18b69d” custom_hover_background=”#118d7a” custom_color=”#ffffff” custom_hover_color=”#ffffff” icon_right=”fa fa-download”]LADDA NED 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”]LADDA NED DEN TEMPLATES DIVI[/vcex_button][/vc_column][/vc_row]

Andra Divi tutorials