Elementen

Aan de linkerzijde van de editor heb je verschillende onderdelen, waaronder Elementen. Hier vind je onderdelen die je nodig hebt om een bericht op te stellen, zoals tekst en afbeeldingen. Een element plaats je altijd in een rij.

educatieve-opbouw-bericht-schematisch.png

Klik je op Elementen, dan zie je het volgende:

Elementen.png

Elementen

Deze elementen zijn beschikbaar:

Begrippen

Er zijn een aantal begrippen die bij de verschillende elementen terug komen. Het verschilt per toepassing wat het effect is:

Padding

Elementen worden geplaatst in rijen en kolommen. Afzonderlijk van een element kan hier ook padding toegepast worden. Maar in dit artikel hebben we het over padding als ruimte rondom elementen.

Het is mogelijk om padding per kant toe te passen, dus: boven, onder, links en rechts. Stel je hebt een header toegevoegd met een padding: 0, dan ziet dit er als volgt uit:

Header_padding_0.png

Je ziet dat de tekst tegen de linkerkant aanstaat. Boven en onder is een kleine ruimte i.v.m. de hoogte van de tekst. Pas je de padding aan naar bijvoorbeeld: 20, dan ziet dit er als volgt uit:

Header_padding_20.png

Je ziet dat er nu meer ruimte rondom het element Header is ontstaan.

Achtergrondkleur

Een achtergrondkleur is toe te passen op een rij, kolom en sectie, maar ook op een element. Stel je hebt een video toegevoegd en rondom die video padding, dan wordt de achtergrondkleur zichtbaar. Ook wordt de kleur getoond wanneer het element niet is ingeladen bij de ontvanger.

Wanneer je kijkt naar onderstaand voorbeeld dan is:

  1. De achtergrondkleur van de sectie (donkerblauw)
  2. De achtergrondkleur van de rij (lichtblauw)
  3. De achtergrondkleur van het element (geel)

Achtergrondkleur_uitleg.png

Radius hoeken

Met een radius geef je aan of de hoek afgerond wordt of niet. Een radius hoek van 0 is dus vierkant. Maar hoe hoger het getal hoe ronder de hoek. Radius hoeken pas je toe bij de elementen: Afbeelding, Button, Video en Timer. Een voorbeeld:

Voorbeeld afbeelding zonder radius hoeken
Afbeelding_zonderradius.png
Voorbeeld afbeelding met radius hoeken 30
Afbeelding_radius.png

Uitlijning

De mogelijkheden om een element uit te lijnen zijn: links, gecentreerd en rechts. Een voorbeeld:

Voorbeeld_Uitlijning.png

De header en tekst zijn links uitgelijnd, de button en afbeelding zijn gecentreerd uitgelijnd in de kolom. Het gaat dus om de positie van elementen in een rij of een kolom. Zet je de uitlijning van de button op links, dan ziet dit er zo uit:
Uitlijning_Button_links.png

Randstijl

Het is mogelijk om een rand rondom een element te plaatsen. Een voorbeeld wanneer je een rand rondom element Afbeelding plaatst:
Afbeelding_vaste_rand.png

Er zijn verschillende opties voor een randstijl, namelijk: geen, vast, gestippeld en gestreept.

Automatische breedte

Elementen staan standaard op een automatische breedte ingesteld. 

Schuif_Automatische_breedtee.png

Wanneer je het schuifje naar links verplaatst dan kan je de breedte naar wens instellen op basis van percentage of pixels. Standaard is de instelling 100%. Dit percentage geldt voor het element op basis van de breedte van de rij of kolom waarin het element is geplaatst. 

Een voorbeeld: de button is in een twee kolomstructuur geplaatst en de automatische breedte staat aan. De breedte van de button past zich aan wanneer je een grotere tekst plaatst.

Button_automatischebreedte.png

Wanneer ik de automatische breedte uitzet, dan is standaard de breedte van de button 100%. Zoals je ziet vult hij de button uit op basis van de kolombreedte (inclusief de padding).

Automatischebreedte_button_100.png

De breedte is aanpasbaar in percentage en pixels. Het is dus mogelijk deze te verkleinen. Een voorbeeld wanneer het percentage 80% is:

Button_automatischebreedte_80.png

Klik hier om terug te gaan naar de index van Elementen.

