BUILDER

Resources

Home

Forum

Github

Login

Signup

This page was made in Builder!

Getting started with the visual editor

Use these 3 tips to master building pages in Builder.io!

Builder uses the block model for laying content out. This means as long as you follow a couple of simple rules, everything you create in Builder is automatically responsive and will look nice on almost every screen. In this guide, we will be reviewing:

Adding a template

The easiest way to start creating your website with Builder is by adding new blocks to a page. Using templates is an easy way to add blocks and create a style that will look professional and clean on all devices.

Personalizing your content

Once you have a template on your page, editing the content is straightforward and easy. Just click on the item you would like to edit, and an editing panel will appear on screen. If there is content on the page you don’t want, just click on the item and delete it. If you decide you want to re-add the item on the page, you can undo your changes.

If you want to make a button or item on your page a link, just click on the item to edit and enter in the URL you want the content to link to (e.g. link a button to your about page).

Preview modes

Next, you can preview your website in different device modes (desktop, tablet, and mobile device). If you decide to make changes in mobile view, this styling will only affect your website in mobile view. Once you change back to desktop or tablet mode, the styling will not be applied.

Adding content

Lastly, you are able to add new content to your existing template. If you want to add a text box or image, all you have to do is drag and drop it where you’d like it to be placed. You can add new content next to or below your current content. Just click, drag, and drop.

Up Next

Responsive design tricks
Was this article helpful?