Een call to action (knop) toevoegen

Flexmail bied je eenvoudige manieren om een call to action toe te voegen aan al je berichten, ongeacht de manier waarop je ze aanmaakt. Een call to action is in principe het belangrijkste deel van je bericht. Je doet je best om een reactie te krijgen. Zet je berichten om in verkoop, zorg dat mensen zich abonneren op je evenementen of krijg feedback. Dat zijn slechts voorbeelden. Je kunt je call to action gebruiken voor ieder doel dat je nastreeft. 

In dit artikel vind je een handig voorbeeld van het toevoegen van een call to action in elk van onze tools - de E-mail builder, de Legacy builder, de Wizard Template en de HTML Editor.

E-mail builder

1. In het Elementen paneel aan de linkerzijde kan je het Knop element terugvinden. Sleep het op het canvas in een structuur.

   

2. Klik vervolgens op het Knop element op het canvas om rechtstreeks de gewenste tekst in te voeren.

   Je zal merken dat de knop instellingen ook zichtbaar worden in het zijpaneel dat is opgedeeld in verschillende rubrieken en zal je aparte instellingen kunnen terugvinden voor de desktop en mobiele versie van je knop. Start met de desktopversie.

3. In het onderdeel Inhoud kan je een link toevoegen aan je knop. Kies uit een van onderstaande als actie voor je knop:
   • Weblink - stuur je contacten door naar een externe bron.  
   • Bestand - door op de knop te klikken wordt er een bestand gedownload.
   • E-mail - wanneer je contacten op de knop klikken zal het hen doorverwijzen naar een e-mailadres, het zal een e-mailbericht van hen naar jou beginnen. 
   • Systeempagina - Verwijs eenvoudig naar de uitschrijfpagina of de webversie van je e-mail
   • Enquête - vraag je contacten om verschillende vragen voor je te beantwoorden, bijv. klanten feedback.
   • Landings pagina - stuur je contacten door naar een landing page 
   • Formulier - vraag je contacten of ze een formulier voor je willen invullen, bijvoorbeeld een uitnodiging RSVP.
   • Gepersonaliseerde link - Gebruik de inhoud van een eigen veld van een contact als link.
   • Telefoonnummer - Laat je mobiele lezers eenvoudig een oproep maken
4. In het onderdeel Tekst kan je opmaak van je knop beïnvloeden.
   • Kies een lettertype en lettergrootte.
   • Via Gewicht kan je instellen of je tekst van je knop vetgedrukt moet zijn of niet.
   • Verander Kleur en Achtergrondkleur van je knop indien nodig.
   • Stel met Padding de witruimte rond de tekst in de knop in. Zet de schakelaar 'Toepassen voor alle zijdes' uit als je in meer detail wil kunnen inregelen.
5. In het onderdeel Lay-out kan je aanpassen hoe de knop in je bericht past
   • Standaard past Breedte van de knop zich aan op basis van de inhoud. Klik op de schuiver 'Aanpassen aan tekst' om te wisselen naar een breedte op basis van de kolom waar de knop in staat.
   • Pas de Uitlijning van de knop aan.
   • Stel Marges in voor extra witruimte rond de knop en meer ademruimte. Zet de schakelaar 'Toepassen voor alle zijdes' uit om iedere zijde apart in te stellen.
6. In de het onderdeel Rand heb je de mogelijkheid om je knoprand aan te passen.
   • Kies een lijnstijl voor elke zijde of voor iedere zijde apart.
     • Stel de lijndikte van de knoprand in.
     • Kies als lijntype een volle lijn, een gestreepte lijn of een stippellijn.
     • Stel een lijnkleur in via het kleurenpalet, de kleurkiezer of met een HEX waarde.
   • Stel de radius in om de knop af te ronden.
7. In het onderdeel Zichtbaarheid kan je het element te verbergen.
8. Wissel nu naar de mobiele weergave van je e-mail en pas bovenstaande knopinstellingen aan waar nodig.

Legacy builder

Het is mogelijk om een knop element naar een lege structuur te slepen of een voorgedefinieerde structuur met een knop element op het canvas te plaatsen.  

1. In het tabblad Element vind je het Knop element. Sleep het op het canvas naar een lege structuur.

   

2. Klik vervolgens op het Knop element op het canvas om de Knop Eigenschappen te openen.

   

3. Typ eerst de content van je knop in het Knop-tekstveld.  
4. Daarna kun je het uiterlijk van je knop aanpassen:  
   • Stel de breedte en hoogte van de knop in door op de plus of min te drukken op de knop rechts naast de titel Breedte of Hoogte.  
   • Kies de achtergrondkleur van je knop. 
   • Pas de uitlijning en de radius van de knop aan.
   • Kies de randstijl voor je knop - klik op 'meer opties' als je alle kanten van de knop verschillend wilt vormgeven.  
