A24
Promotional Email Layout
two column Image
Two-Column Components
Discover two-column layouts from top brands. Perfect for newsletters, promotional emails, and transactional messages.
37 components
Browse by
Two-Column Email Design Guide
Two-column layouts offer versatility and visual interest while maintaining good mobile compatibility. This balanced approach allows you to present complementary content side by side or create dynamic split designs.
Essential Elements
- Balanced layout: Harmonious distribution of content across columns
- Clear purpose: Each column serves a distinct function
- Responsive behavior: Stacks gracefully to single column on mobile
- Visual hierarchy: Typography and spacing guide the reader’s eye
Design Considerations
Mobile Optimization
Two-column layouts must work seamlessly on mobile:
- Stack columns vertically on smaller screens
- Consider content priority when determining stack order
- Maintain readability when columns become full-width
- Ensure CTAs remain prominent after stacking
Content Strategy
Your two-column email should use the layout purposefully:
- Image-text splits for product features or announcements
- Complementary content that benefits from side-by-side comparison
- Equal columns for showcasing two offerings or categories
- Asymmetric layouts with primary and secondary content
Two-Column Types
Browse the components above to see different approaches:
- 50/50 split: Equal columns for balanced content presentation
- 60/40 split: Emphasis on primary content with supporting sidebar
- Image-text split: Visual on one side, content on the other
- Product comparison: Two offerings displayed side by side
- Feature showcase: Alternating image-text for multiple features
Implementation Tips
- Use table-based layouts: Ensures compatibility across email clients
- Set appropriate widths: Common splits are 280/280 or 360/200 in 600px email
- Include mobile stacking: Use media queries for responsive behavior
- Test in Outlook: Desktop Outlook requires special attention for columns
- Mind the gutters: 20-30px spacing between columns for breathing room
Frequently Asked Questions
What is a two column email layout?
A two column layout is a structured email design pattern commonly used for organizing content in email marketing. These components provide tested, responsive structures that work across all major email clients.
How do I copy these two column components to Figma?
Simply click the "Copy Figma Component" button on any component card, then paste it into your Figma file using Cmd+V (Mac) or Ctrl+V (Windows). The component will be ready to customize immediately.
Are two column layouts responsive?
Yes, all two column layouts are fully responsive and optimized for desktop, tablet, and mobile email clients including Gmail, Outlook, and Apple Mail.
Can I mix different layout types in one email?
Absolutely! You can combine multiple layout types within a single email design. Mix two column layouts with other patterns to create unique, engaging email experiences.