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.
 

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, 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.

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.
• Settings: Open the full site settings options.
• Help: Access a modal with help resources available to you. 

Pro Tip:

Keep the icons menu expanded into a useful sidebar by clicking on the pin icon in the corner. When done, click on the pin icon again to return the icon menu to its default state.

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.

Pro Tip:

Turn on Advanced mode in the design panel to unlock more customization options, then use the search bar to quickly find specific aspects. Once enabled, Advanced mode stays on each time you use the builder; you can switch it off any time for a more streamlined experience.

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.

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. 

At the bottom of the canvas, the Preview toolbar offers these options: 

• Device View: Switch between Desktop and Mobile views to ensure your site looks great on both devices.
• Preview: Preview your site prior to publishing.
  
  
  
   

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, 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. The draft will also autosave when you move between your website pages. 

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. 

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.

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.

Help: Click on this icon to open a modal containing help resources available to you.

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.

1. Click the Settings icon in the icons menu on the left, then click All settings.
    
2. From the left panel menu, select Themes.
    
3. Click Switch Templates to open the template gallery.
   
   
   
4. 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.
    
5. At the end of the onboarding flow, click Switch Templates to finalize your choice.
   
   
   

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. 

Reminder: To make a page accessible on your live site, it must be enabled before you publish. Otherwise, visiting a disabled page returns a 404 error. For a safety net, set up a 404 redirect to send visitors to a helpful place like your homepage instead.

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.

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:

1. When you're ready to make your website live, click Publish in the top navbar to open the publishing options.
   
   
   
2. 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.

3. Click Preview draft site to review your changes before going live.
    
4. When everything looks good, click Publish to live site, then visit your website URL to confirm the updates.