Ontwerpen met de drag and drop editor

Met de drag and drop editor (editor) maak je snel een mooie nieuwsbrief die zowel op het scherm als op mobiele apparaten goed weergegeven wordt.

Onderdelen nieuwsbrief

Als je voor het eerst een basisontwerp in de editor opent, dan wordt het ontwerp als nieuwsbrief in de editor geladen. Deze nieuwsbrief bestaat uit verschillende onderdelen:

• Header
• Top bar
• Inhoud
• Footer

Elk onderdeel heeft zijn eigen plaats en functie. Deze leggen wij hieronder kort voor je uit.

Header

De header bevindt zich bovenaan je nieuwsbrief en is een essentieel onderdeel van je ontwerp. Hier plaats je je logo, eventueel de titel van je nieuwsbrief en gebruik je een onderscheidende achtergrondkleur zoals de kleur van je huisstijl.

Top bar

De top bar bevindt zich net boven of onder je header. Je gebruikt de top bar voor het plaatsen van aanvullende informatie zoals een korte introductietekst, de titel of datum van je nieuwsbrief en een link naar de online versie.

Inhoud

De inhoud gebruik je voor de daadwerkelijke inhoud van je nieuwsbrief en is opgebouwd uit meerdere kleine onderdelen, ook wel blokken genoemd. Denk hierbij aan tekstblokken, afbeeldingen, buttons en social media icoontjes.

Footer

Helemaal onderaan je nieuwsbrief bevindt zich de footer. De footer gebruik je voor je adresgegevens, een link naar je website en het plaatsen van de afmeldlink. De footer is tevens ideaal voor het weergeven van social media icoontjes.

Opmaak van je nieuwsbrief wijzigen

Kies uit de tabbladen aan de linkerkant het tabblad Opmaak om de opmaak van je nieuwsbrief te wijzigen (figuur 1).

Figuur 1 - Opmaak nieuwsbrief

Het tabblad bestaat uit vijf onderdelen. Deze corresponderen grotendeels met de hierboven besproken onderdelen:

• Algemeen
• Inhoud
• Header
• Top bar
• Footer

Je klikt op een onderdeel om deze uit te vouwen.

In elk onderdeel stel je diverse aspecten van je nieuwsbrief in zoals achtergrondkleuren, tekstkleuren en letterypes. Elke wijziging wordt direct bijgewerkt en zie je in je nieuwsbrief veranderen.

Onder Header en Footer kun je er voor kiezen om het header- of footertype te wijzigen van tekst naar afbeelding. Met een afbeelding als header en/of footer geef je je nieuwsbrief op een makkelijke manier in je eigen huisstijl weer. Header- en footerafbeeldingen worden in een breedte van 580 pixels weergegeven.

Blokken aan je nieuwsbrief toevoegen

Je kunt de inhoud van je nieuwsbrief naar wens uitbreiden door blokken naar je nieuwsbrief te slepen. Je vindt deze blokken aan de linkerkant onder het tabblad Blokken (Figuur 2).

Figuur 2 - Blokken nieuwsbrief

Uitleg blokken

Als je met je muis over één van de blokken heen beweegt, dan krijg je een korte beschrijving van het blok. Voor de volledigheid geven wij deze beschrijvingen hieronder voor je weer:

Ingevoegde blokken wijzigen

Als je met je muis over een bestaand blok van je nieuwsbrief beweegt, dan verschijnt er direct een kader om het betreffende blok. Bovenin de kader bevindt zich een menubalk met daarin enkele icoontjes (figuur 3).

Figuur 3 - Kader met menubalk

In figuur 3 zijn alle beschikbare icoontjes in de menubalk weergegeven. Van links naar rechts zijn dit:

Blok slepen

Wijzig de positie van het blok door deze naar boven of beneden te slepen.

Blok bewerken

Klik hierop om de tekst en de eventuele titel te bewerken.

Blok dupliceren

Kopieer de inhoud en de opmaak van het blok. Het nieuwe blok wordt direct onder het geselecteerde blok geplaatst.

Verhouding kolommen aanpassen

Indien het blok uit meerdere kolommen bestaat kun je de verhouding van de kolommen wijzigen. Kies hiermee bijvoorbeeld voor een kleinere afbeelding en meer tekst of vice versa.

Blok verwijderen

Verwijder het geselecteerde blok uit je nieuwsbrief.

Afbeeldingen

Afbeeldingen kun je op twee manieren aan je nieuwsbrief toevoegen:

1. Als blok naar je nieuwsbrief slepen
2. Bij het bewerken van je tekst invoegen

