Hur man skapar Elementor Off-Canvas-meny utan kodning (4 enkla steg)

En off-canvas-meny kommer att försköna din webbplatss användargränssnitt. Dessutom är det också kapabelt att hålla dina besökare eller kunder på din webbplats. Förutom dessa öppnar en Elementor off-canvas-meny också dörren till olika affärsmöjligheter.

Därför blir det den yttersta nödvändigheten att lägga till den på din webbplats om du inte vill äventyra din webbplatss UI och UX. Lyckligtvis finns det alternativ att lägga till Elementor off-canvas-menyn i WordPress som är helt gratis.

Du kan adoptera vilken som helst av dem. Även att använda ElementsKit är det mest lämpliga och enklaste alternativet eftersom det låter dig lägga till en meny utanför arbetsytan inom några sekunder.

Så låt oss utforska enklaste processen att lägga till en off-canvas-meny med ElementsKit. Men innan dess, ha en snabb kortfattad om denna off-canvas-meny och dess betydelse.

Vad är en off-canvas-meny i Elementor?

En off-canvas-meny är en utfällbar meny som dyker upp från sidan av din webbplats genom att klicka på en ikon, bild eller text. Detta är en måttlig meny som ökar användarupplevelsen av en webbplats på mobila enheter eller små skärmar eftersom du kan förenkla rubrikdelen genom att använda den.

Varför använda Elementor off-canvas-menyn?

Den största fördelen med denna off-canvas-meny är att den kan spara mycket utrymme på din webbplats som du behöver för att visa rubrikmenyn. Därför, i fallet med att visa webbplatser med bättre användargränssnitt på små skärmar, måste du kräva den här off-canvas-menyn.

Däremot kan du främja särskilda rabatter på den här off-canvas-menyn. Att visa upp rabatter på off-canvas-menyn kommer också att kunna fånga uppmärksamheten hos dina webbplatsbesökare.

Förutom dessa är den också lämplig för att visa vissa avsnitt på off-canvas-menyn. Du kan till exempel visa vissa rabattprodukter och göra din kampanj mer enastående och konverterande.

Eftersom mer än hälften av webbplatsens besökare använda mobil för att besöka en webbplats, måste du använda den här off-canvas-menyn på din webbplats för att multiplicera dina affärsmöjligheter. Dessutom kommer syftet med off-canvas-menyn att uppfyllas om den används för mobilanvändare.

Tillsammans med dessa har en off-canvas-meny också andra fördelar. Du kan använda den för olika ändamål och ge riktning mot dina affärsmål genom att använda den på rätt sätt.

Eftersom du känner till alla möjligheter med off-canvas-menyn, låt oss dyka in i processen att lägga till detta på din webbplats genom att följa den enklaste metoden.

Steg för att skapa Elementor off-canvas-meny

Oavsett om du har många fördelar med att använda Elementor off canvas-menyn, kommer du att behöva några sekunder för att lägga till den på din WordPress-webbplats. Ovanpå det är det 100% gratis att lägga till Elementor off-canvas-menyn använder sig av ElementsKit. Eftersom du hittar en dedikerad gratis widget som heter "Header Offcanvas" i ElementsKit.

Att lägga till en meny utanför arbetsytan med denna widget kräver noll kodning. Dessutom kan du anpassa den här menyn som du vill utan att ha några begränsningar. Du kan också lägga till en off-canvas-meny genom att följa den enklaste metoden som består av endast 4 steg. Gå igenom 4 enkla steg och lägg till en off-canvas-meny till din WordPress-webbplats:

Steg 1: Installera en menyplugin utanför arbetsytan.

För att få fördelen av ElementsKits off-canvas menywidget måste du installera den först. För att installera off canvas menyplugin, klicka på Lägg till ny alternativet under Plugins och sök efter ElementsKit i sökrutan. Efter att ha sett ElementsKit, tryck på Installera nu knapp och Aktivera det senare.