5. De volgende en belangrijkste stap is het kiezen van de actie van je knop. Je kunt kiezen tussen verschillende acties voor je knop:
   • E-mail - wanneer je contacten op de knop klikken zal het hen doorverwijzen naar een e-mailadres, het zal een e-mailbericht van hen naar jou beginnen. 
   • Link - stuur je contacten door naar een externe bron.  
   • Formulieren - vraag je contacten of ze een formulier voor je willen invullen, bijvoorbeeld een uitnodiging RSVP.
   • Enquêtes - vraag je contacten om verschillende vragen voor je te beantwoorden, bijv. klanten feedback.
   • Landings pagina's - stuur je contacten door naar een landing page 

   • Documenten bibliotheek - door op de knop te klikken wordt er een bestand gedownload.

     

     

6. Vervolgens kun je de tekststijl, de marges en de padding van je knop aanpassen. Je kunt de kleur, het lettertype en de lettergrootte kiezen, evenals de typografie - vet, cursief en onderlijnd - van de tekst van je knop.

Wizard Template

In de Wizard Template kan je een call to action toevoegen aan de personalisatie elementen Call to action en Artikels.

Call to action

1. Klik op het Call to action element om het te vergroten.  
2. Eerst kun je de tekst van je Call to action bewerken.
   • Geef je call to action een titel - dit zal een titel zijn die het doel van de knop beschrijft voor de gebruiker.  
   • Stel de kleur van de tekst van je titel in. 
   • Kies een naam voor je knop - dit is de tekst die op je knop te zien zal zijn.
3. Kies vervolgens de actie van je knop in het Link veld. Hier kun je ervoor kiezen om een URL in het veld in te vullen of te klikken op een van de kleine letters in het veld. Met elke letter kun je een andere actie kiezen.      
   • 'L' staat voor Landings pagina
   • 'F' staat voor Formulieren
   • 'S' staat voor Enquetes
   • 'D' staat voor Document
4. Daarna zie je 3 kleurkiezers om uit te kiezen.   
   • De eerste kleur is voor de tekst in de knop.
   • De tweede kleur is voor de achtergrond van de knop.

   • De derde kleur is voor de achtergrond van het canvas.

     

Artikels

1. Klik op het Artikel element om het te vergroten.
2. Klik op Voeg een artikel toe om te beginnen.



3. Vul eerst de content van je artikel in. Vervolgens, om je call to action knop te beheren, scroll je naar beneden totdat je het einde van het Content tekstveld hebt bereikt.
4. Vul vervolgens de Linknaam voor je knop in om je call to action in je artikel zo boeiend mogelijk te maken.   
5. Kies daarna de actie van je knop in het Link veld. Hier kan je kiezen om een URL in het veld in te vullen of te klikken op een van de kleine letters in het veld. Met elke letter kun je een andere actie kiezen.        
   • 'L' staat voor Landings pagina
   • 'F' staat voor Formulieren
   • 'S' staat voor Enquetes
   • 'D' staat voor Document
6. Je zult zien dat je in sommige van de templates een aantal kleurkiezers in je artikel element hebt. Hier kan je de kleur van de tekst en de achtergrond van je knop of zelfs de achtergrondkleur van je call to action canvas instellen.
   
   
   Support tip 
   Je kunt de kleuren van je call to action-knop altijd zelf kiezen. Wanneer je geen kleurkiezer in het artikel element vindt, kun je altijd naar beneden scrollen naar Lay-out om de tekst- en achtergrondkleur van je knop in te stellen.

   

HTML Editor

De WYSIWYG HTML Editor heeft geen specifieke optie om een knop toe te voegen. Dit artikel zal je een eenvoudige suggestie geven om een knop toe te voegen via HTML, maar houd er rekening mee dat we geen ondersteuning bieden voor aangepaste HTML code.

1. Vanuit je WYSIWYG opties klik je op de HTML Bron knop.

   

2. In de broncode kan je de volgende code toevoegen.

   
   

<button>Button text</button>

1. Klik vervolgens op Bijwerken om de broncode te bewerken.  
2. Deze actie voegt een knop toe aan je HTML bericht.  

3. Markeer vervolgens de tekst in de knop en klik op de Hyperlink knop bovenaan.

   

4. Hiermee wordt de pop-up voor de Link invoegen/bewerken geopend. Hier kun je kiezen wat je knop zal doen of tot wat voor soort actie je je publiek oproept. Je kunt een link maken naar een externe bron, een landingpage, een formulier, een enquête of zelfs een bestand dat je kunt downloaden.

   

5. Daarna kun je ook de Popup, Gebeurtenissen en Geavanceerde instellingen aanpassen om de weergave van je link te wijzigen. Je kunt er bijvoorbeeld voor kiezen om de link te openen in een pop-up of om een actie te selecteren welke gebeurt als je met de muis over de link gaat.

   

6. Klik op Invoegen wanneer je klaar bent om de functionaliteit toe te passen op je knop.

Gerelateerde artikels