Register Now: Use Visual Dev + AI to Ship 10x Faster on July 24

Announcing Visual Copilot - Figma to production in half the time

Builder.io logo
Contact Sales
Platform
Developers
Contact Sales

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

Product

Visual Copilot

Visual Headless CMS

Integrations

What's New

Open Source

Builder

Builder

Mitosis

Mitosis

Qwik

Qwik

Partytown

Partytown

Popular Guides

From Design to Code Ebook

SaaS Marketing Site Ebook

Composable Commerce Ebook

Headless CMS Guide

Headless Commerce Guide

Design to Code

Resources

Blog

Knowledge Base

Community Forum

Partners

Performance Insights

Templates

Success Stories

Showcase

Resource Center

Frameworks

React

React

Next

Next.js

Qwik

Qwik

Gatsby

Gatsby

Angular

Angular

Vue

Vue

Svelte

Svelte

Remix logo

Remix

Nuxt

Nuxt

Hydrogen

Hydrogen

Builder.io logo

Visually build and optimize digital experiences on any tech stack. No coding required, and developer approved.

Get StartedLog In
© 2024 Builder.io, Inc.

Security

Privacy Policy

SaaS Terms

Security & Compliance

Cookie Preferences