**Email -> Design** in your admin dashboard. Templates decide what your mail says. This screen decides what it looks like: the logo, the colours, the spacing, the columns, the buttons and the footer. The two are kept apart on purpose, so you write the copy once and it appears in whatever frame you designed, in all four languages. ## Layouts A layout is one design. You can have as many as you like. - One of them is your **default**. Every mail uses it unless something points somewhere else. - Any transactional email can be pointed at a different layout, on the Templates screen. Payout mail in one frame, the welcome mail in another. - Any campaign template can name its own layout too, so a promo can be wider and louder than your everyday mail. You start from one of three: **Current look** (the dark panel your mail already used), **Light and clean** (a white card on a grey page) or **Minimal text** (no frame at all, reads like a personal message). ## Blocks A layout is a stack of rows. Each row holds one to four columns, and each column holds blocks: | Block | What it is | | --------------- | -------------------------------------------------------------------------- | | Body copy | Where the text from Templates lands. Required, exactly once | | Logo | Your uploaded logo, with your name as text if you have not uploaded one | | Text | Rich text with its own size, colour, weight and letter spacing | | Image | Any image, full width or fixed, optionally a link | | Button | A button you write yourself | | Template button | The button that comes from the template, hidden when the template has none | | Divider | A rule, with thickness, width, style and spacing | | Spacer | Vertical space | | Social links | Up to eight links to your channels | | Preview text | The hidden line the inbox shows next to the subject | | HTML | Your own markup, for anything the blocks do not cover | Per row you set the background, padding on all four sides, border, corner radius and the gap between columns. Columns can be weighted, so a 1 and a 2 makes a narrow column beside one twice its width. Rows can be moved up and down or duplicated; duplicating leaves out the blocks that are only allowed once, like the body copy. The screen is laid out as three panes: the structure of the layout on the left, the live preview in the middle, and the settings for whatever you have selected on the right. Click a row or a block in the structure and its settings appear on the right, so the preview stays visible while you edit. ## Width and page The layout settings decide how wide the mail is drawn. - **Content width: Fixed** is the classic mail column. You give it a number of pixels, between 480 and 800, and it sits centred with the page colour either side of it. This is what a newsletter wants. - **Content width: Full width** gives up the column. The mail takes the whole width of whatever it is read in, and the page padding on the sides is the only margin it has. This is what a receipt or a notification usually wants, and what people mean when they say the mail should not look like a leaflet. Page padding top, bottom and sides applies either way, so a full width mail still keeps its distance from the edges. Columns in a full width row are divided by their weights as percentages instead of pixels, and still stack under each other on a phone. ## Draft and published Saving does not change what your traders receive. Sending only ever uses the **published** version, so you can leave a layout half finished without a live payout mail picking it up. Publish when you are ready, and **Discard draft** throws your changes away and goes back to what is live. :::warning Send yourself a test The preview on this screen is rendered by a browser. Outlook on Windows is not a browser: it renders mail with the Word engine. Use **Send test** before you publish anything you care about. ::: ## What email clients will and will not do Email is not the web, and the editor is shaped by that rather than pretending otherwise. - **Corner radius disappears in Outlook on Windows.** Your buttons and panels will have square corners there. Everything else about them is correct. - **Columns stack on narrow screens** everywhere except Outlook, which keeps them side by side. - **Fonts are a fixed list.** Outlook and Gmail ignore custom web fonts, so a bundled font would look right for some traders and wrong for others. - **Gmail cuts a mail off past 102 KB** and hides everything after the cut. The editor shows the size and warns you as you approach it. - **Images are blocked by default in Outlook.** Always fill in the alt text, and do not put anything essential in an image alone. - Logos uploaded under Branding are stored as WebP, which does not render in Outlook. A PNG copy is made automatically for your mail, so you do not have to think about it. ## HTML mode If you have a mail design from an agency, switch the editor to **HTML** and paste it in. Two rules: - It must contain `{{content}}` where the body copy goes. - Your CSS is inlined when you publish, and your `