Resources

×

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

Forum

Blog

Github

Signup

Made in Builder

Getting started with the visual editor

Use these tips to start building pages in Builder.io.

Create a page

1 min

Columns

1 min

Image Sizing

1 min

Insert tab

1 min

Options tab

1 min

Style tab

1 min

Styling

1 min

Alignment

1 min

Margin & Padding

1 min

Layers tab

1 min

Copy & paste

1 min

X-Ray Mode

1 min

Box block

1 min

Custom CSS properties

1 min

Copy & paste style

1 min

Multi selection

1 min

Grouping

1 min

Duplicate layers

1 min

Responsive Mobile Styling

1 min

Child layout options

1 min

Hiding layers per device

1 min

Builder uses the block model for laying out content. By following a couple of fundamental rules, everything you create in Builder is automatically responsive, which means your pages adapt to almost every screen. This guide covers:

Adding a template

The fastest way to start creating your website with Builder is by adding new blocks to a page. You can build them from scratch or use our pre-made templates to create a style that looks professional and clean on all devices.

Personalizing your content

To edit a template on your page, double-click on the item you would like to edit, which opens the editing panel. If there is content on the page you don’t want, click on the item and press delete. If you decide you want to re-add the item on the page, you can undo your changes by pressing Ctrl+z or Cmd+z.

If you want to make a button or item on your page a link, click on the item to edit, click the link icon, and enter the URL you want the content to link to.

Previewing your site

You can preview your website on desktop, tablet, and mobile devices by clicking the device icons near the top of the editing area. If you decide to make changes in mobile view, this styling only affects your website in mobile view. When you change back to desktop or tablet mode, the mobile styling does not apply.

Adding content

Builder comes with a number of pre-made templates, which you can use as they are, or you can customize. You can also add new content to an existing template. If you want to add a text box or image, drag and drop it where you’d like it to be placed. You can add new content next to or below your current content.

Up Next

Responsive design
Was this article helpful?