Gå till innehållet

WordPress plugin recension: Divi Mega Pro

Divi: det enklaste WordPress-temat att använda

Divi: Det bästa WordPress-temat hela tiden!

mer 901.000-nedladdningar, Divi är det mest populära WordPress-temat i världen. Den är komplett, lätt att använda och levereras med mer än 62 gratis mallar. [Rekommenderas]

Mega-menyer är ett populärt designelement som kan ge din webbplats en elegant boost samtidigt som besökarna får ett extra lager av navigering. Det finns flera sätt att lägga till mega-menyer i Divi. En av de enklaste metoderna jag har använt ären 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 mega meny divi 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.

utformning av en Mega Pro.png-meny

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

ändra bakgrunden för mega menu.png

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

välj platsen för menyn.png

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

välj animeringen av menyn.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.

anpassning av divi.png knappar

Skapa enkelt din webbplats med Elementor

Med Elementor kan du enkelt skapa en webbdesign med ett professionellt utseende. Sluta betala dyra för vad du kan göra själv. [Fritt]

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 konfigurations 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

divi mega pro.png-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

välj väljaren 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

Letar du efter de bästa WordPress-teman och plugins?

Ladda ner de bästa plugins och WordPress-teman på Envato och enkelt skapa din webbplats. Redan mer än 49.720.000-nedladdningar. [EXKLUSIV]

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.

divi mega meny design 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

kontakt sektion mega-menyn 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

designkontakt sektion 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 meny divi.png

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

demo-meny med flik 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 infobulles 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

Skapa enkelt din webbutik

Ladda ner gratis WooCommerce, de bästa e-handelspluggarna för att sälja dina fysiska och digitala produkter på WordPress. [Rekommenderas]

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.

resultatinfo 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.

Andra Divi tutorials

Den här artikeln innehåller kommentarer 2

  1. 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.

Lämna en kommentar

Din e-postadress kommer inte att publiceras. Obligatoriska fält är markerade *

Den här webbplatsen använder Akismet för att minska oönskade. Läs mer om hur dina kommentarer data används.

Tillbaka till toppen
4 aktier
del4
tweet
Enregistrer