In Salesforce Marketing Cloud (SFMC) Email Studio, Layouts are the structural blueprints used to arrange your content blocks—images, text, buttons, and more. These layouts are essential for designing emails that are responsive, visually appealing, and easy to build.
This blog explores each layout type in detail with visual references (from actual SFMC UI), use cases, and how to combine them with AMPscript, HTML, buttons, and CSS for maximum design flexibility.
🔹 Empty Layouts
These are blank structures ranging from one to five columns, giving you total flexibility.
✅ Use Cases:
- 1 Column: Full-width hero, banner, newsletter intro
- 2-5 Columns: Product features, side-by-side comparisons, testimonials
💡 Example:
<table>
<tr>
<td><img src="logo.png"></td>
<td><h1>Welcome</h1></td>
</tr>
</table>🔹 Hero Layouts
Hero layouts highlight a main visual or call to action (CTA) block.
✅ Use Cases:
- Event announcements
- Promotional banners
- Top section of any campaign
<a href="https://sale.com" style="background:#ff6600;color:#fff;padding:12px 20px;text-decoration:none;">Shop Now</a>🔹 One Column Layouts
These are single-column blocks pre-formatted with image, text, and CTA button.
✅ Use Cases:
- Simple announcements
- Newsletters
- Blog updates
🔹 Two Column Layouts
Display paired content side-by-side for balance and symmetry.
✅ Use Cases:
- Featured products
- Benefits vs Features
- Event schedule + location
🔹 More Two Column + Text/Image Variants
✅ Use Cases:
- Left image, right text
- Text followed by image
- Gallery format for visuals
🔹 Three Column Layouts
Use these layouts when presenting 3 key services, pricing plans, or comparison grids.
🧠 Best Practice Combinations
- Header: One Column Layout with logo, nav links
- Hero: Hero Image + Content (vertical)
- Body: Mix of Two/Three Columns, 50/50 Blocks
- CTA: Use Text + Button (centered)
- Footer: One Column Layout + social links + unsubscribe
🔧 Tech Integration Examples
AMPscript:
%%[ SET @firstname = FirstName ]%%
<p>Hello %%=v(@firstname)=%%, enjoy your exclusive offers!</p>REST API:
POST /messaging/v1/email/messages
{
"definitionKey": "WelcomeEmail_Layout2Col",
"recipients": [
{"contactKey": "12345", "to": "test@example.com"}
]
}