08/11/2023
Som webudvikler med en passion for Divi, har jeg ofte stødt på spørgsmålet om, hvordan man præcist tilpasser elementer på forskellige skærmstørrelser. Et af de mest almindelige udfordringer er at få logoet i headeren til at se optimalt ud på mobile enheder. Et for stort logo kan dominere skærmen og forringe brugeroplevelsen, mens et for lille logo kan være svært at se og genkende. Denne guide vil dykke ned i, hvordan du nemt kan ændre størrelsen på dit Divi header logo specifikt til mobil, så dit website fremstår professionelt og brugervenligt på tværs af alle enheder.
Forståelse af Divi's Responsivitet
Divi er kendt for sin imponerende responsivitet, hvilket betyder, at temaet automatisk tilpasser sig forskellige skærmstørrelser. Dog kræver finjustering af visse elementer, som f.eks. logoets størrelse, ofte en manuel indsats. Divi's visuelle builder giver dig kraftfulde værktøjer til at styre dette, men det er vigtigt at vide, hvor du skal lede.
Metode 1: Brug af Divi Builder's Indstillinger
Den mest ligetil metode er at bruge de indbyggede indstillinger i Divi Builder. Dette er den anbefalede metode, da den integrerer sig sømløst med Divi's designfilosofi.
Trin-for-Trin Vejledning:
- Åbn Divi Builder: Naviger til den side eller skabelon, hvor din header er placeret, og åbn den i Divi Builder.
- Find dit Logo Modul: Identificer det modul, der indeholder dit logo. Dette er typisk et 'Logo' modul eller et 'Image' modul, hvis du har indsat logoet som et billede.
- Åbn Modulindstillinger: Klik på tandhjulsikonet for at åbne indstillingerne for dit logo modul.
- Naviger til 'Design' Fanebladet: Inden for modulindstillingerne skal du finde og klikke på 'Design' fanebladet.
- Juster 'Logo Størrelse': Her finder du typisk en indstilling kaldet 'Logo Størrelse' eller lignende under sektionen 'Billedindstillinger' eller 'Generelt'.
- Brug Responsiv Ikonet: Ved siden af 'Logo Størrelse' slideren vil du se et lille desktop-ikon. Klik på dette ikon. Det vil afsløre muligheder for at indstille størrelsen for forskellige enhedstyper: Desktop, Tablet og Telefon.
- Indstil Mobil Størrelse: Vælg telefonikonet. Nu kan du justere slideren for at ændre logoets størrelse specifikt for mobile enheder. Eksperimenter med forskellige procenter, indtil du finder den perfekte balance.
- Gem Ændringer: Husk at klikke på det grønne flueben for at gemme dine ændringer i modulet, og derefter på den blå 'Gem' knap for at gemme hele siden eller skabelonen.
Denne metode er mest effektiv, da den udnytter Divi's indbyggede responsivitet og sikrer, at dine ændringer kun påvirker den valgte enhedstype.
Metode 2: Brug af Tilpasset CSS
Hvis du har brug for mere avanceret kontrol eller hvis ovenstående metode ikke giver den ønskede effekt, kan du altid ty til brugerdefineret CSS. Dette kræver lidt mere teknisk viden, men giver ultimativ fleksibilitet.
Hvornår skal du bruge CSS?
- Når du har brug for at styre præcise dimensioner (bredde og højde).
- Når logoets container eller andre relaterede elementer skal justeres samtidigt.
- Når du arbejder med komplekse header-layouts.
Trin-for-Trin Vejledning med CSS:
- Identificer Logo Elementets Klasse eller ID: Du skal finde den unikke identifikator for dit logo-element. Du kan gøre dette ved at høre-højreklikke på logoet i browseren, vælge 'Inspicer' (eller 'Inspicer Element') og derefter undersøge HTML-koden for at finde klassenavn eller ID. Det kunne f.eks. være noget i stil med `.et-logo-img` eller et specifikt ID som `#logo-main`.
- Tilføj CSS: Gå til Divi's Theme Customizer (Udseende > Tilpas) eller tilføj CSS direkte i modulindstillingerne under 'Avanceret' > 'Brugerdefineret CSS'.
- Skriv Din CSS Kode: Her er et eksempel på, hvordan du kan skrive CSS for at ændre logoets bredde på mobile enheder. Du skal erstatte `#dit-logo-id` eller `.din-logo-klasse` med den faktiske klasse eller ID, du fandt i trin 1.
Eksempel på CSS:
@media only screen and (max-width: 980px) { /* Dette medie-query gælder for skærme op til 980px bredde (typisk tablets og mobil) */ #dit-logo-id img { width: 150px !important; /* Juster denne værdi efter behov */ height: auto; /* Holder proportionerne */ } } @media only screen and (max-width: 480px) { /* Dette medie-query gælder for endnu mindre skærme (typisk mobil) */ #dit-logo-id img { width: 120px !important; /* Endnu mindre størrelse til små telefoner */ height: auto; } } Forklaring af CSS:
- `@media only screen and (max-width: ...)`: Dette er et medie-query, der sikrer, at stilen kun anvendes på skærme, der er bredere end den angivne værdi. Ved at bruge `max-width` definerer du, hvornår stilen skal aktiveres (f.eks. op til 980px for tablets og mobiler, og op til 480px for smartphones).
- `#dit-logo-id img` eller `.din-logo-klasse img`: Vælger det specifikke billedelement inde i dit logo-modul.
- `width: ... !important;`: Sætter bredden på billedet. `!important` bruges til at overstyre andre CSS-regler, der måtte være i konflikt. Værdien (f.eks. `150px`) kan ændres efter behov.
- `height: auto;`: Sikrer, at billedets højde justeres automatisk for at bevare billedproportionerne, når bredden ændres.
Hvor skal CSS placeres?
- Divi Theme Options: Gå til Divi > Theme Options > Integration, og indsæt din CSS i feltet 'Add custom CSS to the of your site'.
- Theme Customizer: Gå til Udseende > Tilpas > Yderligere CSS.
- Modulindstillinger: For en mere specifik anvendelse kan du gå til logo-modulets indstillinger, vælge 'Avanceret' og indsætte CSS i feltet 'Brugerdefineret CSS'. Her skal du dog bruge en specifik klasse tilføjet til modulet via dets indstillinger under 'Avanceret' > 'CSS ID & Classes'.
Sammenligning af Metoder
Her er en hurtig oversigt over fordele og ulemper ved de to metoder:
| Funktion | Divi Builder Indstillinger | Tilpasset CSS |
|---|---|---|
| Brugervenlighed | Meget høj (visuel, ingen kode) | Middel til Høj (kræver kendskab til CSS) |
| Kontrol | God (foruddefinerede indstillinger) | Meget Høj (fuld kontrol over dimensioner og styling) |
| Hastighed | Hurtig og nem at implementere | Kan kræve lidt mere tid til identifikation og testning |
| Fleksibilitet | God, men begrænset til Divi's muligheder | Ultimativ fleksibilitet |
| Vedligeholdelse | Nem, følger Divi's opdateringer | Kan kræve opdatering, hvis Divi's struktur ændres markant |
Andre Overvejelser for Mobil Logo Størrelse
- Logo Format: Sørg for, at dit logo er i et passende format (f.eks. PNG med gennemsigtig baggrund) og optimeret til web for hurtig indlæsning.
- Padding og Margin: Udover selve logoets størrelse, kan du også justere padding og margin omkring logoet i Divi Builder for at skabe mere luft og forbedre det visuelle udtryk på mobile enheder. Disse indstillinger findes også under 'Design' fanebladet i logo-modulet og har responsiv kontrol.
- Header Højde: Nogle gange kan det være nødvendigt at justere den samlede højde af din header for at passe bedre til et mindre logo på mobil. Dette kan også gøres via modulindstillingerne for header-sektionen eller ved hjælp af brugerdefineret CSS.
- Test på Forskellige Enheder: Det er afgørende at teste dit website på forskellige mobile enheder og skærmstørrelser for at sikre, at logoet ser godt ud overalt. Brug Divi's indbyggede responsivitetstester i builder'en, men foretræk at teste på fysiske enheder, hvis muligt.
Ofte Stillede Spørgsmål (FAQ)
Q1: Hvorfor ser mit logo anderledes ud på mobil end på desktop?
A1: Dette skyldes sandsynligvis Divi's responsivitet. Uden specifikke justeringer vil Divi forsøge at skalere logoet ned for at passe til mindre skærme, hvilket ikke altid giver det bedste resultat. Ved at følge ovenstående metoder kan du styre denne skalering præcist.
Q2: Kan jeg indstille forskellige logoer til mobil og desktop?
A2: Ja, det kan du. Den nemmeste måde er at bruge et 'Image' modul i stedet for et 'Logo' modul. Du kan så indsætte dit desktop-logo og bruge Divi's responsivitet indstillinger til at skjule det på mobil og omvendt, og derefter tilføje et separat 'Image' modul med dit mobil-logo, som kun vises på mobil. Alternativt kan du bruge CSS til at styre synligheden af forskellige logo-billeder baseret på skærmstørrelse.
Q3: Hvilken størrelse skal mit logo have til mobil?
A3: Der er ingen fast regel, da det afhænger af dit logo's design og den overordnede header-layout. En god tommelfingerregel er at starte med en bredde mellem 100px og 200px for smartphones og justere derfra. Det vigtigste er, at det er letlæseligt og passer harmonisk ind i designet.
Q4: Hvad betyder `!important` i CSS?
A4: `!important` er en CSS-deklaration, der tvinger en stilregel til at blive anvendt, selvom der er andre CSS-regler, der forsøger at overskrive den. Det bør bruges med forsigtighed, da det kan gøre CSS sværere at administrere, men det er ofte nødvendigt for at overstyre Divi's standardstilarter eller for at sikre, at din brugerdefinerede stil har prioritet.
Konklusion
At sikre, at dit Divi header logo ser perfekt ud på mobile enheder, er en vigtig del af at skabe en positiv brugeroplevelse. Ved at bruge Divi Builder's indbyggede responsivitetsindstillinger eller ved at ty til brugerdefineret CSS, har du den nødvendige kontrol til at opnå det ønskede resultat. Husk altid at teste dine ændringer grundigt på tværs af forskellige enheder for at garantere et professionelt og poleret** udseende for dit website. Med disse værktøjer er du godt rustet til at mestre logo-tilpasning i Divi.
Hvis du vil læse andre artikler, der ligner Tilpasning af Divi Header Logo Størrelse på Mobil, kan du besøge kategorien Teknologi.