How layers work in the beehiiv Website Builder

The Website Builder includes a Layers 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 tab is located in the Icons menu (the toolbar on the left). 

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

Next to any layer, click on the 3 dots menu for additional options, all within the layers menu. Choose between: 

• Rename: Rename any layer for easier access. 
• Duplicate: Duplicate a layer to use elsewhere on your page. 
• Insert block above: Insert a new block above. 
• Insert block within: Insert a new block within the selected layer. 
• Insert block below: Insert a new block below. 
• Move up: Move the layer up on the page. 
• Move down: Move the layer down on the page. 
• Move out: Move the selected layer out of its current container.
• Move in: Move the selected layer into another container. This option is only available after using the ‘Move out’ option. 
• Delete: Remove and delete the layer entirely.