Sådan opretter du lodret menu i WordPress

A horizontal menu works well until your site has more pages, categories, or products than a single row can hold. A vertical menu solves that. It stacks your links in a column, so you can fit more top-level items and keep navigation easy to scan on both desktop and mobile.

In this guide, you will learn how to create a vertical menu in WordPress using Elementor and the ElementsKit Vertical Menu widget. You will also learn how to turn it into a collapsible toggle menu and a vertical mega menu, without writing any code.

Hvad er Vertical Menu i WordPress?

En lodret menu i WordPress repræsenterer en samling af links arrangeret i lodret rækkefølge snarere end den traditionelle horisontale. I dag er denne type WordPress lodret menu for nylig blevet ekstremt populær, da den er mere brugervenlig, især på mobile enheder. 

Fordele ved at bruge en lodret menu på et WordPress-websted:

• Fits more top-level links than a horizontal menu without wrapping or shrinking text
• Easy to scan, since visitors read down a list instead of across a bar
• Works well in sidebars, so navigation stays visible as visitors scroll
• Can collapse into a toggle button to save space on smaller screens
• A strong fit for eCommerce stores with many product categories

Sådan opretter du lodret menu i WordPress ved hjælp af Elementor og ElementsKit 

Here is the step-by-step guide on how to make lodret menu in WordPress. You will need a page builder- Elementor- and a vertical menu WordPress plugin – ElementsKit. Du kan nemt oprette WordPress lodret menu, hvis du følger nedenstående trin:

Trin 1: Installer Elementor og ElementsKit  

 For at installere skal du logge ind på dit dashboard og

• Naviger til: Plugins ⇒ Tilføj nyt
• Søg efter Elementor / ElementsKit (én ad gangen)
• Klik på Installer nu

Efter installationen skal du klikke på knappen Aktiver for at aktivere.

Trin 2: Opret en menu til din WordPress lodrette menu

Lad os nu oprette en menu. For dette skal du navigere til Udseende ⇒ Menu. 

Når du er på menusiden, skal du

1. Klik på Opret en ny menu
2. Angiv et navn under Menunavn mulighed
3. Til sidst skal du klikke på Opret menu for at oprette menuen.

Nu skal du:

1. Vælg menuen fra rullemenuen
2. Klik på Vælg
3. Klik på afkrydsningsfeltet i den menu, du ønsker at tilføje
4. Klik på Tilføj til menu for at tilføje til den menu, du vælger
5. Endelig, klik på menuen Gem for at opdatere

Hvis du har en menu på flere niveauer, kan du omarrangere menupunkterne og klik på menuen Gem at opdatere.

Trin 3: Aktiver lodret menu-widget i ElementsKit

Naviger til ElementsKit ⇒ WIDGETS ⇒ Lodret menu-widget, tænd for widgetten og klik på Gem ændringer.

Trin 4: Træk og slip widgetten

Rediger siden med Rediger med Elementor mulighed. Derefter Søg for the Vertical Menu widget, marked with the Ekit icon, and simply Træk og slip it onto the page.

Trin 5: Tilpas lodrette menuindstillinger

Nu er det tid til at tilføje den menu, du lige har oprettet, eller den, du foretrak, til din lodrette menu. Du kan gøre det fra rullemenuen Vælg menu.

Hvis du vil forvandle din Elementor lodrette menu til en sammenklappelig knap, skal du slå til/fra-knappen til. Når du tænder, kan du ændre titlen på skifteknappen og kan også vælge at tilføje ikoner på både venstre og højre side.

Aktiver indstillingen Aktiver hover, og aktiver til/fra-knappen til hover (som standard fungerer det ved klik).

Trin 6: Tilpas stilen på den vertikale menu

Nu er det tid til at ændre stilen på din lodrette menu. For at flytte til stilfanen.

Udvid indstillingen Menu Container for at ændre Baggrundstype, Farve, Placering, Anden farve, Box Shadow, Border radius og så videre.

På samme måde kan du ændre mange stilindstillinger under menupunkter og undermenupunkter.

Når du er færdig med al tilpasningen, skal du klikke på udgiv og se forhåndsvisningen:

Sådan opretter du en vertikal megamenu i WordPress ved hjælp af Elementor og ElementsKit 

For at følge denne vejledning skal du sørge for, at den lodrette menu-widget, du aktiverede tidligere, stadig er tændt.

Trin 1: Tænd for de nødvendige ElementsKit-moduler 

Naviger til ElementsKit ⇒ Moduler, slå både Mega Menu og Header Footer Builder til, og endelig klik på Gem ændringer for at opdatere.

Sørg nu for at oprette en menu til din lodrette menu ved at følge trin vist ovenfor. 

Trin 2: Slå ElementsKit Megamenu til 

Når du er færdig med at forberede din menu, skal du kontrollere ElementsKit Megamenu-indstillingen for at aktivere megamenufunktionen. Når du har markeret denne mulighed, vil du se mega menuindstillingen, hvis du holder musemarkøren over menuen.

Trin 3: Konverter menu til mega menu ved hjælp af ElementsKit 

For nu at konvertere en simpel menu til en megamenu, svæv på menuen og klik på megamenuen. Derefter tænd for Mega-menuskifteknappen end klik på Rediger Mega Menu Indhold. 

Klik nu på Ekit-ikonet, flyt til sektionsfanen, søg efter mega-menuen og vælg derefter den forudlavede mega-menuskabelon, du kan lide. Når du har indsat det, kan du redigere det efter dine behov.

Når du er færdig, skal du klikke på opdater for at gemme menuen. Gentag den samme proces på alle de menuer, som du ønsker at oprette en megamenu for. 

Og det er det, du har lavet din mega menu. Du kan bruge ElementsKit header footer builder til at tilføje en megamenu til din hjemmeside. 

For flere detaljer om ElementsKits megamenubygger, tjek vores blog Sådan opbygger du en megamenu med Elementor og ElementsKit. Du kan også se hele processen i videoen herunder:

Vertical Menu Styles You Can Build

The same ElementsKit Vertical Menu widget for Elementor can produce several different looks:

Simple vertical menu: a clean list of links with dropdown arrows for sub menus.

Menu with background color: each item sits on a solid color for stronger contrast.

Toggle vertical menu: the menu opens from a button such as “All Categories”, which is ideal for eCommerce sidebars.

Collapse vertical menu: sub items stay closed until a visitor clicks, which keeps long lists tidy.

See each style live on the ElementsKit Vertical Menu side.

Best Practices for Building Vertical Menus

• Keep top-level items to the pages visitors actually need, and group the rest under sub menus.
• Use short labels so items do not wrap onto two lines in a narrow sidebar.
• Use the toggle option when the menu sits in a small space, so it does not take up room until needed.
• Use a mega menu for categories with many children, such as product categories in a store.
• Preview on tablet and mobile in Elementor’s responsive mode before publishing.

Ofte stillede spørgsmål

Afsluttende ord

A vertical menu gives you more room for links, a cleaner sidebar, and an easier path through larger sites. With the ElementsKit Vertical Menu widget, you can build one in a few minutes, turn it into a toggle menu, or extend it into a vertical mega menu without touching code.

If you run an online store, the mega menu option is especially useful for organizing product categories. If you have questions about setting up your menu, reach out to our support team and we will help.