Hur man lägger till en fullskärms responsiv meny i WordPress

Menyer är avgörande för att hjälpa besökare att navigera på din WordPress-webbplats och hitta fler av dina inlägg och sidor. Fullskärms responsiva menyer kan vara särskilt användbara när du designar din webbplats för mobilanvändare.

När dina användare klickar eller trycker på en hamburgarikon visas ett fullskärmsöverlägg av din webbplats meny med en vacker animation.

Vi har experimenterat med några olika menytyper på våra egna webbplatser för att se vad som ger bäst resultat. Och i den här artikeln kommer vi att visa dig hur du lägger till en responsiv helskärmsmeny i WordPress utan att skriva någon kod.

Varför lägga till en responsiv helskärmsmeny i WordPress?

En responsiv helskärmsmeny gör det mycket enklare för besökare att navigera på din WordPress-webbplats eller WooCommerce-butik på smartphones och surfplattor.

Genom att använda hela skärmen för menyn är det enkelt att trycka på länkar utan att av misstag välja fel objekt.

Med fler människor som surfar på mobila enheter än stationära datorer nuförtiden är det viktigt att kontrollera hur din webbplats ser ut på små skärmar.

En responsiv meny anpassar sig automatiskt till olika skärmstorlekar och säkerställer en smidig upplevelse för varje besökare.

Låt oss titta på hur man lägger till en responsiv helskärmsmeny i WordPress.

Steg 1: Installera och aktivera pluginet FullScreen Menu

Det första du behöver göra är att installera och aktivera pluginet FullScreen Menu.

Du kan ta en titt på vår steg-för-steg-guide om hur man installerar ett WordPress-plugin för nybörjare för mer information.

Steg 2: Konfigurera allmänna menyinställningar

Efter aktivering bör du gå till sidan Alternativ för helskärmsmeny i din WordPress-adminmeny för att konfigurera plugin-inställningarna.

Det tar dig automatiskt till fliken 'Inställningar'. Kom igång genom att markera kryssrutan 'Aktivera animerad helskärmsmeny' för att aktivera menyn.

Det är en bra idé att även markera rutan 'Visa endast för administratörsanvändare' till en början. Detta gör att du kan se ändringarna medan du konfigurerar menyn, men besökare på din webbplats kommer inte att kunna se den förrän du är klar.

Glöm inte att komma tillbaka och avmarkera den rutan när du är klar.

Nedanför dessa alternativ hittar du andra inställningar som låter dig visa menyn endast på mobila enheter, stänga menyn vid klick eller scrollning och dölja menyn på specifika sidor. 

För vårt exempel kommer vi att lämna dessa inställningar omarkerade, men du är välkommen att anpassa dem som du vill för din egen webbplats.

Steg 3: Anpassa menyutformning och utseende

Därefter kommer vi att anpassa menyns design. Lyckligtvis tillåter menypluginet dig att göra detta utan att behöva anpassad CSS.

För att anpassa menyn måste du klicka på fliken 'Design/Utseende' högst upp på sidan. På den här sidan kan du välja färger, teckensnitt och animationsinställningar för din meny.

Högt upp på sidan kommer du att märka två färginställningar. Den första färgen är för hamburger-menyikonen. Denna visas vanligtvis i webbplatsens sidhuvud. När dina besökare klickar eller trycker på den visas eller döljs helskärmsmenyn.

Den andra färginställningen är för menyns bakgrund.

När du klickar på varje ruta visas en färgpalett. Du kan antingen klicka på färgen du vill använda eller skriva in dess hexkod.

Efter att ha valt menyfärgerna bör du scrolla ner på sidan till avsnittet Font/Utseende. Här kan du välja teckensnittsfärg, familj och storlek som kommer att användas för menytexten.

För den här handledningen rekommenderar vi att du håller dig till standardteckensnittsinställningarna, som ofta använder teckensnittet från ditt tema.

Detta är ett bra val eftersom det kommer att matcha din webbplats övergripande design, och att ladda ytterligare teckensnitt kan ibland sakta ner din WordPress-webbplats prestanda och hastighet.

Det finns också inställningar för att visa en sidomeny på specifika sidor och rulla huvudmenyn om den inte är tillräckligt hög. För den här handledningen kommer vi att lämna dessa inställningar omarkerade, men känn dig fri att experimentera med dem på din egen WordPress-blogg eller webbplats.

Skrolla sedan ner till avsnittet 'Animationsinställningar'. Här kan du justera två huvudinställningar.

Den första av dessa är ‘Animationstyp’. Detta låter dig välja animationsriktningen när menyn aktiveras. Du kan välja mellan uppifrån och ner, vänster till höger och höger till vänster.