Header

Wanneer je een header toevoegt aan het canvas dan zie je de volgende opties aan de linkerkant verschijnen:

Header.png

Header stijl

  • Type header: kies welke grootte header je wilt toepassen.
  • Lettertype: standaard wordt het lettertype overgenomen die je bij de tab Algemeen hebt aangegeven. Het is mogelijk om deze voor de header te wijzigen. Er is keuze tussen de standaard web safe fonts.
  • Lettertype grootte: hetgeen wat hier getoond wordt is afhankelijk van het type header die hebt gekozen. De grootte is aan te passen naar wens.
  • Regelhoogte: hoeveel ruimte wilt je tussen de tekstregels hebben? Voor een goede leesbaarheid is ruimte nodig. 
  • Tekstkleur: de tekstkleur wordt ook overgenomen van de tab Algemeen. Maar als je een andere kleur wilt voor je header dan je overige tekst, dan is dat hier naar wens aan te passen.
  • Uitlijning: de tekstuitlijning van je header bepaal je hier.
  • Text transform: er zijn verschillende opties voor je header tekst. Wil je dat deze met een hoofdletter start, de header volledig in kapitalen is, in kleine letters of geen toepassing. 
  • Padding: pas een ruimte toe boven, onder, links of rechts rondom je tekst. Dit kan ook afzonderlijk ingesteld worden door op het icoon rechts van de padding te klikken. Standaard is een padding van 10 ingesteld voor alle kanten.

Geavanceerd

  • Ervaring met code? Het is mogelijk om zelf CSS classes toe te voegen.

Bij het selecteren van het element Header zie je meer opties voor tekstopmaak aan de bovenkant van je canvas. Klik hier om daar meer over te lezen.

Tekst

Met dit element voeg je tekst toe aan je bericht. Je hebt verschillende opties om je tekst te stylen. Deze zijn zichtbaar aan de linkerkant en aan de bovenkant van je canvas. Aan de linkerkant zie je de volgende opties:

Tekst.png

Tekst stijl

  • Lettertype: standaard wordt het lettertype overgenomen die je bij de tab Algemeen hebt aangegeven. Het is mogelijk om deze voor de tekst te wijzigen. Er is keuze tussen de standaard web safe fonts.
  • Lettertype grootte: hetgeen wat hier getoond wordt is afhankelijk van wat je bij de tab Algemeen hebt aangegeven. De grootte is aan te passen naar wens.
  • Regelhoogte: hoeveel ruimte wilt je tussen de tekstregels hebben? Voor een goede leesbaarheid is ruimte nodig. 
  • Tekstkleur: de tekstkleur wordt ook overgenomen van de tab Algemeen. Maar als je een andere kleur wilt voor je header dan je overige tekst, dan is dat hier naar wens aan te passen.
  • Uitlijning: de tekstuitlijning van je header bepaal je hier.
  • Text transform: er zijn verschillende opties voor je tekst. Wil je dat deze met een hoofdletter start, de tekst volledig in kapitalen is, in kleine letters of geen toepassing. 
  • Padding: pas een ruimte toe boven, onder, links of rechts rondom je tekst. Dit kan ook afzonderlijk ingesteld wordt door op het icoon rechts van de padding te klikken. Standaard is een padding van 10 ingesteld voor alle kanten.

Geavanceerd

  • Ervaring met code? Het is mogelijk om zelf CSS classes toe te voegen.

Naast de opties om de tekst te stylen aan de linkerkant zijn er opties aan de bovenkant van het canvas. Denk aan het vetgedrukt maken van je tekst. Je leest hier meer over in tekstopmaak.

Tekstopmaak

Wanneer je op een header element of tekst element klikt, verschijnen er boven het canvas meer opties om o.a. je tekst te stylen. 

Tekstopmaak.png

Optie Functie
Tekstopmaak_03.jpg Undo & Redo
Maak je wijziging ongedaan of voer je wijziging opnieuw uit.
Tekstopmaak_04.jpg

Link & Unlink
Plaats een link in je tekst of unlink wanneer je geen link meer in je tekst wilt hebben. Klik je op de link optie dan verschijnen er verschillende type links die je kunt toevoegen. Lees hier meer over bij type link.

