Lounge Newsletter Engine Help Guide
A visual tool for composing the monthly DL/Members Lounge newsletter. Build, preview, and export Mailchimp-ready email HTML without writing any code.
Overview
The Email Builder lets you assemble a newsletter from pre-designed content blocks, fill in copy and images, preview how it looks on desktop and mobile, and export clean table-based HTML ready to paste into Mailchimp.
Every newsletter shares the same fixed structure at the top (DL header image, gold bar, intro section). These are always present and just need their text and image updated each month. Below that, you build the body of the newsletter by adding content blocks from the palette.
The tool connects to Cloudinary (DL's image hosting platform) to upload, crop and serve all images. You'll need to be connected to the internet to upload images.
The Interface
The builder is split into three panels:
| Panel | What it does |
|---|---|
| ① Block Palette | Lists all available content block types. Click any to add it to the bottom of the newsletter. |
| ② Canvas | Live preview of the email. Click any block to select it. Use the ↑↓ arrows on selected blocks to reorder, or the × to remove. |
| ③ Properties Panel | Shows the editable fields for the currently selected block: copy, images, links, alignment, etc. |
Top Bar
The top bar contains quick-action buttons:
| Button | Action |
|---|---|
| Opens this help guide in a new tab | |
| Clears all content blocks (does not reset fixed sections) | |
| Load a previously saved draft | |
| Save the current newsletter as a named draft | |
| Export a PDF screenshot of the current canvas | |
| Export HTML ↗ | Opens the HTML export modal. Copy the code and paste into Mailchimp. |
Quick Start
Update the Gold Bar
Click the gold bar in the canvas. In the Properties panel, update the Date (left) field to the current month, e.g. May 2026.
Update the Intro section
Click the intro block. Set the Inbox Preview text (shown next to the subject line in email clients), update the title, body text, and upload a new intro image.
Add content blocks
Click block types from the palette on the left to add them. Each click adds one block to the bottom of the newsletter.
Fill in each block
Click a block on the canvas to select it, then fill in the copy and images in the Properties panel on the right.
Preview on mobile
Click Mobile in the view toggle above the canvas to check how the newsletter looks on a phone screen.
Save your draft
Click the 💾 save icon and give the draft a name. Drafts are stored in your browser.
Export to Mailchimp
Click Export HTML ↗, then Copy to Clipboard. Paste the code into Mailchimp's custom HTML block.
Fixed Blocks
Three sections at the top of every newsletter are fixed. They're always there, always in the same order. You can't remove or reorder them, but you can edit their content by clicking them on the canvas.
Header
The dark DL/Members banner image at the very top. This is locked and never changes. No editable properties.
Gold Bar
The gold bar beneath the header has two editable fields:
- Date (left): The current month, e.g.
April 2026. This is the only thing that typically changes month to month. - Note (right): A short mobile-reading hint. Default: "Links in this email work best when opened on your phone". On mobile, this wraps to two lines.
Intro
The editorial intro section with the following editable fields:
- Inbox Preview: A short summary (50-90 characters) shown next to the subject line in email clients before the email is opened. Set this before exporting.
- Title: The section label in ArtCompanyMono gold font.
- Body text: The main intro paragraph. Supports bold, italic, underline, links and lists via the rich text toolbar.
- Image: A full-width editorial image (or animated GIF, see GIF Builder). Two crops required: desktop (556×320) and mobile (331×320).
- Body text (below image): Optional secondary paragraph shown below the image.
The intro image is the most visually prominent element in the newsletter. Use a high-quality editorial image that works cropped at a wide landscape ratio.
Adding Content Blocks
Content blocks make up the body of the newsletter. They appear in the Block Palette on the left, grouped by category.
Click a block type to add it
Each click appends one block to the bottom of the newsletter. Add as many as you need.
Reorder blocks
When a block is selected on the canvas, use the ↑ and ↓ arrows that appear at its top-right corner to move it up or down.
Remove a block
Click the × button at the top-right of the selected block to delete it. This cannot be undone.
Clicking the 🗑 trash icon in the top bar removes all content blocks at once. Fixed blocks (header, gold bar, intro) are not affected.
Block Types
Each block type is designed for a specific content format. Here's a guide to all available blocks:
Article
Heading, body text, and an optional image below. The gold left-border runs alongside the text. Good for news items, announcements, and general editorial content.
Image + Text
Full-width image at the top with a body text block below it (gold left-border). Use for visual stories where the image leads.
Feature (Text + Image)
A coloured block (teal or gold) with a title, body text, and image. Full-bleed on mobile. Two colour variants available.
Feature + Button
Like Feature, but adds a CTA button and side-by-side image. Full-bleed on mobile with no side margins. One line of space separates body text and button on mobile.
Lead Event
Prominent event listing with image, title, header, body text and a CTA button. Use for the headline event of the month.
Offers
Three offer items shown side-by-side (image + 4-line text header). On mobile, the image appears to the left of the text. Maximum 4 lines of text per item.
Grid 2
Two-column grid. Each cell has an image, title/venue/date/details field, and rich body text. Warning icon appears if text may overflow on mobile. Keep to 4 lines maximum.
Grid 4
Four-column grid for events or offers. Same fields as Grid 2. Always test on mobile: content must fit within 4 lines per cell.
Image + Title + Text
Full-width image followed by a title and body text with gold left-border. Good for feature stories.
Title + Text + Image
Title and body text with gold left-border, followed by a full-width image below. Reverse of Image + Title + Text.
Button
A standalone CTA button with two alignment options. Buttons are always left-aligned on mobile regardless of the alignment setting.
Blank Space
Adds a fixed vertical gap (44px) between blocks. Use to add breathing room between sections.
Renew
A pre-designed membership renewal prompt with customisable body text and button. Uses the standard editorial layout with gold left-border.
Feedback
A pre-designed member feedback request block with body text and CTA button.
Editing Properties
Click any block on the canvas to select it. Its editable fields will appear in the Properties panel on the right.
Text fields
Plain text fields use a simple input or textarea. Type directly into them and the canvas updates live.
Rich text fields
Body text fields use a rich text editor with a small toolbar. Available formatting:
- B: Bold
- I: Italic
- U: Underline
- 🔗: Insert hyperlink
- Bullet list / Numbered list
Image fields
Click the ↑ Upload (Desktop + Mobile) button. This opens the Cloudinary upload widget, then a two-step cropping tool. See Desktop & Mobile Crops for details.
Link fields
Paste the full URL including https://. Leave blank to disable the link.
The canvas updates in real time as you type. No need to press save or confirm to see changes reflected.
Uploading Images
All images in the newsletter are hosted on Cloudinary. When you click an upload button, the following happens:
Cloudinary upload widget opens
Drag and drop your image file, or click to browse. Only local file upload is supported (no URL or social imports). Images are uploaded to the DL newsletter folder automatically.
Desktop crop (Step 1 of 2)
A crop tool opens at a 556×320 (1.74:1) aspect ratio. Drag and zoom to frame the image as you'd like it to appear on desktop. Click Next: Mobile Crop →.
Mobile crop (Step 2 of 2)
The crop tool switches to a 331×320 (1.03:1 aspect ratio, nearly square). Re-frame for mobile. Click Save & Close.
The tool stores two separate crop URLs (desktop and mobile) so the image always looks intentional at both sizes.
Use high-resolution source images (at least 1200px wide) for best results. Low-resolution images will look blurry on Retina/HiDPI screens.
Desktop & Mobile Crops
Every image in the newsletter has two crops: desktop and mobile. This ensures the image is framed correctly at both sizes without distortion or unwanted cropping.
| Crop | Dimensions | Aspect ratio | Notes |
|---|---|---|---|
| Desktop | 556 × 320px | 1.74 : 1 (wide landscape) | Shown on screens wider than 600px |
| Mobile | 331 × 320px | 1.03 : 1 (nearly square) | Shown on screens 600px and narrower |
For portraits or images where the subject is centred, the desktop and mobile crops will be almost identical. For landscape scenes or images with subjects to one side, adjust the mobile crop to keep the key subject visible.
GIF Builder
The intro image supports animated GIFs. Instead of uploading a single still image, you can upload 2–8 individual frames and the tool will assemble them into an animated GIF and upload it to Cloudinary automatically.
Switch to GIF mode
Click the Intro fixed block. In the Properties panel under Image, click the GIF toggle button.
Upload your first frame
Click ↑ Upload (Desktop + Mobile) on Frame 1. The standard two-step crop flow runs: desktop (556×320) then mobile (331×320). Each frame must be cropped individually.
Add more frames
Click + Add Frame to add additional frames. You can have up to 8 frames. Each frame shows a thumbnail preview after uploading. Click ✓ Replace Frame to swap a frame out.
Set the frame speed
Use the Frame speed slider to control how long each frame is shown. Range: 100ms (fast) to 2000ms (slow). Default is 500ms (half a second per frame).
Build & Upload
Click ▶ Build & Upload GIF. The tool creates two GIFs: desktop (556×320) and mobile (331×320), and uploads both to Cloudinary. This may take 10-30 seconds. The intro image preview will update automatically when done.
The GIF uses the same desktop/mobile crop mechanism as still images. Each frame's desktop crop becomes one GIF frame in the desktop version; each mobile crop becomes a frame in the mobile version. If a frame has no mobile crop, the desktop crop is used as a fallback.
GIFs with many frames or high-resolution source images can be large in file size. Keep animated GIFs to 3–5 frames where possible, and aim to keep the final file under 2MB for email delivery.
Mobile Preview
Click Mobile in the view toggle above the canvas to see how the newsletter renders on a phone screen (375px wide, standard iPhone width).
Key differences in mobile view:
- The email fills the full canvas width (no side margins)
- Feature blocks become full-bleed (edge to edge, no white side padding)
- The intro image switches to the mobile crop
- The gold bar note wraps to two lines
- Buttons are always left-aligned
- Offer images appear side-by-side with text (not stacked)
- The gold left-border on article/intro blocks is hidden on mobile
Always check mobile view before exporting. The majority of newsletter opens happen on mobile devices.
Saving Drafts
Drafts are saved in your browser's local storage and persist between sessions on the same device and browser.
Save a draft
Click the 💾 save icon
In the top bar, click the floppy disk icon.
Enter a name
Give the draft a descriptive name, e.g. May 2026 Newsletter. Optionally add notes.
Click Save
The draft is stored instantly.
Load a draft
Click the 📁 open icon in the top bar to see a list of all saved drafts. Click any draft to load it. This will replace the current canvas content.
Drafts are stored in browser local storage. Clearing your browser data will delete them. For long-term backup, export the HTML and keep a copy.
Exporting HTML
When the newsletter is ready, click Export HTML ↗ in the top bar.
The export modal opens
A text area shows the complete, production-ready HTML: table-based, inline styles, Mailchimp-compatible.
Click Copy to Clipboard
The full HTML is copied. A confirmation tick appears.
Paste into Mailchimp
In Mailchimp, create or edit a campaign. Add a Code block and paste the HTML. The newsletter will render exactly as shown in the builder preview.
The exported HTML includes @font-face declarations for AtlasGrotesk and ArtCompanyMono loaded from Cloudinary, dark mode overrides, and mobile media queries. All images are served directly from Cloudinary CDN URLs with no additional asset hosting needed.
PDF Export
Click the PDF icon in the top bar to download a PDF screenshot of the current canvas view. Useful for stakeholder sign-off. Note: this is a visual screenshot, not a print-quality PDF.
Tips & Best Practices
Copy
- Keep subject lines and intro text concise. Most opens happen on mobile with limited screen space.
- Grid 2 and Grid 4 title/venue/date/details fields must fit on 4 lines maximum on mobile (the yellow ⚠ warning in the properties panel is a reminder).
- Button labels should be action-oriented and short: Book Now, Claim Offer, Get Directions.
Images
- Use JPEG for photography, PNG for graphics with transparency.
- Upload source images at least 1200px wide before cropping.
- For the intro image, choose something that works at both a wide landscape crop (desktop) and a near-square crop (mobile).
- Offers block images display at 165px wide × 100px tall on mobile. Choose images with a clear, recognisable subject at that size.
Layout
- Start with the highest-priority content at the top. Many readers won't scroll.
- Use Blank Space blocks to create visual breathing room between sections.
- Don't overload the newsletter. 4-6 content blocks is a good maximum for engagement.
- Always preview on mobile before exporting.
Monthly workflow
- Load last month's draft as a starting point.
- Update the gold bar date.
- Replace the intro image and update intro copy.
- Swap out block content: update copy, replace images.
- Add or remove blocks as needed.
- Preview on mobile.
- Save draft with new name.
- Export HTML → paste into Mailchimp.
Image Size Reference
| Location | Desktop | Mobile | Notes |
|---|---|---|---|
| Intro image | 556 × 320px | 331 × 320px | Two-step crop tool. Supports still or animated GIF. |
| Article image | 556px wide | Full width | Variable height. Single crop (desktop only). |
| Feature block image | Full width | Full width | Single crop, displayed full-bleed. |
| Feature + Button image | 220 × 265px | Full width (stacked) | Side panel on desktop, full-width on mobile. |
| Lead Event image | 556px wide | Full width | Variable height. |
| Offers image | 176 × 116px | 165 × 100px | Two-step crop. Side-by-side with text on mobile. |
| Grid 2 image | 258px wide × 190px | Full width | Single crop. |
| Grid 4 image | ~120px wide | Full width | Single crop. Keep subjects centred. |