This article contains both video and written instructions for navigating the Beaver Builder user interface (UI) when you have a page open for editing in Beaver Builder.

Getting to Know the Beaver Builder Interface

When you launch Beaver Builder a page or post in Beaver Builder, you’ll enter the editing workspace — this is where all the magic happens. The workspace (or user interface) is designed to be simple, visual, and easy to navigate, even if you’re new to page building.

Once the page is open, you’ll see four main parts of the Beaver Builder interface, each with its own purpose:

1. Top Bar

This is the slim bar across the top of your screen. Think of it as your control center — here, you can publish or discard changes, access page settings, and use helpful tools like preview or responsive view.

2. Tools Menu

Located in the top-left corner of the top bar, the Tools Menu gives you access to handy options like saving your layout, viewing revision history, importing/exporting templates, and help resources. It’s a great place to go if you want to manage your project or troubleshoot quickly.

3. Content Panel

You’ll find the Content Panel on the right-hand side (or by clicking the “+” button in the top bar). This is where you choose what to add to your page — from text blocks, images, and buttons to prebuilt rows and templates. Just drag and drop the elements you need directly onto the page.

4. Settings Window

Whenever you click on a row, column, or module in your layout, a Settings Window appears. This is where you can customize how that element looks and behaves — adjust colors, change fonts, add links, and much more — all without touching a single line of code.

Tip: You can move and resize most of these interface panels, so feel free to adjust the workspace to match your editing style.

In This Section: