50/50 Bild Text

Tvåkolumnslayout med bild och text sida vid sida

Tillbaka till block
50/50 Bild Text

Ett flexibelt block som delar upp innehållet i två lika stora kolumner – en med bild och en med text. Perfekt för att presentera tjänster, berätta om klubben eller lyfta fram erbjudanden på ett visuellt tilltalande sätt.

Tips
När du lägger till flera 50/50-block efter varandra växlar bild och text automatiskt sida. Första blocket visar bilden till vänster, nästa till höger, och så vidare. Detta skapar en snygg, varierad layout utan att du behöver göra något.

Så använder du blocket

  1. Välj en bild som passar ihop med din text

  2. Skriv en fängande rubrik och brödtext

  3. Lägg eventuellt till en knapp som leder vidare till mer information

  4. Använd layoutinställningarna för att anpassa utseendet efter dina behov

Innehåll
Bild

Bilden som visas på ena sidan av blocket. Välj en bild som är minst 800 pixlar bred för bästa resultat. Bilden beskärs automatiskt för att passa layouten.

Bildrubrik (valfritt)

En liten rubrik som visas ovanför bilden. Kan användas för att kategorisera eller ge extra kontext, till exempel "Vår bana" eller "Nyheter".

Textrubrik

Huvudrubriken som visas i textkolumnen. Håll den kort och tydlig – max 5-6 ord fungerar bäst.

Textunderrubrik (valfritt)

En mindre text under huvudrubriken. Bra för att ge mer kontext, till exempel "Sedan 1965" eller "För alla åldrar".

Brödtext

Här skriver du själva innehållet. Du kan formatera texten med fetstil, punktlistor och länkar precis som i ett vanligt ordbehandlingsprogram.

Länk (valfritt)

Lägg till en knapp som leder besökaren vidare. Ange både knapptexten (t.ex. "Läs mer" eller "Boka nu") och vart länken ska gå.

Öppna i helskärm (valfritt)

Om du bockar i denna öppnas bilden eller länkad media i en stor lightbox-vy när besökaren klickar.

Utseende och färger
Textfärg (valfritt)

Ändra färgen på all text i blocket. Använd färgväljaren för att plocka en färg. Lämna tomt för att använda webbplatsens standardfärg.

Accentfärg (valfritt)

En extra färg som används för detaljer som linjer och dekorationer i blocket.

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.

Invertera bildtextfärg (valfritt)

Samma som invertera textfärger, men påverkar endast texten som visas på bildsidan.

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 bilder med liknande stil för ett enhetligt intryck
  • Testa alltid hur blocket ser ut på mobilen – där visas bild och text ovanför varandra istället för sida vid sida