How to create a responsive email with the email builder? – Webmecanik

The email builder allows you to design emails that adapt to all reading devices (computers, tablets, and smartphones) through intuitive management of sections and components.

How responsive design works: vertically stacking blocks 📱

On a computer screen, your elements can be displayed side by side in two or three columns. On a smartphone screen, responsive display automatically adapts your content: columns and blocks are rearranged on top of one another to form a single vertical column, ensuring optimal readability without having to zoom in.

Insert visuals through the Image Library 🖼️

To add your images while maintaining a fluid layout:

Click the desired Image block in your email to display the Image settings side panel.
Click the Add an image button.
The Image Library window opens directly over the editor.
Upload your file from your computer or select an existing image from your folders.

💡 Tip: Remember to always fill in the Alt text. field to ensure your messages are accessible if your recipient's email client blocks images from loading automatically.

Configure multi-column sections and display order (LTR / RTL) ⚙️

When you design sections made up of multiple columns, you control the order in which the blocks stack on mobile.

1. Select the section

Drag and drop a 2- or 3-column section into your email.
Insert your content blocks (text, button, image) into each column.
Click just to the left or right of the blocks to select the section structure and open its settings.

2. Set the mobile reading direction

In the section options, locate the direction setting:

LTR (Left To Right): This is the default setting. The content in the left column on desktop is displayed first (at the top) on mobile, followed by the content in the right column below.
RTL (Right To Left): The content in the right column on desktop moves to the top on mobile, and the content in the left column is displayed second (at the bottom).

🔄 This setting is ideal for alternating “zigzag” layouts (image on the left / text on the right, then text on the left / image on the right), allowing you to consistently keep the image above the text on mobile.

Preview the desktop and mobile rendering 💻

To make sure your layout is readable before sending:

Click the Preview button in the editor's top bar.
Switch between the Desktop and Mobile views with one click using the dedicated icons.
Check the vertical arrangement of your blocks and adjust the LTR/RTL option for your sections if necessary.