Adding components and blocks in the editor

The Add tab in the editor's left sidebar is a library of ready-made components. Instead of only changing what is already on the page, you can add whole sections to a variant: a trust row under the buy button, a sticky bar on mobile, an FAQ, a video. Open it from the sidebar, or press A with an element selected.

Inserting a component

Click a tile to insert it right after the selected element. If the selection is a column, or the inside of a section or container, the component goes at the end of it instead. The panel tells you which, for example Adds after h1.hero-title.

Drag a tile onto the page to place it yourself:

• A blue line shows where it will land: before or after the element under the pointer, or at the end of a column. A label repeats this in words.
• The page scrolls when you drag near the edge.
• Escape cancels, and dropping outside the page adds nothing.

Components that need input, such as an image URL, a video link or a list of items, open a short form first. The form tells you in plain words if a value cannot be used.

Every insert shows a notification with Undo and is listed in Changes as Added …. Search at the top of the tab finds a component by name or keyword.

Components match your site

Components are designed to look native on the page they are added to, without design work:

• They use the site's own font, and headings keep the site's heading sizes.
• Cards and borders are mixed from the site's own text colour, so they read on light and dark sites alike.
• The accent colour comes from where you place the component. A button placed next to the site's red button turns red.
• Button label colour, black or white, is picked for contrast.
• On phones, columns stack.

After inserting a component, double-click any of its text to edit it in place. Inserted headings, paragraphs, buttons and links also have a Text field in the inspector, and every part of a component can be styled in the inspector like any other element.

Blocks

Blocks are designed sections with starter copy for you to replace.

• Hero: an eyebrow, a large headline, a lead, two buttons and a reassurance line. Add an image URL and it splits into text and picture. It uses an h2, so the page keeps its own h1.
• Features: a centred heading and three icon cards.
• Call to action: an accent-tinted box with copy and a button.
• Testimonial: stars, a quote, an initials avatar, a name and a role.
• FAQ: expandable questions, with no script.
• Accordion: rows typed as "Title | text", in a lines or boxed look, with the first row optionally open. Made for product details, specs, shipping and returns.
• Trust row: shipping, returns, secure checkout and a star rating.
• Icons and logos: a benefit row, a partner or press strip, or payment logos. Each item takes one of 18 built-in icons, an uploaded image (SVG, PNG or WebP up to 30 KB) or an image URL. Choose icon, logo or large logo size, and optionally grey logos, in a row or as tiles.
• Pop-up: a link or button that opens a panel, such as a size guide, shipping details or offer terms, with a heading, text and an optional table. It closes with Escape or a click outside, with no script.
• Sticky bar: a bar stuck to the top or bottom of the screen, on phones only or on all screens. Use it for a mobile buy bar, an offer or a sign-up nudge. The page gets room for it, so the bar never covers the header or footer.
• Announcement bar: a full-width accent strip with a link.
• Badge: a small accent pill such as Bestseller.

Layout

Section, Container, 2 columns, 3 columns, Row and Stack. They come with starter content, so they are never an invisible empty box. On phones, columns stack.

Basic

Heading, Text, Button, Link, Image (with a URL and alt text), Divider and Spacer, plus Dynamic text: data from the page on its own, styled as a paragraph, a heading, a small label or a large price. See Dynamic content: showing page data in a variant.

Media

Video. Paste a YouTube link (watch, youtu.be or shorts), a Vimeo link (public or unlisted) or a link to a video file (.mp4 or .webm). Choose the shape (16:9, 4:3, 1:1 or 9:16), autoplay and loop. YouTube plays through the privacy-friendly youtube-nocookie.com player. Autoplay is always muted, because browsers block autoplay with sound.

Image slider. Image URLs, one per line, with optional alt text. Show one, two or three at a time. It swipes on phones and scrolls with a mouse wheel or trackpad on desktop.

Gallery. The same image list as a grid of 2 to 4 columns, and 2 on phones.

Data from the page in components

Every text field in a component's form has an Insert data from the page picker, with a Shows here: … preview of this page's value. A sticky bar built once can show each product's own name and price on every product page.

Safety

Links and image sources accept only web and relative addresses, so javascript: and similar tricks are refused. Text is always escaped.

Current limits

• There is no settings form for a component after it has been inserted. Edit its text and style in the inspector, or remove it and add it again.
• The image slider has no arrows, dots or autoplay yet.
• Some sites' security policy blocks embedded YouTube or Vimeo players. Use a video file link instead.