Voorbeeldontwerp: clean en professioneel

In dit voorbeeld laten we je stap voor stap zien hoe je een clean ontwerp maakt met één kolom, veel witruimte en een rustige uitstraling. Dit soort nieuwsbrieven is perfect voor het delen van updates, nieuws of uitgelichte producten.

Hieronder zie je een voorbeeld van de nieuwsbrief die we in deze tutorial gaan maken:

We gebruiken een gecentreerd logo, een duidelijke koptekst, rustige inhoudsblokken en een nette footer. Je hoeft geen technische kennis te hebben: we bouwen het volledig met de drag-and-drop editor op basis van een overzichtelijke éénkolomsstructuur. Ideaal om snel een professionele nieuwsbrief te maken die ook op mobiel goed weergegeven wordt.

Stap 1: Algemene instellingen

Klik op het tabblad Instellingen. Hier stel je de basis van je nieuwsbrief in, zoals de kleuren, voorbeeldtekst en lettertypes.

Voorbeeldtekst (onzichtbare voorkop)

De onzichtbare voorkop, oftewel de preheader, is onzichtbaar in de nieuwsbrief zelf, maar wordt vaak getoond in de inbox, direct onder de onderwerpregel. Het geeft je lezers extra context voordat ze klikken.

We laten de onzichtbare voorkop even voor wat het is. Hier komen we in stap 4 op terug.

Breedte

De maximale breedte staat standaard op 600 pixels ingesteld. Dit is een veilige keuze: groot genoeg voor desktop, maar smal genoeg om goed te schalen op mobiel. Bovendien voorkom je hiermee dat ontvangers in de voorbeeldweergave van bijvoorbeeld Outlook horizontaal moeten scrollen.

Kleuren

