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
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.
utgivare - du kan skapa megamenyn eller en verktygstips med Divi Builder.
Mega Pro Bakgrund - du kan välja bakgrunds- och teckensnittsfärger.
Visa platser - välj alla sidor eller namnge specifika sidor och ange undantag.
Mega Pro Animation - välj en animering. Välj mellan offset, offset, perspektiv, blekning eller skala.
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.
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.
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 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
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
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
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.
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.
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.
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
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
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%.
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
Flikmallen innehåller en kodmodul med jQuery för att skapa svävareffekten.
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
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.
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.
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
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
- 5 webbplatser för restaurang användning Divi tema
- Så här lägger du till text på en Divi WooCommerce-produkt
- Så här byter du menyfärg mellan Divi-sidor
- Hur du anpassar rutorna på en blogg med Divi
- Hur man använder roll Divi editor på Wordpress
- Hur man skapar en Divi-skjutreglage på full skärm
- Hur man ändrar menyens färg mellan Divi-sidor
- Funktioner du antagligen inte känner till Divi
- Så här använder du Divi Builder på WordPress
- Så här använder du Divi video-rullningsmodulen
- Så här använder du Divi Builder Flip-modulen
- Hur man lägger till en vittnesmodul om Divi Builder
- Så här använder du Divi-textmodulen
- Hur man skapar en reglage på Divi
- Hur man redigerar en Divi-användarroll
- Så här använder du Divi Social Media-modulen
- Hur man använder butikmodulen på temat WordPress Divi
- Så här använder du Divi sidebar-modulen
- Så här använder du Divi Price Table Module
- Hur man använder titelfodulen i Divi-publikationer
- Hur lägger jag till en videomodul av Divi
- Så här använder du artikelnavigationsmodulen
- Så här använder du Divi-sökmodulen
- Så här använder du Divi-plånboksmodulen
- Hur man använder personmodulen på Divi Builder
- Hur man använder plånboksmodulen med Divi-filter
- Hur man använder skjutreglaget med hela bredden
- Så här använder du Divi Builder Image Module
- Så här använder du Divi Builder med fullbredd navigationsmodul
- Hur man använder modulen för bildgalleri
- Så här använder du Divi Builder Full-Width Card Module
- Så här använder du Divi Full Width Portfolio Module
- Hur du använder Divi-modulen med full bredd
- Så här använder du Divi Counter Module
- Hur man använder artiklarna på Divi Builder
- Så här använder du Divi Email Optin-modulen
Hej:
Var kan jag se hur ett popup-fönster skapas?
Jag har inget sätt att få det. Jag kunde bara skapa en megameny, men popup-fönstren jag länkade öppnas inte.
Jag stötte på några e-postmeddelanden med Divi Life men de klargjorde inget för mig.
Tack så mycket.
Optin Monster: https://optinmonster.com