Sådan opbygger du en megamenu med Elementor og ElementsKit

Redaktion

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

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

Folk bliver mere specifikke omkring den tid, de bruger online. Det viser en nylig undersøgelse  94% af webbrugere sige nem navigation er den mest nyttige funktion på et websted.
Næsten alle, ikke?

For at øge brugervenligheden og evnen til at engagere brugeren, spiller megamenuen en afgørende rolle i at forbedre folket. En enkel, men funktionel megamenu vil opmuntre brugerne til at udforske endnu flere områder af dit websted og øjeblikkeligt skride til handling.

Selv de største e-handelswebsteder, som Amazon og eBay, bruger megamenuer til at hjælpe brugerne med at gennemse hele en hjemmesides navigation til en enkelt menu. 

Ikke kun et e-handelswebsted, men en megamenu er også en god mulighed for alle nyhedswebsteder, magasiner, indholdsudgivere, virksomheder og mere. 

Når du bygger en stor hjemmeside med flere kategorier og underkategorier, er Megamenu en stor multi-kolonne udvidelig menu, hvor alt er synligt på én gang.
Jeg er sikker på, så mange spørgsmål dukker op! Højre? 

Ingen bekymringer... Her vil jeg hjælpe dig med at få alle svarene på dine spørgsmål, og i slutningen af denne artikel vil du lære, hvordan du nemt laver din egen megamenu. 

Introduktion til ElementsKit Mega Menu Builder

Ved hjælp af funktionsrige ElementsKit Megamenu Builder du kan oprette og tilpasse enhver type Megamenu med en Elementor live-indholdsgrænseflade. 

Du vil få variationer i megamenuen såsom Nav-menuen og Vertical Mega Menu sammen med mange tilpasningsmuligheder. 

Alt i alt er ElementsKit Elementor Mega Menu en menubygger med fuld funktioner til dit professionelle websted. 

Hvordan laver man en megamenu med Elementor? 

Elementor giver dig masser af funktionaliteter til at designe din megamenu, men for at få yderligere funktionaliteter kan du bruge et tredjeparts plugin.

Præcis, du har brug for ElementsKit. Selvom der er så mange plugins til at skabe en megamenu, så understøtter ElementsKit forskellige typer megamenuer, herunder lodret megamenu, horisontal megamenu og mange flere tilpasningsmuligheder.

Her vil vi vise dig trin-for-trin-processen for at skabe en fuldt funktionel megamenu i detaljer.

Hvad du skal bruge for at oprette en megamenu med 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

  • Klik på Opret en ny menu.
  • Give Menunavn=> Tjek Afkrydsningsfelt=> Opret menu.
  • Klik på Brugerdefineret link=> Giv Link og Tilføj menupunkter på samme måde.

Trin #2: Tilpas Megamenu-indhold

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.

Styring 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 Kolonnegab

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

Vælg Position

  • Højde: Vælg din højde ved at trække fra venstre mod højre.
  • Lodret justering: Vælg lodret justering fra rullemenuen.
  • Overløb: Vælg Overløbsstandard eller Skjult.

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

Opret Mega Menu ved hjælp af Gutenberg

Hvis du har bygget din hjemmeside i WordPress blocks editor, kan du også lave en mega menu nemt og problemfrit. GutenKit blok editor plugin kommer med den nemmeste måde at oprettelse af WordPress mega menu i Gutenberg.

Med GutenKit kan du oprette hele menuen i editoren og design mega menu i både vartikal og horisontal orientering.

Alt du behøver er at installere GutenKit Pro plugin og begynde at bygge din smukke side i Gutenberg.

Endeligt output

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

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 *