Divi Mobilmenu: Gør Din Menu Unik med Et Plugin

Har du nogensinde ønsket at style dine mobilmenuer uafhængigt af dine desktop-menuer i Divi? Divis eget menusystem inkluderer indstillinger for mobil, der placerer menuen inden for et hamburgerikon, men hvad nu hvis du ville bruge en anden header til mobil, tilføje ny styling eller endda animere menuens åbnings- eller lukkehandlinger? Dette kan du nu gøre med et tredjeparts-plugin kaldet Mobile Menu Customizer.

I denne dybdegående gennemgang vil vi se nærmere på Mobile Menu Customizer fra Divicio.us og udforske, hvad det kan, og hvilken effekt det vil have på din hjemmesides indlæsningstid. Vi dykker ned i alle de avancerede tilpasningsmuligheder, som dette plugin tilbyder, og viser dig, hvordan du kan skabe en mobilmenu, der ikke kun er funktionel, men også visuelt imponerende og engagerende for dine brugere.

Hvad er Mobile Menu Customizer, og hvorfor har du brug for det?

Divi er et utroligt alsidigt tema, men når det kommer til den mobile menu, kan standardindstillingerne føles en smule begrænsede. Mens Divi automatisk omdanner din primære menu til et praktisk hamburgerikon på mindre skærme, savner mange brugere muligheden for at give denne mobilmenu sin egen unikke identitet. Her kommer Mobile Menu Customizer ind i billedet som en kraftfuld løsning.

Dette plugin er designet specifikt til at udvide Divis mobile menu-funktionalitet, hvilket giver dig en hidtil uset kontrol over udseendet og opførslen af din menu på smartphones og tablets. Forestil dig at kunne ændre farver, skrifttyper, baggrunde og endda tilføje iøjnefaldende animationer – alt sammen uafhængigt af din desktop-menu. Mobile Menu Customizer gør det muligt at skabe en fuldstændig skræddersyet mobiloplevelse, der afspejler dit brands æstetik og forbedrer brugervenligheden markant.

Uanset om du ønsker en minimalistisk og elegant menu, en livlig og farverig navigation eller en menu, der animerer sig ind og ud af syne, giver Mobile Menu Customizer dig værktøjerne til at realisere din vision. Det handler ikke kun om æstetik; en veldesignet mobilmenu kan forbedre navigationen, reducere afvisningsprocenten og i sidste ende føre til en bedre brugeroplevelse for dine besøgende.

Installation og Første Skridt med Mobile Menu Customizer

At komme i gang med Mobile Menu Customizer er en ligetil proces, der ligner installationen af de fleste WordPress-plugins. Før du kan dykke ned i de spændende tilpasningsmuligheder, skal du dog sørge for at følge disse trin nøje:

1. Forberedelse af Filen

Først og fremmest skal du pakke den downloadede fil ud. Når du downloader Mobile Menu Customizer fra Divicio.us, vil du typisk modtage en .zip-fil. Inde i denne .zip-fil finder du tre vigtige filer:

• Changelog (En log over ændringer og opdateringer til pluginet)
• Divi-mobile-menu-customizer (Selve plugin-filen, som er den du skal bruge)
• README (En tekstfil med grundlæggende information)

Det er divi-mobile-menu-customizer.zip-filen (eller blot divi-mobile-menu-customizer, hvis du allerede har pakket den ud), du skal uploade til din WordPress-installation.

2. Upload og Aktivering af Pluginet

Naviger til dit WordPress-dashboard. Fra venstre sidebjælke skal du gå til Plugins > Tilføj nyt. Øverst på siden finder du knappen Upload Plugin. Klik på denne, vælg den udpakkede divi-mobile-menu-customizer.zip-fil fra din computer, og klik på Installer nu.

Efter installationen skal du klikke på Aktiver plugin for at gøre Mobile Menu Customizer klar til brug på din hjemmeside.

3. Indtastning af Licensnøgle

For at sikre, at du modtager fremtidige opdateringer og support til Mobile Menu Customizer, er det afgørende at indtaste din licensnøgle. Efter aktivering vil du se et nyt link i dit plugin-menu i dashboardet, ofte navngivet DMMC Plugin License eller lignende. Klik på dette link, og indtast din unikke licensnøgle i det angivne felt. Dette forbinder din installation med din købte licens og giver dig adgang til alle de seneste funktioner og forbedringer.

