Fullbreddsblock

Stort block med bakgrundsbild, rubrik och knappar – perfekt för startsidans topp

Tillbaka till block
Fullbreddsblock

Ett imponerande block som täcker hela skärmens bredd med en stor bakgrundsbild, rubrik och valfri knapp. Ofta använt högst upp på startsidan för att skapa ett starkt första intryck.

Så använder du blocket

  1. Välj en högkvalitativ bakgrundsbild (minst 1920 pixlar bred)
  2. Skriv en kort, slagkraftig rubrik
  3. Lägg till en tydlig knapp som leder besökaren vidare
  4. Justera textfärger så att de syns bra mot bakgrunden
Innehåll
Bakgrundsbild

En stor bild som täcker hela blocket. Välj en bild som är minst 1920 pixlar bred och gärna i liggande format. Tänk på att viss del av bilden kan beskäras på olika skärmstorlekar.

Rubrik

Huvudrubriken som visas centrerat på bilden. Håll den kort och slagkraftig – detta är ofta det första besökaren ser.

Text (valfritt)

Valfri brödtext under rubriken. Håll det kort – en eller två meningar räcker.

Länk (valfritt)

En knapp som leder besökaren vidare, t.ex. "Boka starttid" eller "Bli medlem".

Utseende
Textfärg (valfritt)

Färgen på rubrik och text. Välj en färg som syns tydligt mot bakgrundsbilden – ofta vit eller mycket ljus.

Textskugga (valfritt)

Lägger till en skugga bakom texten för bättre läsbarhet mot ljusa bakgrundsbilder.

Rullande bakgrund (parallax) (valfritt)

Skapar en snygg effekt där bakgrundsbilden rör sig långsammare än resten av sidan när besökaren scrollar.

Bakgrundsfärg (valfritt)

Ge blocket en egen bakgrundsfärg. Ange färgen som en hexkod (t.ex. #f5f5f5 för ljusgrått) eller rgba för genomskinliga färger.

Invertera textfärger (valfritt)

Byt automatiskt till ljus text. Perfekt när du har en mörk bakgrundsfärg och vill att texten ska synas tydligt.

Layout
Container (valfritt)

Begränsar blockets bredd så att innehållet inte sträcker sig hela vägen ut till kanterna.

Ram (valfritt)

Lägger till en tunn ram runt blocket.

Undre marginal (valfritt)

Lägger till extra luft under blocket.

Avancerat
Animera (valfritt)

Välj en animeringseffekt som spelas när besökaren scrollar ner till blocket.

Inaktivera blocket (valfritt)

Döljer blocket från webbplatsen utan att ta bort det.

Tips

  • Använd en bild med ett lugnt parti i mitten där texten kan placeras
  • Testa läsbarheten på olika enheter – lägg till textskugga om det behövs
  • Undvik bilder med mycket detaljer eller text som kan konkurrera med din rubrik