Tour the Page Builder 2.0 UI

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

The following numbers correspond to the screenshot.

  1. Type and name of post you're editing
  2. Arrow to expand the Tools menu
  3. Status notice
    This is blank before you make any editing changes, shows as Edited when there are unsaved changes. If the page contains changes from previous sessions that are saved but not published, Edited will also display.
  4. Search modules icon
    Click to expand the search box to search for the module name.
  5. Add content panel
    Click + to expand and x to close.
  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 and you exit Page Builder 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 CancelIf there are no editing changes, clicking Done exits the page without displaying these

Note: Changes in Page Builder are preserved as you make them. For more information discarding, saving, and publishing see Instant save - Save as draft - Publish.

Add Content panel

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

  1. Modules tab
    This tab displays both standard modules organized into sections and saved modules. Collapse the Standard modules section to see other types of modules (such as your saved modules and third-party modules). Drag a module into your layout to use it.
  2. Rows tab
    This tab displays column layouts and saved rows, as in the following screenshot. Collapse the Columns section to see any saved rows. Drag a layout or saved row into your layout to use it.
  3. Templates tab
    This tab displays standard layout templates (landing pages and content pages) and any layout templates that you have saved, as in the following screenshot. By default, the landing page layout templates open, but collapse that section to see any saved rows. Drag a layout or saved row into your layout to use it. 
  4. Saved tab
    If you prefer to see your saved rows and modules grouped on a separate tab, use the Saved tab. 

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 in the following screenshot.

This menu has the following choices.

  • 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 **NEW in 2.0
    Opens a preview screen, where you can choose to preview as small, medium, or large device. Click Edit to return to the Page Builder editing screen.
  • Revisions **NEW in 2.0
    Displays 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 drafts count as revisions. Saved drafts are not available as revisions.
  • Layout CSS and JavaScript
    A quick way to add CSS and JavaScript for this page only. You can assign a custom ID or class on the Advanced tab of any row, column, or module.
  • Global settings
    Various Page Builder settings that apply as defaults to all pages edited in Page Builder. 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 section 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.
  • Change UI brightness **NEW in 2.0
    This option is a toggle that changes the UI skin from light (default) to dark and back.
  • WordPress admin **NEW in 2.0
    This option lets you jump back into the WordPress editor for that page, or to the WordPress admin dashboard, or to the Customizer area, a shortcut for clicking Appearance > Customize from the WordPress admin panel. Any of these choices opens a new browser tab. Return to the original tab to go back to editing your page in Page Builder. Remember, your layout is saved as you work, and if you close that original tab for any reason, your layout is saved as a draft.
  • Help
    Play an introductory video or click links to the Beaver Builder knowledge base or to Beaver Builder Support.