Instellingen van de Stripo-e-maileditor met slepen en neerzetten

Published: 22 oktober 2024 · Last updated: 21 juli 2026 · By Marcus Biel

Aan de rechterkant van de e-maileditor van Maildroppa vind je de kolom E-mailinstellingen, met tools waarmee je de inhoud en weergave van je e-mail kunt structureren en aanpassen. Deze kolom is verdeeld in twee tabbladen: Inhoud en Vormgeving.

Tabblad Inhoud

Op het tabblad Inhoud ontwerp en orden je de inhoud van je e-mail. Het bevat twee hoofdsecties: Structuren en Blokken.

1. Structuren

Structuren bepalen de lay-out van je e-mail door inhoud in rijen en kolommen te plaatsen. Je kunt kiezen uit verschillende vooraf ontworpen lay-outs, zoals:

• Eén kolom
• Twee kolommen
• Meerdere kolommen

Je bent niet beperkt tot deze opties: je kunt meerdere blokken combineren om elke gewenste aangepaste lay-out te maken. Zo heb je volledige flexibiliteit voor je ontwerp.

• Slepen en neerzetten: Sleep eenvoudig een structuur uit deze sectie naar het ontwerpgebied van je e-mail om inhoud toe te voegen.
• Aanpassen: Nadat je een structuur hebt toegevoegd, kun je deze vullen met verschillende inhoudsblokken, zoals afbeeldingen, tekst of knoppen.

2. Blokken

Blokken zijn de inhoudselementen die je binnen structuren plaatst om je e-mail op te bouwen.

De beschikbare bloktypen zijn:

• Afbeelding: Upload afbeeldingen (PNG, JPG, GIF) en pas hun weergave aan.
• Tekst: Voeg tekst toe en formatteer deze om je boodschap over te brengen.
• Knop: Voeg klikbare knoppen toe met aanpasbare tekst, links en stijlen.
• Tussenruimte: Voeg lege ruimte toe om de lay-out tussen andere blokken aan te passen.
• Video: Voeg video-inhoud in vanaf platforms zoals YouTube, Vimeo en meer.
• HTML: Voeg aangepaste HTML- en CSS-code toe voor geavanceerde aanpassingen van e-mailinhoud.

Elk blok is flexibel en aanpasbaar, zodat je een e-mail kunt maken die aansluit bij de uitstraling van je merk.

Uitgebreide uitleg van inhoudsblokken

Afbeeldingsblok

Met het Afbeeldingsblok in de drag-and-drop-e-maileditor van Stripo kun je afbeeldingen aan je e-mailcampagne toevoegen en aanpassen.

Een afbeeldingsblok toevoegen

Je kunt op twee manieren een Afbeeldingsblok aan je e-mail toevoegen:

Optie 1

Beweeg de muis over het gebied "Inhoud hier neerzetten" in een structuur en klik vervolgens op het pictogram Afbeelding. De geselecteerde structuur wordt dan direct omgezet in een afbeeldingsblok.

Optie 2

Ga naar de sectie Blokken op het tabblad Inhoud. Sleep het Afbeeldingsblok naar de gewenste structuur in je e-maillay-out. Met deze methode heb je meer controle over de exacte plaats van je afbeelding.

Een afbeelding uploaden

Nadat je het Afbeeldingsblok hebt toegevoegd, kun je op twee manieren een afbeelding uploaden:

Slepen en neerzetten

Je kunt een afbeeldingsbestand (PNG, JPG, GIF) rechtstreeks vanaf je computer naar het uploadvak slepen dat binnen het Afbeeldingsblok verschijnt.

Uploaden vanaf computer

Je kunt ook op het cloudpictogram in het Afbeeldingsblok klikken om je bestandsbrowser te openen en een afbeelding op je computer te selecteren (maximaal 2 MB). Nadat je de afbeelding hebt geselecteerd, verschijnt deze zowel in het blok als op het tabblad Inhoud aan de rechterkant.

De afbeelding wijzigen

Gebruik de optie Afbeelding wijzigen op het tabblad Inhoud om de afbeelding te vervangen. Klik op het ronde pictogram Afbeelding wijzigen. Je kunt vervolgens een nieuwe afbeelding uploaden of een afbeelding vanaf een externe URL koppelen.

De afbeelding bewerken

Nadat je een afbeelding hebt geüpload, wil je deze misschien rechtstreeks in het platform verder bewerken. Met de ingebouwde Afbeeldingseditor van Stripo kun je afbeeldingen verbeteren en aanpassen zonder de e-maileditor te verlaten.

De Afbeeldingseditor openen

