How layers work in the beehiiv Website Builder

The Website Builder includes a Layers & Navigation tab that lets you focus on specific elements for complete customization. This is especially helpful for editing complex layouts or targeting precise areas of your page, giving you full, granular control over every detail.

When working in the Website Builder, you’ll utilize 5 key areas: the top navbar, the left icons menu, the center canvas, the right-hand design panel, and the bottom preview toolbar.

The Layers & Navigation tab is located in the Icons menu (the toolbar on the left). From here, you can also access your Navbar and Footer settings. 

Each page on your site is made up of sections, which are divided into containers, and each container holds individual elements.

You can navigate through the sections, containers, and elements from the Layers & Navigation tab. Or, with the tab open, you can also click directly on any section, container, or element.

In the following example, the section shown contains two containers. 

• The first container holds two elements, a heading and a paragraph. 
• The second container holds a subscribe form element. 

Selecting the section lets you customize it as a whole, with options for background, layout, and visibility (such as hiding it on mobile or desktop). 

To get more granular within a section, select the container on the left to access additional options in the design panel on the right, such as positioning within the section, a background for the container, and specific layout for the elements within the container. 

For the most detailed customization, select an individual element to view and edit its available design settings. In the example, we’re looking at the options for the heading in the first container.