In dit onderdeel behandelen wij het toevoegen van afbeeldingen door deze als blok naar je nieuwsbrief te slepen. Het toevoegen van afbeeldingen bij het bewerken van je tekst vind je onder Teksten toevoegen en wijzigen.

Als blok naar je nieuwsbrief slepen

De makkelijkste manier om een afbeelding aan je nieuwsbrief toe te voegen is door één van de blokken met een afbeelding naar je nieuwsbrief te slepen. Het grote voordeel hiervan is dat de afbeelding direct in de juiste breedte weergegeven wordt en je jezelf niet bezig hoeft te houden met de grootte en de uitlijning van je afbeelding.

Nadeel hiervan is dat de breedte (en daarmee de hoogte) van je afbeelding bepaalt wordt door de breedte van de kolom waarin de afbeelding geplaatst wordt. Wil je de breedte van je afbeelding wijzigen, dan kun je dit alleen doen door de verhoudingen van de kolommen aan te passen.

Sleep je een blok naar je nieuwsbrief dat alleen uit een afbeelding bestaat, dan wordt direct de bestandsmanager (figuur 4) geopend. Met de bestandsmanager kun je afbeeldingen aan jouw persoonlijke ruimte op Inboxify toevoegen en in je nieuwsbrief plaatsen.

Figuur 4 - Bestandsmanager

Bestaat het blok uit meerdere onderdelen, bijvoorbeeld een gedeelte met tekst, dan zul je eerst op de “lege” afbeelding moeten klikken om een afbeelding te kunnen selecteren.

Afbeeldingseigenschappen

Heb je net een afbeelding ingevoegd of je klikt op een reeds ingevoegde afbeelding, dan worden de afbeeldingseigenschappen aan de linkerkant geopend. Hier kun je diverse eigenschappen voor je afbeelding instellen. De belangrijkste leggen wij hieronder voor je uit.

Link

Voer bij Link een geldige URL of e-mailadres in om van je afbeelding een link te maken. Enkele voorbeelden:

• https://www.inboxify.nl
• mailto:info@example.com
• mailto:info@example.com?subject=aanvraag

ALT-tekst

De ALT-tekst, oftewel de alternatieve tekst, is de tekst die getoond wordt als de afbeelding niet geladen kan worden.

Juist voor e-mails is deze tekst bijzonder belangrijk, want veel e-mailprogramma’s hebben het automatisch downloaden van afbeeldingen tegenwoordig uitgeschakeld.

Verwijder

Met de Verwijder-knop verwijder je de geselecteerde afbeelding uit je nieuwsbrief.

De afbeelding wordt vervangen door een grijs vlak. Klik op dit vlak om een nieuwe afbeelding te selecteren.

Wijzig

Met de Wijzig-knop vervang je de geselecteerde afbeelding door een andere.

Teksten toevoegen en wijzigen

Teksten voeg je toe door één van de blokken met tekst naar je nieuwsbrief te slepen. Direct na het plaatsen van de tekstblok opent de teksteditor (figuur 5) en kun je de “dummy” tekst naar behoefte wijzigen. Een bestaande tekst wijzig je door op het betreffende tekstblok in je nieuwsbrief te klikken.

Figuur 5 - Teksteditor

Plaats je een tekstblok met meerdere kolommen, dan maakt Inboxify gebruik van tabbladen om de kolommen van elkaar te onderscheiden.

Links

Door links in je tekst te plaatsen maak je het de ontvangers van je nieuwsbrief een stukje gemakkelijker om je website te bezoeken. De ontvanger hoeft alleen maar op de link te klikken en wordt automatisch naar de door jou opgegeven pagina doorverwezen.

Je voegt een link toe door op de knop Link invoegen/wijzigen te klikken. Een dialoogvenster (figuur 6) opent waarmee je de bestemming van de link en andere eigenschappen in kunt stellen.

Figuur 6 - Link toevoegen/wijzigen

Wil je van een bepaalde tekst een link maken, zorg er dan voor dat je de tekst met je muis selecteert voordat je op de knop Link invoegen/wijzigen klikt.

Heb je bij de basisgegevens het vervangen van links ingeschakeld, dan raden wij je aan om in de tekst van je link geen URL zoals https://www.inboxify.nl te gebruiken, maar een tekst als “Onze website”, “Meer informatie” of een andere tekst waar geen URL in staat.

Reden hiervoor is dat wij de link in je nieuwsbrief voor het meten van de kliks vervangen door een link naar Inboxify. Staat er in de tekst een andere link dan de onderliggende link, dan kan het zijn dat e-mailprogramma’s je nieuwsbrief als een phishing- of een scam-bericht zien.

