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.
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.
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 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 contains all the elements that you can drag and drop onto the page, including:
- Fundamental building blocks for creating page elements from scratch
- A way to import from existing webpages, other apps, or Figma
- Built-in templates to quickly create professionally designed sections and pages
- Your own reusable blocks
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 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 for Image, Columns, and Text blocks:
- 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.
- 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.
The Options tab always changes to reflect the options available for configuring whatever you select in the Visual Editor work area.
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
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.
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.
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.
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.
