När man designar en WordPress-webbplatsär det viktigt att fokusera på att skapa den snyggaste megamenyn i WordPress. Detta är viktigt, särskilt för e-handels- eller stora företagswebbplatser som strävar efter att visa ett brett utbud av produkter eller kategorier på sin webbplats.
En WordPress-megameny hjälper till att organisera dessa kategorier så att användare enkelt kan navigera igenom dem. Hur? En WordPress-megameny är ett bra sätt att organisera och visa mycket innehåll i en enda, lättnavigerad meny. Den låter dig lägga ut menyalternativ i flera kolumner eller rader, så att användare snabbt kan hitta olika delar av din webbplats utan att behöva klicka sig igenom sidor i all oändlighet.
Detta kan göra stor skillnad i hur besökare upplever din webbplats genom att göra navigeringen smidigare och mer tillgänglig i webbdesign. I den här guiden guidar vi dig genom de enkla stegen för att lägga till en megameny på din WordPress-webbplats, vilket gör det enkelt för alla att hitta det de letar efter.
Förstå Mega Menu i WordPress?
Vad kan en megameny vara i WordPress, och varför behöver jag den egentligen? Du kanske tänker så här. En megameny i WordPress låter ägare av WordPress-webbplatser lägga till en mängd olika kolumner, medieinnehåll och anpassningar till hur de utformar sin webbplatsmeny. Tidigare var de traditionella megamenyerna komplexa att navigera, men med tiden har det blivit enklare att strukturera och organisera flera kategorier med megapengar i WordPress.
Generellt sett inkluderar WordPress en dra-och-släpp-byggare som gör det enkelt att skapa olika typer av menyer, till exempel rullgardinsmenyer, rubrikmenyer och mer. Dessutom finns det plugins som låter dig anpassa navigationsmenyer i WordPress-teman.
Men om din webbplats har mycket innehåll kanske en vanlig meny inte räcker till. I så fall är en megameny ett bra alternativ. Med en megameny kan du lägga till rullgardinsmenyer med flera kolumner i din WordPress-meny, vilket hjälper dig att organisera innehåll under olika rubriker och underrubriker. På så sätt kan besökare snabbt hitta det de letar efter utan att bli förvirrade.
Relaterbart: Hur man fixar WordPress kan inte lägga till sida i menyn?
Att skapa en megameny i WordPress behöver inte vara komplicerat
Få kontakt med våra professionella WordPress-utvecklare och få den snyggaste megamenyn i WordPress.
Hur man skapar den snyggaste mega-menyn i WordPress
Nu är det ingen raketforskning bakom att skapa den snyggaste megamenyn i WordPress. Allt du behöver är Max Mega Menu Plugin, så är din megameny klar.
Men om du är bekant med den tekniska sidan av att skapa en megameny kan du också skapa den manuellt. I det här avsnittet kommer vi att gå igenom både plugin-programmet och den manuella metoden för bästa resultat.
Så, låt oss börja:
Hur man skapar en snygg megameny i WordPress med plugin
Det enklaste sättet att lägga till en megameny på din WordPress-webbplats är med pluginet Max Mega Menu. Det här verktyget låter dig förbättra dina menyer genom att lägga till rikt innehåll som videor, bildgallerier, sökfält och mer.
Med Max Mega Menu kan du skapa menyer som är organiserade, visuellt engagerande och hjälpsamma för dina besökare.
Steg 1: Installera och konfigurera Max Mega Menu-pluginet
För att komma igång, logga in på din WordPress-instrumentpanel och gå till Plugins → Lägg till nytt. Skriv "Max Mega Menu" i sökfältet och klicka sedan på Installera nu och Aktivera.
Snabbtips: Innan du börjar, se till att du har publicerat alla viktiga sidor och skapat en anpassad navigeringsmeny med dem.
När den är aktiverad, navigera till Mega-menyn i vänster sidofält för att komma åt inställningarna. För att ställa in en menyplats, följ dessa steg:
- Gå till Utseende → Menyer.
- Välj Menyplatser och klicka på Lägg till ytterligare en menyplats.
- Välj var du vill att din meny ska visas (t.ex. sidhuvud, sidfot, sidofält).
- Tilldela din anpassade meny och klicka sedan på Lägg till menyplats.
I de allmänna inställningarnaaktiverar du din megameny och anger hur den ska öppnas. Du kan välja mellan:
- Hovarintensiv: Öppnas efter en liten fördröjning, vilket förhindrar oavsiktliga klick.
- Hovra: Öppnas direkt när du håller muspekaren över den, vilket skapar en smidig upplevelse.
- Klicka: Kräver ett klick eller tryck, perfekt för pekskärmsenheter.
Om du väljer ”Klick” kan du utforska alternativen under Avancerat → Klickhändelsebeteende för att kontrollera vad som händer vid efterföljande klick.
Du kan också lägga till animationseffekter under effektinställningarna . Alternativen inkluderar tona, glidaeller tona upp, med hastighetsinställningar från snabbt till långsamt.
Steg 2: Anpassa menylayouten och utseendet
Max Mega Menu har ett standardtema, men du kan också designa ditt eget. För att skapa ett anpassat utseende:
- Gå till Menytema i Max Mega Menu-inställningarna.
- Klicka på ikonen med tre punkter för att välja temat och välj att lägga till ett nytt tema.
- I Allmänna inställningarkan du anpassa saker som pilstil, linjehöjd och menyskugga.
Under Menyradenkan du anpassa utseendet på den översta menyn genom att justera höjd, bakgrundsfärg, utfyllnad och lägga till ramar. För varje menyalternativ kan du ange alternativ som:
- Justering: Placera objekt till vänster, mitten eller höger.
- Typsnitt: Matcha typografin med din webbplats design.
- Bakgrund och avstånd: Ställ in bakgrundsfärger, marginaler, utfyllnad och ramar för ett elegant utseende.
Steg 3: Lägg till innehåll i din meny
Att lägga till innehåll är enkelt med Max Mega Menus dra-och-släpp-gränssnitt. Du kan inkludera textlänkar, WooCommerce-produkter, bilder och till och med sökfilter.
- Gå till Utseende → Menyer för att skapa eller redigera en meny.
- I inställningarna för Max Mega-menyn till vänster markerar du Aktivera för din valda plats.
- Lägg till sidor, inlägg, kategorier och produkter i menystrukturen.
- Dra och släpp objekt för att organisera dem på flera nivåer.
För att skapa en megameny, håll muspekaren över en sida och klicka på Megameny. Ställ in visningsläget till Rutnätslayout för organisation med flera kolumner eller Standardlayout för enklare menyer. För extra stil kan du använda widgetar som en sökfält, ett bildgalleri eller ett produktfilter. Du kan till och med lägga till ikoner till varje objekt genom att välja dem i Ikoner avsnittet
När du har anpassat allt klickar du på Spara meny för att publicera din megameny!
Läs: Hur man migrerar från Drupal till WordPress: Komplett guide
Hur man skapar en megameny manuellt i WordPress
I den första metoden såg vi hur man skapar en megameny i WordPress med hjälp av Max Mega Menu Plugin. Nu ska vi utforska hur man skapar en snygg megameny i WordPress med hjälp av CSS-kod.
Den här metoden kan vara fördelaktig för de som vill ha mer flexibilitet och kontroll över sina menydesignelement. Du behöver dock goda CSS- kunskaper för att få bästa resultat med den här metoden.
Steg 1: Konfigurera din scenmiljö
Innan du gör ändringar på din webbplats är det bäst att arbeta i en säker miljö där du kan experimentera utan att påverka den aktiva webbplatsen. Du kan använda vilken hanterad WordPress-hosting som erbjuder ett staging-verktyg som låter dig skapa en kopia av din webbplats för att först testa ändringarna.
För att skapa en staging-miljö:
- Logga in på hPanel och välj Webbplatser.
- Välj din domän och klicka på Hantera.
- Gå till WordPress → Staging i vänstermenyn.
- Klicka på Skapa staging under fliken Staging och följ anvisningarna för att konfigurera en underdomän för din staging-miljö.
Lär dig: Hur tar man bort oanvänd CSS i WordPress?
Steg 2: Komma åt och redigera ditt temas stilark
När du har din webbplats redo kan du säkert redigera ditt temas stilmall för att anpassa din meny.
Obs! Om möjligt, skapa ett undertema istället för att redigera huvudtemat för att förhindra att dina anpassningar förloras när temat uppdateras.
För att komma åt stilarket i din webbhotells filhanterare:
- Gå till Filer → Filhanteraren i hPanel.
- Välj din domäns public_html- mapp och navigera sedan till Staging → wp_content → themes.
- Öppna ditt temas mapp och dubbelklicka på style.css för att redigera det.
Lägg till den här koden för att göra undermenyalternativ synliga när man håller muspekaren över dem:
| .main-navigation ul: håll muspekaren över li ul,.main-navigation ul: håll muspekaren över li ul li ul {display: inherit;} |
Lär dig: Hur man får en staging-webbplats att fungera utan att skriva över databasen i WordPress
Steg 3: Anpassa din Mega-meny
Nu ska vi ge megamenyn en unik stil. Här är några CSS-kodavsnitt för att komma igång:
Skapa kolumner i megamenyn:
| .mega-menu li.mega-menu-column {bredd: 25%; /* för en layout med 4 kolumner */flytande: vänster;fyllning: 10px;} |
Anpassa menyalternativens färg, utfyllnad och textstil:
| .mega-menu ul.mega-sub-menu li a {color: #555;padding: 8px 15px;display: block;text-decoration: none;} |
Optimera för mobil:
| @mediaskärm och (maxbredd: 767px) {.mega-menu li.mega-menu-column {bredd: 100%;float: none;}} |
Dessa utdrag är en bra utgångspunkt, men se till att testa och justera efter behov så att de matchar din webbplats design. När du är nöjd med dina anpassningar kan du överföra dina ändringar från den aktuella webbplatsen till din aktiva webbplats.
Lär dig: Hur man åtgärdar en mediefråga som inte fungerar i WordPress?
Bästa Mega Menu-plugins för att skapa en snyggast Mega Meny i WordPress
Vi slår vad om att du nu är fullt utrustad med kunskapen för att skapa en megameny i WordPress, oavsett om det är med ett plugin eller med CSS-kod. Att använda ett plugin är dock utan tvekan det bästa sättet att skapa en megameny i WordPress. Det är enkelt, mindre tidskrävande och bäst för WordPress-nybörjare.
Det är därför vi har valt ut några av de bästa plugin-programmen som du kan använda för att skapa en snyggare megameny för din WordPress-webbplats, förutom Max Mega Menu-pluginet.
UberMeny
UberMenu är ett toppval bland WordPress-användare för att lägga till flexibla, responsiva megamenyer och flyout-menyer. Detta premium-plugin låter dig helt kontrollera övergångar, teckensnitt, menyorientering (horisontell eller vertikal) och bakgrundsfärg. Dessutom hanteras dess mycket anpassningsbara alternativ från en lättanvänd administratörspanel.
Här kan du ställa in kolumnbredder, lägga till widgetar, kortkoder och anpassad HTML, och visa ändringar i realtid med live-förhandsgranskningsläge. UberMenu är ett kraftfullt verktyg för alla som vill skapa en engagerande, dynamisk menylayout.
QuadMenu
QuadMenu är ett WordPress-plugin med öppen källkod som är fullpackat med alternativ och teman. Med gratisversionen kan du lägga till en navigeringswidget, ställa in anpassade brytpunkter för menykomprimering och skapa olika menystilar som off-canvas, sticky, horisontella och vertikala megamenyer. Denna flexibilitet gör det enkelt att designa en navigeringsupplevelse som passar din webbplats stil utan att spendera pengar på ett premiumalternativ.
GutenKit
GutenKit är ett kraftfullt Gutenberg-plugin som förenklar skapandet av megamenyer med hjälp av block. Det levereras med färdiga mönster och mallar, så att du direkt kan välja en design och anpassa den efter dina önskemål.
Med full kontroll över innehåll, stil och avancerade anpassningsmöjligheter gör GutenKits användarvänliga gränssnitt det till ett utmärkt val för de som vill bygga och förfina webbplatser i en blockredigerare.
Förutom sin megamenyfunktion erbjuder den 60+ block och 25+ moduler för mångsidiga anpassningar inom Gutenberg – ett idealiskt alternativ till ElementsKit för blockbaserade webbplatser.
JetMenu
JetMenu är ett premium-plugin för att skapa interaktiva WordPress-megamenyer med innehållsrika alternativ som bilder, videor och ljud. För 43 dollar per år får du tillgång till en dra-och-släpp-byggare och flera menylayouter, inklusive hamburger-, horisontell och vertikal orientering.
En funktion som sticker ut är förinställningshanteraren, som låter dig spara flera mallar för olika menyer – perfekt för webbplatser som behöver flexibla och engagerande navigeringsalternativ.
Hjälte-menyn
Hero Menu från Hero Plugins är ett utmärkt premiumalternativ för att skapa anpassade WordPress-menyer. Det har en smidig dra-och-släpp-funktion med ett färgkodat gränssnitt, vilket gör det enkelt att organisera och visualisera hierarkin för menyalternativ. Att lägga till specialelement som en logotyp, sökfält eller ikoner är lika enkelt som ett klick.
Hero Menu kommer också med flera menystilar och 60 förinställda färgkombinationer, vilket sparar tid på designen. Menyer som skapas med Hero Menu är helt responsiva och kompatibla med WooCommerce, vilket gör det till ett utmärkt val för e-handelswebbplatser.
Dessutom är det testat för att fungera sömlöst med populära WordPress-teman som Divi och Avada, vilket säkerställer smidig integration med din webbplats design.
Avslutning
Nu när du vet hur man skapar en megameny i WordPress – även om ditt tema inte har någon – är du redo att göra det enkelt att navigera på din innehållsrika webbplats. Megamenyer är perfekta för att organisera stora mängder innehåll och hjälpa besökare att hitta det de letar efter lättare, vilket förbättrar den övergripande användarupplevelsen.
Innan du lanserar din WordPress-webbplats är det avgörande att se till att navigeringen känns naturlig och intuitiv. För e-handelswebbplatser eller webbplatser med många sidor kan en megameny vara revolutionerande. Till skillnad från vanliga menyer låter megamenyer dig ordna komplex information på ett tydligt och visuellt engagerande sätt.
