Updated: Aug 1, 2025
How to use the Website Builder
After completing the onboarding flow of selecting a template, color palette, font theme, and default pages, you’ll be brought into the Website Builder. This is where you can fully customize your website using a drag-and-drop editor and multiple panels of options.
Your selected template appears at the center of the screen on the canvas, surrounded by a few primary areas that help you control and customize every aspect of your site.
Getting familiar with the builder
Top Navbar
Positioned above the template preview, the top navbar gives you quick access to these essential tools:
- Dashboard button: Exit the Website Builder and return to your beehiiv account dashboard.
- Website URL: View and copy your website URL.
- Save Options: Save your most recent draft.
- Data Reminders: Receive reminders for data that needs to be updated prior to publishing, if needed.
- View Selection: Switch between a mobile or desktop view of your website.
- Preview: Preview your site prior to publishing.
- Publish Options (far right): Lets you preview or publish your website changes.
Icons menu (left side)
Use this panel to manage your website’s structure and content. It includes icons for:
- Elements: Insert elements onto your website canvas.
- Pages: View and reorder your site’s pages.
- Layers: See all the elements on the current page, and select specific blocks or sections.
- Modals: Manage popups and overlays on your site.
- Web: Open your live website in a new tab.
- Settings: Open the full site settings options.
Design panel (right side)
The right panel updates dynamically based on the selected icon or element in the Layers tab on the left panel. It contains detailed customization options like layout, color, spacing, and content for any selected element.
Canvas (center)
The canvas is your editable workspace that sits between the icons menu and the design panel. It shows a live preview of your website and allows you to click into blocks, text, and images to update them directly.
You can switch between Desktop and Mobile views in the top navbar above the canvas to ensure your site looks great on all devices.
Clicking anywhere on the canvas will display its customization options in the design panel on the right, and – if you have the icons menu expanded – will highlight the corresponding page or element in the navigation panel on the left. You’ll also see a tab indicating the layer you are currently working in on the canvas.
Exploring the top navbar
The top navbar runs across the top of the Website Builder and gives you access to essential tools and site-wide options. From left to right, you'll find:
Dashboard Button
Click on the Dashboard button in the upper left corner to return back to your account dashboard.
Website URL
Displays your publication’s website URL at the top. Click the URL to copy it to your clipboard.
Save Options
Manually save your work at any time by clicking Ctrl + S or ⌘ + S (depending on whether you are using a PC or Mac).
Data Reminders
If you have placeholder content or premium content that requires upgrading on your page, a reminder will pop up here to let you know to fix the data before publishing. Click on the Info icon to see the issues.
Click on Fix next to each issue to be shown the issue(s), as well as how to fix them.
View Selection
Swap between Desktop and Mobile canvases to see how your site will look on different devices.
Preview
Preview how your site will look once you have published. Be sure to review that your changes are as you wish before going live.
Publish Options
Click the Publish arrow to access all publishing actions, including previewing, selecting specific pages, and publishing your changes.
Using the icons menu
Located on the left side of the Website Builder, the icons menu acts as your site map. It organizes your website structure into 6 tabs: Insert new element, Pages, Layers & Navigation, Modals, Website, and Settings. When you select an item in the icons menu, its customization options will appear in the design panel on the right.
Insert new element: Click on the + icon button to open the block library. This is the primary way to customize your website with building blocks, content sections, and components. Choose between templates at the top, or select a more specific element below.
Once you’ve chosen an element, click and drag it anywhere on your canvas.
Pages: This tab includes a set of default pages prebuilt for your publication site, such as Home, Subscribe, Authors, and Recommendations.
You can also add new pages by clicking on New Page at the bottom of the tab. Each page can be customized individually using blocks and design settings. You can also search your custom pages to easily find the page you’re looking for.
Layers & Navigation: Depending on the page you’re editing, the Layers & Navigation tab allows you to zoom in on specific elements of the page for more detailed customization. This is especially helpful when editing complex layouts or targeting specific elements for styling or rearrangement.
From this tab, under Navigation, you can also access your Navbar and Footer settings.
Modals: Use this tab to access built-in site modals for Login and Signup, which can be linked throughout your site. To edit a modal, click to select it. Then use the design panel on the right to configure when and where the modal appears across your site.
Website: Click to view your live website in a new tab.
Settings: Access more in-depth website settings, including SEO, GDPR, social media links, pixels, testimonials, and more by clicking All settings.
From here, you can also toggle on or off Placeholder Data, allowing you to visualize your site’s elements as they will look once you have created your own content.
How to switch to a different template
As new templates are added to the Website Builder, you may want to explore alternative designs for your site. Switching to a different template is quick and easy.
- Click the Settings icon in the icons menu on the left, then click All settings.
- From the left panel menu, select Themes.
- Click Switch Templates to open the template gallery.
- You’ll be redirected to the onboarding flow, where you can preview and select a new template. Once selected, you’ll proceed to choose your theme’s color palette and fonts.
- At the end of the onboarding flow, click Switch Templates to finalize your choice.
How to enable or disable pages
In the Website Builder, you can enable or disable individual pages. Enabled pages appear on your published website, while disabled pages are hidden from view.
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 menu next to the page name and select Enable or Disable from the dropdown menu.
From here, you can also access the version history for your page. Click on Version History to access your options.
The Page version history modal will pop up. Select the version that you wish to restore on the right, and preview that version on the left. Once you’ve made your selection, click on the Revert to version button to revert your page.
Publishing your site
Before publishing, be sure to remember:
- You can switch between Desktop and Mobile views on the canvas to ensure your site looks great on all devices.
- Additionally, make sure your pages are enabled 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.
To publish your website:
- When you're ready to make your website live, click Publish in the top navbar to open the publishing options.
- Select the aspects of the site you wish to publish, choose from:
- This page only: Choose this to publish changes on the current page only.
-
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.
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 before going live.
- When everything looks good, click Publish to Live Site, then visit your website URL to confirm the updates.