--- title: "Post customization options in the Style panel" updated: 2026-04-10 --- # Post customization options in the Style panel The **Style** panel in the Post Builder lets you control the visual design of your newsletter posts, including colors, typography, spacing, and borders. Style settings apply to both the email and web versions of your post and are available in all beehiiv editors, including automation emails, welcome emails, double opt-in emails, and upsell emails. To adjust fonts and typography for your beehiiv website rather than your newsletter posts, see [Adjusting typography and font sizes in the Website Builder](https://www.beehiiv.com/support/article/39642263350935-adjusting-typography-and-font-sizes-in-the-website-builder). ### Accessing the Style panel Upon opening the Post Builder, you’ll find two tabs on the right side: **Write** and **Style**. You’ll start on the Write tab by default while drafting your content. Switch to the Style tab to open the panel. The Style panel includes two tabs: **Basic** and **Advanced**. By default, the **Basic** tab opens with **Colors** expanded. Click the arrow next to any section — **Colors**, **Typography**, **Spacing**, or **Borders** to open it and reveal its customization options. ![](https://beehiivhelp.zendesk.com/hc/article_attachments/31260727816343) > **Tech Note** > > When using Website Builder, most design choices made in the Style tab apply to the web version of your post as well. To customize web-only elements such as the post header, text, or link colors, edit them directly in the Website Builder on the Post page. --- ### Basic customization options in the Style panel Simply click on the tabs below to access each section. **Color styling settings** ![](https://beehiivhelp.zendesk.com/hc/article_attachments/31260727817367) ## 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** ![](https://beehiivhelp.zendesk.com/hc/article_attachments/31260727818007) ## 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. **Color styling settings** **Paragraph text font weight:** Sets the weight of paragraph and body text for better readability and emphasis. **Spacing styling settings** ![](https://beehiivhelp.zendesk.com/hc/article_attachments/31260727818519) ## 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_. **Spacing styling settings** **Padding:** Controls the space between the post content and its container edges. Think of this as _inner spacing_. **Borders styling settings** ![](https://beehiivhelp.zendesk.com/hc/article_attachments/31260727819927) ## 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. **Borders styling settings** **Border thickness:** Sets the width of the borders around your content. Thicker values create more prominent borders. ### Advanced customization options in the Style panel ![Style > Advanced.png](https://beehiivhelp.zendesk.com/hc/article_attachments/31260698628119) **Background styling settings** ![](https://beehiivhelp.zendesk.com/hc/article_attachments/31260698629399) ## 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** **Padding:** Adjust the padding of the background in pixels, either individually or all sides together. **Email Header styling settings** ![Style Panel.01.png](https://beehiivhelp.zendesk.com/hc/article_attachments/39667350134679) ## 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.](https://beehiivhelp.zendesk.com/hc/en-us/articles/6049130524567)  - **Topline:** Enable options for Show date, Show read date, and Show reading time.  - **Alignment:** Left or center justify the alignment of the content.  - **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. **Email Header styling settings** **Code:** Add custom CSS specific to the email header. Be sure to preview and test your changes before sending. **Body styling settings** ![](https://beehiivhelp.zendesk.com/hc/article_attachments/31260698633111) ## 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. **Body styling settings** **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** ![](https://beehiivhelp.zendesk.com/hc/article_attachments/31260727828759) ## 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. - **RSS****:** Customize how an RSS feed appears in your post.  You can adjust: - **Title font:** Set the font family, weight, line height, and color for the title of the RSS feed. - **Body font:** Set the font family, weight, line height, and color for the body content of the RSS feed. - **CTA button:** Set the font color, background color, and border color.  - **Corner radius:** Adjust the corner radius in pixels. - **Border thickness:** Adjust the border thickness in pixels. - **Link formatting:** Set the underline and font color. **Widgets styling settings** **Gap:** Adjust spacing around the entire table, above, below, or both together. **Email Footer styling settings** ![Style Panel.02.png](https://beehiivhelp.zendesk.com/hc/article_attachments/39667350135575) ## 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. - **Alignment:** Left or center justify the alignment of the footer.  - **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](https://www.beehiiv.com/support/article/12293012097175).) - **Address:** Change the default address just for the post. (The address is set in your [Publication settings](https://www.beehiiv.com/support/article/12293012097175).) - **Links:** Set the look of hyperlinks, choose the link format, underline color, font color, divider color, and adjust the padding in pixels. - **Custom:** [Add your own content to the footer](https://www.beehiiv.com/support/article/6049111808279-how-to-customize-your-newsletter-footer#h_01JQVSZMGG3F182MXZWDHJGS3Q-including-additional-custom-footer-content) by clicking [**Add/Edit custom content**](https://app.beehiiv.com/custom_footer/edit) to open the post editor where you can add or edit your own content. - **Logo:** Enable this to display your publication logo in your footer.