Watch our biggest AI launch event

Announcing Visual Copilot - Figma to production in half the time

Builder.io logo
Contact Sales
Platform
Developers
Contact Sales

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

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.

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.

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.

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.

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

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.

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.

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.

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.

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

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

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

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.

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.

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.

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.

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.

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.
Was this article helpful?

Product

Visual CMS

Theme Studio for Shopify

Sign up

Login

Featured Integrations

React

Angular

Next.js

Gatsby

Get In Touch

Chat With Us

Twitter

Linkedin

Careers

© 2020 Builder.io, Inc.

Security

Privacy Policy

Terms of Service

Newsletter

Get the latest from Builder.io

By submitting, you agree to our Privacy Policy

Product

Platform Overview

Integrations

What's New

Open Source

Builder

Builder

Mitosis

Mitosis

Qwik

Qwik

Partytown

Partytown

Popular Guides

From Design to Code Guide

Composable Commerce Guide

Headless CMS Guide

Headless Commerce Guide

Composable DXP Guide

Design to Code

Resources

Blog

Knowledge Base

Community Forum

Partners

Templates

Success Stories

Showcase

Resource Center

Frameworks

React

React

Next

Next.js

Qwik

Qwik

Gatsby

Gatsby

Angular

Angular

Vue

Vue

Svelte

Svelte

Remix logo

Remix

Nuxt

Nuxt

Hydrogen

Hydrogen

See All

© 2024 Builder.io, Inc.

Security

Privacy Policy

SaaS Terms

Security & Compliance

Cookie Preferences