Steg 2: Aktivera header off canvas-widget.

I det andra steget måste du besök ElementsKit >> ElementsKit och klicka på WIDGETS sektion.

Från widgetområdet, aktivera widgeten "Header Offcanvas". och tryck på SPARA ÄNDRINGAR knapp.

Steg 3: Lägg till Elementor off canvas-menyn.

Nu är det dags att lägga till en off-canvas-meny på din Elementor-webbplats. Att göra det, klicka på Lägg till ny alternativet under Inlägg och ge en titel till posten. Efter det, klicka på Redigera med Elementor för att lägga till off-canvas-menyn i WordPress.

Detta kommer att omdirigera dig till Elementors instrumentpanel, där du behöver sök efter Header Offcanvas-widgeten och efter att ha hittat det, dra och släpp den på plus ikon.

Nu, klicka på hamburgerikonen för att lägga till menyer eller objekt till din off-canvas-meny.

Sedan klicka på Redigera innehåll och lägg till objekt som du vill till din meny. Det tar dig till widgetområde varifrån du kan lägga till olika objekt till din off-canvas-meny för att lägga till varianter.

Till exempel, sök efter den vertikala menyn och dra och släpp den på plusikonen, precis som widgeten utanför arbetsytan. Efter det, följ samma process för att lägga till alla objekt till din off-canvas-meny.

Efter att ha lagt till en vertikal menywidget, välj menyn du vill visa på din Elementor off-canvas-meny och anpassa den därefter. När alla dina anpassningar är klara, klicka på Uppdatera knapp.

När du har lagt till objekt i din rubrik utanför arbetsytan kan du anpassa och uppdatera följande områden:

• Överlagringsfärg: Härifrån väljer du färgen för din off-canvas-meny.
• Menytyp: Du hittar ikoner, text och ikoner med textalternativ. Välj vad du vill visa i platsen för rubriken utanför arbetsytan.
• Ikon: Om du väljer ikonen i menytypen kommer denna sektion att vara synlig där du måste välja en ikon.

Alldeles intill fliken Innehåll hittar du en stilflik. Klicka på fliken Stil och anpassa sakerna nedan för din off-canvas-meny:

• Färg.
• Bakgrundsfärg.
• Hover färg.
• Bakgrundsfärg på svävaren.
• Kantfärg för svävning.
• Ikonstorlek.
• Kanttyp.
• Inriktning.
• Box skugga.
• Gränsradie.
• Stoppning.
• Marginal.

Efter redigering off-canvas; du måste redigera bredd, bakgrundstyp, position och utfyllnad av off-canvas-panelen. Till sist, tryck på Publicera knappen när du är klar med anpassningen.

Steg 4: Sista titt på header off canvas-menyn.

Här är översikten eller exemplet på din off-canvas-meny förberedd med ElementsKit. Du kan dock lägga till fler varianter genom att anpassa din off-canvas-meny från widgetområdet.

Kom igång med rubriken utanför arbetsytan

Att använda en off-canvas-meny kommer att göra din webbplats mer interaktiva och engagerande eftersom det kan spara mycket utrymme på din WordPress-webbplats. Dessutom är den perfekt att ha bättre UI & UX på små skärmar. Ändå är det superenkelt och snabbt att lägga till en off-canvas-meny.

Allt du behöver är att använda ovanstående fyra steg och du är redo att njuta av de utmärkta fördelarna och möjligheterna med header off-canvas-meny. Ovan har vi använt ElementsKit eftersom det erbjuder det enklaste alternativet att lägga till den här menyn.

Tillsammans med det hittar du massor av funktioner om du använder ElementsKit. Som det är en allt-i-ett-tillägg för Elementor som har alla alternativ för att göra din webbplats sömlös och konkurrenskraftig. Så använd det bästa pluginet för att lägga till off-canvas-menyn på din Elementor-webbplats.