Watch Webinar: Figma - Design to Code in 80% Less Time

Announcing Visual Copilot - Figma to production in half the time

Builder.io logo
Talk to Us
Contact Sales
Platform
Developers
Talk to Us

Blog

Home

Resources

Blog

Forum

Github

Login

Signup

×

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

Let's build together

Popular Tutorials

The documentation within Building Content features the Builder Visual Editor, an intuitive drag-and-drop editor where you can quickly build Pages, Sections, and leverage your data.

Featured guides

Image of the visual editor and a mouse pointer over a header with copy.

Make a Landing Page

Image of a screen at a wide width and a much narrower width on a phone.

Become a Responsive Design Pro

Tour the Visual Editor

Reuse Blocks to Work Smarter

The following collection of how-to videos walks you step-by-step through some of our customers' most requested project types.

Creating a Page

Make a basic page in under a minute. Perfect if you are new to Builder.

Skill set: Basic

Area: UI only

Length: < 1 minute

Making a Hero Block

Create a full-width image that features a button and copy.

Skill set: Basic

Area: UI only

Length: 3 minutes

Batch Uploading Images

Upload multiple pictures at a time into Builder.

Skill set: Basic

Area: UI only

Length: 1 minute

Making a Multi-column Section

Create a section with multiple images in columns that sit side-by-side at larger screen widths and stack on smaller screens.

Skill set: Basic

Area: UI only

Length: 2 minutes

Creating a Full-width Two Column Section

Create a section that spans the whole viewport with a pull quote on one side and an image on the other.

Skill set: Basic

Area: UI only

Length: 4 minutes

Making an Announcement Bar

Create a bar that spans the whole viewport with an announcement.

Skill set: Basic

Area: UI only

Length: 1.5 minutes

Making a Full-Width Carousel

Create a section with multiple images that you can scroll through horizontally.

Skill set: Basic

Area: UI only

Length: 2.5 minutes

Making a Footer

Create a footer that spans the viewport, contains a logo, and columns of links. These guidelines meet most use cases.

Skill set: Basic

Area: UI only

Length: 10 minutes

Making a Grid Layout

Create a responsive grid layout with techniques that you can adapt to different designs.

Skill set: Intermediate

Area: UI only

Length: 10 minutes

Was this article helpful?

Product

Visual CMS

Theme Studio for Shopify

Sign up

Login

Featured Integrations

React

Angular

Next.js

Gatsby

Get In Touch

Chat With Us

Twitter

Linkedin

Careers

© 2020 Builder.io, Inc.

Security

Privacy Policy

Terms of Service

Newsletter

Get the latest from Builder.io

By submitting, you agree to our Privacy Policy