Made in Builder

Made in Builder

×

Developers

Product

Use Cases

Pricing

Developers

Resources

Company

Get StartedLogin

Product

Features

Integrations

Talk to an Expert

Pricing

Blog

Home

Resources

Blog

Forum

Github

Login

Signup

×

Visual CMS

Drag-and-drop visual editor and headless CMS for any tech stack

Theme Studio for Shopify

Build and optimize your Shopify-hosted storefront, no coding required

Resources

Blog

Get StartedLogin

Getting Around Builder: The Top Bar

The top bar of the Visual Editor gives you access to editing your project, A/B Testing, Insights, and more. Watch the following video for an introduction to the top bar's key features. Continue down this document for a written version of the tour with screenshots.

Along the top of the Builder Visual Editor, you can access the following:

Editing the name of the page

A/B Tests

Insights

Versions

History

Changing the Visual Editor layout

Full screen editing

X-ray mode

Heatmaps

Edit the URL of the page

Targeting and scheduling

Undo/redo

Preview the page

Publish

Whole page actions including:

  • Unpublishing
  • Deleting
  • Archiving the page
  • Duplicating the page
  • Copying the page to a different Space

This article introduces the items on the top of the Builder Visual Editor. For an overview of the other parts of the Visual Editor that you use for creating page content, styles, and data, read Getting Around Builder: the Visual Editor.

Editing the name of the page

To edit the name of the current page, click on the title in the uppermost left of the screen and enter a title. This name is the name internally in Builder and doesn't show publicly when you publish.

You can use this to your advantage if internally your team refers to pages by names other than their published titles. For example, internally, the Builder docs team begins all the docs in the Take a Tour section of the left navigation with "Tour:..." so when searching for these files internally the search term "tour" returns all of them.

Another potential use case for internal naming is to use these titles to let your teammates know you're actively working in a file. For example, you could name a work in progress page "Blog post for next release. Do not delete. (Sarah)" This lets your teammates know at a glance that this page belongs to Sarah and is important.

When you duplicate a page, Builder automatically appends a number to the end of the title while maintaining the original title. You can select the title to give the new page a unique name.

A/B Tests

To create A/B Tests, or tests where you test one kind of content against another, go to the A/B Tests tab. To run an A/B Test, you need at least two versions of what you want to test. This tab walks you through creating a duplicate page if you don't already have one and then guides you through the process of creating a variation.

For a tutorial on how to set up A/B tests, check out the documentation on A/B Testing.

Insights: get page analytics

Go to the Insights tab to find page analytics such as click through rates, impressions, and conversions. For more information on what you can do with Insights, including working with heatmaps, read Viewing Metrics with the Insights tab.

Versions

The Versions tab displays all versions, including drafts and live versions of the page. You can switch versions or edit any iteration.

History

Builder autosaves every few seconds so you can refer to the History tab to revert to an earlier state, see who worked on the file and when, as well as see and revert to any previous published state.

With the Checkpoints tab, you can view all saved Checkpoints. A Checkpoint is a snapshot of your page at the moment you press Cmd+s on a Mac or Ctrl+s on a PC. Save a Checkpoint if you want to quickly return to a certain state.

Changing the Visual Editor layout

To change where the tabbed panels are in the Visual Editor, click the Change Editor layout icon just above the work area. Choose Automatic, Two Column, or Three Column.

  • Automatic changes the layout depending on screen size.
  • Two Column moves all of the panels to the left of the work area.
  • Three Column keeps the Insert tab to the left of the work area and the rest of the editing tabs to the right.

Working in full screen mode

To use as much of the screen real estate as possible while editing a page, click the full screen editing icon. This keeps the editing tabs but hides items that you might use less frequently.

To exit full screen mode, click the x in the upper left of the editor.

X-ray mode

Use X-ray mode to outline every element on your page so you can see the structure clearly. This is helpful for finding empty blocks that are otherwise invisible and seeing how items are nested.

Note that X-ray mode adds spacing to make the outline clear. To see the page without the extra spacing, toggle X-ray mode off by clicking the icon again or preview the page.

Viewing Heatmaps

Use the Heatmaps icon as a shortcut to see your heatmap data.

Toggle Heatmaps view on or off by clicking the Heatmaps icon.

Editing the page URL

To temporarily change the page URL, click and edit the URL to the right of the Laptop, Tablet, and Phone icons.

Targeting and scheduling

Use Targeting to get the right content to the right people. For example, you could have one experience for those logged in and another for those logged out. You could vary the experience depending on device, or you could show content based on the URL. There are a number of built-in options including custom targeting for Enterprise plans.

With Scheduling, you can specify dates and times for content to go live and combined with Targeting, you can deliver the right content to the right audience at the right time.

For more details on Targeting and Scheduling, read Targeting and Scheduling Content.

Undo and redo actions

To back up an edit, click the Undo icon, which is the curved arrow that points to the left. To bring the last undone edit back, click the Redo icon, which is the curved arrow that goes toward the right.

Preview

Whether you've published or are still working on a draft, you can check the preview by clicking on the eyeball icon and selecting View Current Draft or View Live Page. To see your changes on the live page, make sure you click the Publish or Publish Update button before checking the preview.

Publish

When you're ready to move beyond the drafting stage and share your creation, click the Publish button.

By publishing, you make that version of the content canonical. When you make changes to a page, for example, you must publish the updates for the page to reflect those changes.

Though generally you'll have one unique URL for each page, you can have multiple pages with the same URL and configure when which page goes live. For more information on having multiple versions of the the same page published, see Targeting and Scheduling Content.

Whole page actions

Click the three dots icon in the far upper right of the screen to get access to the following:

Unpublish the current content to remove it from your live site. The unpublished content remains in Builder.

Archive to remove the item from the list of content. Archiving is a reversible process. To view your archived items, on the Content page, filter by Published is Archived.

Duplicate to make a copy of this content in its entirety.

Copy the current item to another Space. Builder takes you to that other Space where you can select where to paste the content.

Get code for embedding in your existing, non-Builder site.

Create fiddle for sharing a view or editable version of the content in the Visual Editor.

Delete the content in its entirety forever. This is irreversible and the item cannot be restored. If you think you might need the content again in the future, considering archiving instead.

Next steps

Getting to know your way around Builder is the first step to creating stunning websites. To start making pages and seeing what Builder can do, check out the following article:

  • Builder 101 walks you through creating your first Builder website and introduces you to the core concepts of site building.

Need Expert help?

Submit a project to our partners, BuildQuick, and be matched with a Builder expert.

Submit a project

Was this article helpful?