1. Klik nadat je een afbeelding hebt geüpload op de knop Afbeelding bewerken. De interface van de Afbeeldingseditor wordt geopend.
2. De editor biedt een breed scala aan tools, die in de bovenste menubalk worden weergegeven.

Beschikbare bewerkingstools voor afbeeldingen

• Filters Pas met één klik verschillende filters toe, zoals:

  • Grijstinten
  • Zwart-wit
  • Verscherpen
  • Inverteren
  • Sepia
  • Helderheid
  • Kleur

• Formaat wijzigen Pas de afmetingen van je afbeelding aan. Je kunt:

  • Een specifieke breedte en hoogte instellen.
  • De beeldverhouding behouden.

• Bijsnijden Selecteer het deel van de afbeelding dat je wilt behouden en verwijder ongewenste delen.

• Transformeren Draai of spiegel de afbeelding:

  • Horizontaal
  • Verticaal

• Tekenen Gebruik de tekentool om uit de vrije hand elementen, zoals lijnen of aangepaste vormen, aan je afbeelding toe te voegen.

• Tekst Voeg rechtstreeks tekst aan de afbeelding toe. Pas het volgende aan:

  • Lettertype
  • Grootte
  • Kleur
  • Uitlijning

• Vormen en stickers Geef je afbeelding extra uitstraling door het volgende eroverheen te leggen:

  • Vooraf gemaakte vormen
  • Leuke stickers

• Randen Kies uit verschillende randen om je afbeelding een stijlvolle omlijsting te geven.

• Hoeken Pas de hoekstijl aan voor een verzorgde uitstraling.

• Achtergrond Verwijder of vervang de achtergrond van een afbeelding voor een strakker resultaat.

De bewerkingen opslaan

Als je de gewenste wijzigingen hebt aangebracht, klik je linksboven in de editor op de knop Opslaan. De bewerkte afbeelding vervangt automatisch het origineel in je e-maillay-out.

Afbeeldingsinstellingen

Nadat je de afbeelding hebt geüpload, kun je deze aanpassen met de opties voor Afbeeldingsinstellingen op het tabblad Inhoud aan de rechterkant.

Link

Voeg een link aan de afbeelding toe. Je kunt kiezen uit verschillende linktypen, zoals:

• Website (HTTP, HTTPS)
• E-mail (mailto:)
• Bestand (ftp)
• Sociaal delen (Facebook, X (voorheen Twitter), LinkedIn, Pinterest)

Je vindt deze opties in de vervolgkeuzelijst met linkinstellingen.

Alternatieve tekst

Voeg alternatieve tekst toe die wordt weergegeven als de afbeelding niet wordt geladen. Deze tekst is ook nuttig voor toegankelijkheid, omdat schermlezers de afbeelding hiermee kunnen beschrijven aan ontvangers met een visuele beperking.

Uitlijning

Kies hoe de afbeelding binnen de container moet worden uitgelijnd. Je kunt deze Links, Midden of Rechts uitlijnen.

Grootte

Pas de breedte en hoogte van de afbeelding handmatig aan met de plus-/min-knoppen of door de gewenste afmetingen in te voeren.

Je kunt ook de optie "Aan breedte aanpassen" inschakelen, zodat de afbeelding automatisch de volledige breedte van de container gebruikt.

Responsieve afbeelding

Schakel de optie "Responsieve afbeelding" in om ervoor te zorgen dat de afbeelding zich aanpast aan verschillende schermformaten, vooral op mobiele apparaten.

Opvulling

Pas de opvulling rond de afbeelding aan om te bepalen hoeveel ruimte er tussen de afbeelding en de omliggende inhoud verschijnt. Je kunt overal dezelfde opvulling toepassen of deze per zijde aanpassen (Boven, Onder, Links, Rechts).

Ankerlinks

Je kunt een ankerlink aan de afbeelding toewijzen. Ontvangers kunnen dan naar een specifieke sectie binnen dezelfde e-mail springen wanneer ze op de afbeelding klikken. Let op: ankerlinks werken mogelijk niet in bepaalde e-mailclients, zoals Gmail en Apple Mail.

Tekstblok

Verbeter je tekstblokken door hun uiterlijk en functionaliteit aan te passen met de volgende instellingen. Met elke optie kun je nauwkeurig bepalen hoe je tekst wordt weergegeven, zodat deze perfect aansluit bij je ontwerpvoorkeuren.

Tekstwerkbalk

Wanneer je in een tekstblok klikt, verschijnt de Tekstwerkbalk boven het inhoudsgebied. Deze biedt snel toegang tot veelgebruikte opties voor tekstopmaak. Dit zijn de beschikbare functies:

1. Alinea-indeling

