Elementor Navigation Menu – Bygg en fantastisk meny för din WordPress-webbplats

Letar du efter ett sätt att skapa en fantastisk meny för att förbättra din webbplats UI/UX? I så fall är du på rätt plats. Här har vi satt ihop en detaljerad guide för att hjälpa dig.

Först visar vi dig en steg-för-steg-guide om hur du skapar en meny för din WordPress-webbplats. Och när du väl har koll på det kommer vi att guida dig om hur du använder Elementor Navigation Menu-widgeten för att anpassa och ladda din WordPress-meny.

Innehållsförteckning:

• Varför behöver du en anpassad navigeringsmeny?
• Skapa en grundläggande WordPress-meny med Elementor
• 1. Skapa en enkel meny för din WordPress-webbplats
• 2. Välj och anpassa navigeringsmenyalternativ
• 3. Skapa undermenyer – Menyalternativ för förälder och barn (valfritt)
• 4. Hantera din menyplats och publicera
• Hur man skapar en navigeringsmeny med Elementor pro nav' widget
• Elementor Nav Menu widget Nyckelfunktioner
• Skapa en meny med nav-menu pro widget
• Mobil responsiv meny
• Avslutar

Varför behöver du en anpassad navigeringsmeny?

Det är viktigt att veta att navigeringsmenyerna är viktiga inte bara för att få trafik till din webbplats utan också för bättre SEO-rankning.

Visserligen är nav-menyerna främst designade för användarengagemang, men detta är inte det enda syftet.

Den näst viktigaste faktorn är att hålla koll på rollen som "WebCrawler" eller botar som är designade för att genomsöka webbplatserna och indexera innehållet till relevant nivå och rapportera tillbaka till sökmotorn för att rangordna innehållet på rätt plats.

Därför, om du skapar för komplicerade menyer, skulle det vara svårt för botarna att rangordna ditt innehåll, men du kommer också att förlora dina besökare.

Kort sagt, "lättnavigering" är en avgörande faktor för att förbättra användarupplevelsen och spelar en avgörande roll för att öka vår webbplatsrankning och öka trafiken.

Det är ett utmärkt skäl för många företagswebbplatser att behålla en enda navigeringsikon istället för en komplex menyrad, som laddas upp till en helskärmsmeny när du klickar på den.

Tack vare Elementor pro-widgeten med en 100 % responsiv navigeringsmeny kan du skapa en pixelperfekt och otroligt flexibel menyrad utan att använda någon kod.

I den här handledningen kommer vi att visa dig hur du använder Elementors navigeringsmenywidget för att få den anpassade, avancerade WordPress-menyn.

Innan du börjar med Elementor Navigation-widgeten, låt oss utforska hur vi kan skapa en enkel WordPress-meny med hjälp av Elementors gratisversion.

Skapa en grundläggande WordPress-meny med Elementor

Nu, för att skapa en WordPress-meny, behöver du inte installera några speciella plugin . Som standard kommer WordPress med en lättanvänd menybyggare, som hjälper dig att skapa enkla navigeringsmenyer för din webbplats.

Som sagt, du kommer inte att ha tillgång till några anpassningsalternativ för menyn. Det kommer att ta på designen av det för närvarande aktiva WordPress-temat. Men om det är allt du vill, så är detta ett utmärkt sätt att skapa en navigeringsmeny för din WordPress-webbplats.

1. Skapa en enkel meny för din WordPress-webbplats

Först och främst måste du logga in på din WordPress-backend-dashboard.

Gå nu från det vänstra sidofältet till Utseende > Menyer . Här hittar du en layout med två kolumner med "Lägg till menyalternativ" till vänster och "Menystruktur" till höger.

Under Menystruktur hittar du ett fält för "Menynamn". Detta blir namnet på menyn vi kommer att skapa just nu. Låt oss kalla det meny 1.

Obs : Oroa dig inte. Dina läsare kommer inte att kunna se menynamnen. Det är en funktion som hjälper dig att hålla ordning på alla dina olika menyer.

Efter att ha gett din meny ett namn, klicka på knappen "Skapa meny" för att göra den tillgänglig. Nu måste du lägga till de olika menyalternativen.

2. Välj och anpassa navigeringsmenyalternativ

Nu kommer delen där du fyller din nya meny med menyalternativ. Under avsnittet "Lägg till menyobjekt" till vänster hittar du en organiserad lista över saker som du kan lägga till i din meny.