Tekstopmaak_05.jpg Personalisation field
Met deze optie is het mogelijk om personalisatie toe te voegen in je bericht. Denk aan een aanhef of het aanspreken op voornaam. Je kunt personaliseren op al de databasevelden die je beschikbaar hebt in je account. 
Tekstopmaak_06.jpg Bold, Italic, Underline, Strikethrough
Maak je tekst vet gedrukt, schuin gedrukt, onderstreept of doorstreept .
Tekstopmaak_08.jpg Text color
Wil je alleen een specifiek deel of woord in een andere tekstkleur, dan gebruik je deze optie. 
Tekstopmaak_09.jpg Background color
Met deze optie kan je een deel van de tekst markeren door een achtergrond kleur te geven. 
Tekstopmaak_10.jpg Numbered list & Bullet list
Maak een lijst met cijfers of met bullet points.
Tekstopmaak_11.jpg Table
Een tabel toevoegen doe je met dit icoon.
Tekstopmaak_12.jpg Special character
Zoek je een speciaal karakter? Zoals een pond, dollar of euro. Je vindt hier verschillende opties.
Tekstopmaak_15.jpg Accessibility checker
De accessibility checker, checkt je bericht op o.a. contrast van tekst, zodat je bericht duidelijk leesbaar is ook voor visueel beperkte mensen. Een technische omschrijving lees je hier.
Tekstopmaak_17.jpg Left to right & Right to left
Deze optie gebruik je wanneer een taal toepast die je schrijft van rechts naar links, in plaats van links naar rechts. 
Tekstopmaak_19.jpg Align left, center, right, justify
Deze opties komen je vast bekend voor van andere tekstbewerkingsprogramma's. Een tekst kun je links uitlijnen, in het midden, rechts of uit laten vullen.
Tekstopmaak_21.jpg Decrease indent & Increase indent
Met deze optie kan je een tekst laten inspringen en weer terug.

Type link

Selecteer de tekst die je wilt linken en klik op het volgende icoon bovenin:
Link.png

Je ziet het volgende pop-up scherm verschijnen:
Link_invoegen_bewerken.png

In dit scherm zie je de tabbladen Algemeen, Webanalytics en Wijzig profiel

Via het tabblad Algemeen kun je:

  • Een keuze maken uit het type link dat je wilt invoegen
  • Afhankelijk van het type link: de url van de link en een naam voor de link invoegen.
  • Afhankelijk van het type link: wijzigingen in het profiel aanbrengen

Via het tabblad Webanalytics kun je:

Via het tabblad Wijzig profiel kun je:

  • Op basis van een klik een profiel wijzigen of een tag en score toevoegen/verwijderen bij een contact. Denk aan een interesse wegschrijven op basis van een klik. 

Wil je meer weten over tagging en scoring in je bericht? Lees dan het artikel: Tagging en scoring in je bericht of webpagina. 

 

Er zijn verschillende type links die je kunt selecteren. Externe link met tracking is de meest gebruikte variant. Onder de afbeelding vind je een uitleg per type link.

Type_link.png

Link naar een landingspagina in Spotler
De naam zegt het al. Deze link gebruik je als je wilt linken naar een landingspagina binnen Spotler.

Link naar een anker
Deze link gebruik je als je wilt verwijzen naar een plek in je bericht of webpagina. De lezer ziet dan het beeldscherm verspringen naar de plek van het anker. Pas dit toe als je naar een specifieke alinea wilt verwijzen of naar een titel als je een inhoudsopgave gebruikt.

Link naar een e-mailadres
Deze link gebruik je als je een e-mailprogramma wilt openen. Het verschilt per e-mailprogramma of dit automatisch gebeurt.

Link naar een document
Wanneer je wilt verwijzen naar een document in de module Documenten van Spotler, gebruik je deze link.

Link (zonder tracking) naar een externe pagina
Dit is een link naar een webpagina, waar geen meetresultaten van worden bijgehouden. Je gebruikt deze link als je naar een URL verwijst in je tekst, bijvoorbeeld: https://www.spotler.com.

Externe link met tracking
Wanneer je een link maakt in een bericht en deze optie kiest, dan wordt je link meetbaar en zie je de resultaten terug in de rapportage van je mailing. 

