Tilpasning af Overskrifter i Divi: En Fuld Guide

Overskrifter er fundamentale for enhver hjemmesides struktur og brugeroplevelse. De guider læseren gennem indholdet, fremhæver vigtige punkter og forbedrer både læsbarhed og søgemaskineoptimering (SEO). Selvom Divi-temaet er kendt for sin utrolige fleksibilitet og detaljerede tilpasningsmuligheder, kan det paradoksalt nok være en smule udfordrende at finde de rette steder at tilpasse overskrifterne (H1, H2, H3, H4, H5, H6) på en intuitiv måde. Men fortvivl ikke, for det er absolut muligt, og der er faktisk flere kraftfulde måder at gøre det på. I denne dybdegående guide vil vi udforske alle metoderne til at tilpasse dine Divi-overskrifter, fra simple globale ændringer til avancerede CSS-løsninger, så du kan skabe en hjemmeside, der ikke kun ser fantastisk ud, men også fungerer optimalt for dine besøgende.

Lad os dykke ned i, hvorfor og hvordan du tager fuld kontrol over dine overskrifter i Divi.

Hvorfor tilpasse dine Divi-overskrifter?

Tilpasning af overskrifter er ikke obligatorisk, og man bør udvise en vis forsigtighed med designændringer for at sikre en sammenhængende visuel oplevelse på hele din hjemmeside. Men det er afgørende at have kontrol over størrelser, typografi og farver på dine overskrifter, primært af tre vigtige årsager:

• Læsbarhed: At gøre dit indhold letlæseligt bør altid være en topprioritet. Hvis en overskrift ikke er tydeligt adskilt fra den normale brødtekst, kan dine besøgende forveksle dine tekster, hvilket forringer brugeroplevelsen. Tydelige overskrifter skaber en klar visuel hierarki, der hjælper læseren med at scanne indholdet effektivt.
• Tilgængelighed: Ikke alle har perfekt syn, og større skrifttyper kan hjælpe disse brugere betydeligt. Generelt læses større skrifttyper bedre af alle, hvilket forbedrer den samlede tilgængelighed af din hjemmeside. En veldefineret overskriftsstruktur understøtter også skærmlæsere og andre hjælpeteknologier.
• SEO: For at undgå fristelsen til at erstatte alle H2-overskrifter med H1, fordi vi kan lide størrelsen bedre, er det vigtigt at forstå overskrifternes SEO-mæssige betydning. Ved at gøre dette ville vi sandsynligvis ødelægge SEO'en for vores indhold med en ren visuel beslutning. Korrekt brug af overskrifter (H1 som hovedtitel, H2 for større sektioner, H3 for undersektioner osv.) signalerer indholdets struktur og emne til søgemaskiner, hvilket kan forbedre din rangering. Divi giver dig værktøjerne til at have både god SEO og et flot design.

Disse er tilstrækkelige og vigtige grunde til at bruge et par minutter på at lære, hvordan du tilpasser de forskellige overskrifter, synes du ikke?

Global Tilpasning via Divi Theme Customizer

Det første, enhver bruger vil lede efter, er at forsøge at ændre overskrifterne globalt, og det kan du gøre fra tema-tilpasningen. Det er simpelt, og det virker faktisk. Du skal blot gå til Udseende → Tilpas eller Divi → Tema-tilpasning, alt efter hvad du foretrækker.

I begge tilfælde åbner WordPress-tilpasningen, hvor du, for at tilpasse overskrifterne, skal gå til sektionen Generelle Indstillinger → Typografi og derfra ændre overskrifterne.

Som du vil se, har du her flere mulige tilpasninger af “overskrifterne”:

• Overskriftstekststørrelse
• Overskrift bogstavafstand
• Overskrift linjehøjde
• Overskrift skrifttype-stil (fed – kursiv – omdan til store bogstaver – understregning)
• Overskrift skrifttype
• Overskrift tekstfarve

Det “dårlige” er, at det ikke specificerer, hvilke overskrifter det refererer til – om det er H1, H2, ingen specifik eller alle. Men ja, det refererer til alle overskrifter!

Så enhver ændring, du foretager i denne sektion, vil gælde for alle overskrifter, og især når det kommer til størrelsen af overskrifterne. Hvis du ændrer den, vil den blive ændret i alle proportionelt, med en forskel på 4 pixels fra H1 til H4 og 2 pixels fra H4 til H6.

