06/04/2024
At skabe en visuelt tiltalende hjemmeside med Divi temaet handler ofte om at finjustere små detaljer, og en af de mest afgørende er dit logo. Logoet er dit brands ansigt udadtil og skal præsenteres fejlfrit i headeren. Mange Divi-brugere støder dog på udfordringer, når de forsøger at kontrollere logoets størrelse, især når headeren skrumper ved scrolling. Denne guide vil dykke ned i de præcise trin for at justere logoets højde i Divi, både for den statiske og den faste (sticky) header, og sikre at dit brand altid fremstår skarpt og professionelt.
Forstå Logoets Plads i Divi Headeren
Divi-temaet er designet med fleksibilitet for øje, hvilket inkluderer muligheden for at placere dit websteds logo i header-området. En smart funktion er den "faste header", som skrumper ind, når brugeren scroller ned ad siden, hvilket sparer plads og holder navigationen tilgængelig. Dette medfører dog også, at logoet skrumper proportionelt med headeren. For at opnå den ønskede visuelle effekt er det essentielt at forstå, hvordan Divi håndterer disse dimensioner.
Processen for at justere logoets højde er ikke altid intuitiv, da den involverer samspillet mellem to indstillinger, der begge påvirker den endelige størrelse. Disse indstillinger findes i Divi's Theme Customizer, som er dit centrale kontrolpanel for visuelle tilpasninger.
De primære indstillinger for logoets højde findes under "Divi > Theme Customizer > Header & Navigation > Primary Menu Bar". Her finder du to vigtige indstillinger, der arbejder sammen om at definere logoets udseende:
- Menuhøjde (Menu height): Denne indstilling kontrollerer selve menulinjens højde i pixels.
- Logo maks. højde (Logo max height): Denne indstilling angiver logoets maksimale højde som en procentdel af menulinjens højde.
Indstilling af Menuhøjden
Det er vigtigt at forstå, at logoet aldrig kan være større end selve menulinjens højde. Divi tilføjer yderligere 23 pixels til den værdi, du indstiller for "Menuhøjde", for at komme frem til den faktiske viste højde af menulinjen. Dette er en lille, men kritisk detalje, der ofte overses.
Lad os tage et eksempel: Hvis standardindstillingen for "Menuhøjde" er 66 pixels, vil den faktiske menulinjes højde være 66 + 23 = 89 pixels. Ønsker du, at dit logo skal vises med en højde på f.eks. 150 pixels, skal menulinjen være mindst 150 pixels høj. Derfor skal din "Menuhøjde" indstilling være mindst 150 - 23 = 127 pixels. Hvis du ønsker lidt ekstra plads over og under dit logo, skal du huske at tilføje dette, når du beregner din nødvendige menulinjehøjde.
Eksempelberegning for Menuhøjde:
| Ønsket faktisk menuhøjde | Træk fra Divi's tilføjelse (23px) | Indstilling for "Menuhøjde" |
|---|---|---|
| 89px (standard) | - 23px | 66px |
| 100px | - 23px | 77px |
| 150px | - 23px | 127px |
| 200px | - 23px | 177px |
Indstilling af Logoets Maksimale Højde
Når du har fastsat menulinjens højde, kan du derefter indstille logoets højde ved hjælp af indstillingen "Logo maks. højde". Denne indstilling angives som en procentdel af menulinjens højde. Det betyder, at en indstilling på 100% vil gøre logoet lige så højt som den endelige menulinjehøjde (efter de 23px er blevet tilføjet).
For at udvide det tidligere eksempel, antag at du ønsker, at logoet skal vises med 150px højde, men ønsker, at selve menulinjen skal være 200px. For at opnå dette skal du først indstille "Menuhøjde" til 200 - 23 = 177px (for at give en endelig menulinjehøjde på 200px). Derefter skal du indstille "Logo maks. højde" til 75% (da 75% af 200px = 150px).
Vigtig note: Logoet vil aldrig blive vist større end højden af det faktisk uploadede billede. Så hvis du ønsker, at billedet skal vises med f.eks. 150px højde, skal du uploade et billede, der er mindst denne højde. Sørg for at uploade et logo i høj opløsning for at undgå pixellering, især hvis du planlægger at vise det stort.
Justering af Logo Højde i den Faste Header (Sticky Header)
Hvis du bruger Divi's "fixed header" (også kendt som sticky header) mulighed, skal du også indstille logoets højde for den faste (indskrumpede) header. Dette er ligesom ovenstående, men en smule nemmere, da der er færre variable at overveje.
Gå først til indstillingerne for den faste header under "Divi > Theme Customizer > Header & Navigation > Fixed Navigation Settings". Her er der kun én relevant indstilling: "Fast menuhøjde" (Fixed menu height).
Indstillingen "Fast menuhøjde" udfører den samme rolle som "Menuhøjde" ovenfor. Den giver dig mulighed for at indstille højden af den primære header, som den vil blive vist, når brugeren scroller ned på siden. Igen er denne højde i pixels, og Divi tilføjer yderligere 23px for at opnå den endelige højde.
Du vil bemærke, at der ikke er nogen mulighed for at indstille "Logo maks. højde" på den faste header. I stedet arver den værdien fra den (ikke-faste) primære header. Så hvis du har indstillet "Logo maks. højde" til at være f.eks. 75% i de primære header-indstillinger, vil logoet i den faste menu blive vist med 75% af den faste menulinjes højde. Dette gør processen mere strømlinet, da du kun skal konfigurere den procentvise størrelse ét sted.
For at illustrere:
| Header Type | Relevant Indstilling | Effekt af Indstilling | Bemærkninger |
|---|---|---|---|
| Primær Header | Menuhøjde | Sætter basis for menulinjens højde (Divi tilføjer 23px) | Logoet kan ikke være højere end den faktiske menuhøjde. |
| Primær Header | Logo maks. højde | Sætter logoets højde som procentdel af menulinjens højde. | Arves af den faste header. |
| Fast Header | Fast menuhøjde | Sætter basis for menulinjens højde, når der scrolles (Divi tilføjer 23px) | Logoets højde er en procentdel af denne højde, arvet fra primær header. |
Tips til Optimal Logo Placering og Størrelse
- Upload et optimeret logo: Sørg altid for at uploade et logo, der er optimeret til web. Dette betyder en passende filstørrelse (typisk PNG for gennemsigtighed) og dimensioner. Selvom du kan skalere det ned i Divi, er det bedst at starte med et billede, der har en høj nok opløsning til din maksimale ønskede visningsstørrelse.
- Test på forskellige skærme: Efter du har justeret logoets højde, er det afgørende at teste din hjemmeside på forskellige skærmstørrelser og enheder (desktop, tablet, mobil). Divi er responsivt, men individuelle indstillinger kan påvirke, hvordan elementer vises på mindre skærme.
- Overvej logoets design: Nogle logoer fungerer bedre end andre, når de skal skaleres ned. Meget detaljerede logoer kan miste klarhed, når de gøres små. Overvej et simpelt, genkendeligt design, der fungerer godt i både stor og lille størrelse.
- Brug Live Customizer: Divi's Theme Customizer giver dig mulighed for at se ændringer i realtid. Brug denne funktion aktivt til at finjustere dine indstillinger, indtil du er tilfreds med resultatet.
- Backup dine indstillinger: Før du foretager store ændringer i Divi, er det altid en god idé at tage en backup af dine tema-indstillinger eller hele hjemmesiden. Dette giver dig mulighed for at rulle tilbage, hvis noget går galt.
Ofte Stillede Spørgsmål (FAQ)
Q: Hvorfor skrumper mit logo, når jeg scroller ned?
A: Dette er en standardfunktion i Divi's "faste header" (sticky header). Når brugeren scroller, skrumper headeren for at spare plads, og logoet skrumper med den. Du kan justere højden af den faste header uafhængigt.
Q: Kan jeg forhindre mit logo i at skrumpe?
A: Ja, du kan deaktivere den faste header-funktion under "Divi > Theme Customizer > Header & Navigation > Fixed Navigation Settings". Alternativt kan du indstille den faste menuhøjde til at være den samme som din primære menuhøjde, men dette vil sandsynligvis påvirke brugeroplevelsen negativt ved at optage for meget plads.
Q: Hvorfor er mit logo sløret, selvom jeg har uploadet en stor fil?
A: Selvom du uploader et stort billede, kan det stadig blive sløret, hvis det skaleres op ud over dets oprindelige dimensioner, eller hvis Divi's interne billedkomprimering påvirker kvaliteten. Sørg for, at billedet er i en høj nok opløsning til den maksimale ønskede visningsstørrelse, og overvej at bruge en PNG-fil for bedre klarhed, især med logoer der indeholder tekst eller skarpe kanter.
Q: Hvad betyder de 23 ekstra pixels, Divi tilføjer?
A: Divi tilføjer 23 pixels af intern padding eller margin til din "Menuhøjde" indstilling for at bestemme den faktiske, endelige højde af menulinjen. Det er en del af Divi's interne CSS-struktur, som du skal tage højde for i dine beregninger for at opnå den præcise ønskede højde.
Q: Kan jeg centrere mit logo i Divi headeren?
A: Den oprindelige forespørgsel nævnte centrering, men den leverede tekst fokuserer udelukkende på højdejustering. Divi's standard header layout er typisk logo til venstre og menu til højre. Centrering af logoet kræver ofte brug af Divi's "Centered Navigation" layout (under "Header & Navigation > Header Format") eller mere avanceret CSS. Dette falder uden for omfanget af højdejustering, men er en separat tilpasning, der kan udforskes.
Konklusion
At mestre justeringen af logoets højde i Divi er en lille, men vigtig færdighed for enhver webdesigner, der ønsker at skabe en poleret og professionel hjemmeside. Ved at forstå samspillet mellem "Menuhøjde" og "Logo maks. højde", samt hvordan Divi håndterer de ekstra 23 pixels, kan du præcist kontrollere, hvordan dit logo vises – både i den statiske og den faste header. Husk altid at teste dine ændringer på forskellige enheder for at sikre en optimal brugeroplevelse. Med disse tips er du godt på vej til at få dit Divi-logo til at se helt perfekt ud.
Hvis du vil læse andre artikler, der ligner Justering af Logo Højde i Divi Temaet, kan du besøge kategorien Teknologi.