Component Catalog (All Components)

An introduction to each of the ready-made components you can add to your page, one by one. Here you'll find which building block is suitable for which job.

Where to find: The Components library in the left panel (split into categories) Who it's for: Those who wonder "Which component does what, and when should I use which one?" In short: An introduction to each of the ready-made components you can add to your page, one by one. Here you'll find which building block is suitable for which job.

How should this be read?

Components are split into categories. Below, each category is given as a table: the component's name (as it appears in the left panel) and what it does.

The common settings of each component (background, font, color, spacing, visibility, alignment, etc.) are explained in the Properties Panel (Right Panel) file. Here we focus on each component's own specific purpose. For how to add a component to the page, see the Component Library (Left Panel) file.

Tip: Components with "Hero" in their name are the large promotional areas at the top of the page — usually one is used per page. You can add the other components as many times as you need.

Hero — Top promotional areas

The large, first-to-catch-the-eye sections at the very top of the page. They usually contain a heading, a short description and one or two buttons.

Component	What does it do?
Hero Bento	1–4 images in a grid layout + heading and button area. For showing multiple images in an elegant mosaic.
Hero Bento Marquee	A scrolling 3-column image stack + heading and button area. A dynamic, moving intro.
Hero Centered	Centered heading, description and button; background image optional. Plain and striking.
Hero Floating	Central text + floating images on the sides (6 positions). An elegant, playful intro.
Hero Showcase	Text on the left + a fan-shaped arrangement of product cards on the right. Showcases the products you select in a window display (image, name, price come automatically from the product).
Hero Split	Text on the left + image or video on the right. The most classic and safe hero layout.
Hero Video	A full-screen video background + central text. The most eye-catching intro; a video plays in the back.

Tip: If you're not sure, start with Hero Split — it suits almost every sector and its content is clear.

Content — Information sections

Sections that give information to and tell the customer about something.

Component	What does it do?
Frequently Asked Questions	A question-answer list, in an expandable accordion structure. Reduces customer questions.
Features	A feature/advantage list with icon + heading + description (grid, timeline or icon row). Ideal for a "Why us?" narrative.
Features Zigzag	Shows text and image/video in turn in a zigzag layout. For introducing your brand in detail.
Text	Rich text content — heading, paragraph, list, link and formatting. For text-heavy pages like "About Us", "Shipping", "Privacy".
Map	A Google Maps map embed + contact information. If you have a physical store, it shows your address.

Promotion — Campaigns and announcements

Eye-catching campaign/announcement elements.

Component	What does it do?
Promotion Bar	A page-top announcement bar — campaign, shipping, discount notice. Optionally includes a badge and countdown; can be made closable.
Marquee Bar	A promotional announcement with automatically scrolling (left-right flowing) text. Each line becomes a separate scrolling element.
Countdown	A countdown timer to a target date (boxes, circles, inline, urgency bar, promotion styles). Emphasizes the end of a campaign.

Category — Category tiles

Shows your store categories to the customer; clicking goes to that category.

Component	What does it do?
Category Cards (Icon)	Lists categories in card format with an icon or initial letter.
Category Cards (Image)	Lists categories in card format with a background image/video.
Category Cards (Round)	Lists categories with a round image/video.

Tip: If you have nice category images, Image or Round cards look more attractive. If you don't have images, Icon cards give a clean look.

Trust — Trust badges

Component	What does it do?
Trust Badges	Reassuring badges with icon + heading (in a row, strip, bordered or card layout). E.g. "Secure Payment", "Fast Shipping", "Easy Returns".

Media — Image sections

Component	What does it do?
Style Gallery	A media gallery in different styles (grid, 3D tilt, hover effect, polaroid, filmstrip, lightbox, scrolling). Showcases your product/work images.
Before / After	Compares two images (before/after) with a draggable bar. For showing transformation/effect (e.g. renovation, maintenance, cosmetics).

Layout — Building blocks

The blocks that divide the page into sections and organize the other components.

Component	What does it do?
Grid Layout	A multi-column layout; you can place a separate component in each column. For side-by-side content (see Properties Panel (Right Panel) → Container components).
Tab Layout	A tabbed area; you can place a separate component in each tab. For grouping content with tabs.
Carousel	Left-right scrolling slides; you can place a separate component in each slide.
Style Divider	A horizontal divider line in different styles (solid, dotted, with text, with icon, gradient, wave, zigzag, thick bar). Visually separates sections.
Navbar	The store's top menu (navigation bar): layout, menu items, logo, search, cart. Usually used in Header.

Tip: Grid, Tab and Carousel are "container" components — that is, you place other components inside them. With these you can set up two-column sections, tabbed content and scrolling showcases.

E-Commerce — Product list

Component	What does it do?
Product List	Lists products you select manually or automatically (e.g. newest, best sellers) (in grid, scrolling or carousel layout). For showing featured products on the home page.

The section at the very bottom of the page. Usually used in Footer and shown on all pages.

Component	What does it do?
Footer - Centered	A centered footer; navigation links and social media icons.
Footer - Classic	A 4-column classic footer; links split into categories.
Footer - Dark	A dark-themed footer; payment methods and brand description.
Footer - Minimal	A single-line plain footer.

Tip: If you'll have many links in the footer, Classic (4 columns) is the most organized. For a plain store, Minimal or Centered is enough.

Frequently asked questions

Q: Can I add the same component more than once? A: Yes. For example, you can add several Features or Product List components to different parts of the page. (The only exception: it's usually visually better to use one Hero section per page.)

Q: I can't decide which component to put where. A: A typical home page is ordered like this: a Hero at the very top, then Category Cards, then Product List, Features, Trust Badges and Frequently Asked Questions at the bottom. The top menu and footer come from the Header/Footer.

Q: Can I also put the "Navbar" and "Footer" components on a normal page? A: Although it's technically possible, since these automatically appear on all pages when managed in the Header and Footer, it's recommended to use them there. That way you manage the menu/footer from one place.