What's new in Page Builder 2.0

Welcome to Page Builder 2.0! Here's a list of the major new features. See the other articles in this collection for more information about each feature, and see the changelog for a detailed list of enhancements and bug fixes for each release.

1

UI redesign

The first thing you'll notice is that the user interface in Page Builder 2.0 has a new look. Menus have been put into new locations, and the Content panel has been organized a little differently.

See this article for a self-guided tour.

2

Settings panel improvements

The Settings panel for editing rows, columns, and modules has a new, streamlined look and some new functionality, as shown in this animation and described below.

  • Move the Settings panel anywhere you want it on the screen. It stays there until you move it somewhere else, even when you edit a different page.
  • Expand the size of the panel by dragging the edges. The new size persists for any Settings panel you open until you resize it again.
  • Extend the panel to full screen by clicking the icon in the upper right corner. Close it by clicking the Minus icon in the upper right corner of the expanded window.
  • Pin the Settings panel into the Content panel by clicking the drag icon and dragging the panel. As you drag, blue zones appear on the left and right of the screen, and you can drag to either location.
    After the Settings panel is pinned, you have access to the other Content panel tabs, as shown in the following screenshot. Use the drag handle icon to unpin the Settings and Content panels. Hide or show the pinned panel by clicking the arrows at the bottom of the panel. To unpin the panel, pull it back out with the drag handle.
3

Speedy, speedier, speediest!

We went full throttle on speeding up Page Builder. You'll notice the improvements even without reading this section! Or see the video about the latest improvements here.

Editing settings: the wait is over

No more waiting for modules to open and save. Even when you're working online, module settings open for editing almost instantly and are autosaved if you click in the layout to make a change somewhere else. Of course, you can click Save if you prefer. To discard any changes while you've still got the module open, click Cancel.

Why so fast? We've completely rewritten the settings forms in JavaScript so they don't need to be loaded from the server anymore. The only time something needs to load is if you're using a third party add-on that introduces legacy PHP fields. 

Make a quick side trip to the Dashboard, Customizer, or Edit Page

While you're editing a page you can quickly open the WordPress dashboard, the Customizer, or WordPress Edit Page in another browser tab. Get your information or make your change and go back to the previous tab to continue editing your page. The icon shown in this screenshot indicates that clicking the link will open another browser tab:

Streamlined Publish and Save when you're done

Click the Done button to get a choice of Discard, Save as draft, Publish, or Cancel. If you choose Save as draft or Publish, you'll immediately exit Page Builder with no need to confirm your choice. To re-enter Page Builder, hit e on your keyboard. Or simply enter Ctrl + p (or Cmd + p on Mac) to publish without leaving the editor. 

The Page Builder editor also notifies you when it's autosaving and shows you when you have any saved changes in your layout. 

And you can revert to previously published versions more easily using the Revisions option on the Tools menu.

For more information about saving, publishing, and status, see the article Instant save - Save as draft - Publish.

Keyboard shortcuts

As you've seen in previous sections, there are keyboard shortcuts for many of the repetitive operations, like opening and closing menus, publishing, and moving in and out of Page Builder. All keyboard shortcuts use lowercase letters or keyboard function keys and are listed on the  Keyboard shortcuts reference page, or you can access the list online on the Tools menu. We bet you'll find at least a couple that you use over and over.

4

Easy per-device page preview

In Page Builder, go to Preview on the Tools menu or just hit p on the keyboard, and you'll go into Preview mode, where you can view that page on large, medium, and small devices. Click Edit or the Escape key to return to editing.

5

New setting for individual row widths

You can set the max-width on individual fixed-width rows or row content, and you can do it either with a setting or by dragging a handle on the modules, similar to how columns work. More information in the article on setting row and content width.

6

Duplicate columns!

Yes, that feature you've been wanting is finally here. See the Related Articles for information about how to do it.