Banner-editor kiezen — Drag & Drop of klassiek

MailManagers heeft twee manieren om een banner op te maken: Drag & Drop of No Drag & Drop (de klassieke editor). Beide produceren dezelfde 680×120px banner — alleen de manier waarop je hem opbouwt verschilt.

Wanneer kies je welke?

Drag & Drop — voor een professioneel resultaat in minuten

Sleep losse bouwblokken (tekst, afbeelding, knop, review, lijn, witruimte) in een 1- of 2-kolomslayout. Kies een sjabloon om snel te starten, of bouw alles zelf.

✅ Kies dit als je:

• Snel een verzorgd ontwerp wilt zonder veel keuzes
• Verschillende elementen wilt combineren (foto + tekst + knop + review naast elkaar)
• Een banner met meerdere rijen wilt maken
• Achtergrond per rij wilt instellen

No Drag & Drop — voor maximale creatieve controle

Eén vast layout met vaste velden (titel, subtitel, knop, achtergrond). Plus geavanceerde opties: foto-positie links/rechts, fade-effecten, dynamische badges (vaste tekst, aftelteller, of review-score).

✅ Kies dit als je:

• Aftelbadges of automatische review-badges wilt tonen
• Heel specifieke fade- en positie-tweaks wilt
• Een vertrouwde lay-out wilt zonder zelf te componeren

Een nieuwe banner aanmaken

1. Ga naar Banners in de zijbalk.
2. Geef bovenaan een naam (bv. "Lente-actie 2026") en klik Banner aanmaken.
3. Er verschijnt een keuze-modal: kies tussen Drag & Drop (Professioneel uitzicht) of No Drag & Drop (Voor creatieve mensen).

Je kunt op elk moment wisselen tussen de twee modi via de "Editor-modus" toggle in de zijbalk van de banner-edit pagina. Beide ontwerpen blijven bewaard — alleen de actieve modus wordt gerenderd in je e-mails.

Drag & Drop kort uitgelegd

Bovenaan zie je een toolbar met 6 bouwblok-knoppen en een aparte "Badge"-knop. Sleep een blok naar de gewenste kolom op de canvas, of klik om het in de eerste vrije kolom toe te voegen.

Bouwblokken:

