Så fixar du snygga rubriker i Divi och WordPress

Publicerad: 2 mars, 2020

Snygga rubriker i DiviNär du använder en vanlig textmodul i Divi så har du enbart en textruta att fylla med text till skillnad från t ex en Blurb där du har fält för både rubrik och textavsnittet.

För att definiera en rubrik (heading på engelska) i textmodulen får du då använda HTML-taggarna H1 ned till H6, där H står för just Heading och informerar webbläsaren om att den ska presenteras som sådan också. H1 är den rubrik som har “högst” rang och betecknas som huvudrubrik.

Omslut rubriktexten med <h1></h1> så kommer de att formateras som rubriker.
T ex
<h1>Detta är en rubrik</h1>

Så fixar du snygga rubriker i Divi och Wordpress 1

SEO-tips

Just H1 bör du använda endast en gång per sida sett ur ett SEO-perspektiv. Detta är som sagt huvudrubriken och en beskrivning av vad sidan handlar om för Google och andra sökmotorer. Flera H1-taggar på en sida kan göra det svårare för sökmotorerna att tolka sidans innehåll.

H2-H6 däremot är av kategorin underrubriker och kan användas flera gånger om för att skapa en lättläst och strukturerad text. Gärna att man inkluderar det specifika sökord som sidan handlar om också. Ex Vårens skor, skor för män, Vattentäta skor om du valt Skor som nyckelord för din sida.

Ställ in stilen

Vilken storlek, typsnitt och form H klasserna ska ha kan du bestämma per modul under fliken Design > Text för underrubrik.
Välj den klass du använt, i detta fall H1 och ställ in önskat utseende. Detta gäller då enbart just för denna modul.

Så fixar du snygga rubriker i Divi och Wordpress 2

Global defaults på rubrikerna i textmodulen
Om du vill utöka så att din stil ska gälla alla H1 i alla textmoduler så kan du använda dig av sk Global defaults. Högerklicka då på rubriken “Text för underrubrik” och välj “Gör stilar som standard”.

Så fixar du snygga rubriker i Divi och Wordpress 3

CSS för rubriker

Det går naturligtvis att ställa in detta globalt med CSS-kod också. Använd med fördel sk media queries så att du kan ställa in en brytpunkt när dina inställningar anpassas för visning på dator respektive mobil skärm.

/* Sätt vilket bas typsnitt som din sida ska utgå från och vilken storlek */
body {
font-size: 18px;
line-height: 1.2em;
font-family: Lato;
}

/* Definiera upp heading taggarna för desktop */

h1 {
font-size: 3em;
line-height: 1.2em;
text-transform: uppercase; /*versaler för alla H1-taggar*/
}

h2 {
font-size: 2em;
line-height: 1.2em;
color: #333;
}

h3 {
font-size: 1.4em;
}

h4 {
font-size: 1.3em;
}

/* Media query för mobiler */
@media all and (max-width: 980) {
body { font-size: 17px; }

h1 {
font-size: 2em;
line-height: 1.2em;
text-transform: uppercase; /*versaler för alla H1-taggar*/
}

h2 {
font-size: 1.7em;
line-height: 1.2em;
color: #333;
}

h3 {
font-size: 1.3em;
}

h4 {
font-size: 1.2em;
}

}

Kombinera rubrikstilar

Om du vill anpassa din webbsida på ett alternativt sätt kan du kombinera flera heading-taggar i din textmodul. På så vis kan du enkelt göra snygga layouter som sticker ut.

<h3>Din bästa skobutik</h3>
<h1>Skobutiken</h1>

Så fixar du snygga rubriker i Divi och Wordpress 4

Testa själv!

Vilket är ditt bästa trix för att göra en snygg layout i en textbox?

Läs även

Divi Snabbkommandon (Quick Actions)

Divi Snabbkommandon (Quick Actions)

En rätt ny funktion i Divi som många nog har missat är de sk snabbkommandona, (på engelska: quick actions). Med dem snabbar du upp ditt arbete väsentligt eftersom det går snabbt och enkelt att jobba sig framåt.

Divi Snabbkommandon (Quick Actions)

Lägg till en favicon för Divi

En favicon eller webbplats-ikon är en liten bild/ikon som visas i bokmärkeshanteraren och på din flik i webbläsaren. Det kan vara en logga, text eller en bild som symboliserar innehållet på din webbplats. Du kan ta vilken bild du vill och beskära den i ditt bildbehandlingsprogram, som t ex Photoshop eller liknande.