Den andra inställningen är effekten du får när du håller muspekaren över en menyalternativ. Valen är en subtil linje som visas (som en marginallinje), en ändring av bakgrundsfärgen eller en ändring av bakgrundsfärgen med en rundad kant.

Steg 4: Definiera innehåll för helskärmsmeny

Slutligen måste du skrolla tillbaka till toppen av sidan och klicka på fliken 'Menyinnehåll'. Här kan du välja den WordPress-meny som kommer att visas på din fullskärmsmeny.

Bredvid 'Välj meny' högst upp måste du välja en meny från rullgardinslistan. Om du inte har skapat en navigeringsmeny ännu, ta en titt på vår guide om hur man lägger till navigeringsmenyer i WordPress.

Om du vill ha ytterligare innehåll som visas på menyskärmen kan du lägga till det i nästa avsnitt, märkt 'Gratis HTML / Kortkoder'. Skriv helt enkelt ditt innehåll i redigeringsrutan och lägg till eventuella mediefiler du vill ha. Detta innehåll kommer att visas under menyn.

Det finns också en kryssruta som inkluderar en länk till din integritetspolicy. Många webbplatsägare föredrar dock att lägga till detta i sidfoten istället för huvudmenyn.

Därefter kanske du vill lägga till sociala ikoner som menyalternativ. Dessa kommer att visas i en rad längst ner i din fullskärmsmeny.

För att lägga till dem, scrolla helt enkelt ner till avsnittet 'Sociala ikoner' och ange en titel för ikonen, som till exempel 'Facebook'. Välj sedan lämplig ikon och skriv URL:en till din sociala sida.

Du kan lägga till fler ikoner genom att klicka på knappen 'Lägg till en annan ikon'.

Slutligen kan du lägga till en sökfält högst upp i din responsiva meny. Du måste rulla till botten av sidan 'Menyinnehåll' och markera rutan 'Lägg till sökfält?'. Om du vill kan du också skriva in platshållartext.

Steg 5: Spara ändringar och testa din meny

Slutligen, klicka på knappen ‘Spara ändringar’ för att spara dina inställningar.

Du kan nu besöka din webbplats för att se den fullskärms responsiva menyn i aktion. Vi rekommenderar att du ändrar storlek på din webbläsare för att se hur menyn beter sig på olika skärmstorlekar.

Så här ser det ut på vår demosida.

När du är nöjd med din helskärmsmeny, glöm inte att navigera tillbaka till Alternativ för helskärmsmeny i din WordPress-administratörsmeny och avmarkera 'Visa endast för administratörsanvändare'.

Efter att du har klickat på knappen ‘Spara ändringar’ kommer besökare på din webbplats att kunna komma åt menyn.

Vanliga frågor om att lägga till en responsiv helskärmsmeny i WordPress

Här är några frågor som våra läsare ofta har ställt om att lägga till en responsiv helskärmsmeny i WordPress:

Hur skapar man en responsiv meny i WordPress?

För att skapa en responsiv meny i WordPress, använd ett mobilvänligt menyplugin som FullScreen Menu. Detta säkerställer att din meny anpassas till olika skärmstorlekar för smidig navigering.

Hur gör man en responsiv header i WordPress?

Att göra en responsiv header i WordPress innebär att den anpassar sig automatiskt på alla enheter. Du kan göra detta genom att använda ett responsivt tema eller genom att anpassa header-layouten med CSS och blockredigeraren.

För detaljerade instruktioner, se vår handledning om att anpassa din WordPress-sidhuvud.

Hur gör man en helskärmssida i WordPress?

Du kan skapa en helsidesvy i WordPress genom att använda en sidbyggare som SeedProd eller temaninställningar som tillåter mallar för "helskärm". Detta tar bort sidofält och sträcker ut ditt innehåll över hela skärmen.

Hur skapar man ett responsivt bord i WordPress?

För att skapa ett responsivt bord i WordPress, använd blockredigerarens bordblock eller ett plugin med stöd för responsiva bord. Detta säkerställer att ditt bord rullar eller staplas snyggt på mobila enheter.

Vi hoppas att den här artikeln hjälpte dig att lära dig hur du lägger till en helskärms responsiv meny på din WordPress-webbplats. Du kanske också vill lära dig hur du lägger till en megameny på din WordPress-webbplats eller hur du lägger till en skjutpanelmeny i WordPress-teman.

Om du gillade den här artikeln, prenumerera gärna på vår YouTube-kanal för WordPress-videoguider. Du kan också hitta oss på Twitter och Facebook.