Insert tab
Use the Insert tab in the Visual Editor to add and manage blocks like Text, Images, Videos, Buttons, Custom Components, Code, and Embeds.
Build and structure layouts with drag-and-drop blocks and layout containers.
What to know
- Drag blocks from the Insert tab directly onto the work area.
- Combine content with layout blocks like Box, Section, or Columns.
- Access all built-in blocks and registered Custom Components in one place.
- Reuse designs with Templates and Symbols.
To access the Insert tab, you must have the Editor role or higher in your Space. To learn more, see Roles & Permissions.
Add a block
To add a block in the Visual Editor:
- Click the Insert tab in the sidebar to view block categories.
- Expand a category such as Basics, Custom Components, Media, Code, Templates, or Symbols.
- Drag and drop a block onto the work area.
- Optional: use the Style and Data tabs to customize appearance and bind data.
The video below shows dragging and dropping a Text block into the Visual Editor's work area:
Block categories
The Insert tab organizes blocks into categories, which include:
Import
Basic
Custom Components
Media
Code
My Templates
My Symbols
This screenshot shows where to find the Insert tab's categories:
Import
You can import components, layouts, and designs in three ways:
- Drag a 21st.dev template onto the work area.
- Import designs from the Builder Figma plugin.
- Import layouts from the web with the Builder Chrome extension.
Basics
The Basics section contains commonly used block types:
- Text: add rich text with inline styling and link options.
- Image: optimized image block supporting alt text, dimensions, and performance settings.
- Button: clickable block with configurable text, colors, styles, and hover states.
- Columns: layout block that allows multi-column design with responsive stacking.
- Box and Section: flexible containers for grouping other blocks.
Custom components
Enterprise plans
Register custom components in Builder using your frontend framework so that they appear under Custom Components. From here, you can drag the components onto the work area like any other block.
Example custom components:
- Your branded hero section
- An announcement bar
- Blog article
For more detail, visit Register custom components in the Developer documentation.
Media
Use media blocks to add videos or embed external content. There are two options:
- Video: embed self‑hosted or third‑party video URLs with play controls and aspect‑ratio settings. For more information, see Working with Videos.
- Embed: insert any iframe or script, such as maps and tweets, using the Embed block for rich integrations.
Code
Use the Code block to add custom functionality or logic to your page. There are two options:
- Custom code: add custom HTML snippet to the page using the Custom code block. Use custom JavaScript to access state and other Builder-provided global variables. For more information, refer to Custom code in the Visual Editor.
- Variant containers: wrap blocks with logic for A/B testing or audience targeting.
Templates
Templates are reusable layouts that you can apply across content entries. Each instance of a Template is independent, and changes to one do not affect the original or other instances.
- Click View All Templates to browse your library.
- To create a template, select a group of blocks and choose Save as template.
Symbols
Symbols are reusable blocks that stay consistent across the pages. When you update a Symbol, the changes automatically apply to every instance.
For example, editing and publishing a header or footer Symbol updates all pages where the Symbol appears.