Med disse trin fuldført er Mobile Menu Customizer nu fuldt installeret og klar til at blive konfigureret gennem Divis Tema-tilpasning. Nu kan den sjove del begynde – at tilpasse din mobilmenu!

Nye Indstillinger i Divi Tema-Tilpasning

Når Mobile Menu Customizer er installeret og aktiveret, vil du opdage en væsentlig udvidelse af dine tilpasningsmuligheder i Divis Tema-tilpasning (Theme Customizer). Dette er din primære arbejdsplads for at designe din unikke mobilmenu.

Adgang til Tilpasningspanelet

For at få adgang til de nye indstillinger skal du navigere til Udseende > Tilpas i dit WordPress-dashboard. Her vil du se et nyt menupunkt kaldet Mobile Menu Customizer.

Når du vælger dette menupunkt, vil din hjemmeside automatisk blive vist i en mobilvisning direkte i tilpasserens forhåndsvisningsvindue. Dette er en utrolig praktisk funktion, da den giver dig mulighed for at se ændringerne live, mens du foretager dem, uden at skulle skifte mellem faner eller enheder. Du kan også vælge at se din hjemmeside i tablet-tilstand for at optimere designet for mellemstore skærme.

De Syv Hovedmenuer

Inden for Mobile Menu Customizer-menuen finder du syv forskellige menuer, der hver især indeholder et væld af detaljerede indstillinger. Disse menuer er logisk organiseret for at give dig fuld kontrol over forskellige aspekter af din mobilmenu:

1. Menu Header Settings: Kontrol over den øverste bjælke, hvor hamburgerikonet normalt sidder.
2. Menu Settings: Generelle indstillinger for selve menu-dropdown'en.
3. Menu Item Settings: Tilpasning af de individuelle menupunkter.
4. Submenu Settings: Specifikke indstillinger for undermenuer.
5. Shadow: Mulighed for at tilføje og tilpasse skygger.
6. Gradients: Anvendelse af farvegradienter på menuen.
7. Animations: Tilføjelse af dynamiske animationer til åbning og lukning.

Hver af disse menuer indeholder et væld af muligheder, som vi vil udforske i detaljer nedenfor, så du kan skabe en mobilmenu, der ikke kun er funktionel, men også visuelt fængslende.

Detaljeret Gennemgang af Tilpasningsmuligheder

Mobile Menu Customizer skinner virkelig igennem med sin dybde af tilpasningsmuligheder. Lad os dykke ned i hver af de syv hovedmenuer og se, hvad de tilbyder:

1. Menu Header Indstillinger

Dette afsnit giver dig kontrol over den øverste del af din mobilmenu – den bjælke, der typisk indeholder dit logo og hamburgerikonet. Her kan du justere:

• Header baggrundsfarve: Skift farven på den øverste bjælke.
• Tekst- og ikonfarve: Definer farven på den tekst og de ikoner, der vises i headeren.
• Ikonformat: Vælg mellem forskellige ikonformater (f.eks. hamburgerikon, X-ikon ved åbning).
• Type tekst for åben og lukket menu: Tilføj din egen tekst, der vises, når menuen er lukket, og når den er åben (f.eks. Menu og Luk).
• Tekststørrelse og ikonstørrelse: Juster størrelsen på teksten og ikonerne for optimal læsbarhed og æstetik.
• Menubjælke skrifttype: Vælg skrifttypen for teksten i menubjælken.
• Dropdown menu top offset: Juster afstanden mellem headeren og den udfoldede menu.

Jeg har personligt ændret headerens baggrundsfarve samt tekst- og ikonfarverne for at matche mit brand. Jeg har valgt at vise både tekst og menuikon, indtastet den ønskede tekst, og valgt fed og kursiv skrifttype. Du kan også vælge kun at vise ikonet, kun teksten, eller flytte ikonet til venstre og teksten til højre, hvilket giver en utrolig fleksibilitet i udtrykket.

For den åbne menu har jeg indtastet en specifik tekst, der skal vises, og valgt at bruge et X-ikon for at indikere lukning. Jeg har også indstillet dropdown-menuens top-forskydning til 5 pixels, blot for at demonstrere, at denne indstilling er fuldt justerbar.

