Choose
One of the 8 templates, with sample colors and content ready to go.
WEBSITES / EMAIL & WHATSAPP
Email Generator.
From content to HTML email.
Free tools to build HTML emails from 8 templates that work in Gmail and Outlook, and to create WhatsApp links with a message, short link and QR Code.
Visit the websiteemailgenerator.com.br ↗
01 — THE PROJECT
Built to scale deliveries.
Email Generator was born to scale the team's campaign email production. Today it has 8 layout templates, from newsletter to coupon and invitation, that swap the structure without losing the content, in a step-by-step editor in the style of Canva. The preview shows desktop and mobile while you edit and, before you copy, the generator points out what is missing: unsubscribe link, alt text, a button without a link. The HTML works in Gmail and Outlook (VML), ready for the sending platform or to paste straight into Gmail.
The second tool creates WhatsApp links with a formatted message and a chat preview, a short link on its own domain with click counts, and a PNG QR Code.
The landing page presents both with editorial typography: the problem and the solution, what other generators don't do, the 8 templates, the step by step, guides and FAQ. From the landing page to the tools, I designed and coded everything in HTML, CSS and JavaScript, with the link shortener on Netlify Functions.
02 — THE EXPERIENCE
From template to finished HTML.
Fill in
Header, text, button, colors and footer, one panel at a time, with the preview changing as you go.
Copy
After the review warnings, the HTML for the sending platform or the email ready to paste into Gmail.
03 — STYLE GUIDE
The identity, in code.
Typography
Fraunces
Archivo
- Font
- Fraunces
- Weight
- 500
- Size
- 40 px
- Line height
- 110%
Marketing communication, without the boring part.
- Font
- Fraunces
- Weight
- 500
- Size
- 32 px
- Line height
- 115%
Marketing communication, without the boring part.
- Font
- Fraunces
- Weight
- 500
- Size
- 24 px
- Line height
- 120%
Marketing communication, without the boring part.
- Font
- Fraunces
- Weight
- 400
- Use
- Italic
without the boring part.
- Font
- IBM Plex Mono
- Weight
- 500
- Use
- Mono
01 PREVIEW TEXT
- Font
- Archivo
- Weight
- 400
- Size
- 16 px
- Line height
- 155%
Build HTML emails that work in Gmail and Outlook. All in the browser, no sign-up.
Colors
Paper
Ink
Accents
Brand
e.Email Generatore.Email Generatore.Email Generator
Components
Copy HTMLWhatsApp generator
Copy HTMLWhatsApp generatorOpen tool ↗
Copy HTML
EmailWhatsAppDesktop
Include logo at the topInclude logo at the top
EmailDesktop
Tool 01DoneWarningNew
A preview that does not lieSwitch between desktop and mobile before copying.
04 — FINAL DESIGN · LANDING PAGE
The landing page.
05 — FINAL DESIGN · THE APP
The app.
KEEP EXPLORING
Another website, another idea.
Clube de Ouro