Speciale link
In je bericht wil je altijd een afmeldlink en een online lezen-link. Door middel van speciale link kun je deze type links toevoegen aan je bericht. Naast deze speciale links kan je kiezen voor link naar de printversie en afmelden via e-mail. Als de lezer klikt op de link naar een printversie, dan opent er een browser met daarin een PDF-versie van het bericht.

Omar_bord_serieus.png Maak uitgeschreven URL's niet trackable
Als je een uitgeschreven URL – zoals www.spotler.com-  meetbaar zou maken, dan wordt er stukje code toegevoegd aan de URL om deze trackable te maken. Je verwijst dus niet daadwerkelijk naar https://www.spotler.com en dat wordt gezien als phishing. Maak je gebruik van uitgeschreven URL’s, zorg dan altijd voor een link zonder tracking.

Conversielink
Als je kiest voor een externe link met tracking, link naar een webpagina in Spotler of een link naar een document, dan zie je de checkbox Conversielink verschijnen.

De checkbox Conversielink is standaard aangevinkt en zorgt ervoor dat de link als conversie wordt meegeteld in de rapportage. Een conversielink zorgt voor verkeer naar je website. Maar wat is dan een link die geen conversielink is? Een voorbeeld van een link die geen conversielink is, is een afmeldlink. Dit is wel een link met tracking (meetbaar), omdat je wilt zien of iemand op “afmelden” heeft geklikt, maar zorgt niet voor verkeer naar je website.

soumaya_bordzijkant_lightbubl.png De url van de link en een naam voor de link
Het is handig om een unieke naam aan je link mee te geven, zodat je hem makkelijk herkent in de rapportage. Tip: noem in de linknaam of het een tekstlink, afbeeldingslink of titellink betreft.

Web Analytics
Via het tabblad Web analytics zie je welke Google Analytics waarden je hebt opgegeven. Als het goed is, hoef je alleen nog het specifieke campagnewoord in te vullen om de link te specificeren.

De standaard Google Analytics waarden zoals bron, naam en inhoud kun je voor al je links in één keer invullen. Ga daarvoor naar het Bewerkingsmenu in de header en klik op het volgende icoon:

header_iconen_analytics.jpg

Afbeelding

Wanneer je een afbeelding toevoegt aan het canvas, zie je aan de linkerkant de volgende opties:
Afbeelding.png

Afbeelding inhoud

  • Afbeelding: selecteer een afbeelding uit de module Afbeeldingen, upload een afbeelding, gebruik een externe afbeelding of kies een afbeelding uit de voorbeeld bibliotheek. Lees hier meer over in het artikel: Hoe plaats ik een afbeelding in mijn bericht of webpagina.
  • Alt tekst: voeg een alt-tekst toe aan je afbeelding. Wanneer een afbeelding niet standaard wordt ingeladen dan kan de lezer alsnog de boodschap van je afbeelding zien en ook screenreaders kunnen alt-teksten lezen.
  • Titel (tooltip): dit is de tekst die getoond wordt als je met je muis over de afbeelding heen beweegt. 
  • URL: voeg hier een link toe naar je website, een landingspagina of document. Er zijn verschillende type links, lees hier meer over onder het kopje: type links.
  • Opent in...: selecteer of de url moet openen in een nieuw venster of tab, in hetzelfde venster, bovenste venster of bovenste frame.

Afbeelding stijl

  • Achtergrondkleur: wanneer je afbeelding niet ingeladen wordt zie je een achtergrondkleur. Deze is standaard wit, maar je kan elke willekeurige kleur kiezen. 
  • Padding: ruimte rondom je afbeelding. Het is mogelijk om dit boven, onder, links en rechts toe te passen. Standaard is een padding van 10 ingesteld voor alle kanten.
  • Radius hoeken: wil je afbeeldingen ronde hoeken geven? Pas de radius van de hoeken aan. Hoe hoger het getal hoe ronder de hoek. Het is per hoek van de afbeelding in te stellen.

    Voorbeeld afbeelding zonder radius hoeken
    Afbeelding_zonderradius.png
    Voorbeeld afbeelding met radius hoeken 30
    Afbeelding_radius.png
  • Randstijl: geef je afbeelding een omlijning. Je hebt de keuze uit geen, vast, gestippeld en gestreept.
  • Uitlijning: standaard is de uitlijning van een afbeelding gecentreerd, maar deze is ook aan te passen naar uitlijning links en rechts.
  • Automatische breedte: standaard staat de automatische breedte aan. Het is mogelijk deze aan te passen naar een ander percentage of aantal pixels. Schuif je het schuifje naar links, dan wordt de afbeelding 100% uitgevuld naar de breedte van de rij waar de afbeelding is geplaatst. Het percentage kun je aanpassen. 