Stel de alineastijl in door opties te kiezen zoals Normaal voor gewone tekst of verschillende kopniveaus (Kop 1 tot en met Kop 6) om een duidelijke hiërarchie in je e-mail te creëren. Dit maakt de inhoud leesbaarder en overzichtelijker.

2. Lettertypefamilie

Het standaardlettertype is Arial, maar je kunt kiezen uit verschillende lettertypen, waaronder bekende opties zoals Georgia, Helvetica en Courier New. Er is ook een zoekfunctie om snel een specifiek lettertype te vinden.

3. Tekengrootte

Pas de tekengrootte aan van 8pt tot 72pt. De standaardgrootte is 14pt, wat voor de meeste e-mailtekst goed werkt. Gebruik de vervolgkeuzelijst om snel de gewenste tekengrootte in te stellen.

4. Tekstopmaak

Maak je tekst op met de volgende opties:

• Vet (B): Benadrukt tekst door deze vet weer te geven.
• Cursief (I): Geeft tekst een cursieve, meer gestileerde weergave.
• Onderstrepen (U): Onderstreept tekst, wat vaak voor hyperlinks wordt gebruikt.
• Doorhalen (S): Trekt een lijn door tekst, handig voor bewerkingen of verwijderde inhoud.

5. Geavanceerde tekstopmaak (menu met drie puntjes)

Als je op de drie puntjes in de werkbalk klikt, worden extra opties geopend:

• Subscript: Plaatst tekst onder de basislijn (handig voor voetnoten of chemische formules).
• Superscript: Plaatst tekst boven de basislijn (vaak gebruikt voor exponenten of rangtelwoorden).
• Opmaak verwijderen: Verwijdert alle toegepaste opmaak, zodat de tekst terugkeert naar de standaardstijl.

6. Tekst- en achtergrondkleur

• Tekstkleur: Klik op de knop Tekstkleur om een kleur uit een palet te kiezen of een hex-code in te voeren voor nauwkeurige controle over de tekstkleur.
• Achtergrondkleur: Selecteer een achtergrondkleur (markeerkleur) voor je tekst.

7. Tekstuitlijning

Lijn je tekst binnen het blok uit:

• Links uitlijnen: Lijnt tekst links uit.
• Centreren: Centreert de tekst.
• Rechts uitlijnen: Lijnt tekst rechts uit.
• Uitvullen: Verdeelt tekst gelijkmatig over de breedte van het blok.

8. Lijsten

Maak genummerde en ongenummerde lijsten:

• Lijst met opsommingstekens invoegen/verwijderen: Voegt opsommingstekens toe of verwijdert deze.
• Genummerde lijst invoegen/verwijderen: Voegt een genummerde lijst toe of verwijdert deze.

9. Regelterugloop

Schakel regelterugloop binnen het tekstblok in of uit. Als deze is ingeschakeld, gaan lange tekstregels automatisch naar de volgende regel.

10. Inspringing

Pas de inspringing van je tekst aan:
- **Inspringing vergroten**: Verplaatst de tekst verder van de marge, handig voor subpunten of citaten.
- **Inspringing verkleinen**: Vermindert de inspringing, waardoor de tekst dichter bij de linkermarge komt.
![Tekstinspringing](https://cms.maildroppa.com/assets/0146b155-9fe5-4495-be1c-19dcf1427639)

11. Hyperlink invoegen

Leer hoe je hyperlinks in je e-mailinhoud toevoegt, bewerkt en beheert.

Stappen om een link toe te voegen of te bewerken

a) De tekst markeren

Selecteer de tekst die je in een hyperlink wilt veranderen.

b) Op het linkpictogram klikken

Klik in de Tekstwerkbalk op het Linkpictogram.

c) De link bewerken in het instellingenpaneel

Het instellingenpaneel aan de rechterkant verschijnt met linkopties:

• Linkveld: Voer de URL in of selecteer een vooraf ingestelde optie.
• Tag: Voeg tags toe om abonnees te labelen of automatiseringen te activeren.

Links herstellen nadat je ze hebt verzonden

Er is niets erger dan een nieuwe campagne naar je 2.365 abonnees versturen en vervolgens ontdekken dat een van de links door een simpele typefout niet werkt. Dag Black Friday-verkopen!

Gelukkig kun je met Maildroppa gebroken links herstellen, zelfs nadat de e-mail al naar je abonnees is verzonden.

a) Campagne bekijken

Zoek de verzonden campagne in het overzicht, klik op de drie puntjes en kies Campagne bekijken.

b) Links of tags aanpassen

Scrol in de campagnedetails naar de linklijst om:

• Linkdoelen bij te werken: Onjuiste URL's herstellen.
• Tags te beheren: Tags voor automatiseringen toevoegen of verwijderen.

Opmerking: Zorg ervoor dat Kliktracking is ingeschakeld in de campagne-instellingen om de functie voor het opnieuw targeten van links te gebruiken.

De weergave van links aanpassen

In het instellingenpaneel aan de rechterkant kun je de weergave van de link aanpassen:

• Linkkleur: Selecteer een kleur of voer een hex-code in.

• Links onderstrepen: Schakel onderstrepingen in of uit voor een strakkere weergave.

12. Personalisatietags

Gebruik Personalisatietags om dynamische inhoud toe te voegen, zoals de voornaam van de ontvanger of andere aangepaste velden.

• Open de vervolgkeuzelijst Personalisatietags in de werkbalk om veelgebruikte velden zoals Voornaam, E-mail of Land te selecteren, of definieer aangepaste velden om e-mails voor elke ontvanger te personaliseren.

13. Emoji's

Maak je tekst aantrekkelijker door emoji's toe te voegen.

• Klik op het emojipictogram in de werkbalk om een gecategoriseerde lijst met emoji's te openen.
• Compatibiliteitsopmerking: Test e-mails in bepaalde clients, zoals Outlook, omdat sommige emoji's mogelijk niet correct worden weergegeven.

14. Tabel en speciale tekens

Klik aan het einde van de werkbalk op de drie puntjes om meer geavanceerde opties weer te geven.

Een tabel invoegen

Maak tabellen en pas deze aan om je e-maillay-out te verbeteren.

• Bepaal naar wens het aantal rijen en kolommen, de celafstand, de opvulling en de randdikte.

Speciale tekens invoegen

Verbeter je tekst met symbolen, tekens met accenten en andere niet-standaardtekens.

• Open de optie Speciale tekens om een groot aantal tekens te bekijken.

Aanvullende instellingen voor tekstblokken (rechterpaneel)

Het rechterpaneel biedt uitgebreide controle over de weergave en functionaliteit van je tekstblokken. Hieronder staan de beschikbare instellingen:

1. Tekstkleur

Bepaal de kleur van de tekst met de kleurkiezer of door een hex-code in te voeren.

2. Achtergrondkleur

Stel een aangepaste achtergrondkleur voor het tekstblok in. Standaard is de achtergrond transparant.

3. Linkspecifieke instellingen

Wanneer het tekstblok links bevat, verschijnen er aanvullende opties in de instellingen:

• Linkkleur: Pas de kleur van links aan met de kleurkiezer of een hex-code.

• Links onderstrepen: Schakel de onderstreping voor links in of uit.

• Links bewerken: Selecteer een link in het inhoudsgebied om de URL ervan in het instellingenpaneel te bewerken. Je kunt ook tags voor de link toewijzen of bijwerken met de vervolgkeuzelijst met het label "Tags".

4. Uitlijning

Lijn het tekstblok binnen de container uit: Links, Midden of Rechts.

5. Vaste hoogte

Stel een vaste hoogte voor het tekstblok in door deze optie in te schakelen. Je kunt ook de verticale uitlijning van de tekst bepalen: Boven, Midden of Onder.

6. Regelafstand

Bepaal de ruimte tussen tekstregels. Kies uit Krap, Normaal of Ruim.

7. Opvulling

Pas de ruimte rond het tekstblok aan. Pas overal dezelfde opvulling toe of pas elke zijde afzonderlijk aan: Boven, Onder, Links en Rechts.

8. Ankerlinks

Maak ankerlinks om lezers naar specifieke secties van je e-mail te laten springen. Houd er rekening mee dat sommige e-mailclients geen ankerlinks ondersteunen.

Knopblok

Met het Knopblok kun je een klikbare knop aan je e-mail toevoegen, met aanpasbare instellingen voor functionaliteit en stijl.

Linkinstellingen

De optie Link bepaalt welke actie wordt uitgevoerd wanneer een ontvanger op de knop klikt.

Beschikbare linktypen

• Normale sitelink (HTTP of HTTPS): Stuurt de gebruiker naar een webpagina.
• E-maillink: Opent de e-mailclient van de gebruiker om een nieuwe e-mail op te stellen.
• Bestandslink (FTP, FTPS): Linkt naar een bestand op een FTP-server.
• Skype: Start een Skype-gesprek of -chat.
• Telefoon (tel): Start een telefoongesprek op compatibele apparaten.
• SMS: Opent de berichtenapp met een vooraf ingevuld ontvangersnummer.
• Viber: Opent de Viber-app voor berichten of gesprekken.
• Ander protocoltype: Geef een aangepast protocol op dat hierboven niet wordt vermeld.

