Widgets and Elements Reference

Overview

Everything on a StretchPages canvas is an element (also called a widget). Elements are organized into groups in the insert menu so you can find the right building block quickly. This reference lists every element available and what it's typically used for.

Layout

Layout elements hold and arrange other elements. Use them to build the skeleton of your page.

Container — a general-purpose box for grouping elements and applying padding, background, and borders.
Flex — a flexible row or column that aligns children with a gap; ideal for toolbars, button groups, and side-by-side content.
Grid — a multi-column grid for card layouts and galleries.
Column presets — insert an even row instantly: 2-col, 3-col, 4-col, or 6-col.

Basic

The everyday building blocks of any page.

Section — a full-width band that separates the page into logical parts.
Heading — titles and subtitles (edit inline).
Text — paragraphs and body copy.
Button — a call-to-action with a link.
Image — photos, screenshots, and graphics.
Icon — a single icon.
Divider — a horizontal rule to separate content.
Spacer — vertical space between elements.
Link — an inline or standalone hyperlink.
List — a bulleted or numbered list.

Structured

Interactive, structured content components.

Tabs — content organized into switchable tabs.
Accordion — collapsible sections, great for FAQs.
Gallery — a grid or set of images.
Form — a form container for collecting input.

Nav menu — a navigation menu for your header.
Social icons — a row of links to your social profiles.

Marketing

Conversion-focused components for landing and campaign pages.

Carousel — a rotating slider for images or content.
CTA — a prominent call-to-action block.
Counter — an animated number counter for stats.
Progress bar — a visual progress or skill indicator.
Countdown — a countdown timer for launches and deadlines.

Content

Components for richer content and messaging.

Alert — a highlighted notice or banner.
Toggle — a show/hide switch for content.
Icon list — a list where each item has an icon (feature lists, checklists).
Blockquote — a styled quotation or testimonial.

Media

Video — an embedded video player.
HTML — a custom HTML block for advanced content.
Embed — embed third-party content by URL or embed code.

Form fields

Use these inside a Form container to build the fields your form needs.

Input — a single-line text field.
Textarea — a multi-line text field.

How to add an element

Open the insert menu (or press Cmd/Ctrl+K and type the element name).
Click or drag the element onto the canvas, into the container where you want it.
Select it and configure it in the Inspect panel — text, link, media, and styles depend on the element.

Example: a feature section

You add a Section, drop a 3-col row inside it, and place an Icon, a Heading, and a Text block in each column to describe three benefits. Below the grid you add a CTA with a Button. For social proof, you add a Blockquote with a customer testimonial and a Counter showing "10,000+ customers."

Tips

Reach for the right primitive. Use Icon list for checklists, Accordion for FAQs, and Countdown for launch urgency — they're purpose-built and save styling time.
Wrap related elements in a container so you can space and align them as a unit and reuse them later as a block.
The HTML and Embed elements cover anything custom, but prefer native elements when possible so responsive and styling behave predictably.
Any section can become a reusable block — build a good one once and reuse it everywhere.

FAQ

Can I add a form that collects submissions? Use the Form container with Input and Textarea fields to build the form. Point the button to where submissions should go.

Can I embed a map, calendar, or third-party widget? Yes — use the Embed or HTML element.

What if I need a component that isn't listed? Combine layout containers with basic elements, or use the HTML element for custom markup. You can also extend the editor with plugins that add commands and panels.