Divi: Forskellige menuer pr. enhed – Nem guide

I en verden, hvor internetbrugere tilgår hjemmesider fra et væld af forskellige enheder – fra store desktop-skærme til små smartphones – er responsive design ikke længere blot en fordel, men en absolut nødvendighed. En af de største udfordringer i at skabe en fremragende brugeroplevelse på tværs af enheder er navigationen. Hvordan sikrer man, at en kompleks menu, der fungerer perfekt på en bred skærm, ikke bliver overvældende eller ubrugelig på en mobiltelefon? Svaret ligger i at kunne vise forskellige menuer afhængigt af den enhed, brugeren benytter. Med Divi, det populære WordPress-tema og page builder, er denne opgave overraskende ligetil takket være dets indbyggede synlighedsindstillinger. Denne guide vil dykke ned i den mest effektive metode til at opnå dette, så du kan optimere din hjemmesides navigation og forbedre brugeroplevelsen markant.

Hvorfor er forskellige menuer pr. enhed vigtige?

Forestil dig en stor restaurantmenu. På en desktop-computer har du plads til at folde den helt ud og overskue alle retter og kategorier. På en smartphone er den samme menu sandsynligvis for stor til skærmen, og du skal zoome ind og scrolle for at finde rundt. Det er præcis den udfordring, vi står overfor med hjemmesider. En menustruktur, der er ideel for en desktop-bruger, med mange niveauer og omfattende dropdowns, kan være fuldstændig uegnet for en mobilbruger, der forventer en strømlinet, letnavigerbar "hamburger-menu".

• Optimeret brugeroplevelse: En skræddersyet menu mindsker frustration og forbedrer navigationens intuitivitet, uanset enhed.
• Bedre læsbarhed: Mindre rod på mobile skærme og mere plads til indhold.
• Hastighed: Selvom det er minimalt, kan en mere simpel mobilmenu potentielt indlæse hurtigere.
• SEO-fordele: Google prioriterer mobilvenlige hjemmesider, og en god mobilnavigation er en del heraf.

Ved at tilbyde en differentieret menu kan du sikre, at hver besøgende får den bedst mulige interaktion med din hjemmeside, uanset om de sidder ved et skrivebord eller er på farten.

Metode 1: Duplikering af moduler med Divis synlighedsindstillinger

Den mest ligefremme og effektive måde at vise forskellige menuer på forskellige enheder i Divi er ved at udnytte Divis avancerede synlighedsindstillinger. Denne metode involverer at oprette flere versioner af dit menumodul (eller en hel sektion, der indeholder menuen) og derefter specifikt tildele hver version til kun at være synlig på bestemte enhedstyper.

Trin-for-trin guide: Sådan implementerer du det

Trin 1: Opret separate menuer i WordPress

Før du overhovedet rører Divi Builder, skal du have dine forskellige menuer klar i WordPress-dashboard. Dette er kernen i løsningen, da Divi-modulet blot trækker de menuer, du har defineret her.

1. Log ind på dit WordPress-dashboard.
2. Naviger til Udseende > Menupunkter (Appearance > Menus).
3. Hvis du allerede har en desktop-menu, skal du sørge for, at den er navngivet tydeligt, f.eks. "Desktop Hovedmenu".
4. Klik på "Opret en ny menu" (create a new menu).
5. Navngiv den nye menu tydeligt, f.eks. "Mobil Hovedmenu" eller "Tablet Menu".
6. Tilføj de ønskede menupunkter til din nye menu. Husk at mobilmenuer ofte er mere strømlinede og indeholder færre topniveauer end desktop-menuer. Overvej, hvilke sider der er absolut nødvendige for en mobilbruger at få adgang til hurtigt.
7. Gem din menu.
8. Gentag processen, hvis du også ønsker en specifik menu til tablets.

Ved at give dine menuer klare navne som "Desktop Menu" og "Mobil Menu" gør du det meget nemmere at holde styr på dem, når du arbejder i Divi Builder.

Trin 2: Dupliker dit menumodul i Divi

Når dine menuer er oprettet i WordPress, er næste skridt at implementere dem i Divi.

1. Gå til den side i Divi, hvor du ønsker at implementere de forskellige menuer (f.eks. din header-sektion via Theme Builder eller en almindelig side).
2. Åbn Divi Visual Builder.
3. Find dit eksisterende menumodul (eller den sektion, der indeholder dit menumodul).
4. Højreklik på menumodulet (eller sektionen) og vælg "Duplikér" (Duplicate). Du kan også bruge duplikeringsikonet, der vises, når du holder musen over modulet/sektionen.
5. Du vil nu have to identiske menumoduler (eller sektioner) lige over hinanden.
6. Åbn indstillingerne for det første menumodul (som vi vil bruge til desktop). Under "Indhold" (Content) > "Elementer" (Elements) skal du sikre, at den korrekte WordPress-menu er valgt (f.eks. "Desktop Hovedmenu").
7. Åbn indstillingerne for det andet menumodul (som vi vil bruge til mobil). Under "Indhold" (Content) > "Elementer" (Elements) skal du vælge din nyoprettede mobilmenu (f.eks. "Mobil Hovedmenu").

Det er vigtigt at have separate moduler for hver menu, da det er disse moduler, vi vil kontrollere synligheden af.

Trin 3: Indstil synlighed for hvert modul

Nu kommer den afgørende del – at fortælle Divi, hvilket modul der skal vises på hvilken enhed.

1. Åbn indstillingerne for dit første menumodul (desktop-versionen).
2. Gå til fanen "Avanceret" (Advanced).
3. Klik på "Synlighed" (Visibility).
4. Under "Deaktiver på" (Disable On) vil du se afkrydsningsfelter for Desktop, Tablet og Telefon. For din desktop-menu skal du markere afkrydsningsfelterne for Tablet og Telefon. Dette betyder, at desktop-menuen kun vil være synlig på desktop-enheder.
5. Gem indstillingerne for dette modul.
6. Åbn indstillingerne for dit andet menumodul (mobil-versionen).
7. Gå til fanen "Avanceret" (Advanced) > "Synlighed" (Visibility).
8. For din mobil-menu skal du markere afkrydsningsfeltet for Desktop. Dette betyder, at mobil-menuen kun vil være synlig på tablet- og telefon-enheder (eller kun telefon, hvis du opretter en separat tablet-menu). Hvis du kun har to menuer (desktop og mobil), og mobilmenuen skal dække både tablet og telefon, skal du kun markere "Desktop".
9. Hvis du har en tredje menu til tablet, skal du oprette et tredje menumodul, vælge tablet-menuen og derefter deaktivere den på desktop og telefon.
10. Gem indstillingerne for dette modul.
11. Gem din side/header i Divi Builder.

Test din hjemmeside på forskellige enheder eller brug Divis responsive visning i Visual Builder for at sikre, at menuerne skifter korrekt.

Fordele og ulemper ved denne metode

Som med enhver løsning er der fordele og ulemper ved at bruge Divis indbyggede synlighedsindstillinger til at vise forskellige menuer.

Fordele:

• Ingen kode nødvendig: Denne metode kræver ingen brugerdefineret CSS eller PHP, hvilket gør den tilgængelig for brugere på alle niveauer.
• Intuitivt i Divi Builder: Indstillingerne er lette at finde og konfigurere direkte i Divi Visual Builder.
• Præcis kontrol: Du har fuld kontrol over, hvilken menu der vises på hvilken enhedstype (desktop, tablet, telefon).
• Fleksibilitet: Kan anvendes på ethvert modul eller sektion, ikke kun menuer. Dette er en generel Divi-funktion.
• God ydeevne: Selvom der er flere elementer i DOM'en, håndterer Divi dette effektivt, og det har sjældent en mærkbar indvirkning på indlæsningstiden. De skjulte elementer indlæses stadig, men de vises ikke.

Ulemper:

• Flere moduler i backend: Din Divi-layout kan se mere rodet ud med duplikerede moduler, især hvis du gør dette for mange elementer.
• Vedligeholdelse: Hvis du skal foretage ændringer i menustrukturen, skal du huske at opdatere alle relevante menuer i WordPress og potentielt justere indstillingerne i Divi.
• Potentiel for forvirring: Hvis du ikke navngiver dine menuer og moduler tydeligt, kan det være svært at holde styr på, hvilken version der er til hvilken enhed.

Bedste praksis og overvejelser

For at maksimere effektiviteten af denne metode og minimere potentielle faldgruber, her er nogle bedste praksis:

