Post customization options in the Style panel

The Post Builder is where you create and design your newsletter content. After selecting a template or starting from a blank post draft, the Post Builder opens on the Compose page, ready for you to write and format your post.

On the right side of the Post Builder, you’ll find two tabs, Write and Style. You’ll start on the Write tab by default while drafting your content. To access customization settings for your post’s design, switch to the Style tab to open the panel.

The Style panel includes two tabs: Basic and Advanced. This panel is available in all beehiiv editors, including Automation emails, Welcome emails, Double Opt-in emails, and Upsell emails. By default, the Basic tab opens with the Colors options expanded. You can collapse this section by clicking the arrow icon, then select from Colors, Typography, Spacing, or Borders to customize your post’s design.

Use the sections below to learn what each setting controls and how to fine-tune the look of your post.

Simply click on the tabs below to access each section.

Color styling settings

Basic customizations in the Post Builder: Color
Click the arrow next to Colors to reveal the following customization options:
• Outside Background: Sets the background color behind your post content.
• Post Background: Sets the background color of the post itself.
• Text on Background: Defines the color of text placed on the post background.
• Primary: Sets the background color for the email footer and its social links, buttons, blockquotes, table cells, embedded content areas, and the post byline.
• Text on Primary: Controls the text color for the post title, subtitle, byline, footer text, and embedded content link titles. This color helps guide readers through your most important content.
• Secondary: Defines the border color for horizontal dividers, the top border of the email footer, blockquotes, embedded content, buttons, and post backgrounds.
• Links: Sets the color of all hyperlinks within your post content.
Typography styling settings

Basic: Typography options
Click the arrow next to Typography to reveal the following customization options:
• Heading font family: Controls the font used for H1–H6 elements, including post titles and section headers.
• Heading font weight: Sets the thickness (e.g., regular, bold) of heading text.
• Paragraph text font family: Defines the font used for body text, lists, tables, blockquotes, button text, and other in-post content.
• Paragraph text font weight: Sets the weight of paragraph and body text for better readability and emphasis.
Spacing styling settings

Basic: Spacing options
Click the arrow next to Spacing to reveal the following customization options:
• Margin: Defines the space between the post and the background. Think of this as outer spacing.
• Padding: Controls the space between the post content and its container edges. Think of this as inner spacing.
Borders styling settings

Basic: Border options
Click the arrow next to Borders to reveal the following customization options:
• Corner radius: Controls how rounded the corners of your post elements appear. A value of 0 results in sharp corners, while higher values increase the curve for a softer, rounded look.
• Border thickness: Sets the width of the borders around your content. Thicker values create more prominent borders.

Background styling settings



Advanced customizations: Background options

Click the arrow next to Background to reveal the following customization options:

• Color: Set separate colors for the canvas, post, and post border. 
• Margin: Adjust the margin of the background in pixels, either individually or all sides together.
• Padding: Adjust the padding of the background in pixels, either individually or all sides together.
• Radius: Adjust the corner radius of your post in pixels, either individually or all sides together.
• Border: Adjust the border thickness of the background in pixels, either individually or all sides together.

 

Email Header styling settings

Advanced: Email Header options
Click the arrow next to Email Header to reveal the following settings:
• Title: Set the font family, weight, size, and color for the email header title. You can also adjust title alignment and vertical spacing in pixels.
• Subtitle: Set the font family, weight, size, and color for the post subtitle. You can also adjust title alignment and vertical spacing in pixels.
• Image: Upload or replace the email header image. The recommended size is 1200px × 630px.
• Byline: Toggle on or off the Show byline and Show reading time options. When enabled, you can further customize:
  • Fonts: Set the font family, weight, size, and color for the byline. 
  • Avatar: Select the pixel size for the author’s profile picture in the byline. 
  • Gap: Adjust the spacing around the byline, either per side or uniformly.
  • Reading time font color: Choose the font color for the reading time.
  • Reading time label: Define the label text (default is Estimated Reading Time:).
  • Underline author links: Toggle this on or off to underline author links.
  • Date format: Choose between Long, Long Ordinal, Short, or None for the date appearance.
  • Refer to the byline customization article for more details. 
