Tour the Beaver Builder 2.2 editing page

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

Tip: For a video tour of the UI, click the arrow labeled #2 in the screenshot above to expose the Tools menu, then click Help. The video is displayed at the top of the Help window.

The following numbers correspond to the screenshot above.

  1. Title bar
    Shows what you're editing (page post, etc.) and its title.
  2. Arrow to expand the Tools menu
    See below for more information about the Tools menu.
  3. Notifications icon
    Click the bell icon to open notifications of news from Beaver Builder. 
    Note: If you have and Agency license and have white-labeled Beaver Builder, this icon won't be displayed.
  4. Editing status
    This area is blank before you make any editing changes and shows as Edited when there are any unpublished changes, even from previous sessions.
  5. The Content panel show/hide icon
    Click + to expand and x to close.
    Note: This icon does not appear when the panel is pinned to the left or right side of the screen. Instead, there's a show or hide icon at the bottom of the panel.
  6. Done button
    The behavior of this button depends on whether you've made any editing changes in this session.
    • When the Done button is gray there have been no editing changes: Click Done when it's gray and you exit the Beaver Builder editor with one click.
    • When the Done button is blue, there have been editing changes, and the status Edited appears to the left.
      Click Done to open a choice of Discard, Save draft, Publish, or Cancel.

Warning: Changes in Beaver Builder are preserved as you make them. When you click Discard, you lose all saved changes since the last time you published, and only publishing creates a revision you can go back to. For more information about discarding, saving, and publishing see Instant save - Save as draft - Publish - Discard.

The Content panel

The numbers correspond to those in the screenshot at the top of the page.

  1. Drag icon
    Click and hold the left mouse button on this icon to drag the Content panel anywhere on the screen.
    You can pin the panel by dragging it to the side of the screen and dropping it into a blue vertical strip that appears. To unpin the panel, grab the top of the panel and drag it back to the center.
  2. Group selection within the tab
    Each tab (#9-12) is organized into groups. Click the Group box to navigate to other groups on that tab.
  3. Search icon (Modules tab only)
    Click to expand the search box and start typing any part of a module name.
  4. Modules tab
    This tab has three subgroups:
    • Standard (built-in) modules
    • WordPress widgets that can be used as modules
    • Saved modules, organized under each module type.
      Tip: Saved modules can also be accessed from the Saved tab.

    There may also be groups of third-party modules, depending on other plugins you have installed.

  5. Rows tab
    Drag any item into your layout. This tab contains the following groups:
    • Column layouts
    • Prebuilt rows (Beaver Builder 2.2)
    • Saved columns
    • Saved rows
  6. Templates tab
    This tab displays the built-in layout templates (landing pages and content pages) as in the following screenshot, plus any saved layout templates. Click on any template to insert it into your layout.
  7. Saved tab
    Displays all your saved items grouped into rows, columns, and modules.

Tools menu

When you click the arrow in the upper left side of the top bar (labeled #2 in the screenshot above), the Tools menu opens, as shown in the following screenshot. Shortcut symbols will appear differently according to your OS.

This menu has the following choices.

  • Publish layout
    Publishes the layout without closing the Beaver Builder editor.
  • Save template
    Saves the layout on the current page as a template
  • Duplicate layout
    Copies the entire page and all metadata from the back end, including Yoast SEO data. Creates and opens a new page or post with "copy" in the title.
  • Preview layout
    Opens a preview screen, where you can preview as a small, medium, or large device. Click Continue editing to return to the Beaver Builder editing screen.

  • Responsive editing
    Edit your layout directly in a medium or small device view, as shown in this screenshot. Click Exit to return to large screen editing.
  • Revisions
    Display the previously published revisions available to revert to. This menu item uses the core WordPress revision feature but makes it more convenient to view and access revisions.
    Note: Only published pages count as revisions. Saved drafts of pages are not available as revisions. See the Related Article below for more details about how to revert to previous versions.
  • Layout CSS and JavaScript
    A quick way to add CSS and JavaScript that only apply to the page being edited. You can assign a custom ID or class on the Advanced tab of any row, column, or module, then use it in your CSS rule.
    As of Beaver Builder 2.2.2, a green dot shows beside this menu item when custom CSS or JavaScript has already been added.
  • Global settings
    Beaver Builder editor settings that apply as defaults. Most of these settings can be overridden on individual pages. There's also a CSS and JavaScript tab to enter CSS and JavaScript that will apply to content layout throughout your site.
    Note: Use this CSS and JavaScript tab for page content layouts only. If the CSS or JavaScript applies to parts of the page controlled by the theme or a theme layout, use Customizer. As of Beaver Builder 2.2.2, a green dot shows beside this menu item when custom CSS or JavaScript has already been added.
  • Change UI brightness
    This option is a toggle that changes the UI skin from light (default) to dark and back.
  • WordPress admin
    This option opens a new browser tab and serves as a shortcut to get to popular spots from the WordPress admin panel:
    • The WordPress editing screen for the page you're currently editing in Beaver Builder
    • WordPress admin dashboard
    • Beaver Builder > Templates
    • Appearance > Customize


      Be careful to close this new tab to return to your original Beaver Builder layout to ensure that any editing changes don't get lost.

  • Help
    Play an introductory video or click links to the Beaver Builder knowledge base or to Beaver Builder Support.
  • Keyboard shortcuts
    A list of the keyboard shortcuts. Note that the shortcuts are shown in uppercase letters, but the actual shortcuts are lowercase.

Related Articles