• Tekst — titel + body, met kleur en uitlijning per blok
• Afbeelding — upload, bijsnijden bij upload, kies uit eerdere uploads, hoekradius per hoek, fade-randen
• Knop — CTA met eigen kleur, radius en uitlijning
• Review — quote + sterren + platform-logo (Google, Trustpilot, Facebook, Let's Connect)
• Lijn — horizontale separator met kleur en dikte
• Witruimte — verticale spacing

Layout per rij: 1 kolom · 50/50 · 66/34 · 34/66. Per rij óók een eigen achtergrond instelbaar (kleur, foto, patroon of patroon-bibliotheek, met kleur-waas eroverheen).

Badge (overlay): vaste tekst die op één van de 4 hoeken plakt, boven alle blokken. 5 vormen (rechthoek, afgerond, cirkel, ster, kaartje), draaihoek, schaal, per-hoek border-radius en eigen URL.

Bestaande blokken slepen tussen kolommen en rijen

Heb je een blok al geplaatst en wil je het verplaatsen? Sleep het blok naar een andere kolom of rij — het verschijnt achteraan in de doel-cel en blijft geselecteerd zodat de inspector mee opent. Het bron-blok wordt half-transparant tijdens het slepen, de doel-cel kleurt blauw op.

Achtergrond: kleur, foto, bibliotheek of patroon

Klik op de 🎨 Achtergrond-knop in de toolbar (banner-niveau) of bij elke rij. Je krijgt 4 modi:

• 🎨 Kleur — vlakke effen kleur
• 🖼️ Foto — upload of kies uit je bibliotheek (de Media-Library heeft nu ook een prominente "⬆ Nieuwe afbeelding uploaden"-knop). Met vullend / volledig zichtbaar / herhalen modes en een 3×3 focuspunt-grid om de afbeelding precies te positioneren.
• 🌈 Bibliotheek — 30 kant-en-klare gradient-achtergronden (sunset, ocean, brand-blauw, neon-pink, marble, premium-dark, …). Eén klik en ingesteld.
• ▦ Patroon — 12 minimalistische SVG-patronen (stippen, raster, golven, zigzag, kruisjes, …) met kleur en basis-kleur kiezer.

Kleur-waas (overlay): klap "Kleur-waas eroverheen" open en kies een kleur met opacity-slider (0–100%). Handig om je achtergrond donker te maken voor leesbare tekst eroverheen.

Afbeelding-blok: vul de hele blok

In de inspector van een Afbeelding-blok staat de toggle "Vul de hele blok". Aanzetten → de afbeelding vult de volledige kolombreedte en -hoogte met cover-mode. Met hoogte-slider, "vullend" of "volledig zichtbaar" mode, en een 3×3 focuspunt-grid om te bepalen welk deel van de foto centraal staat.

✨ AI tekstverbetering

Naast elk tekstveld (titel, body, knop-label, review-quote, badge-tekst) staat een paarse ✨-knop. Klik → de AI suggereert een verbeterde versie van je tekst, in jouw UI-taal en aangepast aan het veldtype (knop = imperatief en kort, badge = max 14 tekens, etc.). Lege velden worden gevuld met een passende suggestie.

Kleurkiezers — typ direct HEX

Klik op een kleur-swatch → eigen popover opent (geen native OS-kleurkiezer meer die soms RGB-modus toont). Direct:

• HEX-input bovenaan — typ of plak een HEX-code zoals #1B91DA, druk Enter, klaar
• Visuele saturation × value square
• Hue-slider
• 12 preset-kleuren (zwart, wit, brand-blauw, accent-kleuren)

Naast elke swatch staat sowieso al een HEX-tekstinput voor power-users.

Live e-mail rendering — multi-click & selecteerbaar

Drag & Drop banners worden in de e-mail inline als HTML ingebed (niet als PNG). Voordelen voor jou en je ontvangers:

• ✅ Elk blok eigen URL — knop, image en review-link kunnen apart linken
• ✅ Tekst is selecteerbaar / kopieerbaar door ontvanger
• ✅ Werkt zonder image-load — Outlook toont de tekst direct, ook met "show images" uit
• ✅ Toegankelijk voor screen-readers (echte tekst en knoppen)
• ✅ Kleiner berichtformaat (~5 KB i.p.v. 50–200 KB per PNG)

In Outlook Desktop Windows wordt de banner correct getoond als platte tabel (geen @media queries — de Word-render-engine ondersteunt die niet, bekende email-industrie-beperking).

Tips

• Sjablonen: in de toolbar staat een "Sjabloon kiezen"-dropdown met klant-en-klare ontwerpen (Promo met knop, Review uitgelicht, Event-aankondiging, Hero met tekst). Snelste startpunt.
• Sticky preview: tijdens het bewerken van blok-eigenschappen blijven toolbar en live banner aan de top staan — je ziet wijzigingen direct.
• Vervaging in moderne mailclients: fade-effecten op afbeeldingen werken in Apple Mail, Gmail web en ProtonMail. Outlook desktop toont de afbeelding vol (geen fade).
• Mobile-versie: in de Drag & Drop tab kun je via de toggle 🖥️ Desktop ↔ 📱 Mobiel een aparte mobile-banner samenstellen. Tip: gebruik "Kopieer desktop-blokken" als startpunt.

Veelgemaakte fouten

• "Mijn afbeelding past niet" — gebruik de Bijsnijden-knop direct na upload (verschijnt automatisch) en kies "680×120 (banner)" als verhouding. Of gebruik "Vul de hele blok" met focuspunt voor automatisch passend.
• "De badge valt over mijn tekst" — pas de offset-X en -Y sliders aan; offset is in pixels vanaf de gekozen hoek. Range 0–600px (X) en 0–240px (Y).
• "Mijn klikken op een blok opent een externe link in plaats van te selecteren" — opgelost vanaf juni 2026: clicks in de editor selecteren altijd het blok, externe links werken alleen in de live e-mail.