Elementor Navigationsmeny - Skapa 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 sammanställt en detaljerad guide för att hjälpa dig.

Först visar vi dig en steg-för-steg-genomgång 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 hur du använder widgeten Elementor Navigation Menu 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 navigeringsmenyalternativen
• 3. Skapa undermenyer - menyalternativ för föräldrar och barn (valfritt)
• 4. Hantera din menyplats och publicera
• Hur man skapar en navigationsmeny 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 en bättre SEO-ranking.

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

Den näst viktigaste faktorn är att hålla syn på rollen som "WebCrawler" eller Bots som är utformade 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 bots att rangordna ditt innehåll, men du kommer också att förlora dina besökare.

Kort sagt, "enkel navigering" är en avgörande bidragsgivare för att förbättra bättre användarupplevelse 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 navigationsikon istället för en komplex menyfält, som laddas upp till en fullskärmsmeny när du klickar på den.

Tack vare Elementor pro-widgeten med en 100% responsiv navigeringsmeny kan du skapa en pixel perfekt 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 vi börjar med Elementor Navigation-widgeten, låt oss utforska hur vi kan skapa en enkel WordPress-meny med Elementor gratisversion.

Skapa en grundläggande WordPress-meny med Elementor

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

Med detta sagt har du inte tillgång till några anpassningsalternativ för menyn. Det kommer att ta på sig utformningen av det för närvarande aktiva WordPress -temat. Men om det är allt du vill, så är det här 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 -instrumentpanel.

Gå nu 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 kommer att vara 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.

När du har gett din meny ett namn klickar du 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 navigeringsmenyalternativen

Nu kommer den del där du fyller din nya meny med menyalternativ. Under avsnittet "Lägg till menyalternativ" 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 kryssrutan och klicka sedan på knappen "Lägg till i menyn". Detta fyller din meny med alla dina valda menyalternativ.

Observera : 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 har lagt till alla menyalternativ trycker du på knappen "Spara meny" och går vidare till nästa steg.

3. Skapa undermenyer - menyalternativ för föräldrar och barn (valfritt)

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

När en användare svävar över det överordnade menyalternativet kommer det att visa alla underordnade menyalternativ som döljs under det.

Kul va?

Nu för att skapa en undermenystruktur är allt du behöver göra att välja ett menyalternativ som du vill ha på huvudmenyn. Dra sedan och släpp alla menyalternativ som du vill ha som underordnade menyalternativ under den. Nu är det bara att dra det å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 platsen.

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

De tillgängliga menyplatserna beror nu på det tema du har installerat. I denna ex amp le har vi ett tema som stöder 3 menyer.

När du har tilldelat en meny till var och en av de tillgängliga menyplatserna klickar du på "Spara ändringar" och det är det.

Du vet nu alla de grundläggande menyfunktionerna som WordPress erbjuder som standard. Men om du vill ha mer anpassning och funktionalitet kan du läsa mer om Elementor Pro Nav Menu Widget.

Hur man skapar en navigationsmeny 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 Nav Nav-widgeten själv? Här är en kort introduktion.

Elementor Nav-Menu widget Nyckelfunktioner

• Nav-menyn widget ger dig friheten att placera din meny var du än vill. På din rubrik eller på toppen 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 en bländande blick till din meny genom att använda animering, svävande effekter eller aktiv status
• Skapa en mobil responsiv meny på din webbplats och kontrollera hur din webbplats kommer att se ut på mobilskärmar
• Anpassa färg, typografi och stoppning eller andra justeringar i menyraden
• Skapa en pixel-perfekt meny med rätt precision för justering, avstånd och stoppning.

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 standard WordPress-menyn med pro-nav-menyn widget. När du har skapat den primära listan är nästa steg att lägga till den till önskad plats, dvs Header-sektionen.

Nu när du är klar med grundinställningar, låt oss anpassa menyn med nav-menyn widget.

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

Layoutavsnittet : du har tre alternativ Horisontellt, vertikalt eller ett dolt dropdown-dragspel.

• Horisontell: Den horisontella layouten är den vanligaste layouten som används av webbplatserna. Det sprider sig över skärmen från vänster till höger.
• Vertikal: Du kommer också att hitta en vertikal layout på många webbplatser, särskilt på webbplatser som erbjuder kreativa tjänster. Vid vertikal layout kommer navigeringsfältets spridning att vara uppifrån och ned.
• Dropdown: Dropdown menyer är också ganska vanliga. Nedrullningar ä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 : det här avsnittet hjälper dig att justera menytexten. mitt, höger eller vänster.

Animationsavsnitt : det här avsnittet låter dig lägga till animeringseffekter under, över eller dubbelrad animeringseffekter. Du kan också välja ramen, bakgrunden och subtila textanimationer.

Understreckade animationer är följande:

• Fade: Fade- animationen erbjuder fade-animering under menyalternativen.
• Bild: Bildens animation glider stapeln 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.
• Släpp ut: Släpp animering flyter från topp till botten.

På samma sätt finns det inramade, överlinjer, dubbla linjer, bakgrund och textanimeringar. 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.

Undermenyindikatoravsnitt : Elementor-widgeten är fylld med många alternativ för undermenystyling. Där du inte bara kan kontrollera färg, stil och även menyens bakgrund.

Vaddering och menyavstånd: vaddering kan justeras snabbt. Du kan ändra den horisontella stoppningen för meny och undermeny, vertikal stoppning, mellanrum också höger, vänster och centrerad inriktning.

Elementor närmar sig menyavstånd och vaddering extremt bra. De arbetade hårt bakom dörrarna för att se till 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:

• Mellanslag mellan menyalternativen
• Horisontell och vertikal stoppning för meny- och undermenyelement
• Centrera, vänster, höger och motiverad inriktning.

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

Som designer kan du spela med dessa alternativ så mycket du kan och se till att du designar bakgrunden 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 också kan skapa navbar för mobilen.

Elementor-widgeten ger dig fullständig kontroll för mobilmenyalternativ på WordPress. Du kan styra skärmen för mobilskärmen med en separat uppsättning inställningar för skärmar som endast är mobila. Det finns ett alternativ för mobilskärmsinställningar längst ner i inställningsavsnittet för Elementor där du kan se dina skärmalternativ för mobil.

Kort sagt, Elementors mobila menyfunktioner är som nedan:

• Full bredd på mobil: Du får också möjlighet att ställa in full bredd eller begränsad bredd.
• Surfplattor eller mobila brytpunkter: Du kan använda brytpunktens inställningar för att ställa in mobilmenyn för mobil eller surfplatta.
• Vertikal- och dragspelmenyer: Elementor erbjuder också möjligheten att visa en hopfällbar hamburgarikon.
• Växla inriktning: Hamburgarikonen kan justeras mitt, vänster eller höger.
• Sid- / mittjustering: Välj justering av mobilmenyn.

Responsiv navigering: Erbjuder responsiv placering av menyn.

Avslutar

Menyn är en av de viktigaste funktionerna på en webbplats. 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 lång tid. Menyn är lika viktig som för webbplatsens hela layout, sidhuvud och sidfot.

Därför måste menywidgeten kunna leverera ditt unika varumärkesutseende med alla väsentliga funktioner. 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å hela din webbplats, på din målsida, rubrik eller någon annan sektion där du vill visa den.