How post styling works across email and web | beehiiv Help

How post styling works across email and web

Notice: This article is currently being updated to reflect recent releases. Some steps, options, and/or screenshots shown here may not match what you see in-app. Functionality and behavior may continue to evolve as improvements are rolled out.

Article Contents

Notice: This article covers the Visual Editor, beehiiv's post editing experience. Starting August 3, 2026, all newly created beehiiv workspaces launch directly into the Visual Editor by default. Workspace admins can also switch an existing workspace over to the new experience. Still using the legacy post editor? See Using the legacy post editor for the Write and Style tab navigation instead.

When you publish a post on beehiiv, it can go out as both an email to your subscribers and as a web post on your site. Because email inboxes and websites render content differently, styling your post isn’t one single operation — it comes from two places.

This article explains exactly where each style setting lives, so you always know where to go to get your post looking right.

Quick reference: Email post vs. web post styling

Use this table as a cheat sheet when you’re not sure where a setting lives.


Style Element	Email — where to edit	Web — where to edit
Fonts (headings and body)	Post Builder, click the element	Post Builder, click the element
Background color	Post Builder, click the canvas or background	Website Builder > Post page
Text color	Post Builder, click into the text	Website Builder > Post content block
Link color	Post Builder, click into the text	Website Builder > Post content block
Spacing and borders	Post Builder, click the element	Post Builder, click the element
Post header (title, byline)	Post Builder, click the header	Website Builder > Post page
Comments section	N/A	Website Builder > Post page
Page navigation, footer	N/A	Website Builder > Post page

Email post styling

Your email post design is fully controlled by the Post Builder, directly on the canvas:

Post-level settings: Click the canvas or post background to adjust global settings like colors, typography, spacing, and borders, scoped as Style > Post in the right-hand panel.
Block-level settings: Click any individual content block (images, buttons, quotes, and so on) to style it specifically, scoped to that element in the same panel.

Changes you make in the Post Builder — fonts, spacing, background colors, and more — apply directly to your email post. To confirm how your email will look before sending, use the Preview button in the top-right corner and select Email view, or Send a test email.

Web post styling

Your web post design is controlled by a combination of the Post Builder and the Website Builder Post page.

When a post is published to the web, most of its styling is carried over from the Post Builder automatically. However, three specific style properties are controlled by the Website Builder instead, so that your post always matches the look and feel of the rest of your site:

Background color: Set at the Post page level in the Website Builder.
Text color: Set in the Post content block in the Website Builder.
Link color: Set in the Post content block in the Website Builder.

Everything else inside the Post content block — fonts, spacing, borders, images, buttons, and so on — is pulled directly from the Post Builder. Elements outside the Post content block, such as the post header, comments section, and other page elements, are styled entirely within the Website Builder.

Reminder: If you want your email and web posts to share the same background, text, or link colors, you’ll need to mirror those settings in both the Post Builder and the Website Builder.

Website Builder: Accessing the Post page

Here’s how to find and edit the Post page styling in the Website Builder:

From your beehiiv dashboard, navigate to Website > Builder.
In the left icons menu, click the Pages icon.
Under Dynamic Pages, select the Post page.
Click anywhere on the page background to adjust the background color, or click on the Post content block (the lorem ipsum placeholder text) to adjust text and link colors. Then use the right-hand design panel to make your changes.

Pro Tip: The pages included on your site depend on the choices you made during Website Builder onboarding. If you don’t see a Post page listed under Dynamic Pages, click + Add page to add it.

Adjusting the Post page background color

When setting up or switching your template, your background is controlled by the Background color in your color palette.

To override it for your Post page specifically:

On the Post page in the Website Builder, click anywhere on the background.
In the right design panel, under Fill, click on the info next to Background.
The Background modal will appear beside your design panel.

In the Theme colors tab, you can:

Choose between the colors included in your theme.
Adjust the opacity of your background color.
Click Edit Theme to update the colors of your theme globally.

If you prefer a custom color, click the Custom tab.

You can:

Select a color using the color picker.
Enter a hex code directly.
Access recent colors and colors used elsewhere on the page for reference.

Use the Gradient tab to choose a color gradient for your background.
Use the Media tab to add an image for your background.

You can:

Click Upload an Image to grab an image from your device.
Click Use from library to open your Media Library.
Add a link in the Media URL field for an image hosted elsewhere.

Reminder: The above background styling options will only impact the Web version of your post. The background for the Email version of your post will still pull from the choices you make when you click the post background in the Post Builder. If you wish for the web and email versions of your post to have the same background color, be sure to mirror your color settings in both locations.

Adjusting post content text and link color

Text and link colors for the web version of your post are set within the Post content block.

To update them:

On the Post page in the Website Builder, click on the placeholder post content (lorem ipsum text).
To confirm you’ve selected the right element, open Icons menu > Layers and verify the selected block is labeled Post Content.
In the right design panel, you’ll see options for Text Color and Link Color. Click either to open the color modal.
In the Theme colors tab, you can:

Select between the colors in your theme.
Click Edit Theme to change your theme colors globally.

If you prefer a custom color, click the Custom tab.

You can:

Select a color using the color picker or enter a hex code.
Toggle Inherit Color to Yes pull the color from the parent Post block.

Previewing your web post

There are two ways to preview how your web post will look:

From the Post Builder: Click Preview in the top-right corner and select Web view.
From the Website Builder: Click Publish in the upper-right, then select Preview draft site.

A modal will pop up for you to choose a published post to simulate on your Post page. Select a post, then click Preview.

Note: Only published posts are available to select in the Website Builder preview modal.

Frequently asked questions about post styling Why do my email and web posts look different even though I styled them in the Post Builder?

Your web post pulls background color, text color, and link color from the Website Builder — not the Post Builder. If those three properties look different on your web post, update them directly in the Website Builder on the Post page.

Why does it work this way in beehiiv?

Your website has a global template design that applies across all pages. Keeping background, text, and link colors tied to that template ensures every post automatically matches your homepage, navigation, and other site content — without needing to restyle each post individually.

Can I use a different background color for my web post than my email?

Yes. Your web post background is set independently in the Website Builder, and your email background is set by clicking the post background in the Post Builder. Changing one does not affect the other.

Will changing my template’s color palette affect my existing posts?

Yes. Your template’s core colors feed into your web post’s background, text, and link colors globally. If you edit your theme colors, those changes apply across your entire site, including the Post page.

Can I use a gradient or image as my web post background?

Yes, in the Website Builder. On the Post page, click the background and in the design panel you can choose a solid color, gradient, or image (uploaded from your device, from your beehiiv Media Library, or linked via URL).

If I change text or link color on the Post page, will it affect other pages on my site?

No, adjusting text and link colors within the Post content block only affects your web post pages. However, if you click Edit Theme from within the color modal, those changes will apply globally across your entire site.

I can’t find the Post page in my Website Builder. What should I do?

The pages included in your website depend on the choices you made during Website Builder onboarding. If the Post page isn’t listed under Dynamic Pages, click + Add page to add it to your site.