Updated: Nov 25, 2025
Article Contents
Knowledge Base
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 some key areas that help you control and customize every aspect of your site; the icons menu along the left side, the top navbar above the canvas, the design panel on the right, and the preview toolbar at the bottom.
Getting familiar with the builder
Top Navbar
Positioned above the canvas, the top navbar gives you quick access to these essential tools:
- beehiiv Icon: Found in the top left corner, click it to exit the Website Builder and return to your beehiiv account dashboard, or access your website settings.
- Back to main editor button: Only visible while modifying website pages or elements, click it to return to the main editor at any time.
- Website URL: View and copy your website URL, or click on your URL to view your live site at any time.
- Save Options: Save your most recent draft.
- Version History: View and restore previous versions of your entire site or individual pages.
- Undo Button: Undo a previous action.
- Redo Button: Redo an action you undid.
- Publish Options (far right): Lets you preview or publish your website changes.
Icons menu (left side toolbar)
Use this panel to manage your website’s structure and content. It includes icons for:
- Elements: Insert elements onto your website canvas.
- Globals: Manage popups and overlays on your site, and update your global navbar and footer.
- Pages: View and reorder your site’s pages.
- Layers: See all the elements on the current page, and select specific blocks or sections.
- Settings: Open the full site settings options.
- Help: Access a modal with help resources available to you.
Design panel (right side)
The right-hand design panel updates dynamically based on whatever you select on the canvas or in the Layers tab. This is where you’ll adjust layout, colors, spacing, typography, and other style controls for any element on the page.
The design panel includes two modes you can switch between:
- Design Mode: Gives you full manual control to customize layout, spacing, colors, fonts, borders, and other styling options.
- Chat Mode: Lets you use AI to build or modify your page using natural prompts (e.g., ‘Make this header larger’ or ‘Add a three-column section below this’).
You can switch between these modes at any time, allowing you to use AI for structure and speed while still fine-tuning details manually. For a full walkthrough of how Chat mode works, see: Using AI chat to build your website.
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 using the design panel on the right.
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.
- Device View: Switch between Desktop and Mobile views to ensure your site looks great on both devices.
-
Preview: Preview your site prior to publishing.
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 the following elements.
beehiiv Icon
Click the beehiiv Icon in the upper left corner to open a menu with the choice to Exit website builder and return to your account dashboard, or access your website settings.
Back to main editor button
This button only appears while editing certain elements on the canvas, such as the Edit Cards Style menu. Click it to return to the main editor.
Website URL
Displays your publication’s website URL at the top, as well as the current page. Click the URL to open the live version of your site.
Save Options
Manually save your work at any time by clicking on the Draft button.
Once saved, the Draft button will become a Saved button. All changes will autosave as you work in the Website Builder.
Version History
View and restore previous versions of your entire site or individual pages. Read more in our guide: How to view and restore your website version history.
Undo Button
Undo a previous action. This is especially useful if you need to revert smaller changes that don’t warrant using the version history tool.
Redo Button
Redo any action you undid, giving you the ultimate flexibility to change your mind.
Publish Options
Click the Publish arrow to access all publishing actions, including previewing, selecting specific pages, and publishing your changes.
Using the icons menu toolbar
Located along the left side of the Website Builder, the icons menu acts as your site map. It organizes your site into 6 key tabs: Insert new element, Globals, Pages, Layers, Settings, and Help. Selecting any tab will display its customization options in the design panel on the right.
Insert new element
Click the + icon to open the block library. This is where you’ll add new building blocks, content sections, and components to your site. Choose from templates for full-page Sections or Blocks at the top or select an individual element below.
Once you’ve selected an element, drag and drop it anywhere on your canvas.
Globals
Use this tab to access built-in modals for Login and Signup, which you can link throughout your site. To customize a modal, click to select it and use the design panel on the right to configure when and where it appears.
Under Navigation, you can also access and edit your Navbar and Footer settings.
Pages
This tab includes all default pages that come with your publication, such as Home, Subscribe, Authors, and Recommendations.
You can also create new pages with the Add page option. Each page can be customized individually using blocks and design settings. If you have many custom pages, use the search bar to quickly find the one you want to edit.
Layers
The Layers tab lets you drill down into the structure of your page, from full sections to individual containers and elements. This is especially helpful for editing complex layouts or targeting specific elements for styling or rearranging.
For a deeper walkthrough of how layers work, see our guide: How layers work in the Website Builder.
Settings
Click the Settings icon to access your site’s configuration options, including SEO, GDPR, social links, pixels, testimonials, and more.
You can also toggle on Enable Placeholder data to preview your site with sample content before adding your own.
Help
Click this icon to open a modal with help resources, including documentation and support options.
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 from the icons toolbar on the left, then click All settings.
- From the left panel menu, select Themes. Then on the right, 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 Start building 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.
On the Pages tab, enabled pages are shown in black text, whereas disabled pages appear in gray text. Pages with unpublished updates that are still in a draft state will show a yellow indicator next to the name.
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.
Publishing your site
Before publishing, be sure to remember:
- Use the preview to 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.