Get Help Your Way

OR

Updated: Jul 16, 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.

Top Navbar

Positioned above the template preview, the top navbar gives you quick access to these essential tools:

  • Publish Options (far right): Lets you preview or publish your website changes.
  • Web Icon: Opens your live website in a new tab.
  • Settings Icon: Opens the full site settings options.

Navigation panel (left side)

Use this panel to manage your website’s structure and content. It includes tabs for:

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

Attributes panel (right side)

The right panel updates dynamically based on the selected tab 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: Enable Advanced mode (toggle at the top of the attributes panel) to unlock additional options for borders, shadows, transitions, and more. Advanced mode also activates a search bar to help you quickly find specific properties.

Canvas (center)

The canvas is your editable workspace. 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 at the top of the canvas to ensure your site looks great on all devices.

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.


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:



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, Site Settings, or Report a bug.  



Version History opens a modal where you can view and restore previous versions of your site. To revert, select a version and click Revert to version.

Pro Tip: You can also access Version History for individual pages from the 3 dots icon next to each page name.


+ Insert element button

Click the + Insert element button to open the block library. This is the primary way to customize your website with building blocks, content sections, and components. (More on this below.)

Home/page info

Displays your publication’s website URL at the top. Click the URL to copy it to your clipboard.

Settings Icon

Access more in-depth website settings, including SEO, GDPR, social media links, pixels, testimonials, and more. 


 

Website Icon

Click to view your live website in a new tab.

Publish Options

Click the Publish arrow to access all publishing actions, including previewing, selecting specific pages, and publishing your changes


Using the navigation panel

Located on the left side of the Website Builder, the navigation panel acts as your site map. It organizes your website structure into three tabs: Pages, Layers, and Modals. When you select an item in the navigation panel, its customization options will appear in the attributes panel on the right.

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.

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. This is especially helpful when editing complex layouts or targeting specific elements for styling or rearrangement.

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 attributes panel on the right to configure when and where the modal appears across your site.


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.

  1. Click the Settings icon in the top navbar.
     
  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, you'll be asked whether you want to Auto Populate Data. This determines how your content appears in the updated template whether it will include placeholder content (visual examples) or pull in your existing posts.
  • Select Yes to include placeholder content that helps visualize your layout while you're still building.
  • Select No to automatically fill in your existing posts, ideal if your content is already live and well-developed. Auto-populating will save time by filling in your actual content.

    Once your selection is made, click Switch Templates to proceed.

  1. A confirmation message will appear asking you to confirm the change. To proceed, click Switch Templates again.
Warning: Switching templates will overwrite your current theme styling, including fonts and colors. This change cannot be undone, so be sure before confirming.


 


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.


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:

  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.
  1. Click Preview Draft Site to review your changes before going live.
     
  2. When everything looks good, click Publish to Live Site, then visit your website URL to confirm the updates.
Pro Tip: Don’t worry if your site doesn’t look exactly like the template you selected, that’s normal before publishing. Until your site is live, beehiiv displays a default layout to help you get started with design and begin collecting subscribers. Once published, your chosen template and customizations will appear as intended.

Related Articles

Want More Features?

Upgrade your plan to access more beehiiv tools and supercharge your growth

the one place to build
the one place to build
the one place to build
the one place to build
the one place to build
the one place to build
the one place to build
the one place to build
the one place to build
the one place to build
the one place to build
the one place to build