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
Popular video tutorials
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 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
Creating 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
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
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
Creating a Countdown Timer Hero
Use a built-in Builder template or custom code to create a countdown hero.
Skill set: Basic OR familiar with code
Area: UI or code
Length: 21 sec for built-in template.
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
Creating 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
Setting 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
Setting up and Using 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
Making 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