Geavanceerd

  • Ervaring met code? Het is mogelijk om zelf CSS classes toe te voegen.

Button

Met een button in je bericht trek je de aandacht van de lezer en wil je stimuleren dat de lezer actie onderneemt. Denk aan "meld je aan", "ontdek meer" of "ontvang een offerte". Voeg je een button toe aan je canvas dan zie je links de volgende opties: 

Button.png

Button inhoud

  • URL: voeg hier een link toe naar je website, een landingspagina of document. Er zijn verschillende type links, lees hier meer over onder het kopje: type links.
  • Opent in...: selecteer of de url moet openen in een nieuw venster of tab, in hetzelfde venster, bovenste venster of bovenste frame.

Button stijl

  • Lettertype: standaard wordt het lettertype overgenomen die je bij de tab Algemeen hebt aangegeven. Het is mogelijk om deze voor de button te wijzigen. Er is keuze tussen de standaard web safe fonts.
  • Lettertype grootte: standaard wordt een lettertype grootte van 14 pixels gehanteerd. Maar je kunt dit wijzigen naar wens.
  • Tekstkleur: wanneer je de huisstijl in de instellingen hebt ingesteld, wordt de secundaire tekstkleur gebruikt.  Maar als je een andere kleur wilt voor je button tekst dan je overige tekst, dan is dat hier naar wens aan te passen.
  • Button kleur: pas hier de gewenste buttonkleur toe. Voeg een kleurcode toe of gebruik een colorpicker.
  • Button uitlijning: standaard is de uitlijning van een button gecentreerd, maar deze is ook aan te passen naar uitlijning links en rechts.
  • Automatische breedte: standaard staat de automatische breedte aan. Afhankelijk van de hoeveelheid tekst past hij een breedte toe van de button. Het is mogelijk deze aan te passen naar een ander percentage of aantal pixels. Schuif je het schuifje naar links, dan wordt de button 100% uitgevuld naar de breedte van je template. Het percentage kun je aanpassen. 
  • Radius hoeken: wil je button ronde hoeken geven? Pas de radius van de hoeken aan. Hoe hoger het getal hoe ronder de hoek. Het is per hoek van de afbeelding in te stellen.

    Voorbeeld button zonder radius hoeken
    Button_zonderradius.png

    Voorbeeld button met radius hoeken 20
    Button_metrradiuspng.png
  • Randstijl: geef je button een omlijning. Je hebt de keuze uit geen, vast, gestippeld en gestreept.
  • Button padding: ruimte rondom de tekst in je button. Het is mogelijk om dit boven, onder, links en rechts toe te passen. Standaard is een padding van 10 ingesteld voor alle kanten.
  • Padding: ruimte rondom je button. Het is mogelijk om dit boven, onder, links en rechts toe te passen. Standaard is een padding van 10 ingesteld voor alle kanten.

Geavanceerd

  • Ervaring met code? Het is mogelijk om zelf CSS classes toe te voegen.

Social

Ben je actief op social media Voeg je social media kanalen dan toe aan je bericht door middel van het element Social. Je ziet de volgende opties aan de linkerzijde:

Social.png

Social inhoud

  • Icoon stijl: Er zijn verschillende stijlen waar je uit kunt kiezen. Selecteer degene die het beste bij jouw huisstijl past. Je hebt optie in kleur of zwart/wit en cirkel, vierkant, afgerond vierkant.
  • Klik op het social kanaal om toe te voegen: klik op het kanaal wat je wilt toevoegen aan je bericht.
  • Link: voeg de links toe van jouw kanalen. 

Social stijl

  • Icoon grootte: pas de grootte van de social media iconen aan naar wens.
  • Tussenruimte icoon: de witruimte tussen de iconen.
  • Uitlijning: standaard is de uitlijning van social media gecentreerd, maar deze is ook aan te passen naar uitlijning links en rechts.
  • Padding: ruimte rondom je social media iconen. Het is mogelijk om dit boven, onder, links en rechts toe te passen. Standaard is een padding van 10 ingesteld voor alle kanten.
  • Achtergrondkleur: de achtergrondkleur van de rij van je social media kanalen.