2. Menu Indstillinger

Dette afsnit fokuserer på de generelle indstillinger for selve menu-dropdown'en, når den er udfoldet:

• Fastgjort menu: Bestem om menuen skal forblive synlig, når brugeren scroller (sticky menu).
• Fuld bredde (i portræt-tilstand): Angiver om menuen skal strække sig over hele skærmens bredde i portræt-tilstand.
• Polstring: Juster den indvendige afstand i menuen.
• Topbjælke baggrundsfarve: Farven på den øverste bjælke, som er adskilt fra resten af menuen.
• Tekstindstillinger: Kontrol over justering, farve, og gennemsigtighed af menupunkt-teksten.
• Kantindstillinger: Tilpas bredde, radius og farve for menuens kanter.

Jeg har indstillet menuen til at være fastgjort, så den forbliver på skærmen under scrolling, hvilket er ideelt for hurtig navigation. Jeg har også justeret baggrundsfarverne for topbjælken og selve menuen og centreret teksten for et rent look. En smart detalje er muligheden for at indstille gennemsigtigheden, så en smule af baggrunden skinner igennem, hvilket giver en dybdeeffekt.

Jeg har øget både afstanden mellem menupunkterne og skriftstørrelsen, justeret skriftfarverne og tilpasset kantbredden, -radius og -farven. I et andet eksempel har jeg justeret den øverste kantradius samt højre og venstre kantbredde, hvilket skaber en unik ramme. Det ville være en fordel, hvis de små skydere havde en knap til at nulstille dem til standardindstillingerne, men det er en mindre detalje.

3. Menu Element Indstillinger

Disse indstillinger gælder for de individuelle menupunkter inden for menuen, hvilket giver dig granuleret kontrol over deres udseende:

• Margener: Juster afstanden omkring hvert menupunkt.
• Højde: Definer højden af hvert menupunkt.
• Baggrundsfarve: Sæt baggrundsfarven for hvert menupunkt.
• Kantbredde, -radius og -farve: Tilpas kanterne for hvert enkelt menupunkt.

I dette eksempel har jeg øget margenerne til 4 pixels, indstillet elementhøjden til 22 pixels, sat kantbredden til 5 pixels og kantradius til 8 pixels for at give dem et let afrundet hjørne. Dette kan virkelig hjælpe med at adskille menupunkterne visuelt og forbedre læsbarheden.

4. Undermenu Indstillinger

Mobile Menu Customizer giver dig også fuld kontrol over udseendet og opførslen af dine undermenuer:

• Gør undermenuen sammenklappelig: Bestem om undermenuer skal foldes ud og ind ved klik.
• Skift farver for baggrund og links: Tilpas farverne specifikt for undermenuens baggrund og dens links.
• Juster skriftstørrelse og stil: Indstil skriftstørrelse og stil for teksten i undermenuerne.

Jeg har justeret farverne for undermenuerne, øget skriftstørrelsen fra 14 til 16, sat den til kursiv og gjort den sammenklappelig. Den sammenklappelige funktion er især nyttig for at holde mobilmenuen organiseret og undgå at overvælde brugeren med for mange valgmuligheder på én gang.

5. Skygge (Shadow)

Tilføjelse af skygger kan give din menu en følelse af dybde og adskillelse fra baggrunden:

• Kontroller ind- og udretning: Bestem om skyggen skal være indad (inset) eller udad (outset).
• X- og Y-forskydning: Juster skyggens position horisontalt og vertikalt.
• Sløring og spredning: Kontroller, hvor blød eller skarp skyggen er, og hvor meget den spreder sig.
• Farve: Vælg skyggens farve.

Jeg har indstillet denne skygge til outset med en X-forskydning på 20, en Y-forskydning på -17, en sløring på 5 og en spredning på 10. Jeg har også mørknet den for at få den til at skille sig ud, hvilket giver menuen en mere fremtrædende og professionel fremtoning.

6. Gradienter (Gradients)

Gradienter giver dig mulighed for at skabe smukke farveovergange på din menu, både for headeren og selve menuen:

• Tre farver med stop-placering for hver: Definer op til tre farver og deres placering i gradienten.
• Vinkel: Juster vinklen på gradienten for at styre overgangens retning.

