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. If you've already completed Getting Started with Builder, the guides on this page are a perfect next step.
Featured guides
Popular Video Tutorials
The following collection of how-to videos walks you step-by-step through some of our customers' most requested project types.
How to Create a Page
Create a page. Perfect if youʻre new to Builder.
Skill set: Basic
Area: UI only
Length: < 1 minute
How to Make a Hero Block
Create a full-width image that features a button and copy.
Skill set: Basic
Area: UI only
Length: 3 minutes
How to Batch Upload Images
Upload multiple pictures at a time into Builder.
Skill set: Basic
Area: UI only
Length: 1 minute
How to Make 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
Create 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
How to Make an Announcement Bar
Create a bar that spans the whole viewport with an announcement.
Skill set: Basic
Area: UI only
Length: 1.5 minutes
How to Make 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
How to Make 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
How to Make a Footer Symbol
Create a footer Symbol with customizable inputs. If youʻre new to Symbols, be sure to check out Reusing Blocks first.
Skill set: Advanced
Area: UI only
Length: 5 minutes
Create a Section with a Changeable Background
Make a section with a background that changes when you hover over certain configured areas. Includes:
- interactive example, also known as a fiddle
- a preview so you can see the end result
Skill set: Basic
Area: UI only
Length: 17.5 minutes
How to Make 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
Mixing Content from Different Models
Learn how to embed a section that displays data model content inside of a Next.js page. Includes:
Skill set: Familiar with code
Area: UI and code
Length: 33 minutes
Build a Page with Templates
Using a pre-built Template, you can create your first Builder page quickly. Follow this tutorial to create your page in four steps. Then, have fun customizing your page.
Skill set: Basic
Area: UI only
Video coming soon
Get Up and Running with the Visual Editor
Learn your way around the Visual Editor by creating a page, using blocks, and styling your creation in this in-depth half-hour tutorial.
Skill set: Basic
Area: UI only
Length: 29 minutes
Create a Site Theme
Change site colors instantly with Data models that feature color pickers. Teammates can iterate on color palettes and make as many as they need.
Skill set: Intermediate
Area: UI only
Length: 3 minutes
Set Up Server-side Redirects with Next.js
Use a Builder Data model with your Next.js app to redirect site traffic from one URL to another.
Skill set: Familiar with code
Area: UI and code
Length: 2 mins
Set Up and Use Product Data
Use a Builder Data model to create Product Data and use that Data in the Visual Editor with data binding.
Skill set: Intermediate
Area: UI
Length: 4 mins
Make a Landing Page Series
Follow this six-step tutorial to make a responsive landing page.
Skill set: Basic
Area: UI
Length: Six 5-minute videos
How to Build Webinars
Builder's Webinar series, How to Build, features the Builder team sharing Builder techniques in-depth.
Need Expert help?
Reach out to us, and we will match you with a Builder expert.