Wpmet Flash Sale

OP TIL

80%
Opsparing

Slutter på:
Wpmet symbol
Dag
Hrs
Min
Sec

Sådan opbygger du en megamenu i WordPress med Elementor

Ataur Rahman

,
6 minutter
Sådan bygger du en megamenu med elementor og elementkit

Kan du forestille dig en stor hjemmeside uden en navigationsmenu? 
Ingen måde!

94% of users say it’s the most important feature of a website. So, easy navigation matters! That’s why mega menus are so effective. They organize categories and subcategories into a single, clear layout, making it easy for visitors to find what they need.

Sites like Amazon og eBay use mega menu to give the best user experience. Mega menus are ideal for e-commerce, news, blogs, and businesses with lots of content.

This article will show you how to create a functional and stylish mega menu med Elementor.

What do you need to create the mega menu with Elementor?

The only thing you need to create the mega menu using Elementor is ElementsKit.

Bruger ElementsKit Mega Menu Builder du kan oprette og tilpasse enhver type Megamenu med en Elementor live-indholdsgrænseflade.

You will get variations in the mega menu such as the Nav menu og Lodret Mega Menu along with many customization options. 

Overall, ElementsKit Elementor Mega Menu is a full featured-packed module for your professional site that easily ranks top among the best WordPress Mega Menu builders for Elementor.

For at følge denne vejledningsblog skal du bruge to ting ->

Hent ElementsKit
Hent ElementsKit Pro

Eller følg trin for trin instruktionerne:

Sørge for at Megamenu modul er PÅ fra ElementsKit → MODULER.

Trin #1: Tilføj menu

For at oprette en megamenu i Elementor skal du oprette en menu fra WordPress dashboar. For at gøre det,

  • Naviger til Udseende > Menu.
  • Klik på Opret en ny menu.
  • Give Menunavn > Tjek Afkrydsningsfelt > Opret menu.
  • Klik på Brugerdefineret link > give Link og Tilføj menupunkter på samme måde.

Trin #2: Tilpas Megamenu-indhold

In this step, you can add mega menu items from the WordPress menu you have created.

Marker afkrydsningsfeltet "Aktiver denne menu for Megamenu-indhold" > Klik på Mega menu med indstillingsikon på hvilket menupunkt du vil tilføje Mega Menu.

  • En pop op åbnes, skift til Mega menu mulighed, og Gemme. Klik derefter på the REDIGER MEGAMENU-INDHOLD knap.

Vælg skabelon

  • Klik på Elementskit Skabelonbiblioteksikon, og naviger derefter til Overskrifter.
  • Klik på Header > Mega menuindhold > Indsæt evt Mega menu.

Kontrol layout

  • Rediger den indre sektion ved at klikke på det stiplede afsnit.
  • Indholdsbredde boks: Tilpas din indholdsbredde ved at trække til højre eller venstre.
  • Indhold i fuld bredde: Vælg Fuld bredde.

Vælg Column Gap

  • Kolonnegab=> Vælg dit kolonnegab fra falde ned.

Vælg Position

  • Højde: Select your Height dragging Left to Right.
  • Vertical Align: Select Vertical Align from the Drop Down.
  • Flyde over: Select Overflow Default or Hidden.

Vælg HTML-tag

  • Vælg din HTML-tag fra Drop Down.

Tilpas Mega Menu Overskriftstekst

  • Vælg ikontype.
  • Aktiver for at tilføje ikon.
  • Upload header-ikon.
  • Tilføj eller rediger titel.
  • Tilføj Rediger beskrivelse.

Tilpas tekst

  • Tilføj eller rediger tekst.
  • Tilføj eller rediger undertitel.
  • Aktiver for at vise etiket.
  • Tilføj eller rediger etiket.
  • Tilpas baggrundsfarve, typografi, polstring, justering, radius.

Trin #3: Tilpas ikon

  1. Klik på 'Opdatering' for at gemme menuen > Luk editoren.
  2. Gå nu til fanen Ikon > Vælg en hvilken som helst farve fra farvepaletten.
  3. Vælg Icon fra Icon Library.
  4. Gå nu til webstedet > Valgt ikon og farve dukkede op.

Trin #4: Tilpas badge

  • Tilføj eller rediger tekst.
  • Vælge Badge farve.
  • Vælge Badge baggrundsfarve.
  • Klik Gemme.

Trin #5: Indstillinger

Standardbredde

  • Vælg Mega Menu Bredde: Standard.
  • Vælg Mega Menu Position: Standard.
  • Gem vinduet.
  • Site View: Viser standardbredde med standardposition.

Standard relativ 

  • Vælg Mega Menu Bredde: Standard.
  • Vælg Mega Menu Position: I forhold.
  • Klik Gemme.
  • Site View: Viser standardbredde med relativ position.

