Who This Is For / When to Use
Use the Email Builder appearance settings if you want to:
Customize the visual design of email templates or campaigns
Adjust text styles, backgrounds, and spacing
Add preview-in-browser links
Optimize emails for mobile devices
Apply custom CSS for advanced styling
Open the Email Builder
Go to Marketing → Emails.
Select Campaigns or Templates.
Create or Open a Template
Click + New to create a template, or open an existing one.
The Email Builder opens automatically.
Email Builder Layout Overview
The builder includes:
Elements panel (left)
Canvas (center)
Formatting toolbar (top)
Add and Edit Text Elements
Drag Text from the Elements panel onto the canvas.
Click the text block to open editing options.
Change Background Color of Text Blocks
Select a text element.
Open Edit → Background Color.
Choose a color or add a custom HEX value.
Apply the color.
Background colors apply to text blocks and footers only.
Use the Color Picker
Choose preset colors or add custom HEX values.
Colors apply to text, backgrounds, and buttons.
Preview Emails in a Browser
What the Preview in Browser Feature Does
The Preview in Browser link lets recipients open a web-hosted version of the email.
Included by default in blank templates
Can be added manually to any template or campaign
Add a Preview URL Element
Drag Preview URL from the Elements panel.
Place it anywhere in the email.
Configure the Preview URL Link
Select the Preview URL text.
Click Link in the toolbar.
Choose Preview in Browser from custom values.
Save the link.
How Preview Links Appear to Recipients
Clicking the preview link opens the email in a browser
Uses a secure preview domain
Displays the email exactly as sent
Style Buttons and Dividers
Button Styling
Customize background color, text color, size, and alignment
Buttons should be large enough for mobile tapping
Divider Styling
Adjust thickness, spacing, and color
Use dividers to visually separate content sections
Use Custom CSS (Advanced)
The Custom CSS section allows advanced styling control.
Requires knowledge of email-safe CSS
Rendering varies by email client
Always test before sending
Recommended resources:
caniemail.com
Litmus
CSS-Tricks (email-specific guides)
Mobile Formatting Settings
The Mobile Formatting panel controls how elements display on mobile devices.
You can customize:
Font size
Text alignment
Line height
Visibility by element type
Best Practices for Mobile Email Styling
Use a single-column layout
Keep text short and scannable
Use readable font sizes (≈14px body, 22px+ headings)
Make buttons touch-friendly (minimum 44×44px)
Include white space for readability
Always preview on mobile before sending
Common Issues and Fixes
Background color not applying
→ Only text-based elements support background colors.
Email looks different on mobile
→ Adjust settings in Mobile Formatting.
Preview link not working
→ Ensure the link uses Preview in Browser custom value.
CSS not rendering correctly
→ Email clients have limited CSS support; test across clients.
FAQ
Can I add a preview-in-browser link anywhere?
Yes. Use the Preview URL element and place it anywhere in the email.
Do background colors work on all elements?
No. Background colors apply only to text blocks and footers.
Can I control mobile font sizes separately?
Yes. Use the Mobile Formatting panel to adjust fonts, alignment, and spacing for mobile.
Is Custom CSS recommended?
Only for advanced users. Email clients render CSS differently, so testing is required.
Will emails look the same in all inboxes?
Not always. Email clients vary in rendering, which is why previewing and testing are important.