Getting Around Builder: The Visual Editor
To build pages and parts of pages with drag-and-drop functionality, use Builder's Visual Editor. Check out the video for a walkthrough of the Visual Editor.
This rest of this article is a written tour of the Visual Editor main features and covers the following sections:
Opening the Visual Editor
To get to the Visual Editor, go to Content and open a Page or any other kind of content you have. This example has the default Page, a Symbol, and a Homepage Hero.
When you pick Page, for example, all your pages display in a list to the right. Open one of your pages by clicking once on the page or, if you don't have any pages, click the +NEW button in the upper right to create a new page.
When the new page opens, you're in the Visual Editor.
Overview of the Visual Editor
When you open or create a page, Builder launches the Visual Editor, a user interface with a working area in the middle and a section on either side where you can find many of the options for building and configuring your page or section.
The main working area
The central area of the Visual Editor is where you drop blocks to build your page. Work graphically by dragging and dropping elements on and around your page. Select an element in the working area to configure its layers, options, styles, animations, and data.
When a page is empty, there's a blue section with the words, +Add Block. Drag and drop blocks from the Insert tab onto this blue section to start building.
When the page has contents, it resembles the live version of the page, but in the Visual Editor, you can select parts of the page by clicking on them and editing the properties in the tabs that pertain to that block. Whenever you select a section, the Options, Style, Animate, and Data tab contents change according to the context of that block.
The Insert tab: where the building blocks live
The Insert tab contains all the elements that you can drag and drop onto the page, including:
The Layers tab: granular control
The Layers tab contains a list of each individual item on the page. Go to the Layers tab for the following:
- Display block nesting
- Rearrange blocks with drag-and-drop
- Rename blocks
The Options tab: content and metadata
The Option tab changes depending on your selection. If you select a text block in the working area, for example, you can use the Option edit the content, bindings, or links.
If you click on the Show Options button, the Options tab displays fields for configuring the page URL, Title, and description.
Each type of block has unique fields in the Options tab, such as the following for Image, Columns, and Text blocks:
For an Image block, use the Options tab to add a picture, set alt text, and create links.
For a Columns block, use the Options tab to re-order columns and configure contents.
For a Text block, use the Options tab to edit and style the text as well as specify a link for subsets of the copy or for the entire Text block.
The Style tab: design visually with the power of CSS
To specify designs for blocks, go to the Style tab where you can edit existing styles or create a custom look. The Style is where you add styles such as:
- Adjust size and alignment
- Show or hide a block at different screen sizes
- Set a background color or image
- Style the typography just as you would in a word processing app
- Specify spacing with margins and padding
- Set borders, shadows, and other CSS properties
- Create anchor links, set autofocus, and create ways for code to hook into an element
The Animate tab: bring the page to life
Select a block in the working area and use the Animate tab to add motion to the block. You can add animations on hover, page load, or scroll and you can specify any style to animate.
The following three screenshots are examples of the Animate tab according to the animation trigger. The first is an animation that triggers on page load, the next on hover, and the last on scroll into view.
You can choose from built-in animations such as fading in, or you can fully customize the animation by editing individual styles, just as in the Style tab.
The Data tab: connect to your data, wherever it lives
Use the Data tab to integrate with other platforms such as Shopify, Contentstack, Contentful, or any other integration Builder offers. For details, check out Setting up e-commerce plugins.
Mobile view: see the page at different screen sizes
Clicking on the icons for a laptop, a tablet, and a phone displays the current content in the working area at different screen sizes. Use these views to make your pages responsive. You can apply styles specifically to certain screen widths by editing the Style tab while in one of the mobile views.
For thorough coverage of responsive concepts and techniques, read Intro to Responsive Design.
The preview button
You can preview your page at any time while you're editing by clicking the preview eye in the top-right corner of the Visual Editor. You can also view the current live page using that button.
Getting to know your way around Builder is the first step to creating stunning websites. To get an overview of the possibilities see the following article:
- Getting Around Builder: the Top Bar gives you a tour of the functionality available allong the top of the Visual Editor. Learn about A/B testing, targeting, X-ray view and more.
Need Expert help?
Submit a project to our partners, BuildQuick, and be matched with a Builder expert.