How post styling works across email and web

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.

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

Your email post design is fully controlled by the Post Builder.

All email styling happens in the Post Builder, via two ways:

• Style tab: Adjust global post settings like colors, typography, spacing, and borders. Access this by opening any post draft and clicking the Style tab in the right panel.
• Block-level settings: Individual content blocks (images, buttons, quotes, etc.) can also be styled directly from the post canvas.

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.

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.

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

1. From your beehiiv dashboard, navigate to Website > Builder.
2. In the left icons menu, click the Pages icon.
3. Under Dynamic Pages, select the Post page.
   
   
   
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. If you don’t see a Post page listed under Dynamic Pages, click + Add page to add it.

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

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.
   
   
   
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.
  
  
  

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.
  
  

5. Use the Gradient tab to choose a color gradient for your background. 
   
   
   
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. 
  
  
  

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).
   
   
   
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.
   
   
   
4. In the Theme colors tab, you can:

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

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.
  
  
  

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. 
  
  
  

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 in the Style tab of 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.