Learning the visual editor
Responsive design tricks
Saving layers as templates
Importing your site pages
Connecting custom data
Interactive pages with state and actions
Creating reusable components with Symbols
Targeting and scheduling content
Building custom forms
SEO optimizing Builder.io content
Creating custom models
Using custom fields
Enable on-site previewing and editing
Dynamic URLs and advanced data fetching
Adding Custom Code
Using 3rd party libraries
Extending Builder.io with plugins
Using your React components in Builder
Triggering custom actions
Ruby on rails
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).
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.
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.