Så bygger du Siffra – en modern startsida i Divi 5

Siffra är en påhittad redovisningsbyrå som jag har designat som demosida. I den här tutorialen bygger vi hela startsidan tillsammans, sektion för sektion: hero, tjänster, omdöme, team, CTA och sidfot.

Det fina med Siffra är att allt – färger, rundade hörn, luft och typsnitt – ligger i Divis egna designinställningar. Det finns ingen dold CSS-kod som du måste leta upp senare. Vill du ändra ett hörn eller lite padding gör du det direkt i modulen.

Det här behöver du

• WordPress med Divi 5
• Bilderna till sidan: en illustration till hero, tre ikoner, citattecken, fyra teambilder, en miniräknare och ikoner för Facebook och Instagram. Du kan ladda ner alla här nedanför.
• Ungefär en timme och en kopp kaffe

Färger och typsnitt

Innan vi bygger är det skönt att ha färgerna klara. Lägg gärna in dem som globala färger i Divi. Då kan du byta en färg på ett ställe och se den ändras på hela sidan.

• Orange #f08a3e – knappar, CTA-rutan och sidfoten
• Mörkorange #d2661f – markerade ord i rubrikerna
• Kräm #fbf7f1 – bakgrund i hero och omdömen
• Persika #fdebdc – bakgrund bakom ikonerna
• Svart #111111 – rubriker och mörka knappar
• Grå #5e5e5e – brödtext
• Linje #ebe7e1 – tunna kantlinjer på korten

Typsnittet är Open Sans genom hela sidan: vikt 800 för rubrikerna och 400–700 för vanlig text.

Tips: Vill du färga ett enskilt ord i en rubrik? Markera ordet i textredigeraren och välj en textfärg. Det är så "siffrorna" och "företaget" blir orange i Siffras rubrik.

Steg 1: Förbered sidan

Skapa en ny sida och starta Divi Builder med en tom sida. Innan vi lägger till något innehåll finns det två inställningar som gör hela bygget enklare.

Avståndet mellan raderna

Divi lägger som standard 60 px mellan raderna i en sektion. Det blir för mycket mellan en rubrik och korten under den. Öppna varje sektion och gå till Design → Layout och sätt Radavstånd till 40 px (32 px på mobil).

Samma bredd på alla rader

Gå till Design → Storlek på varje rad och sätt Bredd till 88 % och Maxbredd till 1080 px. Ta bort radens padding under Mellanrum. Då ligger allt innehåll på samma linje genom hela sidan.

Steg 2: Hero-sektionen

Hero är det första besökaren ser, så här lägger vi lite extra krut.

Sektionen

• Bakgrund: kräm #fbf7f1
• Kantlinje → Rundade hörn: 0 upptill och 36 px nedtill
• Mellanrum → Padding: 72 px upptill och 120 px nedtill

Raden

Två kolumner. Under Design → Layout sätter du kolumnavståndet till 56 px och Justera objekt till Center, så att texten och bilden möts på mitten.

Vänster kolumn, uppifrån och ned

1. Etiketten "Första månaden kostnadsfri…" är en textmodul med vit bakgrund, 1 px kantlinje i #ebe7e1, rundade hörn på 999 px och padding 11 px / 22 px. Sätt Bredd till auto och Justera själv till Start, så krymper den runt texten.
2. Rubriken är en H1 i 52 px, vikt 800, radhöjd 1.1em och bokstavsavstånd −0.02em. Ge modulen 56 px marginal upptill.
3. Ingressen är 17 px i grått #5e5e5e med en maxbredd på 480 px.
4. Knapparna ligger i en Grupp-modul med riktning rad, 12 px avstånd och radbrytning påslagen. Knapparna har rundade hörn på 999 px, padding 18 px / 34 px och text i 16 px, vikt 700. Den orange har bakgrund #f08a3e och den ljusa vit bakgrund med en svart kantlinje på 1,5 px.

I högra kolumnen lägger du herobilden som en bildmodul med bredden 100 %.

Tips: Blir knapptexten VERSALER fast du inte valt det? Då finns det ett förval för knappar på sajten. Lägg in text-transform: none !important; under Avancerat → Anpassad CSS → Huvudelement på knappen.

Steg 3: Tjänstekorten

Tre kort i rad, där varje kort är en kolumn. Det är det smidiga med Divi 5: kolumnen kan själv ha bakgrund, ram och padding, så du behöver inga extra moduler för själva kortet.

Rubriken

En textmodul med en H2 i 44 px, vikt 800, och en kort underrad i 15 px grått. Ordet "tjänster" får den mörkorange färgen #d2661f.

Korten

