PageBuilder Editor Basics

Home > PageBuilder > Getting Started > PageBuilder Editor Basics

Launch the PageBuilder editor

This article contains both video and written instructions for accessing the Beaver Builder editor from both the WordPress standard and classic editor UI and from other locations in the WordPress admin panel or admin bar. NOTE By default, the PageBuilder editor is enabled for page layouts only. You can enable posts and custom post types in the PageBuilder settings (https://docs.wpbeaverbuilder.com/beaver-builder/management-migration/control-which-post-types-can-use-beaver-builder). 1. From t...

User Interface (UI)

Open a page for editing in Beaver Builder and here's what you'll see.

Tools Menu

Open the Tools menu by clicking the arrow in the page title bar in the upper left corner of your editing screen, as shown in this screenshot.

Outline panel

Click the Outline icon in the top bar of the PageBuilider editor to open the Outline panel, which lets you view and modify the structure of your page layout in an outline format: TIP The Outline panel doesn't have a drag handle, but you can remove its overlap on the layout with this trick. First display the Content panel and the use the drag handle to pin it to the right of the layout (https://docs.wpbeaverbuilder.com/beaver-builder/getting-started/bb-editor-basics/user-interface/#8-drag-han...

Show or hide the WordPress page title

If you are using Beaver Builder Theme, the title that you assign to the page in WordPress is hidden on pages with Beaver Builder layouts by default, though you can set it to show if you prefer.

Horizontal alignment

Horizontal alignment is selected with an icon choice for left, center, or right. For text, the horizontal alignment setting is usually in the Typography > Font section on the Style tab. For other elements, such as a Photo module, the setting appears in the Align field on the Style tab.

Inline editing

You can choose whether to edit text areas inline or in the editing window.

Undo and redo

The Beaver Builder editor keeps track of editing changes in Beaver Builder in a history, recorded at the following level of granularity:

Copy and paste

You can export any module's settings or styles to the clipboard and paste them into another module in the same layout or any other Beaver Builder layout on the internet.

Duplicate your PageBuilder layout to another page

You can duplicate any PageBuilder layout to a new page with the same layout and metadata. Duplication copies the entire page and all metadata from the back end, including SEO data. This works with all PageBuilder layouts: pages and posts, Themer layouts, and saved layout templates, rows, columns, and modules. When you duplicate the layout, a new page is automatically created and opens for editing. The new page has the following initial title and slug, which you can modify: - Title: Copy of...

Delete a module or column

You can delete a module and leave the column, or you can delete a column, which also deletes the column's contents.

Save, Publish, Discard

Autosave while you work Changes in the Beaver Builder editor are saved even before you save or publish the entire page. If the editor hangs before your work is saved or published, it's usually safe to reload the page in your browser. In addition, you can edit the settings for rows, columns, and modules and then open any other row, column, or module for editing without needing to click Save. As you edit your layouts you'll see the sequence Saving – Saved – Edited appear in the upper right corn...