03/07/2024
Introduktion til Divi Mobile
I en verden, hvor mobilbrug dominerer internettrafikken, er en velfungerende og æstetisk tiltalende mobilmenu ikke bare en luksus, men en nødvendighed. Divi, et af de mest populære WordPress-temaer, tilbyder en visuel sidebygger, der giver utrolig fleksibilitet. Men når det kommer til den mobile oplevelse, kan standardmenuen i Divi føles begrænset. Her kommer Divi Mobile ind i billedet. Dette tredjeparts plugin, udviklet af Divi Engine, er designet til at give dig fuld kontrol over din hjemmesides mobilmenuer, så du kan skabe en unik og brugerdefineret oplevelse, der matcher din brands identitet. Lad os dykke ned i, hvad Divi Mobile kan tilbyde, og hvordan det kan revolutionere din Divi-hjemmesides mobile præsentation.
Hvad er Divi Mobile?
Divi Mobile er et plugin specifikt udviklet til Divi-temaet, som giver brugerne mulighed for at oprette og tilpasse mobilmenuer på en hidtil uset måde. I modsætning til Divis standard mobilmenu, som automatisk konverterer til en hamburger-menu og tilbyder begrænsede tilpasningsmuligheder, giver Divi Mobile dig friheden til at designe alt fra udseendet af hamburger-ikonet til menuens layout, animationer og endda til at injicere egne layouts direkte i headeren. Hele processen foregår intuitivt i WordPress' tema-tilpasningsværktøj, hvilket betyder, at du kan se dine ændringer live, mens du arbejder. Dette gør det nemt at eksperimentere og finde den perfekte løsning.
Divis indbyggede mobilmenu er funktionel, men mangler dybde i tilpasningsmulighederne. Når skærmbredden falder til et bestemt punkt (breakpoint), skifter menuen automatisk til en hamburger-ikon, der typisk gemmer links i en drop-down. Denne funktionalitet kan ikke justeres uafhængigt af standardmenuen. Divi Mobile bryder med disse begrænsninger. Det introducerer et dedikeret panel i tema-tilpasningen, hvor du kan vælge mellem forskellige menulayouts, såsom "Outside Screen" (standard), "Full Screen" eller "Bottom Navigation". Du kan også styre animationer, farver, ikoner og endda placeringen af menuen på skærmen. Dette giver dig mulighed for at skabe en mobilmenu, der er lige så imponerende som din desktop-menu.
Installation og Tilgængelighed
Divi Mobile er tilgængelig i Divi Marketplace. Dette er en vigtig faktor, da det betyder, at plugin'et har gennemgået en grundig kvalitetssikringsproces af Divi-teamet. Produkter fra Divi Marketplace kommer med ubegrænset brug på hjemmesider og en 30-dages pengene-tilbage-garanti, ligesom selve Divi-temaet. Du kan finde Divi Mobile ved at besøge Divi Engine i markedspladsen, hvor du også kan se deres andre produkter. At plugin'et er tilgængeligt her, giver en ekstra tryghed omkring dets kompatibilitet og kvalitet.
Nøglefunktioner i Divi Mobile
Dette er kernen i Divi Mobile. Her kan du vælge mellem tre primære layout-muligheder:
- Outside Screen Menu Style: Menuen glider ind fra siden af skærmen, hvilket er den mest almindelige og ofte foretrukne stil. Du kan tilpasse åbningsanimationer og den fuldt åbne stil.
- Full Screen Menu: Menuen fylder hele skærmen, når den aktiveres. Dette giver en dramatisk effekt og masser af plads til at vise dine menupunkter og eventuelle ekstra elementer.
- Bottom Navigation: Menuen placeres nederst på skærmen, ofte med ikoner, hvilket er ideelt til apps-lignende navigation.
Du kan også justere breakpoint, hvilket bestemmer, hvornår mobilmenuen aktiveres. Dette giver dig endda mulighed for at vise din specialdesignede mobilmenu på desktop-versioner af din hjemmeside, hvis du ønsker det.
Custom Header
Divi Mobile giver dig også kontrol over din header. Du kan:
- Tilføje et nyt logo og justere dets størrelse og placering.
- Tilpasse baggrundsfarven, skygger og andre visuelle elementer i headeren.
- Konfigurere "Header Appearance on Scroll", så headeren ændrer udseende, når brugeren scroller. Dette inkluderer justering af højde, logo-størrelse, burger-ikonets position og baggrundsfarve.
- Tilføje og placere header-elementer som WooCommerce indkøbskurven, søgeikoner og endda tilpasse deres farve og størrelse.
Hamburger-ikonet er ofte det første, brugeren ser. Divi Mobile tilbyder omfattende kontrol over dette element:
- Placering: Vælg mellem højre eller venstre side af skærmen.
- Ikon-stil: Vælg mellem tre forskellige ikoner (tre linjer, to linjer eller tre prikker).
- Animationer: Tilføj forskellige åbnings- og lukkeanimationer til ikonet.
- Generelle indstillinger: Juster ikonets højde, afstand fra kanter og top, samt hover-effekter.
- Ikon-detaljer: Finjuster linjernes tykkelse, border radius og afstand mellem linjer for både lukket og åben tilstand. Du kan endda tilføje tekst ved siden af eller som en del af ikonet.
- Baggrund og Skygge: Tilpas baggrundsfarve, højde, bredde og border radius for selve ikon-containeren, samt tilføj skygger for at give dybde.
Inject Layouts
En af de mest avancerede funktioner er muligheden for at injicere dine egne Divi-layouts direkte i din mobile header. Du kan placere sektioner:
- Over menuen
- Under menuen
- Over den brugerdefinerede mobile header
Dette åbner op for utallige muligheder, såsom at inkludere kontaktformularer, specifikke oplysninger, sociale medie-ikoner eller endda små visuelle elementer, der gør din mobiloplevelse mere interaktiv og informativ. Forestil dig at have en kontaktformular lige ved hånden, når nogen besøger din side på mobilen – det er nu muligt med Divi Mobile.
Her finjusterer du selve menuens udseende, når den er åben:
- Baggrund: Skift baggrundsfarven for at matche dit design.
- Link-placering: Kontroller, hvordan menupunkterne er organiseret – fra venstre, højre eller centreret.
- Typografi: Juster skriftstørrelse, skrifttype, farve og hover-farve for at sikre læsbarhed og æstetik.
- Side og Bredde: Vælg, om menuen skal åbne fra venstre eller højre, og juster bredden af menuområdet for at passe til dit indhold.
Selv under-menuer kan tilpasses. Divi Mobile tilbyder forskellige stilarter:
- Collapse Nested: Under-menuer foldes ud og ind.
- Overlap Slide In: Under-menuer glider ind over hovedmenuen.
- Side By Side: Under-menuer vises ved siden af hovedmenupunkterne med en pil, der indikerer relationen.
For hver stil kan du justere skriftstørrelse, farver, højde og andre elementer for at skabe en ensartet og intuitiv brugeroplevelse, selv i komplekse menustrukturer.
Stop Stacking
Når du injicerer layouts i headeren, kan modulerne have en tendens til at stable sig oven på hinanden på mindre skærme. Divi Mobile inkluderer en speciel Divi-modul, der kan tilføjes til dine layouts for at forhindre denne stabling. Ved simpelthen at tilføje dette modul til din række, sikrer du, at dine indlejrede elementer bevarer deres tilsigtede layout og ikke mister deres visuelle integritet på mobile enheder. Dette er især nyttigt, når du opretter avancerede mega-menuer eller indlejrer komplekse informationer i din header.
| Funktion | Divi Standard Mobilmenu | Divi Mobile Plugin |
|---|---|---|
| Menu Layouts | Kun standard hamburger/drop-down | Outside Screen, Full Screen, Bottom Navigation |
| Hamburger Ikon Tilpasning | Meget begrænset | Omfattende (stil, animation, placering, farver) |
| Header Tilpasning | Begrænset via Divi Theme Options | Avanceret (logo, baggrund, scroll-effekter, elementer) |
| Layout Injektion | Ikke muligt | Ja (tilføj egne Divi-layouts i headeren) |
| Sub-menu Stil | Standard | Collapse Nested, Overlap Slide In, Side By Side |
| Live Preview | Ja (via Theme Customizer) | Ja (via Theme Customizer) |
| Stop Stacking Modul | Nej | Ja |
| Kvalitetssikring | Indbygget i Divi | Godkendt af Divi Marketplace |
Hvor kan Divi Mobile købes?
Divi Mobile kan købes direkte fra udviklerens hjemmeside. Der tilbydes forskellige licensmuligheder for at imødekomme forskellige behov:
Årlige Licenser:
- 1 Hjemmeside: £12
- 2 – 5 Hjemmesider: £36
- Ubgrænset Hjemmesider: £64
Livstids Licenser:
- 1 Hjemmeside: £40
- Ubgrænset Hjemmesider: £196
Alle licenser inkluderer 1 års support, og du vil modtage opdateringer, så længe licensen er aktiv på din hjemmeside. Dette sikrer, at dit plugin altid er kompatibelt med de nyeste versioner af Divi og WordPress.
Afsluttende tanker
Divi Mobile er et fremragende plugin for enhver, der ønsker at tage deres Divi-hjemmesides mobile oplevelse til næste niveau. Det giver en hidtil uset grad af kontrol over mobilmenuer og headers, hvilket gør det muligt at skabe professionelle og unikke designs. Fordelene ved at bruge tema-tilpasningen til live previews og muligheden for at injicere egne layouts er betydelige. Selvom der kan være tidspunkter, hvor en sideopdatering er nødvendig for at se ændringer (hvilket kan skyldes serverkonfiguration), opvejer den samlede funktionalitet og brugervenlighed dette. En potentiel forbedring kunne være en "reset"-knap, ligesom i standard Divi-kontroller, for nemt at vende tilbage til standardindstillingerne. Alt i alt er Divi Mobile et plugin, der er værd at overveje, hvis du søger mere fleksibilitet til dine mobile menuer i Divi.
Ofte Stillede Spørgsmål (FAQ)
Er Divi Mobile kompatibelt med alle Divi-versioner?
Ja, Divi Mobile er designet til at fungere problemfrit med de nyeste versioner af Divi-temaet. Det anbefales altid at holde både Divi og dine plugins opdaterede.
Kan jeg se mine ændringer live?
Ja, en af de store fordele ved Divi Mobile er, at alle justeringer foretages i WordPress' tema-tilpasningsværktøj, hvilket giver dig mulighed for at se dine ændringer i realtid.
Kræver Divi Mobile nogen kodningsfærdigheder?
Nej, Divi Mobile er designet til at være brugervenligt og kræver ingen kodningskundskaber. Alle indstillinger kan foretages via de grafiske brugergrænseflader i tema-tilpasningen.
Kan jeg bruge Divi Mobile på flere hjemmesider?
Ja, afhængigt af den licens du vælger, kan du bruge Divi Mobile på en enkelt, flere eller ubegrænsede hjemmesider.
Hvad hvis jeg ikke er tilfreds med Divi Mobile?
Da Divi Mobile er tilgængelig via Divi Marketplace, tilbydes der en 30-dages pengene-tilbage-garanti, så du kan prøve det risikofrit.
Kan jeg inkludere WooCommerce-ikoner i min mobile header?
Ja, Divi Mobile giver dig mulighed for at tilføje og tilpasse elementer som WooCommerce indkøbskurven og søgeikoner direkte i din mobile header.
Har du prøvet Divi Mobile? Del dine erfaringer i kommentarerne nedenfor!
Hvis du vil læse andre artikler, der ligner Divi Mobile: Skab unikke mobilmenuer, kan du besøge kategorien Mobil.