Maak een professionele HTML e-mailhandtekening

Een e-mailhandtekening (ook wel e-mail footer genoemd) is een informatieblok aan het einde van elk verzonden bericht. Het bevat contactgegevens, functietitel, bedrijfsnaam en vaak een link naar de website of vergaderkalender.

De ontvanger hoeft niet naar het telefoonnummer te zoeken in eerdere berichten - alle details zijn direct beschikbaar. Een professionele e-mailhandtekening toont ook dat u aandacht besteedt aan details en een consistent bedrijfsimago handhaaft in zakelijke correspondentie.

Het tabblad Gegevens bevat alle velden die u kunt invullen. Slechts twee zijn verplicht: naam en e-mailadres. De overige velden zijn optioneel en verschijnen alleen in de handtekening wanneer ze zijn ingevuld.

Velden in het tabblad Gegevens

• Regel boven naam - extra tekst weergegeven boven de naam. U kunt de bedrijfsnaam, tagline of slogan invoeren.
• Avatar / logo (afbeeldings-URL) - URL naar een profielfoto of bedrijfslogo. De afbeelding moet vierkant zijn (min. 120×120 px) en openbaar toegankelijk. Na het plakken van de URL verschijnen extra opties: Avatarvorm (rond, afgerond of vierkant) en Avatarformaat (klein - 40 px, medium - 56 px, groot - 72 px).
• Volledige naam - verplicht veld. Voer uw volledige naam in.
• Naamtag - korte tekst naast de naam, bijv. voornaamwoorden of afgekorte titel.
• Functietitel - uw rol in het bedrijf, bijv. Sales Manager, Marketing Specialist.
• Bedrijfsnaam - de naam van de organisatie die u vertegenwoordigt.
• Extra regel - een korte beschrijving van wat u doet of aanbiedt.
• E-mail - verplicht veld. Voer uw zakelijke e-mailadres in.
• Telefoon - contactnummer. Elk formaat, bijv. +31 20 123 4567.
• Website - volledige URL van uw website, beginnend met https://.
• Adres - fysiek bedrijfsadres (straat, stad, postcode).
• Formele gegevens - KvK-nummer, licentienummer of andere gegevens die in uw branche vereist zijn.

Een CTA-knop (call-to-action) is een klikbaar element dat de ontvanger naar een gekozen pagina leidt. Het kan een link zijn naar een vergaderkalender, contactformulier of aanbieding. De generator maakt het mogelijk twee CTA-knoppen toe te voegen.

Hoofdknop

1. Open het tabblad Knoppen in de editor.
2. Voer in de sectie Hoofdknop de tekst in die de ontvanger zal zien, bijv. Plan een gratis consult.
3. Plak in het veld CTA-link de volledige URL. Het adres moet beginnen met https://.

Secundaire knop

U kunt een tweede CTA-knop toevoegen met outline-stijl (transparante achtergrond met rand). Vul de velden in de sectie Secundaire knop op dezelfde manier in als voor de hoofdknop.

Knopafronding

Onderaan het tabblad Knoppen vindt u de optie Knopafronding. Drie varianten zijn beschikbaar: Geen (scherpe hoeken), Licht (licht afgerond) of Volledig (ovale knop).

Als u beide velden leeg laat, verschijnt de knop niet in de handtekening. Als u slechts één veld invult, is de knop ook niet zichtbaar - zowel tekst als link zijn nodig.

In het tabblad Social Media kunt u links naar uw profielen toevoegen. De generator ondersteunt twaalf platforms: LinkedIn, Instagram, Facebook, TikTok, YouTube, X (voorheen Twitter), GitHub, Dribbble, Behance, WhatsApp, Telegram en Pinterest.

Hoe te doen

1. Open het tabblad Social Media in de editor.
2. Naast elk platform vindt u een URL-veld. Plak de volledige link naar uw profiel, bijv. https://www.linkedin.com/in/uwprofiel.
3. Vul alleen de velden in die u nodig heeft. Lege velden verschijnen niet in de handtekening.

Social media-pictogrammen

Onderaan het tabblad Social Media vindt u de optie Pictogrammen naast servicenamen tonen. Wanneer ingeschakeld, worden links weergegeven als gekleurde SVG-pictogrammen in plaats van alleen namen.

