Banners staan vaak centraal binnen websites. Banners kunnen je website een bepaalde sfeer geven, maar ook bezoekers aanzetten tot actie. Denk aan banners met een call to action knop. In dit artikel leggen we je uit, hoe je een dergelijke banner maakt en waar je zoal aan moet denken.

1. Blokpatroon gebruiken

De makkelijkste manier om een banner te maken is door gebruik te maken van onze kant-en-klare blokpatronen. Zo is er een speciale “banners” categorie binnen de blokpatronen waaruit je kunt kiezen uit verschillende banners.

Documentatie: Wat is een blokpatroon?

Als je een banner hebt gevonden die je mooi vind, kun je deze gemakkelijk toevoegen met één druk op de knop. Vervolgens kun je de titel, achtergrond en knop naar eigen wens aanpassen.

2. Zelf een banner maken

2.1. Container blok toevoegen

Een banner begint altijd met een container blok. Een container blok is als het ware het “omhulsel” van je banner. De container zorgt ervoor dat je een achtergrond kunt toekennen en dat je content binnen de container kunt plaatsen. Verder bepaalt de container ook hoe breed en hoog je banner wordt.

Een dubbele container (een container in een container blok) is vaak een “must” als je een banner wilt toevoegen binnen een template. Een dubbel container blok zorgt er namelijk voor dat je banner een volledige breedte heeft over je website, maar dat de content in de banner zich wel aanpast aan de maximale content breedte van je website (aangezien je content binnen een template vrijwel nooit de volledige breedte van je website betreft).

2.1.1. Enkel container blok

Als je gebruik maakt van één container blok, is het eigenlijk vrij simpel. Je voegt een container blok toe en je bepaalt eventueel hoe breed of hoog deze mag zijn.

2.1.2. Dubbel container blok (templates)

Maak je gebruik van een dubbele container, dan dient de “buitenste” container voor de achtergrond; een kleur of afbeelding. De binnenste container bepaalt hoe veel ruimte de content in de banner mag gebruiken. Binnen het Affiliate Held Thema gebruiken wij voor de standaard templates altijd 1200 pixels. Deze breedte stel je dan in als “maximale breedte” binnen de binnenste container blok. Vergeet vervolgens niet om de binnenste container blok in het midden uit te lijnen.

2.2. Achtergrond inrichten

Heb je je container blok(ken) toegevoegd en ingericht? Dan kun je verder met het toevoegen van een achtergrond. Let op: de achtergrond voeg je altijd toe aan het “buitenste” container blok.

2.2.1. Kleur als achtergrond

Selecteer het betreffende container blok dat je een achtergrondkleur wilt geven en open het optiemenu “kleuren”. Kies vervolgens de optie “achtergrondkleur” om een achtergrondkleur in te stellen.

2.2.2. Afbeelding als achtergrond

Wil je liever een afbeelding toevoegen als achtergrond? Selecteer dan het container blok dat je een achtergrond wilt geven (vaak de buitenste van je banner) en open vervolgens het optiemenu “achtergrond”.

2.3. Content toevoegen

Zodra je banner beschikt over een container blok inclusief een achtergrond, is het tijd om content toe te voegen in je banner. Dit doe je door blokken te slepen in het binnenste container blok of door op de “+” te klikken in het container blok zelf. Je kunt vervolgens de blokken toevoegen die je wilt. Denk aan een kop, tekst, knop, etc.

Als je de benodigde blokken hebt toegevoegd in je banner is het belangrijk om nog wat “opvulling” toe te voegen via het optiemenu “afmetingen”. Hierdoor zorg je ervoor dat de tekst en knoppen niet aan de rand van de banner plakken, maar geef je deze ruimte rondom.

Vergeet tenslotte niet de juiste uitlijning in te stellen voor de blokken die je toegevoegd hebt in je banner (bijvoorbeeld “midden”).

Vragen of hulp nodig?

Heb je na het lezen van dit document vragen gekregen, kom je er niet uit of wil je gewoon contact met ons? Vul dan ons contactformulier in of stel een vraag in onze community.