Dette giver et kig på menu-gradienten, hvor jeg har skabt en flydende overgang mellem forskellige nuancer. Du kan også anvende forskellige gradienter for menuen og menuheaderen. Her er den samme gradient med en anden vinkel og stop-placeringer for menuheaderen, hvilket skaber en visuelt tiltalende og dynamisk effekt.

7. Animationer (Animations)

Tilføjelse af animationer kan gøre din mobilmenu mere interaktiv og engagerende:

• To dropdown-lister: Én for åbningsanimation og én for lukkende animation.
• 10 animationer hver: Inkluderer effekter som fade, shrink, zoom, flip osv.

Du kan bruge ind- og ud-animationerne i enhver kombination, du ønsker. For eksempel kan du bruge Fade In Right og Fade Out Left for en glidende overgang. Eller prøv Grow og Shrink for en mere dynamisk effekt. Flip In X og Flip Out Y kan give en sjov og iøjnefaldende effekt, mens Lightspeed In og Fade Out tilbyder en hurtig og elegant åbning. Disse animationer tilføjer et professionelt og moderne præg til din mobilmenu.

Nye Tilføjelser: Baggrundsbillede og Menuikoner

Før denne artikel blev publiceret, blev to nye, yderst værdifulde indstillinger tilføjet, som yderligere udvider tilpasningsmulighederne:

Baggrundsbillede Indstillinger

Disse indstillinger giver dig mulighed for at uploade et billede, der skal placeres bag dropdown-menuen. Du kan derefter kontrollere:

• Størrelse: Juster størrelsen af baggrundsbilledet.
• Position: Bestem billedets placering inden for menuen.
• Gentagelse: Angiv om billedet skal gentages (fliser).
• Klipning for kanten: Styr hvordan billedet klipper i forhold til menuens kanter.

Dette åbner op for helt nye designmuligheder, hvor du kan integrere grafik eller mønstre direkte i din mobilmenu.

Menu Ikon Indstillinger

En længe ventet funktion! Med disse indstillinger kan du nu:

• Vælg et ikon for hvert menupunkt: Tilføj visuelle ikoner ved siden af eller over dine menupunkter.
• Juster størrelse og placering: Kontroller størrelsen på ikonerne og deres position i forhold til teksten.

Menuikoner kan forbedre navigationen betydeligt ved at give visuelle ledetråde og gøre det lettere for brugere at scanne og finde det, de leder efter.

Kombination af Indstillinger for Unikke Designs

Hver af de nævnte indstillinger er kraftfuld i sig selv, men Mobile Menu Customizer afslører sit fulde potentiale, når du begynder at kombinere dem. Her er et par eksempler på, hvordan forskellige indstillinger kan flettes sammen for at skabe unikke og iøjnefaldende designs:

• Elegant og Subtil: I et eksempel har jeg justeret menuens baggrunds- og linkfarver, udskiftet menuikonet med tekst, ændret farven på bjælken, justeret menupunktets højde, tilføjet en topkant, indstillet undermenuens skrifttyper til fed og kursiv, valgt en undermenu-farve og tilføjet en skygge ved hjælp af inset og justeret indstillingerne, så den kun lige anes. Resultatet er et sofistikeret og diskret look.
• Fed og Kontrastfyldt: En anden opsætning bruger en forskudt kantbredde med en radius på 12 for at afrunde hjørnerne. Kantfarven er rød, og jeg har øget skriftstørrelsen og bredden til maksimum. Baggrunden er sort med en gennemsigtighed på 0.87, mens headeren er sort med en gennemsigtighed på 0.55. Menulinket er rødt for at matche dropdown-menuens kant, hvilket skaber en stærk visuel kontrast.
• Varm og Gradient-fokuseret: Et eksempel øger skriftstørrelserne og bruger forskellige nuancer af røde gradienter til både headeren og dropdown-menuen. Jeg har indstillet topbjælkens farve til en mørk rød nuance for at matche, og har også justeret menuens højde for et harmonisk udtryk.
• Luftig og Moderne: Dette eksempel bruger en dropdown-menu top-forskydning på 100 pixels og er ikke fastgjort. Bogstavsafstanden og skriftstørrelsen er maksimeret. Menuens kantradius er sat til 50, og kantbredden til 5. Teksten er højrejusteret. Baggrunden er hvid med en gennemsigtighed på 30%. Menupunktets kantbredde er 1, og radius er 25. Jeg har brugt den samme sorte baggrund, men med en gennemsigtighed på 0.08, og kantens gennemsigtighed er 0.12. Undermenuens indstillinger har en baggrundsgennemsigtighed på 0.55 og en hvid skrifttype. Skyggen træder kun lige frem med den samme sorte farve, men med en gennemsigtighed på 0.17. Skyggens forskydning er sat til 16 for både X og Y. Jeg har placeret en gradient i headeren ved hjælp af sort med forskellige niveauer af skygge og gennemsigtighed.