• Pictogramformaat - opties: Klein (16 px), Medium (20 px) of Groot (24 px).
• Pictogramkleur - Platformkleuren (standaardkleuren voor elk platform), Accentkleur (uniforme accentkleur) of Tekstkleur.

In het tabblad Uiterlijk kunt u kleuren, lettertype en andere visuele elementen van de handtekening aanpassen.

Kleurthema's

Bovenaan het tabblad vindt u vijf kant-en-klare thema's: Donker, Blauw, Paars, Groen en Grijs. Klikken op een thema stelt automatisch de accentkleur en tekstkleur in. Dit is de snelste manier om een consistent handtekeningsuiterlijk te bereiken.

Kleuren

• Accentkleur - gebruikt in de zijbalk/bovenbalk, CTA-knop en links. U kunt elke kleur uit het palet kiezen.
• Tekstkleur - kleur van alle tekst in de handtekening (naam, contactgegevens, disclaimer).
• Achtergrondkleur - achtergrondkleur van de hele handtekening. Standaard wit, maar aanpasbaar.

Lettertype en formaat

• Lettertype - opties: Arial, Verdana, Tahoma, Trebuchet MS en Georgia. Alle zijn e-mailveilig en worden correct weergegeven bij de ontvanger.
• Tekstgrootte - drie opties: Klein (12 px), Standaard (14 px) en Groter (16 px).

Extra instellingen

• Handtekeningrand - u kunt een rand aan de handtekening toevoegen door elke combinatie van zijden te selecteren (links, rechts, boven, onder). Het selecteren van alle zijden stelt automatisch een volledige rand in. De rand gebruikt de accentkleur.

In het tabblad Tekststijl kunt u individueel de kleur en lettergrootte van elk tekstelement in de handtekening aanpassen.

Beschikbare elementen

Alleen elementen die momenteel inhoud in de handtekening hebben zijn zichtbaar. Voor elk element kunt u instellen:

• Naam - standaard weergegeven in accentkleur.
• Functietitel - rol in het bedrijf.
• Bedrijf - organisatienaam.
• Contactgegevens - e-mail, telefoon, website (labels).
• Social media - profiellinks.
• Juridische disclaimer - juridische tekst onderaan de handtekening.

Hoe kleur te wijzigen

Naast elk element vindt u een rij kleuropties. Klik op een kleurvierkant om het te selecteren. U kunt ook een aangepaste kleur toevoegen door op het gekleurde vierkant met een plus te klikken - kies een kleur en klik op Opslaan. Aangepaste kleuren (tot 8) worden gedeeld tussen alle elementen.

De resetpictogramknop herstelt de standaardkleur van het element.

Hoe formaat te wijzigen

Op de tweede rij vindt u een formaatbesturing met - en + knoppen. De waarde toont de afwijking ten opzichte van de basislettergrootte (ingesteld in het tabblad Uiterlijk). Bereik: van -4 tot +4 pixels.

In het tabblad Afstand kunt u nauwkeurig de afstanden tussen individuele handtekeningelementen regelen.

Binnenpadding handtekening

Bovenaan het tabblad vindt u de optie voor binnenpadding - de afstand tussen de handtekeninginhoud en de randen. Drie waarden zijn beschikbaar: 8 px (klein), 16 px (medium) en 24 px (groot).

Afstand tussen elementen

Onder de padding vindt u besturingselementen voor individuele handtekeningelementen. Elk besturingselement heeft + en - knoppen om de afstand te vergroten of verkleinen. Alleen opties voor elementen die momenteel in de handtekening staan zijn zichtbaar.

• Na naam - afstand onder de naamregel.
• Na functie / bedrijf - afstand onder de functie- en bedrijfsnaamregel.
• Na extra regel - afstand onder de beschrijving (indien ingevuld).
• Na contactgegevens - afstand onder e-mail, telefoon en website.
• Na social media - afstand onder profiellinks.
• Na CTA-knop - afstand onder de knop (indien ingeschakeld).
• Voor disclaimer - afstand boven de juridische tekst.

Als u een veld leegmaakt (bijv. het telefoonnummer verwijdert), verdwijnt de bijbehorende afstandsoptie automatisch uit het tabblad.

In het tabblad Disclaimer / Juridisch kunt u juridische tekst toevoegen die onderaan de handtekening in kleiner lettertype verschijnt.

