Customizing your site with the new Website Builder (Beta)

The Website Beta is available for Max and Enterprise users, offering access to the new Website Builder with its upgraded features, new templates, enhanced design flexibility, and an intuitive drag-and-drop interface, all within the beehiiv platform. While the legacy website builder remains accessible, the beta makes it easier than ever to create a visually stunning and functional website.

This article covers website customization after onboarding, including replacing placeholder content, using prebuilt sections and blocks, dynamic pages, and customizing the navbar or footer. Simply click each tab below to access the content. 

Swapping placeholder data for your own content
How to replace placeholder content
Placeholder data helps visualize your website’s layout before adding your actual posts. If you enabled placeholder data during onboarding, you can easily replace it with your publication’s content.
1. To identify placeholder data, look for an icon in the upper-right corner of a block. Click this icon to update the content.
   
   
   
   
   
   
2. A popup will appear showing the placeholder data and options. Click the down arrow under Post Type to choose a category.
   
   
   
   
   
   
3. At the bottom, you can choose to toggle off Placeholder data in order to display your actual posts.
   
   
4. Select the posts you’d like to feature, then click Select Posts to apply the changes.
---
Where to find and replace placeholder data:
• Home Page: Click each post block and swap in your own content.
• Upgrade Page: Click the pricing block to display your desired subscription tiers.
• Recommendations Page: Click the chain icon in the top-right corner to select which publications to recommend.
• Authors Page: Click the chain icon or use the Data tab in the attributes panel on the right to replace placeholder author information.
• Tags Page: Click the chain icon or the Data tab in the attributes panel to update placeholder tags with your publication’s tags.
Customizing or building pages from scratch

Insert options for sections, blocks, and more

In the top navbar, you’ll find the + Insert icon where you can access our prebuilt Sections and Blocks, as well as additional options for Layout, Widgets, and Text.









Using prebuilt sections to customize your pages

The Sections option provides prebuilt templates for quickly designing a page. You can choose from a variety of options, including Heroes, Testimonials, Social Proof, Posts, Pricing, Recommendations, CTAs, FAQs, and Team sections.

1. Click the Insert tab in the top navbar. Under Templates, click Sections to begin adding prebuilt sections to your page.
   
   
   
   
   
   
2. The Select a Section modal 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. Click on the template(s) you want to add, a border and a checkmark in the top-right corner will indicate your selection.

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

4. Once you've chosen your templates, click the Add section button in the bottom-right corner of the modal. Then click the X in the top-right corner to exit the modal.
   
   The selected sections will be added to your page, ready for further customization as needed.
   
   
5. Whenever you create a custom section or block that you would like to reuse, click the Template icon in the attributes panel on the right to save it as a template. Saved templates will appear under the Mine tab in the sections/blocks template options.
   
   
   
   
   
   

---

Using prebuilt blocks to customize your pages

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 Signup, Posts, Buttons, Pricing, Authors, Socials, Tags, Testimonials, Dividers, and Recommendations.

1. Click the Insert tab in the top navbar. Under Templates, select Blocks to begin adding individual blocks to your page.
   
   
   
   
   
   
2. The Select a Block modal will appear, displaying a list of available block templates on the left. Click on a block category (e.g., Signup, Posts, Buttons) and browse through the available template formats.
   
   
3. 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. Then click the X in the top-right corner to exit the modal.
   
   The selected blocks will be added to your page, ready for further customization to fit your content needs.
   
   
5. Whenever you create a custom section or block that you would like to reuse, click the Template icon in the attributes panel on the right to save it as a template. Saved templates will appear under the Mine tab in the sections/blocks template options.
   
   
   

---

Layout Options

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. 

After placing an element on the canvas, the left navigation panel will automatically switch to the Layers tab for the element, while the right attributes panel will display its customization options.

---

Widget Options

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:

• Signup
• Post
• Image
• Button
• Icon
• Authors
• Tags
• Socials
• Recommendations
• Testimonials
• Pricing Cards
• Accordion
• HTML
  
  
  

After placing an element on the canvas, the left navigation panel will automatically switch to the Layers tab for the element, while the right attributes panel will display its customization options.

---

Text Options

Below the widgets on the Insert tab, you'll find text elements 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 added, the left navigation panel will automatically switch to the Layers tab for that element, while the right attributes panel will display customization options.

Fine tuning pages for posts, authors, tags, and surveys

Using dynamic pages 

Dynamic pages have the ability to pull in data from the user’s publication. Dynamic pages are not meant to be designed using static blocks as they need their own corresponding block. In order to make styling changes to the corresponding blocks, you can edit the blocks via the attributes panel on the right. 

The current dynamic pages are the:

Surveys Page: Displays a selected survey from your publication using a Survey Block.









Author Page: Uses an Author block to load the selected author’s profile and a Post block set to ‘Author Page’ to display all posts written by that author.









Authors Page: Displays a list of selected authors from your publication using an Authors block.









Tag Page: Uses a Tag block to display the tag a user clicked on from the Tags page and a Post block to load all posts associated with that tag.









Tags Page: Displays selected tags from your publication using a Tag block.









Post Page: Currently not editable – editing capabilities coming soon!

Navbar and footer adjustments
Customizing the navbar and footer
The Navbar and Footer are key elements of your site’s design, and you can easily control their visibility and customization.
How to show or hide the navbar and footer
To show or hide the Navbar or Footer on a page:
1. From the Layers tab, click the 3 dots next to the Navbar or Footer.
   
   
2. Select Enable for this page to show it or Disable for this page to hide it.
   
   
   
   
   
   The ability to hide these elements is especially useful on pages where you want to encourage user actions like Subscribe, Upgrade, Surveys, Login, Reset Password, and Update Password.
---
Customizing the Navbar
There are 2 ways to customize your Navbar:
• Double-click in the Navbar area directly on the canvas.
• Go to the Layers panel on the left and select Navbar to bring up the controls in the attributes panel on the right.
The navbar is built using rows and columns. Each row contains 3 columns (left, middle, right). This layout helps you align elements as needed.



For most sites, you’ll want to position:
• Logo and Search on the far left.
• Text Logo in the center.
• Profile, Sign In, and Subscribe buttons on the far right.
Make sure to place each element in the appropriate column for the desired layout.
---
Accepted navbar blocks

You can add the following blocks to the navbar of your site:
• Link: A text link that directs users to other pages.
• Button: A button used to trigger actions like Subscribe or Learn More.
• Dropdown: A menu for expanding categories.
• Search: A bar for searching posts on the website.
• Logo: An image that represents your publication and links to the Home page.
---
Editing the navbar
The Navbar editor is separated into two parts:
• Positioning: Adjust the position of elements in the Navbar directly on the canvas.
• Attributes: Edit text, images, links, actions, styling, and mobile views in the attributes panel on the right.
---
Customizing the footer
Typically footers will be composed of a logo, social links, signup form, and links to other pages of the website.

To edit the Footer, you can either:
• Double-click the Footer area directly on the canvas.
• Click on the Footer via the Layers tab.
Similar to the page editor, the Footer editor allows you to edit positioning and content directly on the canvas, while styling and other attributes are adjusted in the attributes panel on the right.
Tech Note: Every footer will include a Privacy Policy and Terms of Use link, which cannot be removed or edited unless the publication has disabled beehiiv branding in the Publication Settings (available to Max/Enterprise plans).
Ways to revert to saved versions
Version history options
Your website is automatically saved as you work. To view and manage past versions, click the Version History icon in the top navbar to open the dropdown menu.

To view an older version, simply click on it in the dropdown list of saved versions. If you'd like to restore it, click the 3 dots next to the version and select Restore Version. This will restore your entire site back to the saved version.

To revert pages individually back to another version, go to Pages and click the 3 dots next to the page name, then select Page Version History.

From here, you can click on the latest versions to find the one you’d like to revert to. Click Load More to see additional versions. Select the version you’d like to restore and then click on the Revert to Version button.

Tech Note: After reverting, you will need to publish your site again in order to see the changes live.
You can also manually save your work at any time by clicking Save in the bottom left corner of the builder.

To add a version to the history, click the arrow next to Save and select Save to Version History.

A popup will appear where you can name the version. Enter a name and click Save to confirm.

Publishing options
Reminder: You can switch between Desktop and Mobile views on the canvas anytime to ensure your site looks great on all devices. Additionally, make sure to enable your completed pages in the Pages panel before publishing. If a page is not enabled, trying to view it on your live site will result in a 404 error
How to publish your site
1. When you're ready to make your website live, click Publish in the top navbar to access the publishing options.
   
   
   
   
   
   
2. Select the aspects of the site you wish to publish, choose from: 
• Site Settings: Check this box to publish your site's settings. To review them before publishing, click the Settings icon in the top navbar.

• All Pages: Choose to publish All Pages or click Select Pages to open a dropdown list. Check the pages you’d like to publish, then click the arrow to return. A number will indicate how many pages you've selected. Ensure the Pages box is checked to include them in the update.

  Tech Note: If you don’t select specific pages or check All Pages, only the page currently open in the editor will be published.
3. Click Preview Draft Site to review your changes.
   
   
4. When everything looks good, click Publish to Live Site and visit your website URL to confirm that your updates are live.