Et par små justeringer kan ændre udseendet fuldstændigt. For eksempel kan brugen af fed skrift, der er centreret, kombineret med en baggrundsgennemsigtighed på 0.90, give et helt andet udtryk. Det er en god idé at skifte mellem mobil- og tablet-tilstand, mens du foretager dine tilpasninger, for at sikre, at menuen ser perfekt ud på alle enheder.

Ydeevne: Mobile Menu Customizer og PageSpeed

Et vigtigt spørgsmål, når man tilføjer et nyt plugin, især et der render en masse visuelle effekter, er dets indvirkning på hjemmesidens ydeevne og indlæsningstid. En langsom hjemmeside kan skade brugeroplevelsen og din SEO-rangering.

Jeg besluttede at teste Mobile Menu Customizer ved hjælp af Google PageSpeed Insights. Testen blev udført på en testserver uden brug af minifierings- eller cache-plugins for at give et klart billede af pluginets rå indvirkning.

• Plugin deaktiveret: Min testserver opnåede en score på 70 i PageSpeed Insights. Dette er udgangspunktet uden Mobile Menu Customizer aktiv.
• Plugin aktiveret: Med Mobile Menu Customizer aktiveret og alle funktioner slået til, faldt scoren fra 70 til 69. Jeg gentog testen to gange og fik det samme resultat begge gange.

Dette resultat er yderst positivt. Et fald på kun 1 point i PageSpeed-scoren er negligerbart i den store sammenhæng. Det indikerer, at Mobile Menu Customizer er et veloptimeret plugin, der ikke væsentligt belaster din hjemmesides indlæsningstid, selv når du udnytter alle dets avancerede tilpasningsfunktioner.

At have dette niveau af tilpasningsmuligheder for kun 1 points forskel i PageSpeed er absolut en god handel. Det betyder, at du kan skabe en visuelt fantastisk og animeret mobilmenu uden at skulle bekymre dig om, at det vil gøre din hjemmeside langsom. Dette er afgørende for at opretholde en god brugeroplevelse og sikre, at din hjemmeside forbliver hurtig og responsiv på mobile enheder.

Licens og Support

Når du investerer i et premium-plugin som Mobile Menu Customizer, er licens- og supportbetingelserne ofte lige så vigtige som selve funktionerne. Divicio.us tilbyder en attraktiv pakke, der giver dig ro i sindet:

• Ubegrænsede hjemmesider: Du kan installere Mobile Menu Customizer på et ubegrænset antal hjemmesider, både til dig selv og dine klienter. Dette er en enorm fordel for webudviklere og bureauer, da det eliminerer behovet for at købe separate licenser for hvert projekt.
• Livstidsopdateringer: Pluginet inkluderer livstidsopdateringer. Det betyder, at du altid vil have adgang til de seneste funktioner, forbedringer, og vigtigst af alt, kompatibilitetsopdateringer med fremtidige versioner af Divi og WordPress. Dette sikrer, at dit plugin forbliver funktionelt og sikkert i mange år fremover.
• 6 måneders support: Du modtager 6 måneders support fra købsdatoen. Dette er tilstrækkeligt til at hjælpe dig med eventuelle installationsproblemer, konfigurationsudfordringer eller spørgsmål, der måtte opstå under implementeringen af pluginet. Hvis du har brug for support ud over de 6 måneder, er der typisk mulighed for at forlænge supportperioden.
• Dokumentation: Dokumentation leveres som videoer på udviklerens hjemmeside. Video-dokumentation er ofte meget effektiv, da den visuelt guider dig gennem processerne, hvilket gør det nemmere at følge med og forstå de forskellige indstillinger.