Wanneer een disclaimer toevoegen

• Zakelijke correspondentie - vertrouwelijkheidsmededeling en verzoek tot verwijdering bij onjuiste bezorging.
• Branchevereisten - sommige branches (bijv. juridisch, medisch, financieel) vereisen specifieke informatie in elk bericht.
• AVG - informatie over verwerking van persoonsgegevens, als het bedrijf verwerkingsverantwoordelijke is.

Standaard is het veld gevuld met een voorbeeldvertrouwelijkheidstekst. U kunt deze bewerken, verwijderen of vervangen door uw eigen disclaimer. Als u het veld leeg laat, verschijnt er geen disclaimer in de handtekening.

Scheidingslijn

Onder het tekstveld vindt u de optie Scheidingslijn tonen tussen contactgegevens en disclaimer. Schakel dit in om een horizontale lijn toe te voegen tussen contactgegevens en de juridische disclaimer.

Na het inschakelen van de lijn verschijnen extra aanpassingsopties:

• Lijnstijl - opties: doorgetrokken, gestreept of gestippeld.
• Lijndikte - drie opties: 1 px, 2 px of 3 px.
• Lijnkleur - standaard grijs (#e5e7eb). U kunt elke kleur uit het palet kiezen of de standaard herstellen door op de knop Standaard te klikken.

De generator slaat automatisch alle instellingen op in het browsergeheugen (localStorage). Na het vernieuwen van de pagina of heropenen van de tool worden gegevens, lay-out, kleuren en alle andere opties hersteld.

Hoe werkt automatisch opslaan?

Elke wijziging (tekst, kleur, lay-out, afstand) wordt direct opgeslagen in het browsergeheugen. Opslaan gebeurt automatisch op de achtergrond - zonder op knoppen te klikken.

Hoe instellingen te resetten

Onder de handtekeningpreview vindt u een knop Uiterlijk resetten. Na het klikken verschijnt een bevestigingsdialoog. Het bevestigen van de reset herstelt alle gegevens en instellingen naar standaardwaarden. Deze actie kan niet ongedaan worden gemaakt.

Configuratie exporteren en importeren

Onder de handtekeningpreview vindt u twee extra knoppen: Instellingen exporteren en Instellingen importeren. Export slaat alle gegevens, kleuren, lay-out, afstanden en tekststijlen op in een JSON-bestand. Import laadt een eerder opgeslagen configuratie uit een bestand.

Deze functie is vooral handig wanneer u de handtekeningconfiguratie wilt overdragen tussen computers, instellingen wilt delen met collega's of een back-up van uw instellingen wilt bewaren voor een reset.

Het previewpaneel wordt rechts van de editor weergegeven en wordt automatisch bijgewerkt bij elke wijziging. De preview is sticky en blijft zichtbaar tijdens het scrollen door bewerkingsopties.

Previewachtergrond wisselen

Boven de preview vindt u drie achtergrondwisselknoppen: Licht (standaard grijze achtergrond), Donker (donkere achtergrond, handig voor het controleren van leesbaarheid op donkere achtergronden) en Schaakbord (schaakbordpatroon, laat transparantie en handtekeningranden zien).

Actieknoppen

Onder de preview vindt u meerdere knoppen:

• Kopieer handtekening (Gmail / Outlook) - kopieert de handtekening naar het klembord als geformatteerde HTML. Plak het direct in handtekeninginstellingen.
• Kopieer HTML-code - kopieert de ruwe HTML-code van de handtekening naar het klembord. Handig als u code wilt plakken in een HTML-editor of CMS.
• Download als HTML - slaat de handtekeningcode op als .html-bestand. Handig voor archivering of delen met een ontwikkelaar.
• Bekijk HTML-code - opent een modal met de volledige HTML-broncode van de handtekening. U kunt de code bekijken en direct vanuit de modal kopiëren.
• Instellingen exporteren - slaat de volledige handtekeningconfiguratie (gegevens, kleuren, lay-out, afstanden, stijlen) op in een JSON-bestand.
• Instellingen importeren - laadt een configuratie uit een JSON-bestand. Alle instellingen worden automatisch toegepast.
• Uiterlijk resetten - herstelt alle gegevens en instellingen naar standaardwaarden (na bevestiging).