Når man designer en WordPress-hjemmeside , er det vigtigt at fokusere på at skabe den flotteste megamenu i WordPress. Dette er vigtigt, især for e-handels- eller store virksomhedswebsteder, der sigter mod at vise en bred vifte af produkter eller kategorier på deres hjemmeside.
En WordPress megamenu hjælper med at organisere disse kategorier, så brugerne nemt kan navigere gennem dem. Hvordan? En WordPress megamenu er en fantastisk måde at organisere og vise en masse indhold i en enkelt, letnavigerbar menu. Den giver dig mulighed for at arrangere menupunkter i flere kolonner eller rækker, så brugerne hurtigt kan finde forskellige sektioner af dit websted uden at skulle klikke uendeligt gennem sider.
Dette kan gøre en stor forskel i, hvordan besøgende oplever dit websted, ved at gøre navigationen mere gnidningsfri og tilgængelig i webdesign. I denne guide vil vi gennemgå de enkle trin til at tilføje en megamenu til dit WordPress-websted, hvilket gør det nemt for alle at finde det, de leder efter.
Forståelse af Mega Menu i WordPress?
Hvad kan en megamenu være i WordPress, og hvorfor har jeg egentlig brug for den? Du tænker måske dette. En WordPress megamenu giver WordPress-webstedsejere mulighed for at tilføje en række kolonner, medieindhold og tilpasningsmuligheder til, hvordan de designer deres hjemmesidemenu. Tidligere var de traditionelle megamenuer komplekse at navigere i, men med tiden er det blevet nemmere at strukturere og organisere flere kategorier med mega-penge i WordPress.
Generelt inkluderer WordPress en træk-og-slip-builder, der gør det nemt at oprette forskellige typer menuer, såsom dropdowns, headermenuer og mere. Derudover er der plugins, der giver dig mulighed for at tilpasse navigationsmenuer i WordPress-temaer.
Men hvis dit websted har meget indhold, er en almindelig menu måske ikke nok. I så fald er en megamenu en god mulighed. Med en megamenu kan du tilføje rullemenuer med flere kolonner til din WordPress-menu, hvilket hjælper dig med at organisere indhold under forskellige overskrifter og underoverskrifter. På denne måde kan besøgende hurtigt finde det, de leder efter, uden at blive forvirrede.
Relateret: Sådan rettes WordPress-problemer med at tilføje en side til menuen?
Det behøver ikke at være kompliceret at oprette en megamenu i WordPress
Få kontakt med vores professionelle WordPress-udviklere og få den flotteste megamenu i WordPress.
Sådan laver du den flotteste megamenu i WordPress
Nu er der ingen raketvidenskab bag at skabe den flotteste megamenu i WordPress. Alt du behøver er Max Mega Menu Plugin , og din megamenu er klar.
Men hvis du er bekendt med den tekniske side af at oprette en megamenu, kan du også oprette den manuelt. I dette afsnit dækker vi både plugin'et og den manuelle metode for at opnå de bedste resultater.
Så lad os komme i gang:
Sådan opretter du den flotte megamenu i WordPress med pluginet
Den nemmeste måde at tilføje en megamenu til dit WordPress-websted er med Max Mega Menu-pluginnet. Dette værktøj giver dig mulighed for at forbedre dine menuer ved at tilføje rigt indhold som videoer, billedgallerier, søgefelter og meget mere.
Med Max Mega Menu kan du oprette menuer, der er organiserede, visuelt engagerende og nyttige for dine besøgende.
Trin 1: Installer og opsæt Max Mega Menu-plugin'et
For at komme i gang skal du logge ind på dit WordPress-dashboard og gå til Plugins → Tilføj nyt . Skriv "Max Mega Menu" i søgefeltet, og klik derefter på Installer nu og Aktiver .
Hurtigt tip : Før du går i gang, skal du sørge for at have udgivet alle vigtige sider og oprettet en brugerdefineret navigationsmenu med dem.
Når den er aktiveret, skal du navigere til Mega Menu i venstre sidebjælke for at få adgang til indstillingerne. Følg disse trin for at oprette en menuplacering:
- Gå til Udseende → Menuer .
- Vælg Menuplaceringer , og klik på Tilføj en anden menuplacering .
- Vælg, hvor du vil have din menu vist (f.eks. header, footer, sidebar).
- Tildel din brugerdefinerede menu, og klik derefter på Tilføj menuplacering .
I de generelle indstillinger skal du aktivere din megamenu og angive, hvordan den skal åbnes. Du kan vælge mellem:
- Hover Intent : Åbner efter en lille forsinkelse, hvilket forhindrer utilsigtede klik.
- Hover : Åbner øjeblikkeligt, når du holder musen over den, hvilket skaber en problemfri oplevelse.
- Klik : Kræver et klik eller tryk, ideelt til enheder med touchscreen.
Hvis du vælger "Klik", kan du udforske mulighederne under Avanceret → Klikhændelsesadfærd for at kontrollere, hvad der sker ved efterfølgende klik.
Du kan også tilføje animationseffekter under effektindstillingerne . Indstillingerne inkluderer fade , slide eller fade up , med hastighedsindstillinger fra hurtig til langsom.
Trin 2: Tilpas menuens layout og udseende
Max Mega Menu leveres med et standardtema, men du kan også designe dit eget. Sådan skaber du et brugerdefineret udseende:
- Gå til Menutemaer i Max Mega Menu-indstillingerne.
- Klik på ikonet med de tre prikker for at vælge temaet og vælge at tilføje et nyt tema .
- I Generelle indstillinger kan du tilpasse ting som pilestil, linjehøjde og menuskygge.
Under Menulinje kan du tilpasse udseendet af den øverste menu ved at justere højde, baggrundsfarve, margen og tilføje rammer. For hvert menupunkt kan du angive indstillinger som:
- Justering : Placer elementer til venstre, centreret eller højre.
- Skrifttype : Tilpas typografien til dit websteds design.
- Baggrund og afstand : Indstil baggrundsfarver, margener, margen og kanter for et poleret udseende.
Trin 3: Tilføj indhold til din menu
Det er nemt at tilføje indhold med Max Mega Menus træk-og-slip-grænseflade. Du kan inkludere tekstlinks, WooCommerce-produkter, billeder og endda søgefiltre.
- Gå til Udseende → Menuer for at oprette eller redigere en menu.
- I indstillingerne for Max Mega-menuen til venstre skal du markere Aktiver for din valgte placering.
- Tilføj sider, indlæg, kategorier og produkter til menustrukturen.
- Træk og slip elementer for at organisere dem på flere niveauer.
For at oprette en megamenu skal du holde musen over en side og klikke på Megamenu . Indstil visningstilstanden til Gitterlayout for organisering med flere kolonner eller Standardlayout for enklere menuer. Brug widgets som en søgefelt, et billedgalleri eller et produktfilter for at få ekstra funktionalitet. Du kan endda tilføje ikoner til hvert element ved at vælge dem i Ikoner .
Når du har tilpasset alt, skal du klikke på Gem menu for at gøre din megamenu tilgængelig!
Læs: Sådan migrerer du fra Drupal til WordPress: Komplet guide
Sådan opretter du en megamenu manuelt i WordPress
I den første metode så vi, hvordan man opretter en megamenu i WordPress ved hjælp af Max Mega Menu Plugin. Nu vil vi udforske at oprette en flot megamenu i WordPress ved hjælp af CSS-kode.
Denne metode kan være gavnlig for dem, der ønsker mere fleksibilitet og kontrol over deres menudesignelementer. Du skal dog have god CSS- viden for at få de bedste resultater med denne metode.
Trin 1: Opsæt dit staging-miljø
Før du foretager ændringer på dit websted, er det bedst at arbejde i et sikkert rum, hvor du kan eksperimentere uden at påvirke det aktive websted. Du kan bruge enhver administreret WordPress-hosting , der tilbyder et staging-værktøj, der giver dig mulighed for at oprette en kopi af dit websted for at teste ændringer først.
Sådan opretter du et staging-miljø:
- Log ind på hPanel , og vælg Websteder .
- Vælg dit domæne, og klik på Administrer .
- Gå til WordPress → Staging i menuen til venstre.
- Klik på Opret staging under fanen Staging, og følg vejledningen for at oprette et underdomæne til dit staging-miljø.
Lær: Sådan fjerner du ubrugt CSS i WordPress?
Trin 2: Få adgang til og rediger dit temas stylesheet
Når du har dit website klar, kan du trygt redigere dit temas stylesheet for at tilpasse din menu.
Bemærk : Hvis det er muligt, så opret et undertema i stedet for at redigere hovedtemaet for at undgå at miste dine tilpasninger, når temaet opdateres.
Sådan får du adgang til stylesheet i din hosting-filhåndtering:
- Gå til Filer → Filhåndtering i hPanel.
- Vælg dit domænes public_html- mappe, og naviger derefter til Staging → wp_content → themes .
- Åbn dit temas mappe, og dobbeltklik på style.css for at redigere den.
Tilføj denne kode for at gøre undermenupunkter synlige, når man holder musen over dem:
| .main-navigation ul: svæv li ul,.main-navigation ul: svæv li ul li ul {display: inherit;} |
Lær: Sådan får du et staging-websted til at fungere uden at overskrive databasen i WordPress
Trin 3: Tilpas din Mega-menu
Lad os nu give megamenuen et unikt design. Her er et par CSS-kodestykker, der kan hjælpe dig i gang:
Opret kolonner i megamenuen:
| .mega-menu li.mega-menu-column {width: 25%; /* for et layout med 4 kolonner */float: left;padding: 10px;} |
Tilpas menuelementernes farve, margen og tekststil:
| .mega-menu ul.mega-sub-menu li a {farve: #555;margen: 8px 15px;display: blok;tekstdekoration: ingen;} |
Optimer til mobil:
| @media screen og (maks. bredde: 767px) {.mega-menu li.mega-menu-column {bredde: 100%;float: ingen;}} |
Disse uddrag er et godt udgangspunkt, men sørg for at teste og justere efter behov, så de passer til dit websites design. Når du er tilfreds med dine tilpasninger, kan du overføre dine ændringer fra testwebstedet til dit livewebsted.
Lær: Sådan rettes en medieforespørgsel, der ikke virker i WordPress?
De bedste Mega Menu-plugins til at skabe en flot Mega Menu i WordPress
Vi er sikre på, at du nu er fuldt udstyret med den nødvendige viden til at oprette en megamenu i WordPress, uanset om det er med et plugin eller ved hjælp af CSS-kode. Brugen af et plugin er dog uden tvivl den bedste måde at oprette en megamenu i WordPress på. Det er nemt, mindre tidskrævende og bedst for WordPress-begyndere .
Derfor har vi udover Max Mega Menu-pluginet udvalgt et par af de bedste plugins, du kan bruge til at oprette en flottere megamenu til dit WordPress-websted.
UberMenu
UberMenu er et populært valg blandt WordPress-brugere, når det kommer til at tilføje fleksible, responsive mega-menuer og flyout-menuer. Dette premium-plugin giver dig fuld kontrol over overgange, skrifttyper, menuorientering (vandret eller lodret) og baggrundsfarve. Derudover administreres de meget brugerdefinerbare muligheder fra et brugervenligt admin-dashboard.
Her kan du indstille kolonnebredder, tilføje widgets, shortcodes og brugerdefineret HTML og se ændringer i realtid med live preview-tilstand. UberMenu er et effektivt værktøj for alle, der ønsker at skabe et engagerende og dynamisk menulayout.
QuadMenu
QuadMenu er et open source WordPress megamenu-plugin, der er fyldt med muligheder og temaer. Med den gratis version kan du tilføje en navigationswidget, indstille brugerdefinerede breakpoints til menuskjuling og oprette forskellige menustile som off-canvas, sticky, horisontale og vertikale megamenuer. Denne fleksibilitet gør det nemt at designe en navigationsoplevelse, der passer til din hjemmesides stil, uden at bruge penge på en premium-mulighed.
GutenKit
GutenKit er et kraftfuldt Gutenberg-plugin, der forenkler oprettelsen af en megamenu ved hjælp af blokke. Det leveres med præbyggede mønstre og skabeloner, så du øjeblikkeligt kan vælge et design og tilpasse det efter din smag.
Med fuld kontrol over indhold, stil og avancerede tilpasningsmuligheder gør GutenKits brugervenlige grænseflade det til et godt valg for dem, der ønsker at opbygge og forfine websteder i en blokeditor.
Udover sin mega-menufunktion tilbyder den 60+ blokke og 25+ moduler til alsidige tilpasninger i Gutenberg – et ideelt alternativ til ElementsKit til blokbaserede websteder.
JetMenu
JetMenu er et premium-plugin til at lave interaktive WordPress-megamenuer med indholdsrige muligheder som billeder, videoer og lyd. For $43 om året får du adgang til en træk-og-slip-builder og flere menulayouts, herunder hamburger-, vandrette og lodrette orienteringer.
En bemærkelsesværdig funktion er forudindstillingsadministratoren, som giver dig mulighed for at gemme flere skabeloner til forskellige menuer – ideelt til websteder, der har brug for fleksible og engagerende navigationsmuligheder.
Heltemenu
Hero Menu fra Hero Plugins er en fremragende premium-mulighed til at oprette brugerdefinerede WordPress-menuer. Den har en problemfri træk-og-slip-builder med en farvekodet brugerflade, der gør det nemt at organisere og visualisere hierarkiet af menupunkter. Tilføjelse af særlige elementer som et logo, en søgelinje eller ikoner er så simpelt som et klik.
Hero Menu leveres også med flere menustile og 60 forudindstillede farvekombinationer, hvilket sparer dig tid på design. Menuer oprettet med Hero Menu er fuldt responsive og kompatible med WooCommerce, hvilket gør det til et godt valg til e-handelswebsteder.
Derudover er det testet til at fungere problemfrit med populære WordPress-temaer som Divi og Avada, hvilket sikrer problemfri integration med dit websteds design.
Afslutning
Nu hvor du ved, hvordan du opretter en megamenu i WordPress – selvom dit tema ikke leveres med en – er du klar til at gøre det til en leg at navigere på dit indholdsrige websted. Megamenuer er perfekte til at organisere store mængder indhold, hvilket hjælper besøgende med lettere at finde det, de leder efter, hvilket forbedrer den samlede brugeroplevelse.
Før du lancerer dit WordPress-websted, er det afgørende at sikre, at navigationen føles naturlig og intuitiv. For e-handelswebsteder eller websteder med mange sider kan en megamenu være revolutionerende. I modsætning til standardmenuer giver megamenuer dig mulighed for at arrangere komplekse oplysninger på en klar og visuelt engagerende måde.