Raden har tre kolumner med 24 px mellan. På varje kolumn ställer du in:

• Bakgrund: vit
• Kantlinje: 1 px i #ebe7e1 och rundade hörn på 24 px
• Padding: 56 px upptill, 30 px på sidorna och 60 px nedtill
• Layout: 18 px avstånd och Justera objekt Center

I varje kort ligger ikonen som en bildmodul: bredd 58 px, bakgrund #fdebdc, rundade hörn 16 px och padding 14 px. Under den kommer en centrerad textmodul med en H3 i 20 px och en kort text i 14 px.

Steg 4: Omdömet

Ett enda omdöme, men stort och luftigt så att det verkligen syns.

• Sektionen: bakgrund #fbf7f1, rundade hörn på 36 px runt om och 88 px padding upptill och nedtill
• Kortet är en kolumn med vit bakgrund, 1 px kantlinje, rundade hörn på 28 px och padding 76 px / 96 px. Sätt layouten till 22 px avstånd och centrerade objekt.

Inuti kortet ligger citattecknen som en bild (44 px bred), själva citatet som en centrerad textmodul i 17 px fet text med maxbredden 640 px, och namn och roll i en liten textmodul under.

Steg 5: Teamet

Fyra kort i rad, byggda på samma sätt som tjänstekorten.

• Raden: fyra kolumner med 20 px mellan
• Varje kolumn: vit bakgrund, kantlinje, rundade hörn på 20 px och padding 10 px runt om (22 px nedtill)
• Bilden: rundade hörn på 14 px under Design → Bild → Kantlinje
• Texten: namnet som H3 (15 px), rollen som H4 (13 px, mörkorange) och en kort beskrivning (13,5 px, grå)

På surfplatta ställer jag kolumnbredden till 1/2 så att korten hamnar två och två, och på mobil till 1/1 så att de läggs under varandra.

Steg 6: CTA-rutan

Här får raden vara den orange rutan, och sektionen runt den är vit med lite padding. Då ser det ut som att rutan svävar på sidan.

• Sektionen: 24 px padding upptill och 88 px nedtill
• Raden: bakgrund #f08a3e, rundade hörn på 32 px, padding 56 px / 64 px, två kolumner med 40 px avstånd och centrerade objekt
• Rubriken: en H2 i 46 px där ordet "Fortfarande" färgas vitt
• Underrubriken: 19 px fet text, med första delen i vitt
• Knappen: svart #111111 med vit text och samma form som knapparna i hero, med 32 px marginal upptill

I högra kolumnen ligger miniräknaren som en bild med maxbredden 380 px.

Steg 7: Sidfoten

Sidfoten är en orange sektion med rundade hörn på 36 px upptill och 44 px / 36 px padding.

• Raden har tre kolumner i storlekarna 1/4, 1/2 och 1/4.
• Vänster: "siffra.se" som text i 16 px, vikt 800
• Mitten: en Grupp med tre länkar som textmoduler, i rad och centrerade med 40 px mellan. Länkfärgen ställer du in under Design → Brödtext → Länk, med vitt som hover-färg.
• Höger: Facebook- och Instagram-ikonerna som bildmoduler på 26 px. Sätt kolumnens layout till riktning rad och justera innehållet mot slutet.

Under raden ligger copyright-texten i en egen rad: svart bakgrund, vit text i 12 px, rundade hörn på 10 px och padding 14 px / 36 px.

Steg 8: Mobil och surfplatta

Sista steget, och det som gör störst skillnad. Nästan varje inställning i Divi har små ikoner för dator, surfplatta och mobil. Klicka på dem så kan du ge samma inställning olika värden på olika skärmar.

• Kolumner: sätt kolumnbredden till 1/1 på surfplatta för hero, tjänster och CTA, så hamnar de under varandra. Slå på radbrytning under radens Layout för surfplatta och mobil.
• Rubriker: H1 i 52 px på dator, 48 px på surfplatta och 32 px på mobil. H2 i 44, 40 och 32 px.
• Luft: minska sektionernas padding på mobil, till exempel från 88 px till 64 px.
• Kort: lite mindre padding på mobil, så att texten får plats.

Klart!

Nu har du en modern startsida där allt går att justera direkt i Divi, utan att leta i CSS-kod. Ett bra nästa steg är att spara sektionerna i Divi-biblioteket. Då har du färdiga byggstenar till nästa projekt: ett kortrutnät, en CTA-ruta och en sidfot som bara behöver nya färger.

Vill du se hur allt hänger ihop? Kika på hela Siffra-sidan och jämför med din egen version. Lycka till med bygget, och hör gärna av dig om du fastnar!