Geavanceerd

  • Ervaring met code? Pas een CSS class toe.

Navigatie

Wil je de navigatie van jouw website ook in je bericht terug laten komen? Gebruik dan het element navigatie. Je ziet de volgende opties aan de linkerzijde:

Navigatie.png

Navigatie inhoud

  • Navigatie items: geef een naam en url op aan het navigatie item. Met het prullenbak-icoon kan je een item verwijderen. Ook is het mogelijk om met je muis de volgorde van de navigatie items aan te passen. 
  • Button Item toevoegen: standaard zijn er drie navigatie items aanwezig, maar je kunt er meer toevoegen. 
  • Gebruik dezelfde styling: Wanneer je het schuifje naar links verplaatst dan kan je per navigatie item een aparte styling instellen.

Navigatie item stijl

  • Lettertype: standaard wordt het lettertype overgenomen die je bij de tab Algemeen hebt aangegeven. Het is mogelijk om deze voor de button te wijzigen. Er is keuze tussen de standaard web safe fonts.
  • Lettertype grootte: standaard wordt een lettertype grootte van 14 pixels gehanteerd. Maar je kunt dit wijzigen naar wens.
  • Lettertype stijl: 
  • Lettertype zwaarte: met deze optie kan je het lettertype "zwaarder" maken
    Lettertype_zwaarte.png
  • Regelhoogte: hoeveel ruimte wilt je tussen de tekstregels hebben? Voor een goede leesbaarheid is ruimte nodig. 
  • Text transform: er zijn verschillende opties voor je navigatie tekst. Wil je dat deze met een hoofdletter start, volledig in kapitalen, in kleine letters of geen toepassing. 
  • Text decoration: standaard staat deze optie op onderstreept. Maar je kan ook een streep boven de tekst plaatsen of geen decoratie kiezen. 
  • Letterafstand: de ruimte tussen de letters is hier in te stellen.
  • Padding: ruimte rondom per navigatie item. Het is mogelijk om dit boven, onder, links en rechts toe te passen. Standaard is een padding van 5 ingesteld voor alle kanten.

Navigatie stijl

  • Achtergrondkleur: de achtergrondkleur voor de rij waar je navigatie items in staan.
  • Uitlijning: standaard is de uitlijning van navigatie items links uitgelijnd, maar deze is ook aan te passen naar gecentreerd en uitlijning rechts.
  • Scheidingsteken: standaard is er geen scheidingsteken, maar je hebt een vrij invuld veld om een scheidingsteken te plaatsen, zoals bijvoorbeeld een pipe-teken.
    scheidingsteken.png
  • Kleur scheidingsteken: wanneer je een scheidingsteken opgeeft dan is deze automatisch de tekstkleur die je hebt opgegeven. Maar je kan ook kiezen voor een specifieke kleur.
  • Padding (navigatie stijl): ruimte rondom je navigatie. Het is mogelijk om dit boven, onder, links en rechts toe te passen. Standaard is een padding van 10 ingesteld voor alle kanten.

Geavanceerd

  • Ervaring met code? Het is mogelijk om zelf CSS classes toe te voegen.

Scheidingsregel

Met een scheidingsregel tussen je artikelblokken kun je meer onderscheid en rust creëren. De opties voor een scheidingsregel zijn:
Scheidingsregel.png

Scheidingsregel stijl

  • Breedte (%): de scheidingslijn is de breedte van de rij waarin deze geplaatst is, maar je kan de lijn minder breed maken indien gewenst.
  • Uitlijning: de uitlijning is van toepassing wanneer de scheidingslijn minder breed is dan 100%.
  • Lijn stijl: het is mogelijk om voor een vaste lijn te kiezen, een stippellijn en gestreept.
  • Lijn zwaarte: de dikte van de lijn.
  • Lijnkleur: de kleur van de lijn.
  • Achtergrondkleur: de achtergrond kleur van de rij waar de lijn zich bevindt.
  • Padding: de ruimte rondom de lijn.