Disse licens- og supportbetingelser gør Mobile Menu Customizer til en robust og langsigtet investering for enhver Divi-bruger, der ønsker at løfte sin mobile menu til et nyt niveau. Fraværet af årlige licensafgifter for opdateringer er et stort plus og øger pluginets værdi betydeligt.

Konklusion og Anbefaling

Mobile Menu Customizer er et plugin, der tilføjer et væld af funktioner til at style din mobilmenu i Divi. Jeg fandt tilpasningsmulighederne utrolig nemme at bruge og intuitive, hvilket gør det tilgængeligt selv for brugere med begrænset teknisk erfaring. Den umiddelbare forhåndsvisning i Tema-tilpasningen er en game-changer, da den giver dig mulighed for at se dine ændringer i realtid og hurtigt finjustere designet.

En af de positive udviklinger er, at pluginet nu inkluderer menuikoner, som var en funktion, jeg tidligere savnede. Dette forbedrer brugeroplevelsen markant ved at tilføje visuelle ledetråde til navigationspunkterne.

Der er dog et par punkter, hvor pluginet kunne forbedres. Jeg ville gerne se et par funktioner til logoet i den mobile header, da logoet ofte er en central del af brandidentiteten. Derudover ville det være en fordel, hvis tilpasningsmulighederne også var tilgængelige for desktop-menuer, hvilket ville gøre pluginet til en mere omfattende løsning for menutilpasning. Det er også vigtigt at bemærke, at pluginet ikke fungerer med Divi Extra temaet, hvilket er en begrænsning for brugere af dette specifikke tema.

På trods af disse mindre begrænsninger er tilpasningsmulighederne fantastiske, og der er et utal af indstillinger at vælge imellem. Jeg sætter pris på, at du kan style headeren og menuen uafhængigt, hvilket giver en utrolig fleksibilitet i designet.

Hvis du er interesseret i at tilpasse din mobilmenus stilarter og tilføje nogle animationer, er Mobile Menu Customizer absolut et kig værd. Det tilbyder en dybde af kontrol, som Divi's standardindstillinger simpelthen ikke kan matche, og giver dig mulighed for at skabe en mobiloplevelse, der skiller sig ud og forbedrer din hjemmesides samlede æstetik og funktionalitet. Det er en kraftfuld tilføjelse til enhver Divi-brugers værktøjskasse.

Ofte Stillede Spørgsmål (FAQ)

Har Divi en mobilmenu som standard?

Ja, Divi har en indbygget mobilmenu, der automatisk vises som et hamburgerikon på mindre skærme. Dog er standardtilpasningsmulighederne for denne menu ret begrænsede.

Kan jeg style min mobilmenu anderledes end min desktopmenu i Divi?

Med Mobile Menu Customizer-pluginet kan du style din mobilmenu fuldstændigt uafhængigt af din desktopmenu, herunder farver, skrifttyper, baggrunde, kanter og animationer.

Påvirker dette plugin min hjemmesides indlæsningstid (PageSpeed)?

Vores test viser, at Mobile Menu Customizer har en minimal indvirkning på PageSpeed. I test faldt scoren kun med 1 point, hvilket indikerer, at pluginet er veloptimeret og ikke vil gøre din hjemmeside væsentligt langsommere.

Kan jeg tilføje animationer til min mobilmenu med dette plugin?

Ja, Mobile Menu Customizer tilbyder 10 forskellige åbnings- og lukkende animationer, som du kan kombinere frit for at skabe dynamiske og engagerende overgange for din mobilmenu.

Fungerer Mobile Menu Customizer med Divi Extra temaet?

Nej, ifølge udvikleren fungerer Mobile Menu Customizer desværre ikke med Divi Extra temaet.

Hvad er licensbetingelserne for Mobile Menu Customizer?

Pluginet kan installeres på ubegrænsede hjemmesider (til dig selv og dine klienter), inkluderer livstidsopdateringer og 6 måneders support.

Hvis du vil læse andre artikler, der ligner Divi Mobilmenu: Gør Din Menu Unik med Et Plugin, kan du besøge kategorien Mobil.