• Date: Select the appearance of the date (Long, Long Ordinal, Short, or None), and its alignment (left, center, or right).
• Padding: Adjust the padding of the email header in pixels, either per side or uniformly.
• Code: Add custom CSS specific to the email header. Be sure to preview and test your changes before sending.
Body styling settings

Advanced: Body customization options 
Click the arrow next to Body to reveal the following customization options:
• Text: Set the font family, weight, size, line height, and paragraph color for the body text. Also adjust the gap or padding around the body in pixels, either individually or together.
• H1 - H6: Adjust the font family, weight, size, line height, and paragraph color for each header size. Also adjust the gap or padding around the header in pixels, either individually or together.
Widget styling settings

Advanced: Widget customization options
Click the arrow next to Widgets to reveal the following customization options:
• Links: Set the link style using bold, italics, or underline. Choose the font and underline colors.
• Images: Customize the font family, size, color, and style used for captions. Adjust image padding and gap in pixels, either individually or together.
• Buttons: Set the font family, weight, and size. Adjust the font, background, and border colors. You can also modify the pixels of the padding, gap, corner radius, and border thickness, either individually or together.
• Breaks: Customize the color and style of content breaks. You can also adjust their thickness, width percentage, and gap, either individually or together.
• Lists: Set the font family, weight, size, line height, and list color. Choose a style for bulleted and numbered lists. Adjust the padding or gap around lists in pixels, either individually or together.
• Quotes: There are 3 quote variants available in the post editor. Each can be customized individually in the Style panel under Quotes. If you're using a quote as a testimonial, you can include an author name using the Author field in the editor. This is referred to as Byline styling in the Style panel.
  For each quote variant, you can customize:
  • Fonts: Set the font family, weight, size, and color for the quote text.
  • Alignment: Choose the text alignment: left, center, or right. 
  • Background color: Set the background color of the quote.
  • Margin: Adjust the outer spacing of the quote in pixels, individually or all sides together.
  • Padding: Adjust the inner spacing of the quote in pixels, individually or all sides together.
  • Corner radius: Control how rounded or sharp the quote’s corners appear, individually or all sides together.
  • Border thickness: Set the thickness of the quote border in pixels, individually or all sides together.
  • Border color: Choose a color for the quote’s border.
  • Byline styling: Customize the font family, weight, size, and color for the quote’s author. You can also adjust the byline alignment (left, center, right) and the gap around the byline, individually or together. 
• Embeds: Customize the appearance of embedded web and social media links in your posts. You can adjust the font family, background color, border color, margin, padding, corner radius, and border thickness, individually or together.
  For social media embed links, additional options include:
  • Show title: Toggle this on to display the platform name (e.g. TikTok).
  • Title look: Set the font size and color for the title.
  • Show description: Toggle this on to display the platform’s meta description.
  • Description look: Set the font size and color for the description.
  • Show URL: Toggle this on to display the full URL (e.g. https://www.tiktok.com/).
  • URL look: Set the font size and link color for the URL.
• Tables: Customize how tables appear in your post.
  You can adjust:
  • Table headers: Modify the font family, header color, and header background color. 
  • Table cells: Modify the font family, header color, and header background color. 
  • Heading gap: Set spacing above, below, or both together.
  • Gap between cells: Adjust vertical spacing between cells, above and below, or both together. 
  • Border thickness: Adjust the border thickness, individually or all sides together.
  • Border styling: Choose the color of the table borders.
  • Gap: Adjust spacing around the entire table, above, below, or both together.
Email Footer styling settings

Advanced: Email Footer options
Click the arrow next to Email Footer to reveal the following customization options:
• Colors: Customize the background color of the footer.
• Text: Choose the font family and font color for the footer text.
• Border: Adjust the top border’s thickness, width, and color.
• Margin: Modify the footer margin, either individually or all sides together.
• Padding: Adjust the padding around the footer, either individually or all sides together.
• Socials: Set the icon color and background color for social media links in the footer.
• Copyright Text: Change the default copyright text just for the post. (The copyright text is set in your Publication settings.)
• Address: Change the default address just for the post. (The address is set in your Publication settings.)
• Custom: Add your own content to the footer by clicking Add/Edit custom content to open the post editor where you can add or edit your own conten