Updated: Feb 4, 2025
Getting started with the Website Beta
We’re excited to invite users on our Max and Enterprise plans to participate in the Website Beta, which gives you access to try out the new Website Builder. While the legacy website builder remains fully accessible, the beta offers upgraded features, new templates, enhanced design flexibility, and an intuitive drag-and-drop interface, making it easier than ever to create a visually stunning and functional website within the beehiiv platform.
Begin by checking out this helpful video tutorial that explores many of the exciting features of the new Website Builder. After the video, this article will guide you through the onboarding process, key features and functions, switching themes, and publishing your site. If you're already set up, be sure to review our customization article for further guidance.
Watch and learn: How to use the beehiiv Website Builder (Beta)
New Website Builder onboarding experience
During the beta period, you can access the new Website Builder from the same location as the legacy builder. In the left panel, go to Design > Website Beta.
First, select a template
Upon entering the beta version for the first time, you'll be prompted to select a template as the first step in the onboarding experience. Your selection will automatically apply a preconfigured theme to your website, which you can customize at any time.
We’ll be adding more templates throughout the beta period.
The available templates include:
- Atlas
- News Room
- Traveler Times
Click on each template to scroll and preview its features. Once you've reviewed the options, select a template and click Next to continue.
Next, choose the theme colors
After selecting a template, you'll see a set of preselected theme colors tailored to complement your chosen design. These default colors ensure a polished and cohesive look, but you have the flexibility to adjust them to better align with your brand.
The key theme colors include:
- Primary Color: The main accent color used for buttons, links, and key elements.
- Text on Primary Color: The color of text that appears on primary-colored backgrounds.
- Background Color: The main background color of your site.
- Text on Background Color: The color of text that appears on the background color.
- Border Color: The color used for borders and dividing lines.
- Border Radius: Controls the roundness of elements such as buttons and images.
If you're happy with the default colors, you can proceed without changes. To customize, click on any color swatch to open the selector, and make your adjustments or enter a 6-digit Hex code. Click Next to continue.
Then choose the theme fonts
In the next step of onboarding, you'll see a set of preselected theme fonts designed to complement your chosen template. These default fonts create a polished and cohesive look, but you can customize them to better reflect your brand identity.
You can set the following font styles for your site:
- Heading font: Used for titles and section headers.
- Body font: Applied to paragraph text and general content.
- Button font: Used for call-to-action buttons.
If you're happy with the default fonts, you can proceed without changes by clicking Start Building. Otherwise, choose from a selection of popular font pairings or manually select fonts that best match your brand. When ready, click Start Building to complete the onboarding experience.
Decide to auto populate content or use your own
On the final screen of the onboarding process, you'll be asked whether you want to Auto Populate Data. This determines whether your newsletter template will include placeholder content (visual examples) or pull in your existing posts. By default, all website templates are populated with placeholder content.
Should I auto populate?
- Select No if you're just starting out — seeing placeholder content helps with design until you have actual real content. Afterward, you can replace placeholder content with your own whenever you’re ready.
- Select Yes if you already have a solid set of posts — auto-populating will save time by filling in your actual content.
Once you've made your selection, click Start Building to proceed.
Key features of the new Website Builder
Once you’ve completed the onboarding process and set your theme, you’ll enter the new Website Builder. Here, you can replace the placeholder content with your own (if you didn’t do this in the onboarding) and further customize your site.
Your chosen template will appear in the center, with 4 primary areas for customization and control:
- Top Navbar: Positioned above the template preview, this bar includes essential tools such as Publish options (on the far right), allowing you to preview and launch changes quickly.
- Navigation Panel: Located on the left, this panel houses the Pages, Layers, and Modals tabs, enabling you to manage your website’s structure and organization.
- Attributes Panel: Found on the right, this panel dynamically updates to display settings and customization options based on the selected tab or element in the Layers tab on the left panel.
-
Canvas: This is the central workspace where your template preview is displayed. You can edit your site content directly and switch between Desktop and Mobile views to ensure your design is responsive. Clicking anywhere on the canvas will highlight the corresponding page or element in the navigation panel on the left while displaying its customization options in the attributes panel on the right.
Options in the top navbar
Across the top of the Website Builder is the top navigation bar (navbar), here’s a breakdown of what you’ll find in it, from left to right:
- beehiiv icon and menu: Click the beehiiv icon in the upper left corner to return back to your account dashboard or access shortcuts like version history and website settings.
- Panel access icon: Open or close the left-hand panel to expand your workspace.
- + Insert icon: The main vein to creating your website. Access building blocks and features for your site pages through this primary tool. (More details on this below.)
- Autoswap (coming soon): Replace placeholder content in your template with your publication content.
- Home tag/info: Displays your publication name in the center.
- Report a bug: Use the bug icon to submit feedback or report issues to our team while in beta.
- Version history: Revert to previously saved versions with this tool.
- Preview: View how your site will look on both desktop and mobile devices.
- Settings: Access more in-depth website settings, including SEO, GDPR, social media links, pixels, testimonials, and more.
- Website: Open your publication’s live site.
- Publish menu: Click the Publish arrow to view all publishing options.
Using the navigation and attributes panels
The navigation panel on the left serves as a site map, organizing all aspects of your website into 3 tabs: Pages, Layers, and Modals. Selections made in the navigation panel will display their corresponding controls and customization options in the attributes panel on the right.
Pages: This tab includes a set of default pages prebuilt for your publication site, such as the Home page, Subscribe page, and Recommendations page. You can also create custom pages from scratch to fit your needs by clicking on New Page.
Layers: Depending on the page you’re editing, the Layers tab allows you to zoom in on specific elements of the page for more detailed customization.
Modals: Use this tab to access various modals, Login, Signup, and Recommendations, which can be linked throughout your site. Simply select a modal, then use the attributes panel on the right to configure when and where it appears on specific pages.
How to switch to a different template
As new templates are added to the Website Beta, you may want to explore different designs.
Switching to a new template is simple:
- Click the Settings icon in the top navbar.
- From the left panel menu, select Themes.
- Click the Switch Templates button.
-
You’ll be redirected to the template selection page. After choosing a new template, you’ll go through the onboarding flow to choose your theme colors and fonts.
Tech Note: Switching templates will overwrite any previous theme styling, and it cannot be restored. - On the final screen, you'll be asked whether you want to Auto Populate Data. This determines whether your newsletter template will include placeholder content (visual examples) or pull in your existing posts.
- Select No if you're just starting out — placeholder content helps with design until you have more real content. Afterward, you can replace placeholder content with your own whenever you’re ready.
-
Select Yes if you already have a solid set of posts — auto-populating will save time by filling in your actual content.
Once you've made your selection, click Switch Templates to proceed.
- A confirmation message will ask you to verify your choice. Click Switch Templates to proceed
How to enable or disable pages
In the Website Builder, pages can be enabled or disabled. Enabled pages appear on your published website, while disabled pages remain hidden. To ensure a page is accessible on your live site, it must be enabled before publishing. Otherwise, attempting to view a disabled page will result in a 404 error.
On the Pages tab, enabled pages are shown in black text, whereas disabled pages appear in gray text.
To enable or disable a page, click the 3 dots next to the page name and select Enable or Disable from the dropdown menu.
How to publish your site
Before publishing, be sure to remember:
- 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.
- When you're ready to make your website live, click Publish in the top navbar to access the publishing options.
- 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.
- Click Preview Draft Site to review your changes.
- When everything looks good, click Publish to Live Site and visit your website URL to confirm that your updates are live.