• Navngiv tydeligt: Som nævnt, navngiv dine WordPress-menuer (f.eks. "Hovedmenu Desktop", "Hovedmenu Mobil") og overvej at bruge en tekstmodul eller en kommentar i Divi Builder for at notere, hvad hvert menumodul er beregnet til.
• Test grundigt: Test altid din hjemmeside på en række forskellige enheder – ikke kun Divis indbyggede responsive visning, men også faktiske telefoner og tablets, hvis muligt, eller brug browserens udviklerværktøjer til at simulere forskellige skærmstørrelser.
• Overvej tablet-menu: Mange vælger kun at differentiere mellem desktop og mobil. Men tablet-skærme er ofte store nok til en mere omfattende menu end telefoner, men for små til den fulde desktop-menu. Overvej at oprette en specifik tablet-menu for den bedst mulige oplevelse.
• Hold mobilmenuer simple: En god mobilmenu er typisk meget strømlinet. Overvej kun at inkludere de mest essentielle sider og brug eventuelt en "Alle Sider" eller "Mere" knap, der åbner en dybere menu, hvis nødvendigt.
• Konsistens i branding: Selvom menustrukturen ændrer sig, bør branding og designelementer (farver, logo) forblive konsistente for at opretholde en sammenhængende brugeroplevelse.

Ofte Stillede Spørgsmål (FAQ)

Kan jeg bruge denne metode til at skjule/vise andre moduler eller sektioner?

Absolut! Synlighedsindstillingerne under fanen "Avanceret" i Divi er universelle for alle moduler, rækker og sektioner. Du kan bruge dem til at vise forskellige billeder, tekstblokke, kontaktformularer eller endda hele sektioner baseret på enheden. Dette åbner op for en verden af responsive designmuligheder, hvor du kan skræddersy indholdet præcist til den skærmstørrelse, dine besøgende bruger.

Påvirker det hjemmesidens ydeevne at have skjulte moduler?

Når et modul er skjult med Divis synlighedsindstillinger, indlæses det stadig i baggrunden (det er stadig en del af HTML-koden), men det vises ikke visuelt. Dette betyder, at der kan være en minimal indvirkning på sidens indlæsningstid og DOM-størrelse sammenlignet med at have kun ét menumodul. I de fleste tilfælde er denne forskel dog så lille, at den er ubetydelig for den samlede ydeevne og opvejes af fordelene ved en forbedret brugeroplevelse. For ekstremt ydeevne-optimerede sider kan alternative metoder, der dynamisk indlæser indhold via JavaScript, være mere relevante, men de er også betydeligt mere komplekse at implementere.

Er der en grænse for, hvor mange menuer jeg kan oprette?

I princippet er der ingen hård grænse for, hvor mange menuer du kan oprette i WordPress. Dog bliver det hurtigt uoverskueligt, hvis du har for mange. Det anbefales at holde sig til det nødvendige – typisk en desktop-menu og en mobil-menu, eventuelt en separat tablet-menu. At have et klart navngivningssystem for dine menuer i WordPress er afgørende for at bevare overblikket.

Kan jeg bruge CSS til at opnå det samme?

Ja, det er absolut muligt at opnå det samme resultat med brugerdefineret CSS ved at bruge medieforespørgsler (media queries) til at skjule og vise elementer baseret på skærmstørrelse. Divis indbyggede synlighedsindstillinger gør dog processen meget nemmere og mere tilgængelig for brugere uden kendskab til kodning. Hvis du er komfortabel med CSS, giver det dig ultimativ fleksibilitet, men for de fleste Divi-brugere er den indbyggede funktion den foretrukne og mest effektive løsning.

Hvad med menuer i Divi Theme Builder?

Metoden fungerer perfekt med Divi Theme Builder. Uanset om du designer en global header eller en specifik side, kan du anvende de samme principper for duplikering af menumoduler og indstilling af synlighed. Faktisk er Theme Builder ofte det mest logiske sted at implementere dette, da dine menuer sandsynligvis er en del af din globale header eller footer, som defineres der.

At kunne vise forskellige menuer på forskellige enheder er en kraftfuld funktion, der dramatisk kan forbedre navigationen og den samlede brugeroplevelse på din Divi-hjemmeside. Ved at følge denne guide trin for trin kan du nemt implementere denne løsning og sikre, at dine besøgende altid har en optimal og intuitiv måde at finde rundt på din side, uanset hvilken enhed de bruger. Husk at teste grundigt og holde dine menuer og moduler organiseret for den bedste vedligeholdelse.

Hvis du vil læse andre artikler, der ligner Divi: Forskellige menuer pr. enhed – Nem guide, kan du besøge kategorien Teknologi.