Hur man skapar en megameny i Elementor | Mega Meny Builder

Om du funderar på att skapa en Elementor mega-meny i WordPress, kan ElementsKits Mega Menu-modul göra processen enkel och snabb. Läs den här dokumentationen för att lära dig hur du skapar en megameny i WordPress med hjälp av ElementsKit i några enkla steg.

Översikt #

ElementsKit är allt-i-ett-tillägget som ger dig det bästa möjliga sättet att bygga WordPress-webbplatser med ett brett utbud av widgets, moduler och mycket anpassningsbara fördesignade mallar.

Det inkluderar Mega Menu-modul från ElementsKit plugin. En megameny är en kraftfull funktion i WordPress som låter dig skapa en kategoribaserad expanderbar meny med flexibla layouter. Elementor Mega-menyer är lätta att använda och kan vara ett bra sätt att visa webbmenyn på ett organiserat sätt.

Se vår videoguide:

Eller följ steg-för-steg-instruktionerna om hur du skapar megameny i Elementor:

Nödvändig förutsättning: #

Hur man skapar WordPress Mega Menu i Elementor #

Först och främst innan skapa en Elementor Mega Menu i WordPress se till att aktivera ElementsKit Mega meny modul från ElementsKit > Modul på din WordPress-instrumentpanel.

Hur man skapar en Elementor megameny i WordPress

Steg #1: Konfigurationsmenyn #

Till skapa en megameny för WordPress på din webbplats,

  • Navigera till Utseende > Menyer från WordPress-instrumentpanelen.
  • Klicka på Skapa en ny meny.
hur man skapar en megameny i elementor
  • Ange a Menynamn.
  • Klicka på Skapa meny knapp.
skapa en megameny i WordPress

Nu kan du lägg till objekt till megamenyn. För det,

  • Bygga ut Anpassade länkar på "Lägg till menyalternativ" i den högra kolumnen.
  • Ange a URL och Länktext.
  • Klicka på Lägg till i menyn.

Lägg sedan till andra menyalternativ på samma sätt.

anpassa megamenyn på WordPress-webbplatser

Efter det, markera kryssrutan för "Aktivera denna meny för Megameny-innehåll”. När megamenyn är aktiverad klickar du mega menyinställningar ikon när du håller muspekaren över menyalternativen.

Elementor mega menyskapande

Steg #2: Anpassa Elementor Megameny-innehåll #

När du klickar på ikonen för megamenyinställningar öppnas en popup. På popupen,

  • Växlingsknapp för att aktivera Mega Menu.
  • Klicka på Spara knapp.
  • Efter det klickar du på REDIGERA MEGAMENU-INNEHÅLL knapp. Den tar dig till Elementor-redigeringsknappen.
anpassa megamenyinnehåll för Elementor
  • Klicka på ElementsKit mallbiblioteksikon
Ekit mega meny
  • Gå till sektioner=> Klicka på Kategori=> Välj Megameny från listan.
ElementsKit mega meny plugin
  • Sätt in valfri Elementor Mega meny Innehåll.
mega menyinnehåll
  • Du kommer att se att ditt infogade objekt visas.
mega menyförhandsvisning i Elementor

Kontrolllayout #

  • Redigera den inre delen genom att klicka på det prickade avsnittet.
  • Innehållsbreddslåda: Anpassa din innehållsbredd genom att dra höger eller vänster.
  • Innehåll i full bredd: Välj Full bredd.
mega menylayout

Välj Kolumn Gap #

  • Kolumn Gap=> Välj ditt kolumngap från falla ner.
rullgardinsmeny för megameny

Välj Position #

  • Höjd: Välj din höjd genom att dra från vänster till höger.
  • Vertikal justering: Välj Vertical Align från rullgardinsmenyn.
  • Svämma över: Välj Overflow Default eller Hidden.
anpassa megamenypositioner

Stretch avsnitt #

Växla den här knappen för att vända megamenyn till full bredd, som sträcker sig från höger till vänster om skärmens bredd.

Välj HTML-tagg #

  • Välj din HTML-tagg från Falla ner.
mega meny rullgardinsmeny

Om du vill se det i aktion, titta på den här videon och gör det själv inom några minuter.

Anpassa Mega Menu Rubrik Text #

  • Välj ikontyp.
  • Aktivera för att lägga till ikon.
  • Ladda upp rubrikikon.
  • Lägg till eller redigera titel.
  • Lägg till Redigera beskrivning.