Standard fuld bredde

  • Vælg Mega Menu Bredde: Fuld bredde.
  • Vælg Mega Menu Position: Standard.
  • Klik Gemme.
  • Site View: Viser fuld bredde med standardposition.

Fuld bredde relativ position

  • Vælg Mega Menu Bredde: Fuld bredde.
  • Vælg Mega Menu Position: I forhold.
  • Klik Gemme.
  • Site View: Viser Fuld bredde med relativ position.

Brugerdefineret standardbredde

  • Vælg Mega Menu Bredde: Brugerdefineret bredde.
  • Angiv enhver tilpasset bredde, men som standard er den det 750 pixels.
  • Vælg Mega Menu Position: Standard.
  • Klik Gemme.
  • Site View: Viser Brugerdefineret bredde med standardposition.

Brugerdefineret standardbredde I forhold

  • Vælg Mega Menu Bredde: Brugerdefineret bredde.
  • Angiv enhver tilpasset bredde, men som standard er den det 750 pixels.
  • Vælg Mega Menu Position: I forhold.
  • Klik Gemme.
  • Site View: Viser Brugerdefineret bredde med relativ position.

Trin #6: Opret en header-skabelon

Her kan du bruge Elementor Header skabelon eller du kan bruge ElementsKit Header skabelon.

  • Søg nu Nav menu > Træk i Ekit Nav Menu og Dråbe på det valgte område. Sørg for at trække ElementsKit Nav-menuen, ellers vises din oprettede Meg-menu ikke.
  • Gå til Menuindstillinger > vælg din oprettede Overskriftsmenu fra rullemenuen.
  • Du kan tilføje enhver type widget herfra for at tilpasse din header-skabelon.
  • Når du er færdig, skal du klikke på Opdatering knappen for at gemme menuen.
  • Gå nu til dit websted, og du kan se, at din valgte Megamenu vises i overensstemmelse hermed.

For at lære flere detaljer om oprettelse af megamenu i WordPress, kan du gå gennem dokumentationen af ElementsKit Mega Menu widget til Elementor.

Hvad er det næste?

Once you’ve finished creating the mega menu in Elementor, make sure to preview it. If you’re satisfied with the style, finalize and publish it. However, if you later find that it isn’t as attractive as you initially thought, you can change it at any time.

To understand how users interact with the style, consider integrating a heatmap tool like Clarity.

Opret Mega Menu ved hjælp af Gutenberg

Hvis du har bygget din hjemmeside i WordPress blocks editor, kan du også opret mega menu i Gutenberg jævnt. GutenKit blok editor plugin kommer med den nemmeste måde at skabe WordPress mega menu i Gutenberg.

With GutenKit, you can create the entire menu in the editor and design mega menu in both vertical and horizontal orientation.

All you need is to install GutenKit Pro plugin and start building your beautiful site in Gutenberg.

Afslutter

Endelig har vi nået det til ende. Jeg håber, vi var i stand til at hjælpe dig med denne tutorial! Og nu kan du bygge en brugerdefineret Elementor mega-menu ved at bruge ElementsKit!

Du kan se alle disse trin i en enkelt video her.

Hvis du har flere bekymringer eller er stødt på andre problemer, så lad os det vide i kommentarfeltet!