Opties voor sociaal delen

Je kunt de knop ook instellen voor delen via sociale media of e-mail:

• Facebook
• X (voorheen Twitter)
• LinkedIn
• Pinterest
• Delen via e-mail

URL-veld

Naast het linktype kun je in het URL-veld (dat meestal begint met https://) het specifieke adres invoeren dat bij het linktype hoort.

Knoplabel

Pas het label van de knop aan zodat het je call-to-action weerspiegelt. Het standaardlabel is "Knop", maar je kunt dit wijzigen in opties zoals "Meer informatie", "Nu abonneren" of "Nu winkelen".

Tekststijl

Met de instellingen voor Tekststijl kun je de weergave van de knoptekst aanpassen.

Lettertype selecteren

Kies uit verschillende standaardlettertypen, waaronder:

• Arial
• Comic Sans MS
• Courier New
• Georgia
• Helvetica
• Lucida Sans Unicode
• Tahoma
• Times New Roman
• Trebuchet MS
• Verdana

Voor niet-standaardlettertypen zijn er aanvullende opties:

• Arvo
• Lato
• Lora
• Merriweather
• Merriweather Sans
• Noticia Text
• Open Sans
• Playfair Display
• Roboto
• Source Sans Pro

Bovenaan de lijst met lettertypen helpt een zoekvak je snel een specifiek lettertype te vinden.

Tekengrootte en opmaak

• Tekengrootte: Kies een grootte van 8 tot 72, afhankelijk van hoe opvallend je de knoptekst wilt maken.
• Tekstopmaak: Pas de stijl Vet of Cursief toe met de pictogrammen "B" of "I" om de knoptekst te benadrukken.

Kleurinstellingen

Pas de weergave van de knop aan met de kleurinstellingen.

1. Knopkleur: Wijzig de achtergrondkleur van de knop. De standaardkleur is groen (#31cb4b). Gebruik het hex-codeveld of de kleurkiezer om een nieuwe kleur te selecteren.

2. Tekstkleur: Bepaal de tekstkleur van de knop. De standaardkleur is wit (#ffffff). Kies voor een goede leesbaarheid een kleur die voldoende contrasteert met de knopachtergrond.

3. Achtergrondkleur: Pas de achtergrond van de container van de knop aan. Deze is standaard transparant, maar je kunt de kleur wijzigen om de knop beter te laten opvallen tegen de e-mailachtergrond.

Randradius

Bepaal hoe rond de hoeken van de knop zijn met de instelling Randradius.

• Standaardwaarde: 30 (matig afgeronde hoeken).
• Bereik: 0 (vierkante hoeken) tot 100 (pilvormige knop).

Opmerking: Schakel de optie "Ondersteuning voor Outlook" in op het tabblad Vormgeving om ervoor te zorgen dat afgeronde hoeken correct worden weergegeven in Microsoft Outlook.

Uitlijning

Plaats de knop binnen het inhoudsgebied met de instelling Uitlijning.

• Opties: Links, Midden, Rechts.
• Veelgebruikt: Middenuitlijning voor nadruk, links- of rechtsuitlijning voor consistentie met het ontwerp.

Vaste hoogte

Schakel de optie Vaste hoogte in om consistente knopafmetingen te behouden.

1. Standaard: Gedeactiveerd.
2. Minimale hoogte: 44 pixels.
3. Verticale uitlijning van inhoud: Wanneer een vaste hoogte is ingeschakeld, kun je de inhoud van de knop Boven, Midden of Onder uitlijnen voor een nauwkeurige positionering.

Knop met pictogram

Met de optie Knop met pictogram kun je naast de knoptekst een pictogram plaatsen. Dit maakt de knop visueel aantrekkelijker en versterkt de call-to-action. Deze functie is standaard gedeactiveerd.

• Ondersteunde indelingen: Upload pictogrammen in PNG, JPG of GIF, met een maximale bestandsgrootte van 2 MB.
• Pictogram positioneren: Kies of je het pictogram Links of Rechts van de knoptekst wilt weergeven.

Opmerking: Pictogrammen worden niet weergegeven in bepaalde versies van Microsoft Outlook voor Windows, waaronder:

• Outlook 2002, 2007, 2010, 2013, 2016 en 2019. Deze beperking wordt veroorzaakt door de manier waarop deze e-mailclients HTML-e-mails weergeven. Houd hier rekening mee als een groot deel van je doelgroep deze clients gebruikt.

Randinstellingen

Pas de randen van de knop aan voor extra stijl en nadruk.

• Randbreedte: Stel de breedte voor elke zijde (links, rechts, boven en onder) afzonderlijk in, tot maximaal 40 pixels.
• Randstijl: Kies uit Doorgetrokken, Gestreept of Gestippeld.
• Randkleur: Gebruik de kleurkiezer of voer een hex-code in om de randkleur af te stemmen op je merk of ontwerp.

Interne opvulling

Pas de ruimte binnen de knop aan, tussen de inhoud (tekst en pictogram) en de rand van de knop.

• Aanpassingsopties: Bepaal de opvulling voor de zijden Links, Rechts, Boven en Onder, tot maximaal 99 pixels.
• Effect: Interne opvulling beïnvloedt de totale grootte van de knop en de positie van de inhoud binnen de knop.

Externe opvulling

Bepaal de ruimte buiten de knop om de positie ervan ten opzichte van andere elementen in de e-maillay-out aan te passen.

• Aanpassingsopties: Stel de externe opvulling in voor de zijden Links, Rechts, Boven en Onder, tot maximaal 40 pixels.
• Gebruik: Zorgt ervoor dat de knop niet te dicht bij andere inhoud of de randen van de e-mail staat.

Ankerlink toevoegen

Gebruik ankerlinks om lezers naar specifieke secties binnen dezelfde e-mail te leiden. Dit biedt snelle navigatie in langere nieuwsbrieven.

• Ankernaam: Definieer een doel binnen de e-mail en koppel de knop aan dit anker. Wanneer erop wordt geklikt, scrollt de e-mail naar de opgegeven sectie, wat de navigatie voor de gebruiker verbetert.

Belangrijk: Ankerlinks worden niet ondersteund in bepaalde e-mailclients, waaronder:

• Gmail-app voor iOS
• Apple Mail voor iOS
• Outlook-app voor Android
• Outlook-app voor macOS
• AMP-e-mails

Test je e-mail grondig om de werking in verschillende e-mailclients te controleren en te bepalen of deze functie geschikt is voor je doelgroep.

Blok voor tussenruimte

Met het blok voor tussenruimte kun je aanpasbare ruimte aan je e-mailinhoud toevoegen. Je hebt controle over de grootte, uitlijning, weergave en interne ruimte. Hieronder vind je meer informatie over de twee typen tussenruimte: Normale tussenruimte en Dynamische tussenruimte.

1. Normale tussenruimte

De Normale tussenruimte is een lijnelement dat secties in je e-mail visueel van elkaar scheidt.

Belangrijkste instellingen

1. Lijndikte en -stijl Pas de dikte, stijl en kleur van de lijn aan:

   • Dikte: Pas deze aan met de knoppen + en - (beginnend bij 1).
   • Stijl: Kies tussen doorgetrokken, gestreept of gestippeld.
   • Kleur: Stel een aangepaste kleur in met een hex-code of kleurkiezer (standaard: #cccccc).

2. Breedte Bepaal hoe ver de lijn van de tussenruimte over je inhoud loopt. Pas de breedte in pixels aan met de knoppen + en -.

3. Uitlijning Lijn de lijn links, in het midden of rechts uit, passend bij je lay-out.

4. Opvulling Bepaal de interne ruimte rond de tussenruimte:

   • Standaard: De opvulling is aan alle kanten ingesteld op 20.
   • Gebruik de schakelaar Meer om de opvulling per zijde in te stellen:
     • Boven
     • Rechts
     • Onder
     • Links

Gebruik

De Normale tussenruimte is ideaal voor duidelijke, visuele scheidingen tussen secties in je e-mail en zorgt voor een overzichtelijke en professionele lay-out.

2. Dynamische tussenruimte

De Dynamische tussenruimte is een onzichtbaar blok met lege ruimte dat speciaal is ontworpen om ademruimte in je e-maillay-out te creëren.

Belangrijkste functies

1. Hoogte aanpassen Pas de hoogte rechtstreeks in het inhoudsgebied aan of via het bedieningspaneel met de knoppen + en -. De hoogte bepaalt hoeveel verticale ruimte tussen secties wordt toegevoegd.

2. Achtergrondkleur De tussenruimte heeft standaard een transparante achtergrond, maar je kunt een aangepaste achtergrondkleur toepassen met een hex-code of de kleurkiezer. Zo kan de tussenruimte indien nodig als zichtbaar blok fungeren.

3. Responsief gedrag Met de optie Responsieve tussenruimte past de tussenruimte zich dynamisch aan verschillende schermformaten aan voor een optimale lay-out op alle apparaten. Deze functie is standaard ingeschakeld.

Belangrijkste verschillen tussen normale en dynamische tussenruimtes

• Dynamische tussenruimte: Voegt lege ruimte toe zonder zichtbare lijn.
• Normale tussenruimte: Bevat specifieke instellingen voor de lijn, zoals:
  • Lijnbreedte
  • Uitlijning
  • Lijnstijlen
  • Opvulling

De Dynamische tussenruimte ondersteunt deze functies niet en is uitsluitend bedoeld voor scheiding zonder visuele elementen.

3. Ankerlink toevoegen

Ankerlinks kunnen op beide typen tussenruimte worden toegepast, zodat gebruikers vanuit een ander deel van de e-mail rechtstreeks naar de locatie van de tussenruimte kunnen navigeren. Dit is vooral handig voor navigatie binnen langere nieuwsbrieven.

Opmerking: Ankerlinks worden niet ondersteund door bepaalde e-mailclients, waaronder:

• Microsoft Outlook
• Gmail (op mobiel)

Videoblok

Met het Videoblok kun je video's in je e-mail plaatsen en hun weergave en gedrag aanpassen. Het ondersteunt videolinks van platforms zoals YouTube en Vimeo, zodat je flexibel kunt bepalen hoe de video wordt weergegeven.

1. Link naar video

Voeg de video-URL toe aan het veld Link naar video. Ondersteunde platforms zijn YouTube, Vimeo en andere services die insluiten ondersteunen.

• Automatisch gedrag: Wanneer een geldige URL wordt toegevoegd:

  • Wordt automatisch een voorbeeldafbeelding gegenereerd met de videominiatuur van het platform.
  • Wordt het veld Alternatieve tekst automatisch ingevuld met de videotitel of -beschrijving (indien beschikbaar).

• Bewerkbare velden: Je kunt de gegenereerde voorbeeldafbeelding en tekst indien nodig handmatig bewerken of vervangen.

2. Alternatieve tekst

Het veld Alternatieve tekst verbetert de toegankelijkheid door een beschrijving van de video weer te geven als deze niet kan worden geladen.

• Wordt automatisch ingevuld wanneer een ondersteunde video-URL wordt toegevoegd.
• Kan worden aangepast aan je inhoud.

3. Aangepaste miniatuur

Upload een aangepaste afbeelding ter vervanging van de standaardvideovoorbeeldweergave.

• Inschakelen: Schakel de optie Aangepaste miniatuur in.
• Ondersteunde indelingen: PNG, JPG of GIF.
• Wanneer gebruiken: Vervang de gegenereerde miniatuur wanneer deze niet bij het ontwerp van je e-mail past.

4. Afspeelknop

Pas de overlay van de Afspeelknop voor de videominiatuur aan.

• Beschikbare opties:
  • Kies uit afspeelknopstijlen van YouTube, Vimeo of andere stijlen.
  • Selecteer "Geen" om de afspeelknop volledig te verbergen.

5. Grootte

Pas de afmetingen van de video aan zodat deze bij je e-mailontwerp past.

• Breedte en hoogte: Gebruik de knoppen + en - of voer handmatig waarden in om de grootte te bepalen.
• Responsief ontwerp: Zorg ervoor dat je video op verschillende apparaten naadloos wordt weergegeven.

6. Aan breedte aanpassen

Schakel de optie Aan breedte aanpassen in om de video automatisch aan de breedte van de container te laten passen. Zo blijft de video responsief op verschillende apparaten.

7. Responsieve afbeelding

Met de schakelaar Responsieve afbeelding past de videominiatuur zich aan de schermbreedte aan op mobiele apparaten.

• Opmerking: Responsiviteit is afhankelijk van ondersteuning door het apparaat en de e-mailclient.

8. Uitlijning

Gebruik de instelling Uitlijning om de horizontale positie van de video in het blok te bepalen:

• Links: Lijnt de video links uit.
• Midden: Centreert de video.
• Rechts: Lijnt de video rechts uit.

9. Mobiel-specifieke opties

Pas het gedrag en de weergave van de video op mobiele apparaten aan:

1. Element op mobiel verbergen Verberg het videoblok indien nodig op mobiele apparaten.

   • Opmerking: Deze functie is afhankelijk van ondersteuning voor mediaquery's en werkt mogelijk niet in alle e-mailclients.

2. Mobiele opvulling Pas de opvulling rond de video aan voor mobiele weergaven.

   • Gebruik de schakelaar Meer om afzonderlijke opvullingswaarden in te stellen voor:
     • Boven
     • Rechts
     • Onder
     • Links

10. Opnemen in AMPHTML of HTML

Kies in welke specifieke e-mailversies het videoblok moet worden weergegeven:

• Zowel AMPHTML als HTML
• Alleen AMPHTML
• Alleen HTML

Met deze optie zorg je ervoor dat de video op de juiste manier wordt opgenomen, afhankelijk van de e-mailversie die wordt afgeleverd.

HTML-blok

Met het HTML-blok kun je aangepaste HTML- en CSS-code in je e-mail invoegen. Dit biedt flexibiliteit voor geavanceerde aanpassingen, met behoud van compatibiliteit met e-mailclients. Of je nu één HTML-element toevoegt of een volledige e-mail ontwerpt, dit blok is je hulpmiddel voor ontwerpen op maat.

1. Interface van de code-editor

Wanneer je het HTML-blok selecteert, verschijnt er een zwart code-editorscherm in het inhoudsvenster. In deze editor kun je aangepaste code schrijven, plakken of aanpassen. De editor bevat twee secties:

• HTML-sectie: Voeg de HTML-structuur voor je e-mail toe of bewerk deze.
• CSS-sectie: Open een afzonderlijke CSS-editor om je inhoud op te maken.

2. Tekengrootte aanpassen

Pas de tekengrootte van de code in de editor aan voor betere leesbaarheid:

• Gebruik de knop A+ om de tekengrootte te vergroten.
• Gebruik de knop A- om de tekengrootte te verkleinen.

3. Grootte van het editorvenster aanpassen

Pas het formaat van het code-editorvenster aan je werkwijze aan:

• Aanpassen:
  • Beweeg de muis over de drie puntjes bovenaan in het midden van het editorvenster.
  • Sleep de schuifregelaar omhoog of omlaag om het editorvenster groter of kleiner te maken.

Deze functie is vooral handig voor het beheren van grotere of meer gedetailleerde codeblokken.

4. CSS-editor

Met de CSS-editor kun je stijlen voor je HTML-inhoud beheren. Je opent deze via een knop rechtsboven in de code-editor.

Belangrijke aandachtspunten:

• Beperkte ondersteuning: Veel e-mailclients ondersteunen geen geavanceerde CSS-functies zoals Flexbox, Grid of mediaquery's.
• Houd het eenvoudig: Gebruik eenvoudige inline CSS voor maximale compatibiliteit.
• Vooraf geconfigureerde stijlen: Verwijder vooraf geconfigureerde stijlen niet, omdat ze zorgen voor een correcte weergave in de belangrijkste e-mailclients.

5. Compatibiliteit met e-mailclients

HTML voor e-mail vereist speciale aandacht vanwege verouderde weergave-engines in veel e-mailclients.

Belangrijkste richtlijnen:

• Gebruik lay-outs op basis van tabellen in plaats van lay-outs op basis van <div>-elementen voor betere ondersteuning.
• Vermijd geavanceerde CSS-functies zoals animaties, Flexbox of Grid.
• Houd rekening met inconsistent gedrag van mediaquery's en kleine CSS-eigenschappen.
• Testen: Test e-mails altijd in meerdere clients (bijvoorbeeld Gmail, Outlook en Apple Mail) om een correcte weergave te garanderen.

6. Opvulling

De instelling Opvulling bepaalt de ruimte rond je HTML-inhoud:

• Standaardopvulling: Standaard ingesteld op 0.
• Aangepaste opvulling: Schakel de optie Meer in om de opvulling per zijde aan te passen:
  • Boven
  • Rechts
  • Onder
  • Links

Deze functie is ideaal om HTML-inhoud binnen de e-maillay-out uit te lijnen.

7. Ankerlink toevoegen

Met de functie Ankerlink toevoegen kun je elders in de e-mail een klikbare link maken die naar het HTML-blok navigeert.

Gebruik:

• Schakel de optie in en voer een ankernaam in het veld in.

Beperkingen:

• Ankerlinks worden niet ondersteund door sommige e-mailclients, zoals:
  • Gmail-app voor iOS
  • Apple Mail voor iOS
  • Outlook-app (Android en macOS)
  • AMP-e-mails

8. Aangepaste HTML schrijven

De HTML-editor is bedoeld voor het schrijven of plakken van de aangepaste HTML-structuur van je e-mail.

Aanbevolen werkwijzen:

• Gebruik eenvoudige, breed ondersteunde HTML.
• Vermijd complexe lay-outs of functies zoals <div>-elementen.
• Houd vast aan ontwerpen op basis van tabellen voor betere compatibiliteit.

9. Tips voor succes

1. Begin klein: Gebruik het HTML-blok voor specifieke secties als je nieuw bent in e-mailontwikkeling.
2. Valideer de code: Zorg ervoor dat je HTML voldoet aan de vereisten van e-mailclients.
3. Test grondig: Gebruik tools om een voorbeeld van je e-mail te bekijken en deze in meerdere clients en op verschillende apparaten te testen.