Customizing your site in the Website Builder

The new Website Builder offers enhanced features, modern templates, greater design flexibility, and an intuitive drag-and-drop interface, making it easier than ever to build a beautiful, high-performing website directly within beehiiv.

This article walks through what to do after onboarding, with details for adding prebuilt sections and blocks, working with dynamic pages, and customizing your website pages to your preference.

You can view all of your changes in the center of your screen on the canvas, surrounded by a few primary areas that help you control and customize every aspect of your site; the icons menu along the left side, the top navbar across the top, the design panel on the right, and the preview toolbar at the bottom

From the icons menu in the left panel, you’ll find the + Insert element option where you can access templates for prebuilt Sections and Blocks, as well as additional block options for Layout, Text, Conversion, Synced data, Integrations, and Widgets.

The Sections option provides prebuilt templates for quickly designing a page. You can choose from an array of options, including sections for CTAs, FAQs, Posts, Pricing, and more.

1. To begin adding prebuilt sections to your page, click on the + icon at the top of the icons menu. Under Templates, click Sections.
   
   
   
2. The Sections template library will appear, showing a list of available section templates on the left. Click on a section category (e.g., Heroes, Testimonials) and browse the template formats.
    
3. When you click on the template(s) you want to add, a border and a checkmark in the top-right corner will indicate your selection.

• You can select multiple templates at once.
• To deselect a template, click it again.
  
  
  

4. Once you've chosen your template(s), click the Add section button in the bottom-right corner of the modal. If you wish to exit the modal without adding a section, click on the Cancel button. The selected sections will be added to your page, ready for further customization as needed.
    
5. To save or reuse a custom section or block, click directly on the section to reveal the menu bar above it. Then, select Save as Template. Your saved templates will be available under the Mine tab when adding new sections or blocks.
   
   
   
   
   Or, while accessing the Sections template library, you can click on Edit my templates to access and edit templates you saved in the past. 
   
   
   

The Blocks option allows you to add individual elements to your page, giving you the flexibility to design and customize your content. Choose from a variety of blocks including Subscribe form, Posts, Buttons, Pricing, Authors, Socials, Tags, Testimonials, Dividers, and Recommendations.

1. To begin adding individual blocks to your page, click on the + icon in the left panel. Then, under Templates, select Blocks.
   
   
   
2. The Blocks template library modal will appear, displaying a list of available block templates on the left. Click on a block category (e.g., Subscribe form, Posts, Button) and browse through the available template formats.
    
3. When you click on the block(s) you want to add, a border and a checkmark in the top-right corner will indicate your selection.

• You can select multiple blocks and styles at once.
• To deselect a style, click it again.
  
  
  

4. Once you've made your selections, click the Add Block button in the bottom-right corner of the modal. The selected blocks will be added to your page, ready for further customization to fit your content needs. 
    
5. To save or reuse a custom section or block, click directly on the section to reveal the menu bar above it. Then, select Save as Template. Your saved templates will be available under the Mine tab when adding new sections or blocks.
   
   
   
   
   Or, while accessing the Blocks template library, you can click on Edit my templates to access and edit templates you saved in the past.
   
   
   

Below the section and block options, you'll find 4 layout blocks to structure your page:

• Section
• Container
• Columns
• Divider

When building a page from scratch, start by adding a Section, as most pages consist of multiple sections. Within a section, you can add a Container or Columns to refine the layout, then use Dividers as needed to separate different sections. You also have the option to drag-and-drop elements directly onto the page as you see fit.  

Text elements are used for adding headings, paragraphs, and links to your page.

There are 7 text styles to choose from:

• Text (paragraph)
• Headings (H1, H2, H3, H4, H5, H6)
  
  
  

To add text, simply drag and drop a text element from the left panel onto your canvas, placing it inside a section. 

Once you’ve set up a section, container, or column, you can add conversion options to drive users to subscribe or upgrade. 

Available conversion options include:

• Subscribe form: A static subscribe form that appears directly on the page.
• Email capture popup: A popup that appears on the page as users scroll down, asking them to subscribe.
• Full gate popup: A popup that blocks all content on the page and asks users to subscribe. You can choose to show this to non-subscribers, free subscribers, or paid subscribers who aren’t on a specific paid tier. 
• Inline gate popup: A content gate that can be placed at specific points on the page and blocks all content below it. You can choose to show this to non-subscribers, free subscribers, or paid subscribers who aren’t on a specific paid tier.

Once you’ve set up a section, container, or column, you can add various options that are automatically synced to data within your publication. 

• Post
• Authors
• Tags
• Socials
• Recommendations
• Testimonials
• Pricing Cards
• Products

Integrate your website with YouTube by featuring a playlist or channel feed, or feature your external podcast on your website. 

Once you've set up a section, container, or column, you can start adding widgets to customize your page. Widgets let you add key elements like images, buttons, or icons. Simply drag and drop widgets from the left panel onto your canvas.

Available widgets include:

• Image
• Button
• Icon
• Accordion
• HTML