Som standard innehåller detta alla dina sidor, inlägg, målsidor, anpassade länkar och kategorier.

välj bara de menyalternativ du vill lägga till med hjälp av kryssrutan och klicka sedan på knappen "Lägg till i menyn". Detta kommer att fylla din meny med alla dina valda menyalternativ.

Notera : Observera att varje avsnitt under "Lägg till menyalternativ" har möjlighet att växla mellan – Senaste , Visa alla och Sök . Kom ihåg att använda dessa alternativ om många föremål.

När du är klar med att lägga till alla menyalternativ, tryck på knappen "Spara meny" och gå vidare till nästa steg.

3. Skapa undermenyer – Menyalternativ för förälder och barn (valfritt)

Visste du att WordPress som standard också låter dig skapa undermenyer? När du skapar undermenystrukturen har du ett överordnat menyalternativ och ett undermenyalternativ.

När en användare håller muspekaren över det överordnade menyalternativet kommer det att avslöja alla underordnade menyalternativ som är gömda under det.

Coolt eller hur?

Nu för att skapa en undermenystruktur, allt du behöver göra är att välja ett menyalternativ som du vill ska vara på den överordnade menyn. Dra och släpp sedan alla menyalternativ som du vill ha som underordnade menyalternativ under den. Nu är det bara att dra den åt höger och du är klar!

4. Hantera din menyplats och publicera

Nu när du har skapat din nya meny och lagt till undermenyer är det dags att hantera dess plats.

Överst i din menyredigerare bör du lägga märke till ett alternativ som heter "Hantera platser." Klicka på den och något liknande följande skärm bör dyka upp:

Nu kommer de tillgängliga menyplatserna att bero på det tema du har installerat. I det här amp har vi ett tema som stöder 3 menyer.

Efter att ha tilldelat en meny till var och en av de tillgängliga menyplatserna klicka på "Spara ändringar" och det är allt.

Du känner nu till alla grundläggande menyfunktioner som WordPress erbjuder som standard. Men om du vill ha mer anpassning och funktionalitet, läs vidare för att lära dig mer om Elementor Pro Nav Menu Widget.

Hur man skapar en navigeringsmeny med Elementor pro nav' widget

Om du vill lägga till en anpassad navigeringsmeny på din WordPress-webbplats behöver du Elementor Pro-versionen. Elementor Pro-versionen kommer med Elementor nav-widget tillsammans med många andra specialfunktioner som 300+ mallar, en temabyggare, en popup-widget, WooCommerce-widgets och många andra intressanta funktioner.

Vilka är de specifika nyckelfunktionerna i själva Nav Menu-widgeten? Här är en kort introduktion.

Elementor Nav Menu widget Nyckelfunktioner

• Nav-menywidgeten ger dig friheten att placera din meny var du vill. På din rubrik eller överst eller var som helst på din sida.
• Du kan lägga till flera menyer på din webbplats och även på dina sidor separat eller globalt.
• Ge din meny ett bländande utseende genom att använda animering, svävande effekter eller aktiv status
• Skapa en mobil responsiv meny för din webbplats och kontrollera hur din webbplats kommer att se ut på mobilskärmar
• Anpassa färg, typografi och stoppning eller andra justeringar av din menyrad
• Skapa en pixelperfekt meny med rätt precision för justering, avstånd och utfyllnad.

Skapa en meny med nav-menu pro widget

Du måste skapa en grundläggande WordPress-meny som vi har nämnt ovan och sedan kommer du att anpassa WordPress-standardmenyn med hjälp av pro-nav-meny-widgeten. När du har skapat den primära listan är nästa steg att lägga till den på önskad plats, dvs.

Nu när du är klar med grundläggande inställningar, låt oss anpassa menyn med hjälp av nav-meny-widgeten.

I det översta hörnet av inställningssektionen finns tre tillgängliga alternativ; Innehåll, stil och avancerad.

Layoutsektionen : du har tre alternativ Horisontell, vertikal eller ett dolt dragspel.

• Horisontell: Den horisontella layouten är den vanligaste layouten som används av webbplatserna. Den sprider sig över skärmen från vänster till höger.
• Vertikal: Du hittar också en vertikal layout på många webbplatser, särskilt på webbplatser som erbjuder kreativa tjänster. I fallet med en vertikal layout kommer spridningen av navigeringsfältet att vara uppifrån och ned.
• Rullgardinsmenyer: Rullgardinsmenyer är också ganska vanliga. Dropdown-menyn är vertikal layout och kräver interaktion med användaren för att avslöja. De används mest för att skapa en ren design.

