BetaHelp
ESSign up

Inserting elements and blocks on the canvas

Every element in the Insert panel: layout containers, text, photos, videos, buttons, navigation, and interactive components.

On this page

Beyond adding full sections from Templates, you can insert individual elements inside any section to add an extra button, a photo, a grid, a video, or an FAQ accordion.

When Advanced options are turned on, you’ll find every building block under the Insert (+) icon on the left rail. In Essential mode, you can insert elements by clicking the + button that appears when you select any element on the canvas.

The Basics folder: essential building blocks for any section

The first folder in the Insert panel is called Basics and opens by default. It gathers the 13 most-used elements in one place so you don’t have to hunt through folders:

Section, Heading 1, Heading 2, Paragraph, Image, Primary button, Icon, Grid, Divider, Gallery, Form, Frequently asked questions, and Reviews.

Below Basics, the rest of the catalog is organized by category.

Layout: Section, Block (Div), Grid, and Divider

These are the structural containers that group and arrange other elements:

  • Section: the main horizontal band of a page. Every page is a vertical stack of sections from top to bottom.
  • Block (Div): a flexible container for grouping several elements together (for example, an icon, a heading, and a paragraph inside a card) and aligning them in a row or column.
  • Grid: arranges child elements into proportional columns and rows that automatically adapt on tablet and mobile.
  • Divider: a horizontal or vertical dividing line to separate content blocks.

Text (Typography): Headings (H1 to H6), Paragraph, and Small text / Eyebrow (Small)

Every text element is created already linked to its matching global Text style:

  • Headings (Heading 1 to Heading 6): heading hierarchy for hero titles (H1), section titles (H2), subtitles (H3), and card titles (H4–H6).
  • Paragraph: body text block for descriptions and general reading.
  • Small text / Eyebrow (Small): designed for eyebrows above headings, footnotes, badges, or short captions.

Visual and multimedia elements:

  • Image: photograph or illustration with framing, crop, corner radius, and alt text (Image alt text) controls.
  • Video: player for your own uploaded video files (MP4 or WebM), either as an ambient background video (muted and looping) or with player controls.
  • YouTube / Vimeo: embeds an external video by pasting its public link.
  • Icon: picker with thousands of vector icons organized by family (Interface, Arrows, Contact, Commerce, Media, Technology, Symbols, and Social).
  • Logo: inserts your global brand logo (automatically switching between its light and dark versions based on the background).
  • Gallery: multi-photo mosaic or grid.
  • Endless gallery (Marquee): continuous scrolling strip ideal for photo reels or client logo bars.
  • Before / After: interactive image comparison with a draggable center divider between two photos.

Interaction: Primary button, Secondary button, Disclosure accordion, Pop-up window (Modal), and Popover

Elements that respond when visitors click them:

  • Primary button and Secondary button: call-to-action buttons linked to your brand’s global button styles.
  • Disclosure: a collapsible block with a trigger that reveals or hides extra content when clicked.
  • Pop-up window (Modal): opens an overlay window in the center of the screen when its trigger button is clicked. You can freely design everything inside the window.
  • Popover: opens a floating card or bubble anchored to the button that triggers it.
  • Navbar and Footer: your site’s global navigation bar and footer, synced across every page.
  • Link: a standalone text link that points to another page, section, or external website.

Ready-made composite components with built-in interactive behavior:

  • Frequently asked questions (FAQ / Questions): collapsible question-and-answer list with customizable marker icons and dividers.
  • Reviews: testimonial cards with author photo, name, role, star rating, and a “See more” button for longer quotes.
  • Carousel (Slider) and Card rail: full-width slides or horizontal rails showing multiple cards at once with navigation arrows and dots.
  • Carousel tabs (Tabs): interactive tabs that switch the displayed content panel when clicked.
  • Stat (Metric): formatted block for highlighting a key number and its label.
  • Rating (Stars): customizable rating indicator using stars, hearts, or circles.
  • Avatars: row of overlapping circular photos (great next to reviews and social proof).
  • Countdown: live timer counting down days, hours, minutes, and seconds to a launch or promo date.
  • Custom code (Embed): block for embedding HTML, CSS, or an iframe from external tools (third-party calendars, interactive maps, widgets).

Forms, CMS, and Catalog: In the Insert panel you’ll also see Forms (to add a contact or newsletter form) and CMS (to insert dynamic lists connected to your collections). Your store and booking offer lists have their own Catalog icon on the left rail.

Starring favorite elements and using the + button on the canvas

  • Favorites: hover over any item in the Insert panel and click the star icon (Add to favorites). You can then toggle See only favorites at the top of the search bar to keep your go-to blocks within reach.
  • + button on the canvas: when you select an element on the page, a + button appears in its context bar and along the edge of the block. Clicking it opens the quick Add element picker with a live preview on the page: pick an element, see right away how it looks placed after (or inside) your current selection, and click to confirm.