👋🏻 Welcome to Newsletter Examples, where I highlight cool sh*t I’m seeing in newsletters that you can borrow for your newsletter.

This week, I’ve asked Jacob Drummond, a talented web developer and writer of Nerdy Housecat, to show us how to design Morning Brew-style sections in Beehiiv.

💥 Shoutout to Matt McGarry’s Newsletter Operator community, where Jacob first posted about this. Reading time: 3 minutes.

Not a subscriber yet? Sign up here.

🙃 A universal pain point

One of the biggest challenges newsletter operators have is designing a professional-looking email. Most writers don’t want to spend their time designing a newsletter, but they want something that looks good.

When I ask them for examples of newsletters they like, many point to Morning Brew. So I decided to write down all the steps it takes to design Morning Brew-style sections.

The Brew’s style looks simple: it’s basically just headline-image-body:

Most people figure all they have to do is add a Beehiiv section and insert a headline, image, and body. But it’s not that simple.

Notice that the headline and body above have 15px horizontal padding, whereas the image spans the full width of the section, beyond the 15px padding.

In-browser, we could apply negative margins to the image. Unfortunately, Gmail and most other email clients don’t support negative margins.

The solution? Create a single visual “section” comprised of three actual Beehiiv sections (headline, image, body):

Don’t worry if it looks bad in the editor. It’ll look good in Beehiiv preview and in the reader’s inbox:

🧠 The Step-by-Step Solution

You can change the padding, border color, border radius, etc., to suit your branding. I’m just doing similar to Morning Brew’s style as an example.

Section 1: Headline

1. Add a new section:

2. Populate your newly-created section with a headline and eyebrow title. Those black headlines should be H2s for SEO. (Your post title is the H1 on the website).

3. Set the section’s inner spacing to be 7px along the top and 15px along the left/right. You can click the inner spacing icon to edit the four spacings independently:

4. Set the top-left and top-right corners to have a 15px radius. Leave the bottom-left and bottom-right at 0px radius:

5. Set the top, right, and left borders to be 1px thick with color #e6e6e6. Set no border along the bottom:

6. If your posts have a background color, pick a readable background color for the section. I chose white:

7. If you preview your post at this point, you should see something like:

Section 2: Image

1. Add a new section below the one you just created, then paste an image into it:

2. We want the image section to blend seamlessly with the headline section above it. To achieve this, set the image section to have a matching background color, no padding, no border radius, and have 1px #e6e6e6 border on the left and right only:

3. If you preview the post again, you should now see something like this:

Section 3: Body

1. Add a third section to contain your prose:

2. The prose section will close out the headline and image sections above it. To achieve this, style it the opposite way to the headline section: matching background color; 15px inner spacing along the left and right sides; 7px inner spacing along the top and bottom; and 1px #e6e6e6 border on the bottom, left, and right.

3. If you preview the post a final time, you should now see something like:

There you have it! A neat Morning Brew-style “section” cobbled together from three Beehiiv editor sections.

Bonus: How to speed up with templates

1. The above process is quite laborious if you do it by hand every time. I recommend saving a Beehiiv template with all the different section styles you use regularly. Then you can duplicate the sections to build new posts:

2. Create a new post based on the above template, then duplicate the sections and drag them around to get the perfect, easy newsletter:

Jacob Drummond is a senior web developer with over a decade of experience delivering advanced, tailored solutions for award-winning UK agencies. He founded the Nerdy Housecat newsletter to help people like you navigate the often-intimidating world of newsletter platforms with confidence. Subscribe today to get short, step-by-step guides delivered to your inbox.

Hope you enjoyed this week’s issue. See ya next week!

☮️ -Brad

P.S. Let me know what you thought about today’s issue. Do you like occasional tutorials like this, or do you prefer my normal breakdowns? Hit reply and tell me, or click the links at the bottom!🙏 

P.P.S. Want me to break down your newsletter? I’m thinking of trying out an occasional sponsored email, where I share my unfiltered views on one reader’s newsletter, publishing the results in here and across my social channels. Let me know if you’re interested!

ICYMI: Links to recent issues

🧊 One man's mission to track Big Tech
🆕 A new model for newsletter launches
🔮 6 newsletter predictions for 2025
📧 What I learned taking Sam Parr’s email copywriting course
📨 The 5 coolest things I saw in newsletters in 2024