Post customization options in the Style panel

The Post Builder is your one-stop-shop for creating your newsletter. After selecting a newsletter template or opening a blank post draft, the Post Builder will open on the Compose page ready for you to create your content.

On the right side of the Post Builder, the Write and Style tabs are there for you to format and customize your content. By default, you'll start on the Write tab while drafting. To access the post customization options, switch over to the Style tab. 

The Style panel consists of 2 tabs for Basic and Advanced. Upon accessing it, the Basic tab will be selected by default with the Colors options exposed. Simply click the arrow icon to close it and then choose from Colors, Typography, Spacing, or Borders.

---

Basic customization options in the Style panel

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.

Advanced customization options in the Style panel

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: Set the background color of the email footer.
• Text: Customize the font family and text color used in the footer.
• Socials: Choose the background color and icon color for your social media links.
• Border: Adjust the top border thickness and width (in pixels), and set the border color.
• Margin: Define the outer spacing (in pixels) around the footer, either per side or all together.
• Padding: Define the inner spacing (in pixels) within the footer, either per side or all together.
• Custom: Add your own content to the footer by clicking Edit custom content, which opens the editor for direct input.