---
title: "How post styling works across email and web"
updated: 2026-08-27
---

# How post styling works across email and web

> **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](https://beehiivhelp.zendesk.com/hc/en-us/articles/42447301793815) 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 editor, click the element              | Post editor, click the element       |
| Background color            | Post editor, click the canvas or background | Website Builder > Post page          |
| Text color                  | Post editor, click into the text            | Website Builder > Post content block |
| Link color                  | Post editor, click into the text            | Website Builder > Post content block |
| Spacing and borders         | Post editor, click the element              | Post editor, click the element       |
| Post header (title, byline) | Post editor, 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 editor, 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 editor — 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 editor and the Website Builder Post page.

When a post is published to the web, most of its styling is carried over from the Post editor 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 editor. 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 editor 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:

1.  From your beehiiv dashboard, navigate to [**Website > Builder**](https://app.beehiiv.com/website_builder_v2)**.**
2.  In the left icons menu, click the **Pages** icon.
3.  Under **Dynamic Pages**, select the **Post** page.  
      
    ![](https://beehiivhelp.zendesk.com/hc/article_attachments/38837758339479)
4.  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](https://www.beehiiv.com/support/article/29730433807767-selecting-a-template-and-theme-for-your-site). If you don’t see a Post page listed under Dynamic Pages, click **\+ Add page** to add it.  
>   
> ![](https://beehiivhelp.zendesk.com/hc/article_attachments/38837743139607)

---

### Adjusting the Post page background color

When [setting up or switching your template](https://www.beehiiv.com/support/article/37870894736663-how-to-switch-your-website-template-or-theme), your background is controlled by the **Background color** in your color palette.   
  
![](https://beehiivhelp.zendesk.com/hc/article_attachments/41008138601495)  
To override it for your Post page specifically:

1.  On the Post page in the Website Builder, click anywhere on the background.
2.  In the right design panel, under **Fill**, click on the info next to **Background**.  
      
    ![](https://beehiivhelp.zendesk.com/hc/article_attachments/41008138603159)
3.  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.  
      
    ![](https://beehiivhelp.zendesk.com/hc/article_attachments/41008138603543)

4.  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.  
    ![](https://beehiivhelp.zendesk.com/hc/article_attachments/38837758347927)

5.  Use the **Gradient** tab to choose a color gradient for your background.   
      
    ![](https://beehiivhelp.zendesk.com/hc/article_attachments/38837758348823)
6.  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.   
      
    ![](https://beehiivhelp.zendesk.com/hc/article_attachments/38837743145879)

> **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 editor_. 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:

1.  On the **Post page** in the Website Builder, click on the placeholder post content (lorem ipsum text).  
      
    ![](https://beehiivhelp.zendesk.com/hc/article_attachments/38837758350359)
2.  To confirm you’ve selected the right element, open **Icons menu > Layers** and verify the selected block is labeled **Post Content**.
3.  In the right design panel, you’ll see options for **Text Color** and **Link Color**. Click either to open the color modal.  
      
    ![](https://beehiivhelp.zendesk.com/hc/article_attachments/41008138603927)
4.  In the **Theme colors** tab, you can:

-   Select between the colors in your theme.
-   Click **Edit Theme** to change your theme colors globally.  
      
    ![](https://beehiivhelp.zendesk.com/hc/article_attachments/41008138604311)

5.  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.  
      
    ![](https://beehiivhelp.zendesk.com/hc/article_attachments/38837743151511)

> **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 editor_. 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._

---

### Previewing your web post

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

-   **From the** **Post editor****:** 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**.  
      
    ![](https://beehiivhelp.zendesk.com/hc/article_attachments/38837743152023)  
    A modal will pop up for you to choose a published post to simulate on your Post page. Select a post, then click **Preview**.   
      
    ![](https://beehiivhelp.zendesk.com/hc/article_attachments/38837743153175)

> **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 editor?

Your web post pulls background color, text color, and link color from the Website Builder — not the Post editor. 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 editor. 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](https://www.beehiiv.com/support/article/29730433807767-selecting-a-template-and-theme-for-your-site). If the Post page isn’t listed under Dynamic Pages, click **\+ Add page** to add it to your site.