Geavanceerd

  • Ervaring met code? Het is mogelijk om zelf CSS classes toe te voegen.

Witregel

Net als met een scheidingslijn kun je met een witregel meer rust creëren in het design van je template.
Witregel.png

Witregel stijl

  • Breedte (%): de witruimte is de breedte van de rij waarin de witruimte geplaatst is, maar je kan de witruimte minder breed maken indien gewenst.
  • Hoogte: de witruimte is standaard 30 hoog, dit is aan te passen naar wens.
  • Achtergrondkleur: de kleur van de witruimte.
  • Uitlijning: de uitlijning is van toepassing wanneer de witruimte minder breed is dan 100%.

Geavanceerd

  • Ervaring met code? Het is mogelijk om zelf CSS classes toe te voegen.

Video

Een video afspelen in e-mail wordt niet in elke e-mail cliënt ondersteund. Daarom is het niet mogelijk in Spotler Mail+ om direct een video in een bericht te plaatsen. Wat wél mogelijk is, is om automatisch een thumbnail in je bericht te plaatsen met daaroverheen een play-button. Zo lijkt het net alsof je een video in je bericht hebt, maar wanneer de lezer klikt wordt deze verwezen naar je YouTube of Vimeo kanaal om de video af te spelen. 

Video_thumbnail.png

Je gebruikt het element Video om een thumnail van je video in je bericht te plaatsen. Je ziet de volgende opties aan de linkerzijde:

Video.png

Video inhoud

  • URL video: plaats de url van jouw video door te klikken op het link-icoon. 
  • Alt tekst: voeg een alt-tekst toe aan je video-afbeelding. Wanneer de afbeelding van de video niet standaard wordt ingeladen dan kan de lezer alsnog de boodschap van je afbeelding zien en ook screenreaders kunnen alt-teksten lezen.

Video stijl

  • Achtergrondkleur: pas een achtergrond kleur toe aan je video. Deze wordt zichtbaar wanneer de afbeelding van je video niet wordt ingeladen door de ontvanger, of wanneer je padding toevoegt rondom de video.
  • Padding: creëer ruimte rondom je video met padding. 
  • Radius hoeken: wil je de video-afbeelding ronde hoeken geven? Pas de radius van de hoeken aan. Hoe hoger het getal hoe ronder de hoek. Het is per hoek van de afbeelding in te stellen.
  • Randstijl: geef je afbeelding een omlijning. Je hebt de keuze uit geen, vast, gestippeld en gestreept.
  • Automatische breedte: standaard staat de automatische breedte aan. Het is mogelijk deze aan te passen naar een ander percentage of aantal pixels. Schuif je het schuifje naar links, dan wordt de afbeelding 100% uitgevuld naar de breedte van de rij waar de afbeelding is geplaatst. Het percentage kun je aanpassen. 

Geavanceerd

  • Ervaring met code? Het is mogelijk om zelf CSS classes toe te voegen.

Timer

Een countdown timer in een e-mail. Door veel marketeers wordt dit ingezet om de fear of missing out bij de ontvanger aan te spreken. En zo extra conversie uit te mail te halen.

De opties van een timer zie je aan de linkerzijde:

Timer.png

Timer inhoud

  • Klik op de button Timer toevoegen om de timer in te stellen. Er opent een pop-up waar je de datum opgeeft tot wanneer de timer moet aflopen. Meer over deze instellingen lees je in het artikel: Countdown timer instellen.

Timer stijl

  • Achtergrondkleur: dit is de achtergrondkleur van de rij waar de timer zich bevindt. De achtergrondkleur van de timer zelf stel je in bij de pop-up van de timer instellingen. 
  • Padding: creëer ruimte rondom je timer met padding. 
  • Radius hoeken: wil je de timer ronde hoeken geven? Pas de radius van de hoeken aan. Hoe hoger het getal hoe ronder de hoek. Het is per hoek van de timer in te stellen.
  • Randstijl: geef je timer een omlijning. Je hebt de keuze uit geen, vast, gestippeld en gestreept.

Geavanceerd

  • Ervaring met code? Het is mogelijk om zelf CSS classes toe te voegen.

RSS

Heb je een RSS-feed en wil je dat de content van je RSS-feed in je nieuwsbrief geladen wordt? Dan gebruik je deze opties:

RSS.png

Content

  • URL RSS: plaats in het invulveld de url van je RSS-feed en klik op het icoon naast het invulveld om de RSS-feed in te laden. Er verschijnen meer opties:
    RSS_Content.png
  • Aantal artikelen: geef aan hoeveel artikelen je uit jouw RSS-feed wilt inladen.
  • Layout: je hebt de keuze om artikelen horizontaal naast elkaar te zetten of onder elkaar met de optie verticaal.
  • Items per rij: kies je voor de optie horizontaal bij layout dan kan je aangeven hoeveel items naast elkaar getoond mogen worden.
  • Toevoegen: bepaal welke informatie uit jouw feed getoond worden. Je feed is onderverdeeld in een header, linkerkolom en footer. Selecteer welk gegeven je op welke plek wilt tonen.
    Tovoegen_RSS.png
    Het is vervolgens mogelijk om items van plek te wisselen door te slepen met de muis. Items verwijderen doe je door op het prullenbak-icoon te klikken. 
    RSS_items_verslepen.png

RSS-stijl

  • Padding: ruimte rondom je totale RSS-feed.

Product (alleen voor eCommerce beschikbaar)

Heb je een koppeling met je webwinkel een Spotler? Dan is het mogelijk om eenvoudig producten uit je webwinkel in je bericht te laden. Dit doe je met het element Product. Je ziet de volgende opties verschijnen aan de linkerkant: 

Product.png

Content product

  • Product: maak een keuze tussen Statisch of Dynamisch.

    Statisch
    Statisch betekent dat je een product selecteert uit je webwinkel om toe te voegen aan je bericht. Zodra je op Statisch klikt verschijnt er een pop-up met de producten uit jouw webwinkel die je kunt selecteren. Lees meer over een producten toevoegen aan je bericht in het artikel: Hoe voeg ik een productblok toe aan mijn bericht?

    Dynamisch
    De optie Dynamisch gebruik je voor berichten met een verlaten winkelwagen of product review. Wat er getoond wordt aan producten verschilt per contact. Meer weten over hoe je een verlaten winkelwagen bericht of product review bericht maakt voor je automatische campagne? Lees dan de artikelen: Hoe maak ik een verlaten winkelwagen bericht op? en Hoe maak ik een product review bericht?

  • Layout: je hebt de keuze om artikelen horizontaal naast elkaar te zetten of onder elkaar met de optie verticaal voor statische producten. Voor dynamische producten geldt dat alleen de optie verticaal toe te passen is. 
  • Items per rij: kies je voor de optie horizontaal bij layout dan kan je aangeven hoeveel items naast elkaar getoond mogen worden.
  • Toevoegen: bepaal welke informatie je van jouw product wilt tonen. Je productblok is onderverdeeld in een header, linkerkolom en footer. Selecteer welk gegeven je op welke plek wilt tonen.
    Product_toevoegen.png
    Het is vervolgens mogelijk om items van plek te wisselen door te slepen met de muis. Items verwijderen doe je door op het prullenbak-icoon te klikken. 
    Product_items_verplaatsen.png

Product stijl

  • Padding: creëer ruimte rondom alle producten. 

Aanbeveling (alleen voor eCommerce)

Heb je een koppeling met Squeezely of Datatrics? Dan is het mogelijk om persoonlijke aanbevelingen toe te voegen aan je bericht. Je ziet de volgende opties wanneer je het element Aanbeveling selecteert:

Aanbeveling.png

Content

Aanbeveling stijl

  • Padding: de ruimte rondom de aanbevelingen die je geplaatst hebt in het bericht.

Custom

Gewend om zelf HTML-code toe te passen? Met het blok Custom is het mogelijk om zelf een maatwerk blok te ontwikkelen. 
Custom.png

  • Padding: creëer ruimte rondom je custom blok.
  • Custom HTML: plaats hier je HTML-code.

Veelgestelde vragen

Hoe verwijder ik een element?

Selecteer het element en je ziet extra opties verschijnen naast het element:
Element_opties_canvas.png
Klik op het prullenbak-icoon.

Hoe dupliceer ik een element?
Selecteer het element en je ziet extra opties verschijnen naast het element:
Element_opties_canvas.png
Klik op het eerste icoon om te dupliceren.