• Achtergrondkleur: wit
• Blokkleur: wit of transparant
• Knopkleur: donkergrijs (#2E2E2E)
• Linkkleur: donkergrijs (#2E2E2E)

Lettertype

Voor de koppen, paragrafen en knopteksten kiezen wij voor het lettertype Roboto. Dit lettertype sluit goed aan bij de uitstraling die we willen overbrengen: modern, strak en goed leesbaar. Omdat Roboto geen zogenaamd web safe lettertype zoals Arial of Verdana is, is het niet standaard op elk apparaat aanwezig. Om dit op te lossen voegt de editor Roboto automatisch toe aan je nieuwsbrief. Hierdoor wordt het lettertype in veel moderne e-mailprogramma's toch correct weergegeven.

Let er wel op: niet elke e-mailprogramma ondersteunt ingesloten lettertypes. In dat geval wordt automatisch een alternatief, oftewel een fallback lettertype gebruikt. Je hoeft daar zelf niets voor te doen — de fallback wordt automatisch ingesteld.

Wil je het veilig spelen, kies dan een web safe lettertype als Arial of Verdana. Deze lettertypes worden op vrijwel alle apparaten goed weergegeven.

Aanbevolen lettergroottes:

• Kop 1: 24 px, letterafstand 2
• Kop 2: 20 px
• Paragraaf: 16 px
• Knoptekst: 16 px
• Regelhoogte: 1.5

De letterafstand voor Kop 1 stel je in door hier rechts vanop het pijltje naar beneden te klikken. Er worden nu meer opmaakmogelijkheden getoond, waaronder de letterafstand.

Stap 2: Structuur opzetten

In deze stap ga je de opbouw van je nieuwsbrief klaarzetten. We gebruiken hiervoor alleen éénkolomsstructuren. Dat betekent dat alle inhoud netjes onder elkaar komt te staan, wat prettig leest op zowel desktop als mobiel.

Klik op het tabblad Structuur. Sleep de volgende structuren naar het canvas, in deze volgorde:

1. Een structuur voor het logo bovenaan
2. Een structuur voor de koptekst
3. Twee structuren voor de inhoudsblokken
4. Een structuur voor de footer

Je hoeft nu alleen nog de “lege vakken” te vullen met inhoudsblokken. Door de structuur vooraf te maken, behoud je overzicht en voorkom je dat je later blokken moet verplaatsen of verwijderen.

Gebruik in alle gevallen structuren met één kolom. Dat zorgt ervoor dat de nieuwsbrief ook op mobiel automatisch goed schaalt en de inhoud overzichtelijk blijft.

Stap 3: Blokken toevoegen

Nu de structuur klaarstaat, kun je de juiste blokken gaan toevoegen in elk onderdeel van je nieuwsbrief. Klik hiervoor op het tabblad Inhoud.

Je kunt blokken slepen naar de structuur, maar er is ook een snellere manier: klik op het plusje binnen een structuur om direct een blok toe te voegen.

Logo en koptekst

Begin bovenaan met een afbeeldingsblok. Sleep het blok naar de bovenste structuur of klik op het plusje binnen de structuur om het blok toe te voegen.

Klik vervolgens op het toegevoegde afbeeldingsblok om de bestandsmanager te openen. Hier kun je je logo uploaden of selecteren uit je bestanden. Het logo wordt automatisch gecentreerd weergegeven, dit kun je zo laten.

In het eigenschappenpaneel stellen we de afbeeldingslink, de alternatieve tekst en de breedte van het logo in.

Een goede breedte voor een gecentreerd logo in een nieuwsbrief van 600 pixels breed is ongeveer 200 tot 300 pixels. Zo is het logo duidelijk zichtbaar, maar neemt het niet te veel ruimte in. Wij kiezen hier voor 300 pixels.

Sleep nu een tekstblok naar de structuur daaronder. Hier typen we onze titel, bijvoorbeeld "Because plastic is so last season". Stel de opmaak in als Kop 1 en laat de uitlijning op gecentreerd staan voor een rustige, gebalanceerde indeling.

Wil je een korte toelichting onder de titel? Sleep dan nog een tekstblok naar dezelfde structuur.

Inhoudsblokken

Voor elk van de twee inhoudsstructuren voeg je de volgende blokken toe, in deze volgorde:

• Afbeeldingsblok
• Tekstblok (titel of korte toelichting)
• Knopblok

Voorbeeld van één inhoudsblok:

Afbeelding: een illustratie of een foto van een product

Titel: De tas die álles draagt. Behalve verantwoordelijkheid

Tekst: Onze Classic Kraft is 100% recyclebaar, 200% stijlvol. Voor iedereen die met flair een papieren lunch of een halve supermarkt meeneemt.

Knop: Ontdek meer

In het eigenschappenpaneel van de knop stel je de link van de knop in. Wij kiezen er verder voor om de randradius op 0 te zetten. Hierdoor wordt de knop rechthoekig wat mooi binnen onze stijl past.

Footer toevoegen

Tot slot voegen we onderaan de nieuwsbrief een nette, rustige footer toe. Dit doen we in één structuur met meerdere blokken, zodat alles netjes onder elkaar gecentreerd blijft en ook op mobiel goed werkt.

Voor alle tekstblokken in de footer kiezen wij een lettergrootte van 12 en zetten wij de uitlijning op gecentreerd.

Social media-iconen

Sleep een social media-blok naar de footerstructuur. In het linkerpaneel kun je daarna het blok bewerken:

• Kies bij Stijl voor Simple black
• Laat de grootte staan op 35
• Selecteer de netwerken die je wilt tonen. Wij kiezen hier voor Facebook, Instagram en LinkedIn
• Klik per netwerk op het icoon om de juiste URL toe te voegen

Bedrijfsgegevens

Voeg nu een tekstblok toe onder het social media-blok. In dit blok zet je zowel de bedrijfsnaam als het adres, bijvoorbeeld:

Contactgegevens

Voeg een nieuw tekstblok toe met je contactinformatie, bijvoorbeeld:

info@kraftique.eu – Onze website

Maak beide onderdelen vetgedrukt en vervolgens klikbaar:

• Selecteer info@kraftique.eu, klik op het icoon link en vul in het dialoogvenster bij URL in: mailto:info@kraftique.eu. Klik vervolgens op Opslaan.
• Selecteer Onze website, klik op het icoon link en vul de URL in, bijvoorbeeld: https://www.kraftique.eu. Klik daarna op Opslaan.

Afmeldlink toevoegen

Voeg tot slot een nieuw tekstblok toe. Typ hier bijvoorbeeld de volgende zin in:

Wil je deze e-mails niet meer ontvangen? Klik hier om je af te melden.

Selecteer het woord hier, maak vetgedrukt en klik vervolgens op het Link-icoontje. Selecteer hier Afmeldlink uit de lijst met links. Klik op Opslaan om de link toe te voegen.

Stap 4: Inhoud controleren en afronden

Je nieuwsbrief is nu opgebouwd en ingevuld — tijd om alles nog één keer goed door te lopen en klaar te maken voor verzending. In deze laatste stap zorg je ervoor dat je nieuwsbrief er verzorgd uitziet, goed leesbaar is op elk apparaat en technisch in orde is.

Onzichtbare voorkop

Nu de inhoud van je nieuwsbrief compleet is, is het een goed moment om de onzichtbare voorkop, oftewel de preheader in te vullen.

Klik hiervoor op het tabblad Instellingen. Naast de koptekst Onzichtbare voorkop zie je een klein AI-icoontje. Wanneer je hierop klikt, scant ChatGPT automatisch de inhoud van je nieuwsbrief en stelt een passende preheader voor. Dit is wat er bij ons gegenereerd werd:

Wij waren hier direct tevreden mee en hebben het zo laten staan. Natuurlijk kun je het voorstel ook aanpassen of zelf iets invullen dat beter past bij jouw nieuwsbrief.

Marge en ruimte tussen blokken

Bekijk of er genoeg witruimte zit tussen de verschillende blokken. Zorg bijvoorbeeld dat er boven en onder een knop wat ruimte is, zodat deze niet te dicht op andere elementen staat. Een marge van ongeveer 20 px werkt meestal goed.

Tekstopmaak controleren

Controleer of lettertypes en kleuren consistent zijn. Zijn alle titels in dezelfde stijl opgemaakt? Staan paragrafen netjes onder de kopteksten? En vallen je links goed op, zonder dat ze concurreren met knoppen?

Nieuwsbrief controleren en voorbeeld bekijken

Klik bovenin op Nieuwsbrief controleren. Je ziet dan een voorbeeld van je nieuwsbrief op desktop en mobiel. Houd er rekening mee dat de exacte weergave per apparaat of e-mailprogramma kan verschillen — deze weergave geeft een goede indicatie.

Testmail versturen en verbeterpunten bekijken

Via hetzelfde venster kun je ook een testmail naar jezelf versturen. Zo zie je hoe je nieuwsbrief eruitziet in je eigen inbox.

Daarnaast kun je in dit venster op het tabblad Verbeterpunten klikken. Hier zie je of er nog technische aandachtspunten zijn voor een goede aflevering van je nieuwsbrief.