mega menylayout

Anpassa text #

  • Lägg till eller redigera Text.
  • Lägg till eller redigera Texta.
  • Göra det möjligt att Visa etikett.
  • Lägg till eller redigera Märka.
  • Anpassa Bakgrundsfärg, typografi, stoppning, justering, radie.
  • När du är klar klickar du på uppdatera och stäng fönstret.
anpassa megamenytexter

Steg #3: Anpassa ikon #

  • Gå nu till Ikon Tab=> Välj valfri färg från Färgpalett.
ikonanpassning för menyn
  • Välj Ikon från Ikon bibliotek.
menyikonbibliotek för ElementsKit, ett megamenyplugin för Elementor

Steg #4: Anpassa märket #

  • Lägg till eller redigera text.
  • Välja Badge färg.
  • välja Badge bakgrundsfärg.
  • Klick Spara.
Hur man lägger till megameny i WordPress Elementor

Steg #5: Inställningar #

Standardbredd #

  • Välj Mega Menu Width: Standard.
  • Välj Mega Menu Position: Standard.
  • Spara fönstret.
  • Webbplatsvy: Visar standardbredd med standardposition.
Hur man lägger till megameny i WordPress Elementor

Standardrelativ  #

  • Välj Mega Menu Width: Standard.
  • Välj Mega Menu Position: Relativ.
  • Klick Spara.
  • Webbplatsvy: Visar standardbredd med relativ position.
Hur man bygger en megameny med ElementsKit

Standard full bredd #

  • Välj Mega Menu Width: Full bredd.
  • Välj Mega Menu Position: Standard.
  • Klick Spara.
  • Webbplatsvy: Visar full bredd med standardposition.
Inställningar för megameny med ElementsKit

Full bredd relativ position #

  • Välj Mega Menu Width: Full bredd.
  • Välj Mega Menu Position: Relativ.
  • Klick Spara.
  • Webbplatsvy: Som visar Full bredd med relativ position.
Ställa in full bredd relativ position för megameny med ElementsKit

Anpassad standardbredd #

  • Välj Mega Menu Width: Anpassad bredd.
  • Ange vilken anpassad bredd som helst, men det är det som standard 750 pixlar.
  • Välj Mega Menu Position: Standard.
  • Klick Spara.
  • Webbplatsvy: Som visar Anpassad bredd med standardposition.
Hur man redigerar navigeringsmenyn med ElementsKit

Anpassad standardbredd Relativ #

  • Välj Mega Menu Width: Anpassad bredd.
  • Ange vilken anpassad bredd som helst, men det är det som standard 750 pixlar.
  • Välj Mega Menu Position: Relativ.
  • Klick Spara.
  • Webbplatsvy: Som visar Anpassad bredd med relativ position.

Steg #6: Skapa en huvudmall #

Här kan du använda Elementor Header Mall eller så kan du använda ElementsKit Header Mall. Låt oss se till att lägga till det.

  • Navigera till ElementsKit→ Sidhuvud Sidfot→ och klicka Lägg till ny.
  • En popup-ruta öppnas med alternativ.
Hur man bygger rubrikmall med hjälp av ElementsKit
  • Skriv a i popup-rutan Titel, Välj Skriv→ Rubrik.
  • Välj Villkor→ Hela webbplatsen.
  • Växla på Aktivering alternativet och klicka på Redigera med Elementor.
Skapa header med ElementsKit
  • Välj din Strukturera från det valda området.
Bygg nav-meny med ElementsKit
  • Sök nu Nav-meny=> Dra Ekit Nav-meny och Släppa på det valda området.

** Notera: Se till att dra i ElementsKit Nav-menyn annars kommer din skapade Meg-meny inte att visas.

Hur man lägger till nav-meny med ElementsKit
  • Gå nu till Menyinställningar=> välj din skapade Huvudmeny från rullgardinsmenyn.
  • Du kan lägga till vilken typ av widget som helst härifrån för att anpassa din rubrikmall.
Dra och släpp navigeringsmenyn för att bygga rubrik

Slutlig utgång #

När du är klar klickar du på Uppdatering för att spara menyn.

Gå nu till din webbplats och du kan se att din valda Elementor Mega-meny visas i enlighet med detta.

sista utseendet på megamenyn
Vad är dina känslor
Uppdaterad den 5 december 2024