Live Editor

3 min read Updated

The Live Editor shows your Page Builder layout next to a live preview of the page. Each change you make shows in the preview before you save. If you are new to Page Builder, start with the Page Builder documentation.

Open the Live Editor

Click Live Editor in the Page Builder toolbar. The Live Editor opens over the whole screen.

The preview needs a saved page. On a new page, Page Builder saves a draft first. In the Page Builder interface, a page with no title gets the title Draft.

The Live Editor with the builder sidebar and a live preview

Edit With a Live Preview

The sidebar on the left holds the full builder, with its toolbar, rows, columns and widgets. Use Add Widget, Add Row, Layouts and History as you would in the main editor. The preview on the right reloads after each change to the layout.

Click a widget in the sidebar to open its edit dialog. When you click Done, the preview shows the change.

Preview Tablet and Mobile

Use the device buttons at the top of the sidebar to change the preview width:

  • Desktop: the full width of the preview area.
  • Tablet: 720px wide.
  • Mobile: 320px wide.

Use them to check how your rows and columns collapse on smaller screens. With the default Mobile Width of 780px, the Tablet preview shows the mobile layout. To check the page at tablet widths, resize your browser window instead.

The Live Editor in mobile preview

To make the preview wider, click the arrow at the top left to collapse the sidebar. Click the arrow again to show the sidebar. On screens 980px wide or less, the preview shows only while the sidebar is collapsed.

Save and Close

  • Update saves the page and closes the Live Editor. It does not publish a draft. On a draft in the Page Builder interface, this button is Save Draft.
  • Close closes the Live Editor without saving. Your changes stay in the builder. Save the page to keep them. You can also press Esc. If you opened the Live Editor from the admin bar link, Close instead takes you back to the page on your site, and your changes are not kept.

Open the Live Editor From Your Site

When you view a page that you built in the Page Builder interface, the admin bar shows a Live Editor link. Click it to open the page in the Live Editor.

The Live Editor link in the admin bar on the front end

Two settings control this link. Go to SettingsPage BuilderGeneral.

Live Editor Toolbar Link
Show the Live Editor link in the admin bar. Enabled by default.

Live Editor Toolbar Link: Close After Editing
When you open the Live Editor from the link, return to the page on your site after you save. Enabled by default on new sites. This setting shows only when Live Editor Toolbar Link is enabled.

Use the Live Editor in the Block Editor

The SiteOrigin Layout block has the same toolbar, with a Live Editor button. It works the same way, with these differences:

  • On a new page, the Live Editor button shows after the draft is saved. Page Builder saves the draft for you.
  • The preview shows only the layout of the block you are editing. Other blocks on the page don’t show in the preview.
  • Layout blocks don’t add the Live Editor link to the admin bar.

Next Steps