Kommentarer

  1. Peter Avatar
    Peter
    Svar

    Hej,
    god tutorial!
    Jeg har stadig et spørgsmål om Mega Menu:
    Kan jeg åbne Mega-menuen ved at klikke og ikke ved at svæve?
    Jeg ville blive meget glad for et svar.
    Vær hilset,
    Peter

    1. Tanjana Sabrin Avatar
      Tanjana Sabrin
      Svar

      Hej Peter,

      Mange tak for din påskønnelse. Det betyder meget for os. I øjeblikket er funktionen ikke tilgængelig. Men du kan helt sikkert anmode om en funktion til det. Vi tilføjer løbende nye funktioner i henhold til vores kunders behov.

      Her er linket - https://wpmet.com/plugin/elementskit/roadmaps/#ideas. Bare del din fantastiske idé og klik på indsend-knappen. 😍

      Vær sikker 😃

  2. Andrew Avatar
    Andrew
    Svar

    Hej,
    Jeg elsker din mega menubygger, men jeg har et lille problem.
    En af mine mega menuer er yderst til højre i min overskrift, og en del af mega menuen forsvinder i højre side.
    Er der en mulighed for at justere megamenuen til højre, venstre eller centreret?

    Tak

    1. Ayub Ali Avatar
      Ayub Ali
      Svar

      Hej Andrew,

      Uden at tjekke dit websted kan vi ikke fortælle dig, hvad der præcist forårsager dette problem. Så giv os venligst dit live-webstedslink eller relevante skærmbillede for at forstå problemet klart. Men du kan prøve at ændre megamenupositionen til standard ved at følge dette skærmbillede (https://d.pr/i/ccf6RC). Fortæl os opdateringen her eller bedre, hvis du kan åbne en supportbillet: https://help.wpmet.com/

  3. Farzan Avatar
    Farzan
    Svar

    Hej med dig, tak for den fantastiske tutorial! Jeg kunne anvende alt, bare et mindre problem. I headeren har jeg 4 sider, en af dem har en mega menu, hvis du holder musemarkøren over den. I headeren kan jeg dog ikke klikke på den overordnede side (med navnet: persoonlijk), jeg kan kun klikke på emnerne i mega-headeren. Kan du se, hvad jeg mangler? (siden er stadig under udvikling, men du kan se overskriften i https://insight.nl/home url. Jeg vil gerne have mulighed for også at kunne klikke på knappen PERSOONLIJK. Kan du hjælpe mig med at finde ud af, hvad jeg gjorde forkert der?
    På forhånd mange tak.

    1. Ayub Ali Avatar
      Ayub Ali
      Svar

      Hej Farzan, Da dette er et teknisk problem, og du måske har brug for personlig hjælp, vil jeg foreslå dig at åbne en supportbillet fra https://help.wpmet.com/

      Da vores supportteam er meget hjælpsomme, kan jeg sige, at de vil gøre deres bedste for at løse dit problem ASAP.

      Bedste ønsker.

  4. Mani Avatar
    Mani
    Svar

    Mange tak for denne fantastiske artikel. Den er meget nyttig. Enhver kan nemt forstå at se en masse videoer på Youtube.

  5. Mellisa Avatar
    Mellisa
    Svar

    Hej,
    Fantastisk tutorial; du har forklaret det klart og enkelt. Det er vigtigt at lave en god megamenu, da det hjælper dig med at understrege forholdet mellem elementerne visuelt, hjælper brugerne med at kende til valgene, og det hjælper dig med nemt at bruge ikoner og billeder.

  6. David Avatar
    David
    Svar

    Jeg har fulgt denne vejledning nøjagtigt, og min menu vises IKKE.
    Når du går til siden, jeg linkede til ovenfor, vil du se en menu – det er standard WordPress-menuen. Lige under den brugte jeg din nav-menu-widget, og menuen udfyldes ikke.

    nogen tanker?

  7. Collin Avatar
    Collin
    Svar

    Mega Menu er fantastisk! Lige til ting: Jeg vil have den tilsvarende side til at åbne, når du klikker på menunavnet, og Mega-menuen skal vises, når du ruller over. Hvordan gør jeg det? Nu, når jeg klikker, vises kun Mega-menuen. Tak for hjælpen.

  8. Margaret Avatar
    Margaret
    Svar

    Tak for denne gode tutorial! Er det muligt at hyperlinke titlen og beskrivelsen i Mega-menuen under Edit Toggle? Jeg har en liste over stater og byer i min Mega Menu, men har problemet med at skulle liste staten to gange, så jeg kan lave en hyperlinket i afsnittet afsnit. Er der en måde at fjerne denne redundans på?

  9. Margaret Avatar
    Margaret
    Svar

    Jeg glemte at tilføje, om det var muligt også at have mulighed for at holde markøren over titlen, så byerne kan dukke op og blive valgt under den. Tak skal du have.

  10. Sami Azam Avatar
    Sami Azam
    Svar

    Hvordan kan vi vise Mega Menu på Hamburger-ikoner i stedet for et menupunkt?

    1. Dipa Shaha Avatar
      Dipa Shaha
      Svar

      Kære Sami
      Desværre er den funktion, du ønsker, ikke tilgængelig. Du kan dog anmode om denne funktion. ElementsKit-teamet er altid glade for at modtage forslag til funktioner.
      Du kan anmode om funktion ved at bruge dette link https://wpmet.com/plugin/elementskit/roadmaps/#ideas
      tak skal du have

  11. ajay Avatar
    ajay
    Svar

    Jeg har fulgt denne vejledning nøjagtigt, og min menu vises IKKE.
    Når du går til siden, jeg linkede til ovenfor, vil du se en menu – det er standard WordPress-menuen. Lige under den brugte jeg din nav-menu-widget, og menuen udfyldes ikke.

    Jeg tror, der er en fejl i mega-menuen, den virker ikke længere nu

    1. Hasib Avatar
      Hasib
      Svar

      Hej Ajay, sørg for at have oprettet en menu i backend, før du opretter en mega menu. Og efter at have valgt nav-menuen, skal du vælge, hvilken menu du vil dele under mega-menuen.

  12. Jy Avatar
    Jy
    Svar

    Hej,

    Megamenuen fungerer meget godt, indtil jeg opdaterede alle plugins, det er mærkeligt, at nogle af megamenuerne virker, men nogle af dem ikke og viser "intet indhold fundet", jeg havde rullet plugins-versionen tilbage, men kan ikke løse problemerne. Har du nogen idé om, hvad der forårsager dette problem?

Skriv et svar

Din e-mailadresse vil ikke blive offentliggjort. Krævede filt er markeret med *