Som standard har overskrifterne i Divi disse størrelser:

Og det tal, du ser som standard i disse indstillinger (30), er det, der er tildelt H1.

Hvad sker der, hvis jeg ændrer overskriftstekststørrelsen i tema-tilpasningen?

Divi vil gradvist ændre størrelserne på overskrifterne, startende fra det tal, du tildeler denne sektion, som jeg sagde før, er standardstørrelsen for H1.

Så hvis vi f.eks. hæver værdien fra 30 til 40, ville tekststørrelserne for overskrifterne se sådan ud:

Og hvis vi sænker den fra 30 til 28, ville det se sådan ud:

Hvis du bemærker, respekterer den praktisk talt proportionaliteten af standardstørrelsernes fald, bortset fra den sidste sektion, H6. Og ja, resten af parametrene (linjehøjde, stil, skrifttype osv.) anvendes automatisk på alle overskrifter.

Vi har nu set en måde at tilpasse overskrifterne i Divi på, men hvad nu hvis jeg vil anvende forskellige størrelser eller endda farver og skrifttyper på hver enkelt overskrift? Her skal vi ændre metode, for tema-tilpasningen tillader os ikke dette.

Modulspecifik Tilpasning i Divi Builder

Uanset hvad du har konfigureret i tilpasningen, ved du allerede, at Divis virkelige potentiale ligger i den visuelle layouts moduler, hvor du kan tilpasse absolut alt uden begrænsninger.

For eksempel, i det samme tekstmodul, vi bruger, kan du, hvis du lader typografiværdierne i tilpasningen være standard, ændre alt, hvad du ønsker i hver overskrift fra modulets Design-fane, i sektionen kaldet “Overskriftstekst”.

Her kan du for hver overskrift (H1-H6) ændre skrifttype, stilarter, farver, størrelser – ja, alt. Og endda ændre det for hver enhed (desktop, tablet, mobil). Dette er Divis store potentiale, som giver dig total kontrol over designet.

Så her kan du fuldt ud tilpasse alt, hvad du ønsker, for dine overskrifter. Det har kun ét problem: ændringerne gælder kun for det pågældende tekstmodul, ikke for andre, ikke engang på samme side, som stadig vil have de samme standardindstillinger for overskrifterne.

Tilpasning af Flere Moduler Samtidigt

En delvis løsning på ovenstående problem er at vælge flere moduler på samme tid ved at bruge Shift + klik i den visuelle layouteditor. På denne måde, når du åbner indstillingerne for et af modulerne, konfigurerer du faktisk indstillingerne for dem begge. Dette er et smart trick, der vil spare dig for meget tid i denne type indstillinger og mange andre. Det er især nyttigt, når du arbejder med gentagne elementer på en side.

Brug af Forudindstillinger (Presets) til Divi Overskrifter

Men alt det ovenstående er, som du måske har bemærket, ikke nok, især hvis du ønsker, at din foretrukne tilpasning skal gælde for flere moduler, ikke kun dem på en enkelt side. Til dette har vi “forudindstillinger” (presets).

Første skridt er at gemme dine indstillinger som en forudindstilling, direkte fra modulkonfigurationen. Rul pilen ned ved “Forudindstilling” og klik på “Opret ny forudindstilling fra aktuelle stilarter”. Giv den derefter et navn, og hvis du ønsker at gøre indstillingerne gældende som standard forudindstilling for alle moduler af samme type, skal du markere den relevante boks.

Gem ændringerne i modulet og det visuelle layout. Fra nu af vil du have forudindstillingen tilgængelig til at anvende den på ethvert andet tekstmodul, hvilket giver dig en hidtil uset effektivitet i dit workflow.

Standard Forudindstilling

Hvis du også markerede afkrydsningsfeltet “Tildel forudindstilling som standard”, bliver det endnu bedre. Det er ligegyldigt, om du gjorde det, da du oprettede forudindstillingen, eller senere fra det lille hjulikon, du vil se, når du vælger den.

Forudindstillingsindstillingerne vil blive anvendt på alle tekstmoduler på hele hjemmesiden, som advarselsmeddelelsen vil fortælle dig. Fra nu af vil alle tekstmoduler på din hjemmeside automatisk blive vist med tilpasningsindstillingerne fra din forudindstilling, hvilket sikrer en konsistent og professionel typografi på tværs af hele dit website.

