Learning Objective
By the end of this guide, you'll know how to open a campaign sequence, enable Code view, add custom HTML to your email step, and follow email HTML best practices to ensure consistent rendering across email clients.
Why This Matters
lemlist's templates are HTML-friendly, giving you complete control over email design and functionality. Custom HTML lets you:
Create advanced layouts beyond standard editor capabilities
Implement precise branding with custom styles and formatting
Add complex elements like tables, buttons, or responsive designs
Optimize for specific email clients with tailored code
Prerequisites
Before adding HTML:
You have a campaign with a sequence ready for editing
You understand basic HTML (or are willing to learn—resources provided below)
You're comfortable editing code or have tested HTML ready to paste
Core Lesson: Add Custom HTML
Step 1: Open your campaign
In the left sidebar, click Campaigns, then select the campaign you want to edit from the list.
Step 2: Enable Code view in an email step
In your campaign Sequence, click the email step you want to edit. In the email editor toolbar, click Code view to switch to the HTML editor. If you don’t see it, click the three dots menu to reveal more options.
Paste or write your HTML, then continue editing your content as needed.
HTML Best Practices for Email
Stick to tables for layout
Use HTML <table> tags for structuring your email to ensure consistent rendering across email clients (Outlook, Gmail, etc.).
Use inline CSS
Many email clients strip out embedded <style> tags. Use inline CSS for styling elements.
Example:
<p style="color: #333; font-size: 16px;">Your text here</p>
Use web-safe fonts
Stick to fonts like Arial, Times New Roman, or Verdana to ensure compatibility. For custom fonts, include fallback options.
Optimize for mobile
Add responsive design elements to ensure your email looks great on all devices.
Example:
<meta name="viewport" content="width=device-width, initial-scale=1.0">
Limit image sizes
Keep images optimized for faster loading. Use ALT text for accessibility and ensure critical information isn't solely in images.
Test your email
Test your HTML email in multiple clients (Gmail, Outlook, Yahoo, etc.) to check for consistent rendering.
Avoid JavaScript and forms
Most email clients block JavaScript and forms for security reasons. Stick to static, visually appealing content.
Include a clear CTA
Use buttons for your call-to-action with clickable links.
Example:
<a href="<https://example.com>" style="display:inline-block; background-color:#ff6f61; color:white; padding:10px 20px; text-decoration:none;">Click Me</a>
HTML Resources
If you're new to HTML, use these resources:
Troubleshooting
Issue: HTML doesn't render correctly in some email clients
Fix: Use tables for layout and inline CSS. Avoid complex CSS properties that aren't widely supported (like flexbox or grid).
Issue: Images don't display
Fix: Ensure image URLs are publicly accessible. Use absolute URLs (e.g., https://example.com/image.png), not relative paths.
Issue: CTA button doesn't work
Fix: Verify the href link is correct. Test the button in different email clients—some may require additional inline styles for proper display.
Optimization Tips
Test thoroughly: Always send test emails to yourself and check rendering in Gmail, Outlook, Apple Mail, and mobile clients before launching.
Keep it simple: Complex HTML increases the chance of rendering issues. Stick to basic tables, inline styles, and simple layouts.
Use email-safe code: Avoid modern CSS features (flexbox, grid, transforms) that aren't supported in email clients.
Validate your HTML: Use an HTML validator to check for syntax errors before pasting into lemlist.
Create templates: Save frequently used HTML structures as templates to speed up future campaigns.