Justera avsnitt : detta avsnitt hjälper dig att justera menytextobjekten; mitten, höger eller vänster.

Animationssektion : det här avsnittet låter dig lägga till animeringseffekter under, över eller dubbla linjer. Du kan också välja ram, bakgrund och subtila textanimationer.

De understrukna animationerna är följande:

• Tona: Tona-animeringen erbjuder tona-animering under menyalternativen.
• Bild: Bildanimeringen skjuter fältet under menyalternativen.
• Grow : Grow-animationen växer från mitten till utåt och ger en känsla av tillväxt.
• Drop in : Drop in animation flödar från botten till toppen.
• Avhopp: Släpp bort animationsflöden från topp till botten.

På liknande sätt finns det inramade, överlinje-, dubbellinje-, bakgrunds- och textanimationer. Var och en av dem erbjuder sin egen uppsättning animationer och du kan kolla in dem själv för att lära dig vad du får med dem.

Pekarsektion : välj typ av pekare från rullgardinsmenyn.

Undermenyindikatorsektion : Elementor-widgeten är packad med många alternativ för undermenystil. Där du inte bara kan styra färgen, stilen och även bakgrunden på menyn.

Utfyllnad och menyavstånd: utfyllnad kan justeras snabbt. Du kan ändra den horisontella utfyllnaden för meny och undermeny, vertikal utfyllnad, mellanrum även höger, vänster och centrerad justering.

Elementor närmar sig menyavstånd och utfyllnad extremt bra. De arbetade hårt bakom dörrarna för att säkerställa att de kan ta med verktygen till utvecklaren så att de enkelt kan skapa den design som de tänker på.

Menyavståndet erbjuder många alternativ inklusive:

• Mellanrum mellan menyalternativ
• Horisontell och vertikal utfyllnad för meny- och undermenyelement
• Centrera, vänster, höger och justerad justering.

Färgbakgrund och typografi : du kan få ditt skräddarsydda märkesutseende med hjälp av önskat färgschema och bakgrundsfärg. Du kan också välja de transparenta eller halvtransparenta menyalternativen.

Som designer kan du leka med dessa alternativ så mycket du kan och se till att du designar bakgrunderna enligt dina önskemål.

Mobil responsiv meny

Mobil är en viktig del av webben, och det är därför Elementor-utvecklare också tillhandahåller verktyg så att du kan skapa navigeringsfältet för mobilen också.

Elementor-widgeten låter dig full kontroll över mobilmenyalternativ på WordPress. Du kan styra mobilskärmsvyn med en separat uppsättning inställningar för mobilskärmar. Det finns ett alternativ för mobilskärmsinställningar längst ner i Elementor-inställningssektionen där du kan se dina mobilskärmsalternativ.

Kort sagt, Elementors mobilmenyfunktioner är enligt nedan:

• Full bredd på mobil: Du får möjlighet att ställa in full bredd eller begränsad bredd också.
• Surfpunkter eller mobila brytpunkter: Du kan använda brytpunktsinställningarna för att ställa in mobilmenyn för mobil eller surfplatta.
• Vertikal- och dragspelsmenyer: Elementor erbjuder också möjligheten att visa en hopfällbar hamburgerikon.
• Växla justering: Hamburgerikonen kan justeras mitt, vänster eller höger.
• Aside/Center alignment: Välj justering av mobilmenyn.

Responsiv navigering: Erbjuder responsiv positionering av menyn.

Avslutar

Menyn är en av de viktigaste funktionerna på alla webbplatser. Eftersom det hjälper besökarna att gå igenom din webbplats och om du skapade en lista smart skulle det hjälpa till att hålla dina besökare på din webbplats under en lång tid. Menyn är lika viktig som för alla webbplatsers hela layout, sidhuvudet och sidfotssektionen.

Därför måste menywidgeten kunna leverera ditt unika varumärkesutseende med alla väsentliga funktioner. Elementor Navigation-widgeten kommer med funktionsrika funktioner som gör att kunderna kan anpassa menydelen så att den passar in i ditt varumärkes röst. Nu kan du använda en skräddarsydd, snygg meny på din webbplats, på din målsida, rubrik eller någon annan sektion där du vill visa den.