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:
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.
Nu, för att skapa en WordPress-meny, behöver du inte installera några speciella plugin -program. 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.
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.
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.
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!
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.
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.
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.
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:
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:
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 ä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:
Responsiv navigering: Erbjuder responsiv positionering av menyn.
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.
En webbplats sidhuvuden och sidfötter är viktiga element. I de flesta fall ger rubriken navigering...
Två av de mest populära WordPress-temanen på marknaden är Astra och OceanWP. Professionell…
Att skapa en utmärkt nyhetswebbplats kräver inte att du blir webbdesigner. Vi…
The Newspaper-temat är ett av de viktigaste WordPress-teman som designats av tagDiv, en...
När det gäller att skapa en onlinebutik är WooCommerce det bästa plugin . Det…
En rubrik är i allmänhet det första en person ser när de besöker din webbplats,...
Visa kommentarer
Hola gracias por el post, cuando añado el nav menú no me aparece mi menú se queda solo un recuadro gris en el editor de elementor y si voy a la pagina donde lo tengo no aparece nada. Como puedo solucionarlo? tack
Hej! Vanligtvis uppstår detta problem när din meny antingen är tom eller inte sparad. Vänligen dubbelkolla på WordPress-menysidan.
Hej, una consulta, cómo se puede dar la instrucción para cerrar automáticamente un submenu al abrir otro item del meny.
Tack.
Hej, förlåt att jag inte förstår din fråga helt? Kan du specificera?
ciao quando le voci del submenù sono troppo lunghe come si riesce a dividerle su più righe ?
Hej, detta rekommenderas inte eftersom navigeringen skulle vara mycket komplex att läsa, i det här fallet är det bättre en megamenystil
Meny w wersji mobilnej nie otwiera sie. Jak moge je utworzyc zeby wyswietlalo sie na telefonach?
Hej, mobilmenyn visas automatiskt om du använder Elementors navigationswidget. Men du bör kontrollera ett inställningsanrop "brytpunkt" i menyinställningarna. Detta är skärmstorleken när din meny växlar.
Tôi dùng thằng này, mà trên destop tôi để chế độ Horisontell mà nó không nằm ngang, nó cứ nằm dọc, tôi dùng theme Creation. Có gì hỗ trợ mình với nhé.
Sziasztok, az miképp oldható meg, hogy egy vertikális menüben az almenüre kattintás után ne zárja össze a menüt az oldal betöltésekor? EPro
Hej, det är tyvärr inte möjligt, det finns inget sådant alternativ i Elementor nav-widgeten.
Ciao. Vorrei sapere se è possibile fare in modo che il menu rimanga semper visibile anche quando si scende con la visualizzazione della pagina. Purtroppo tutte le volte che ci ho provato il meny scende ma il colore di background del menu no rendendolo praticamente illegibile le scritte. Grazie