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.
- Drag blocks from the Insert tab directly onto the work area.
- Combine content with layout blocks like Box, Section, or Columns.
- 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 Fusion Roles and Permissions.
To add a block in the Visual Editor:
- Make sure you're in Design mode.
- 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 onto the work area:
The Insert tab organizes blocks into categories, which include:
Import
Basic
Media
Code
My Templates
This screenshot shows where to find the Insert tab's categories:
You can import components, layouts, and designs in three ways:
- Import designs from the Builder Figma plugin.
- Import layouts from the web with the Builder Chrome extension.
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.
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.
Use the Code block to add custom functionality or logic to your page:
- 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.
Templates are reusable layouts that you can reuse across Projects. Each instance of a Template is independent, and changes to one do not affect the original or other instances.
- To create a template, select a group of blocks and choose Save as template.
After inserting blocks, adjust styles if needed in the Fusion Style tab.