Example Design: Clean and Professional

In this example we’ll walk you through creating a clean, professional design with a single column, plenty of white space, and a calm look and feel. This type of newsletter is perfect for sharing updates, news, or featured products.

Here’s the newsletter we’ll be building in this tutorial:

We’ll use a centered logo, a clear heading, clean content blocks, and a simple footer. No technical knowledge is required — everything is built with the drag-and-drop editor using a straightforward single-column structure. Ideal for quickly creating a professional newsletter that also looks great on mobile.

Step 1: General settings

Click the Settings tab. Here you define the basics of your newsletter, such as colors, preheader text, and fonts.

Preheader (invisible preview text)

The preheader is invisible in the newsletter itself, but is often shown in the inbox just below the subject line. It gives readers extra context before they open your email.

We’ll leave the preheader for now and come back to it in Step 4.

Width

The maximum width is set to 600 pixels by default. This is a safe choice: wide enough for desktop, but narrow enough to scale well on mobile. It also prevents horizontal scrolling in email clients like Outlook’s preview pane.

Colors

• Background color: white
• Block color: white or transparent
• Button color: dark gray (#2E2E2E)
• Link color: dark gray (#2E2E2E)

Fonts

For headings, paragraphs, and button text we’re using the Roboto font. It’s modern, clean, and highly readable. Since Roboto is not a web safe font like Arial or Verdana, the editor automatically embeds it in your newsletter. This ensures it displays correctly in most modern email clients.

Keep in mind: not every email client supports embedded fonts. In that case, a fallback font is used automatically. You don’t have to do anything — the fallback is set for you.

If you prefer to play it safe, choose a web safe font like Arial or Verdana. These are supported on virtually all devices.

Recommended font sizes:

• Heading 1: 24 px, letter spacing 2
• Heading 2: 20 px
• Paragraph: 16 px
• Button text: 16 px
• Line height: 1.5

Step 2: Set up the structure

Next, define the layout of your newsletter. We’ll use only single-column structures, which ensures everything is neatly stacked for easy reading on both desktop and mobile.

Click the Structures tab and drag these onto the canvas, in order:

1. A structure for the logo at the top
2. A structure for the headline
3. Two structures for content blocks
4. A structure for the footer

Now the “empty slots” are ready to be filled with content blocks. By setting up the structure first, you stay organized and avoid having to move or remove blocks later.

Step 3: Add blocks

With the structure in place, you can start adding blocks to each section of your newsletter. Click the Content tab.

You can drag blocks into the structure, or use the faster way: click the plus icon inside a structure to add a block directly.

Logo and headline

Start with an image block in the top structure. This will be your logo.

Click the image block to open the file manager. Upload or select your logo. By default it’s centered, which you can keep as is.

In the settings panel, add a link, alt text, and set the logo width.

A good width for a centered logo in a 600 px newsletter is around 200–300 px. In this example we use 300 px.

Next, drag a text block below for the headline. Type your title, for example: “Because plastic is so last season”. Set it as Heading 1 and keep the alignment centered for a balanced look.

If you want a short subtitle, add another text block below it.

Content blocks

For each of the two content structures, add the following blocks in order:

• Image block
• Text block (title or short description)
• Button block

Example of one content block:

Image: an illustration or product photo

Title: The bag that carries it all. Except responsibility.

Text: Our Classic Kraft is 100% recyclable, 200% stylish. Perfect for anyone who wants to carry a paper lunch — or half a supermarket — with flair.

Button: Discover more

In the button settings, set the link and adjust styling. Here we set the border radius to 0, making the button rectangular, which fits the style.

Add a footer

Finally, add a clean footer in a single structure with multiple blocks, so everything stays centered and works well on mobile.

For all footer text blocks, set the font size to 12 and alignment to center.

Social media icons

Drag a social block into the footer. In the settings panel:

• Set Style to Simple black
• Keep Size at 35
• Select the networks you want (e.g. Facebook, Instagram, LinkedIn)
• Click each icon to add the correct URL

Company details

Add a text block below the social icons. Enter your company name and address, for example:

Contact details

Add another text block with your contact information, for example:

info@kraftique.eu – Our website

Make both items bold and then clickable:

• Select info@kraftique.eu, click the link icon, and enter mailto:info@kraftique.eu . Click Save.
• Select Our website, click the link icon, and enter the URL, for example: https://www.kraftique.eu . Click Save.

Add an unsubscribe link

Add one more text block for the unsubscribe link, for example:

Want to stop receiving these emails? Click here to unsubscribe.

Select the word here, make it bold, click the link icon, and select Unsubscribe link from the list of links. Click Save to add it.

Step 4: Review and finish

Your newsletter is now built and filled with content — time to check everything carefully before sending. This final step makes sure your newsletter looks polished, reads well on all devices, and is technically ready.

Preheader

Now that the content is complete, it’s a good moment to fill in the preheader.

Click the Settings tab. Next to Preheader you’ll see a small AI icon. Click it, and ChatGPT automatically scans your newsletter and suggests a suitable preheader. For us, it generated:

Discover our stylish, sustainable bags — perfect for any occasion! 🌿👜

We were happy with this suggestion and kept it. Of course, you can edit the text or write your own if you prefer.

Spacing between blocks

Check whether there is enough white space between blocks. For example, add some extra space above and below buttons so they don’t touch other elements. Around 20 px usually works well.

Check text styling

Make sure fonts and colors are consistent. Are all headings styled the same? Are paragraphs properly aligned under their headings? Do links stand out clearly without competing with buttons?

Preview your newsletter

Click Check Newsletter at the top. You’ll see a preview of your newsletter on desktop and mobile. Keep in mind the exact rendering can vary by client — the preview is a good indication, not a guarantee.

Send a test and check recommendations

From the same window, you can send a test newsletter to yourself to see how it looks in your own inbox.

On the Recommendations tab you’ll also find technical checks that help ensure your newsletter is delivered successfully.