Selvfølgelig kan du oprette brugerdefinerede forudindstillinger og gøre dem globale for ethvert andet modul, du ønsker at tilpasse. Meget bedre, ikke sandt?

Men du kan stadig tilpasse overskrifter i Divi på en anden, endnu hurtigere måde.

Avanceret Tilpasning med CSS-kode

Ja, faktisk er den hurtigste og mest effektive måde at tilpasse Divi-overskrifter på gennem CSS-kode. Så jeg foreslår, at du kaster dig ud i det og prøver f.eks. at tilføje disse CSS-linjer til din hjemmeside fra Udseende → Tilpas → Yderligere CSS.

h1 {
 color: red;
 font-weight: normal;
 font-size: 4em;
 font-family: Times;
 text-transform: uppercase;
}

h2 {
 color: #f78009;
 font-weight: normal;
 font-size: 2.5em;
 font-family: Verdana;
 text-transform: uppercase;
}

h3 {
 color: #36b3ed;
 font-weight: normal;
 font-size: 34px;
 font-family: Verdana;
 text-transform: lowercase;
}

h4 {
 color: #f22ed1;
 font-weight: normal;
 font-size: 30px;
 font-family: Serif;
 text-transform: none;
}

h5 {
 color: #f22ed1;
 font-weight: normal;
 font-size: 28px;
 font-family: Serif;
 text-transform: none;
}

h6 {
 color: #f22ed1;
 font-weight: normal;
 font-size: 26px;
 font-family: Serif;
 text-transform: none;
}

Disse ændringer er måske for farverige og varierede, men effekten vil være let at se. Desuden vil de CSS-ændringer, du foretager her, blive anvendt absolut overalt, i alle Divi-moduler. Hvor end en overskrift vises, vil den blive vist, som du definerer i CSS'en, medmindre du senere anvender specifikke ændringer på en bestemt overskrift.

De elementer i CSS'en, som du kan ændre, er disse:

• color: Skrifttypens farve.
• font-weight: Skrifttypens tykkelse, f.eks. fed, let, normal osv.
• font-size: Skrifttypens størrelse (du kan indstille den i px, em eller %, du har flere eksempler i koden). Brugen af 'em' er ofte at foretrække for skalerbarhed.
• font-family: Den skrifttypefamilie, der skal anvendes, specifik (Verdana) eller generisk (Serif).
• text-transform: Transformation af teksten (alle store bogstaver, alle små bogstaver, normal, du har flere eksempler i koden).

Der er flere, men med dette har du et næsten komplet billede af ændringsmulighederne, synes du ikke?

Hvilke Divi-moduler bruger hvilke overskriftsniveauer?

Tilpasning af H1-H6-overskrifter i Divi giver dig mulighed for at skabe en unik og konsistent typografisk stil, der forbedrer din hjemmesides overordnede design og læsbarhed. At skræddersy disse overskriftsstile sikrer, at dit indhold er visuelt tiltalende og stemmer overens med dit brands identitet.

Nogle Divi-moduler har allerede titlen defineret. Disse titler er indstillet til at bruge forskellige overskriftsniveauer, for eksempel:

Sådan ændrer du standardoverskriftsniveauet i et modul

Hvis du ønsker at ændre det standardoverskriftsniveau, et modul bruger, eller tilpasse udseendet af et specifikt overskriftsniveau inden for et modul, er det simpelt:

1. Åbn modulindstillingerne.
2. Gå til Design-fane → Titeltekst → Titel-overskriftsniveau.
3. Ændr standardoverskriftsniveauet ved at vælge det ønskede overskriftsniveau.
4. (Valgfrit) Ændr stilarterne for det nye overskriftsniveau.

Sådan tilpasser du udseendet af et overskriftsniveau i et modul