Download link

Vanwege performance- en veiligheidsoverwegingen is het niet toegestaan om bijlagen aan je nieuwsbrief toe te voegen. Wil je bijvoorbeeld een prijslijst meesturen, dan is dit hierdoor helaas niet mogelijk.

Wat je wel kunt doen is het uploaden van je bestand om hier vanuit je nieuwsbrief naar linken. Dat doe je door op de knop Bladeren op server te klikken. Ontvangers van je nieuwsbrief hoeven dan alleen maar op de link te klikken om je bestand te downloaden.

Speciale velden

Met behulp van de speciale velden kun je je nieuwsbrief personaliseren, oftewel een persoonlijk tintje geven. Deze velden worden bij de verzending van je nieuwsbrief vervangen door de waarde zoals die in je contactenlijst staat.

Wil je de voornaam van je contacten in de aanhef gebruiken, bijvoorbeeld “Beste Jan”, dan typ je “Beste ” en selecteer je het veld Voornaam uit de speciale velden. Inboxify plaatst het speciale veld voor je in de tekst zodat je het volgende krijgt:

Beste [first_name],

Als de naam “Jan” in je contactenlijst gekoppeld is aan de voornaam van het betreffende contact, dan wordt de aanhef bij het versturen:

Beste Jan,

Lees hier meer over het gebruik van speciale velden.

Afbeeldingen in je tekst plaatsen

Naast het gebruik van blokafbeeldingen is het mogelijk om afbeeldingen bij het bewerken van je tekst in te voegen. Met deze afbeeldingen heb je wat meer vrijheid dan met blokafbeeldingen, want van deze afbeeldingen kun je zelf de positie en grootte aanpassen. Ideaal voor bijvoorbeeld je logo, het gebruik van icoontjes of voor meer dan twee afbeeldingen naast elkaar.

Je plaatst een afbeelding in je tekst door op de knop Afbeelding te klikken. Een dialoogvenster met de afbeeldingseigenschappen opent (figuur 7). Klik op de knop Bladeren op server om de bestandsmanager (figuur 4) te openen.

Figuur 7 - Afbeelding

Afbeeldingseigenschappen

In het dialoogvenster Eigenschappen afbeelding kun je diverse afbeeldingseigenschappen instellen. Hieronder behandelen wij de belangrijkste.

URL

Wil je afbeeldingen invoegen zonder deze te uploaden, voer hier dan de URL van je afbeelding in.

Alternatieve tekst

Net als bij afbeeldingen die je als blok naar je nieuwsbrief kunt slepen is het mogelijk om een alternatieve tekst voor je afbeelding op te geven. Deze tekst wordt getoond als je afbeelding niet geladen kan worden.

Breedte

Geef hier de gewenste breedte van je afbeelding op. De hoogte wordt automatisch bepaald.

Uitlijning

Met de selectielijst Uitlijning kun je de uitlijning van je nieuwsbrief bepalen.

Wij raden je echter aan om de waarde hiervan op niet ingevuld te laten staan en de afbeelding in de editor met behulp van de uitlijningsknoppen uit te lijnen.

Een afbeelding centreer je bijvoorbeeld als volgt:

• Als het dialoogvenster Eigenschappen afbeelding nog open staat, sluit deze dan
• Plaats de cursor met je muis vlak na of voor de ingevoegde afbeelding
• Klik op de knop Centreren

Link

Als je van je afbeelding een link wilt maken, dan klik je op het tabblad Link.

Bij URL voer je de bestemming van de link in en bij Doelvenster geef je aan of de link bijvoorbeeld in hetzelfde of in een nieuw venster geopend moet worden.

Wil je een download link maken, dan klik je op de knop Bladeren op server.

Tabellen

Soms wil je gegevens mooi uitlijnen, bijvoorbeeld voor het weergeven van een agenda. In dat geval kun je het beste gebruik maken van tabellen.

Je voegt een tabel toe door op de knop Tabel te klikken. Een dialoogvenster verschijnt waarin je diverse eigenschappen van je tabel in kunt stellen.

Celeigenschappen

De celeigenschappen (figuur 8) zijn misschien wel de belangrijkste eigenschappen van je tabel. Hier stel je de breedte van de cel in, geef je een achtergrondkleur op en kun je CSS-code toevoegen om de tabel naar wens op te maken.

Figuur 8 - Celeigenschappen

Je eigen code gebruiken

Als je verstand van HTML- en CSS-code hebt, dan kun je de inhoud van de tekstblokken opmaken met behulp van je eigen code. Je klikt hiervoor op de Broncode knop.