19/02/2024
I den moderne digitale verden er en ensartet brugeroplevelse på tværs af alle enheder essentiel. Når du designer en hjemmeside med Divi-temaet, et af de mest populære WordPress-temaer, kan du støde på en udfordring: hvordan sikrer du, at din menu ser ens ud på både desktop og mobile enheder? Mange webdesignere foretrækker at beholde deres fulde desktop-menu frem for den traditionelle 'hamburger'-menu på mindre skærme. Denne artikel vil guide dig trin for trin gennem processen med at opnå netop dette.
Divi-temaet er kendt for sin fleksibilitet og brugervenlighed, men standardindstillingerne for mobilvisning af menuer kan være begrænsende for nogle. Når en hjemmeside bygget med Divi besøges på en tablet eller en smartphone, skifter headeren typisk til en 'hamburger'-menu. Dette er en pladsbesparende løsning, der komprimerer alle menupunkter bag et ikon med tre vandrette streger. Selvom denne løsning er praktisk, kan den nogle gange bryde med det overordnede design eller gøre navigationen mindre intuitiv for brugerne, især hvis der kun er få menupunkter.
Divi-temaet anvender en 'breakpoint' for at bestemme, hvornår menuen skal skifte fra desktop-format til mobil-format. Standard breakpointet for tablets i Divi er 980px. Det betyder, at enhver skærm med en opløsning mindre end 980 pixels vil vise den komprimerede hamburger-menu. For smartphones er dette breakpoint ofte endnu lavere.
Formålet med denne artikel er at give dig en løsning, så du kan beholde dit desktop-menu på mobilenheder og dermed deaktivere hamburger-menuen i Divi's standard header. Vi vil fokusere på den standard header-funktion i Divi, da menu-modulet har sine egne specifikke tilpasningsmuligheder, som vi berører kort.
Der er flere scenarier, hvor det giver mening at undlade hamburger-menuen:
- Få menupunkter: Hvis din menu kun indeholder et par elementer (f.eks. Hjem, Om os, Kontakt), kan de ofte passe fint på mindre skærme uden at optage for meget plads.
- Designkonsistens: For at opretholde et ensartet visuelt udtryk på tværs af alle enheder.
- Brugervenlighed: Nogle brugere finder det hurtigere at tilgå menuen, når alle punkter er synlige med det samme.
Forestil dig, at du har en simpel navigationsstruktur. At skulle trykke på et hamburger-ikon for at se tre menupunkter kan føles unødvendigt. Ved at implementere nedenstående løsning kan du sikre, at dine besøgende ser den samme, velkendte navigationsstruktur, uanset hvilken enhed de bruger.
Den mest effektive måde at opnå dette på er ved at tilføje et par linjer CSS-kode. Denne kode vil specifikt målrette og skjule hamburger-menuen, mens den sikrer, at din eksisterende desktop-menu forbliver synlig på mindre skærme.
Trin 1: Tilgå Divi's Tema Indstillinger
Først og fremmest skal du logge ind på dit WordPress-dashboard. Naviger derefter til 'Divi' i sidemenuen og klik på 'Tema Indstillinger'.
Trin 2: Find sektionen 'Brugerdefineret CSS'
Inde i Divi's Tema Indstillinger skal du finde og klikke på fanen 'Generelt'. Rul ned, indtil du finder feltet mærket 'Brugerdefineret CSS'. Dette er her, du skal indsætte din kode.
Trin 3: Indsæt CSS-koden
Kopier og indsæt følgende CSS-kode i feltet 'Brugerdefineret CSS':
@media (max-width: 980px) { #et_mobile_nav_menu { display: none; } #top-menu { display: block; } }Forklaring af CSS-koden:
@media (max-width: 980px) { ... }: Dette er en medieforespørgsel. Koden inden i krøllede parenteser vil kun blive anvendt på skærme, der er 980 pixels brede eller smallere. Dette svarer til Divi's standard breakpoint for mobilvisning.#et_mobile_nav_menu { display: none; }: Denne linje målretter det HTML-element, der repræsenterer Divi's hamburger-menu (identificeret ved ID'et `et_mobile_nav_menu`), og sætter dets visning til 'none', hvilket effektivt skjuler det.#top-menu { display: block; }: Denne linje målretter det HTML-element, der repræsenterer din primære desktop-menu (identificeret ved ID'et `top-menu`), og sikrer, at det forbliver synligt ved at sætte dets visning til 'block'.
Trin 4: Gem Ændringerne
Efter at have indsat koden, skal du huske at klikke på knappen 'Gem ændringer' nederst på siden for at anvende dine nye indstillinger.
Tilpasning til Tablets eller Specifikke Breakpoints
Måske ønsker du kun at deaktivere hamburger-menuen på tablets og beholde den på smartphones. I så fald kan du justere medieforespørgslen. Divi's standard breakpoint for tablets er ofte omkring 768px.
Hvis du specifikt ønsker at deaktivere hamburger-menuen for tablets (typisk mellem 768px og 980px), kan du bruge følgende kode:
@media (min-width: 768px) and (max-width: 980px) { #et_mobile_nav_menu { display: none; } #top-menu { display: block; } }Denne kode sikrer, at hamburger-menuen skjules og desktop-menuen vises for enheder inden for det angivne tablet-interval, mens enheder, der er smallere end 768px (smartphones), vil fortsætte med at vise hamburger-menuen som standard.
Vigtige Overvejelser
- Test grundigt: Efter at have implementeret koden, er det afgørende at teste din hjemmeside på forskellige enheder og skærmstørrelser for at sikre, at alt vises korrekt. Brug din browsers udviklerværktøjer (ofte tilgængelige ved at trykke F12) til at simulere forskellige enheder.
- Menuens Indhold: Vær opmærksom på, hvor mange menupunkter du har. Hvis du har en meget lang menu, kan det at vise den fuldt ud på en lille mobilskærm stadig være problematisk for brugeroplevelsen. I sådanne tilfælde kan hamburger-menuen være den bedste løsning.
- Andre Menuer: Som nævnt tidligere, hvis du bruger Divi's Menu-modul i stedet for den header, der følger med temaet, skal du bruge en anden tilgang. Du kan finde tutorials om deaktivering af mobilmenuen for Menu-modulet separat.
Lad os se på fordele og ulemper ved begge tilgange:
| Funktion | Standard Divi Hamburger Menu | Tilpasset Desktop Menu på Mobil |
|---|---|---|
| Pladsbesparelse | Høj | Lav/Mellem |
| Tilgængelighed af menupunkter | Kræver klik for at afsløre | Direkte synlige |
| Designkonsistens | Varierer | Høj |
| Implementering (uden kode) | Standard | Kræver CSS |
| Visuel kompleksitet på mobil | Lav | Kan være høj med mange punkter |
| Brugervenlighed (med få punkter) | Mindre intuitiv | Høj |
Ofte Stillede Spørgsmål (FAQ)
Kan jeg bruge Divi på en tablet eller telefon?
Ja, absolut. Divi er et responsivt tema, hvilket betyder, at det automatisk tilpasser sig forskellige skærmstørrelser, herunder tablets og telefoner. Standardopførslen er at vise en hamburger-menu på disse enheder.
Standard breakpointet i Divi for at skifte til mobilmenuen er 980px. Alt under denne bredde vil typisk vise hamburger-menuen.
Vil denne CSS-kode påvirke min desktop-visning?
Nej, medieforespørgslen (`@media (max-width: 980px)`) sikrer, at koden kun anvendes på skærme, der er 980 pixels brede eller smallere. Din desktop-visning forbliver upåvirket.
Hvis du specifikt bruger Menu-modulet i Divi Builder til at oprette din menu, skal du bruge en anden metode. Koden ovenfor er til den standardmenu, der er indbygget i Divi's header. For Menu-modulet skal du muligvis tilpasse indstillingerne direkte i modulet eller bruge specifik CSS rettet mod dette modul.
Er der risiko ved at ændre dette?
Så længe du følger disse trin nøje og indsætter koden korrekt i 'Brugerdefineret CSS'-sektionen i Divi's Tema Indstillinger, er der minimal risiko. Det er altid en god idé at tage en backup af din hjemmeside, før du foretager større ændringer.
Konklusion
At sikre en sømløs brugeroplevelse på tværs af alle enheder er afgørende for enhver hjemmeside. Med Divi-temaet er det heldigvis relativt simpelt at tilpasse menuens opførsel på mobile enheder. Ved at implementere den medfølgende CSS-kode kan du erstatte den ofte begrænsende hamburger-menu med din fulde desktop-menu, hvilket kan forbedre navigationen og bevare dit designs integritet. Husk altid at teste dine ændringer grundigt for at sikre, at alt fungerer som forventet. God fornøjelse med din Divi-optimering!
Hvis du vil læse andre artikler, der ligner Behold Divi: Desktop Menu På Mobil, kan du besøge kategorien Teknologi.