1. Åbn modulindstillingerne.
2. Gå til Design-fane og udvid indstillingsgruppen Titeltekst.
3. Sørg for, at du har valgt det korrekte Overskriftsniveau (f.eks. H2 for en Call to Action-titel).
4. Ændr/tilpas hver af de relaterede indstillinger:
   • Titel Skrifttype: Giver mulighed for valg af en Google-skrifttype på det respektive overskriftsniveau.
   • Titel Skrifttypevægt: Vælg skrifttypevægten for det respektive overskriftsniveau.
   • Titel Skrifttype-stil: Vælg skrifttypestilen for det respektive overskriftsniveau.
   • Titel Tekstjustering: Vælg, hvordan titelteksten skal justeres på siden.
   • Titel Tekstfarve: Vælg tekstfarven for det respektive overskriftsniveau.
   • Titel Tekststørrelse: Vælg skrifttypestørrelsen for det respektive overskriftsniveau.
   • Titel Bogstavafstand: Vælg afstanden mellem hvert bogstav for overskriftsniveauet.
   • Titel Linjehøjde: Vælg linjehøjden for det respektive overskriftsniveau.
   • Titel Tekstskygge: Vælg stilen for tekstskygge på det respektive overskriftsniveau.

Pro-tip: De brugerdefinerede indstillinger, der er angivet for overskriften i Tema-tilpasningen, kan overskrives på hvert modulniveau ved at bruge Design-fane → Titeltekst indstillingsgruppen. Dette giver dig den ultimative fleksibilitet.

Ofte Stillede Spørgsmål (FAQ) om Divi Overskriftstilpasning

Hvad er forskellen på global og modulspecifik overskriftstilpasning i Divi?

Global tilpasning foretages via Divi Theme Customizer (Udseende → Tilpas → Generelle Indstillinger → Typografi) og påvirker alle overskrifter proportionelt på tværs af hele hjemmesiden. Modulspecifik tilpasning foretages inden for de enkelte moduler i Divi Builder (Design-fane → Overskriftstekst) og gælder kun for de overskrifter, der er indeholdt i det specifikke modul. Modulindstillinger overskriver altid globale indstillinger.

Kan jeg bruge både Theme Customizer og CSS til at tilpasse overskrifter?

Ja, absolut. Du kan starte med at sætte globale standarder i Theme Customizer. Derefter kan du bruge CSS til mere detaljerede, specifikke og avancerede tilpasninger, der gælder for hele hjemmesiden. Modulspecifikke indstillinger vil altid have den højeste prioritet og kan overskrive både Theme Customizer- og CSS-indstillinger for det pågældende modul.

Hvordan påvirker overskriftstilpasning min hjemmesides SEO?

Korrekt tilpasning og brug af overskrifter er afgørende for SEO. Ved at sikre, at dine overskrifter er visuelt adskilte og bruger de korrekte HTML-tags (H1 for hovedtitlen, H2 for større sektioner, H3 for undersektioner osv.), hjælper du søgemaskiner med at forstå indholdets struktur og relevans. Undgå at bruge H1-tags til underoverskrifter blot for at opnå en bestemt størrelse; brug i stedet Divis tilpasningsmuligheder til at ændre størrelsen på H2- eller H3-tags, mens du bevarer den korrekte semantiske struktur.

Hvilke Divi-moduler har foruddefinerede overskriftsniveauer for deres titler?

Mange Divi-moduler har standardoverskriftsniveauer for deres titler. Eksempler inkluderer Blurb-modulet (H4), Call to Action-modulet (H2), Circle Counter-modulet (H3), Comments-modulet (H1), Countdown Timer-modulet (H4) og Email Opt-in-modulet (H2). Du kan dog altid ændre disse standardniveauer inden for hvert modul under Design-fane → Titeltekst → Titel-overskriftsniveau.

Er det muligt at nulstille alle overskriftsindstillinger til Divis standard?

Ja, du kan nulstille indstillinger. I Theme Customizer kan du nulstille individuelle typografiindstillinger til deres standardværdier. For modulspecifikke indstillinger kan du klikke på nulstil-ikonet ved siden af hver indstilling for at vende tilbage til standarden. Hvis du har anvendt CSS, skal du blot fjerne den tilføjede CSS-kode fra dit Brugerdefinerede CSS-område.

Og så langt tutorialen om, hvordan man ændrer eller tilpasser overskrifterne med Divi-temaet. Vi håber, du er motiveret til at tilpasse en så vigtig del af din hjemmeside og udnytte Divis fulde potentiale til at skabe en unik og professionel online tilstedeværelse.

Hvis du vil læse andre artikler, der ligner Tilpasning af Overskrifter i Divi: En Fuld Guide, kan du besøge kategorien Teknologi.