Finding components in SG-Builder

In short. SG-Builder ships 48 components. They all live in the Block library tab — the leftmost tab in the side panel. Components are sorted into four groups: Basic (14 layout + content blocks), Extra (17 composites, icons, navigation), Posts (6 dynamic post blocks), and Ecommerce (11 store blocks — visible only when the Ecommerce module is enabled). To place a component: open the Block library tab, scroll to the right group, then click-and-drag the component onto a cell on the canvas. That's it.

On this page: Workspace at a glance · Component map table · Drag-and-drop steps · Group reference · Fast-find shortcut · Anti-patterns · Troubleshooting

Before you start

1. Open a page in SG-Builder. In your SGEN admin, open any page and click Edit in SG-Builder. The workspace loads with the canvas in the center and the side panel on the left.

2. Make sure the Block library tab is active. The side panel has five tabs: Block library, Trait inspector, Layer Manager, Style Manager, and Settings. The Block library tab is active by default when you open the editor. If another tab is showing, click the Block library tab icon at the top of the side panel.

The workspace at a glance

The SG-Builder workspace has three primary regions. Knowing where each region is makes it easier to follow the instructions below.

The side panel is the vertical strip on the left of the canvas. The Block library tab inside the side panel is where all 48 components live, sorted into four groups. The canvas is the large center area where your page renders. The action bar runs across the top and holds the breakpoint switcher and the Publish button.

The Block library — your component map

When the Block library tab is active, the side panel shows your components organized into four groups. Each group is a collapsible section with a label. The groups appear in this order from top to bottom: Basic, Extra, Posts, Ecommerce.

Category-by-category component map

Use this table to map what you need to where it lives in the Block library. Open the matching group in the side panel, then scan for the component by its palette label.

Note on Ecommerce components: the Ecommerce group only appears in the Block library when the ECOMMERCE module is enabled on your site. If you do not see the Ecommerce group, check your site's module settings in SGEN admin and refresh the editor after enabling it.

How to drag a component onto the canvas

Steps

This is the standard workflow for placing any component from the Block library onto your page.

Step 1 — Open the Block library tab

Open your page in SG-Builder. Locate the side panel on the left side of the workspace. Click the Block library tab at the top of the side panel if it is not already active. The panel now shows your four component groups: Basic, Extra, Posts, and Ecommerce.

Step 2 — Open the right group and find your component

Scroll to the group that contains the component you need. The table in the previous section maps every component to its group. Within the group, scan for the component by its palette label — for example, "Cards", "Accordion", or "CTA Button". Each entry in the group shows a small icon and the palette label.

If you are not sure which component to use, open the Component Catalog in a separate tab. Read the one-line purpose for the components you are considering, then return here to place the one you chose.

Step 3 — Drag the component onto the canvas

Click and hold on the component entry in the Block library. Keep the mouse button held down and move the cursor toward the canvas. A drag indicator follows your cursor. Valid drop targets highlight as you move over them.

The drop target must be a cell. Components are not droppable directly onto a Section, Container, or Row node. If nothing highlights when you hover, you are over a node that cannot accept a direct component drop. Move to an inner cell, or place a layout first (drag a "1 Column" or "2 Columns" block from the Basic group to create a cell, then drag your component into that cell).

Step 4 — Release to place the component

Release the mouse button when your target cell is highlighted. The component drops into the cell and renders on the canvas with its default content. The side panel switches automatically from the Block library to the Trait inspector tab, showing the configuration options for the component you just placed.

Step 5 — Configure the component in the Trait inspector

The Trait inspector displays every configurable attribute for the selected component. Edit the content fields, style options, and behavior settings as needed. Changes apply to the canvas in real time. When you are satisfied, click Publish in the action bar to make the page live.

Component group reference — what is in each group

Basic group (14 components)

The Basic group holds the building blocks every page needs: layout presets, text, images, buttons, and video.

Layout components in Basic:

Content components in Basic:

Deep-dive: Basic Blocks

Extra group (17 components)

The Extra group holds composites — components that bundle multiple elements into one draggable block — plus icon utilities, navigation, forms, and widgets.

Composite components in Extra:

Icon and list components in Extra:

Navigation and chrome components in Extra:

Deep-dive: Extra Blocks

Posts group (6 components)

The Posts group renders dynamic content from SGEN's post system. These components work on blog templates and custom post-type pages where a post context is active. They do not render useful output on a standard static page — place them on template pages only.

Deep-dive: Posts Blocks

Ecommerce group (11 components)

The Ecommerce group requires the ECOMMERCE module to be enabled. Components in this group will not appear in the Block library until that module is active. Most Ecommerce components require a product_id — select the product from the Trait inspector after placing the component.

Product detail page components:

Store listing page components:

Cart and checkout components:

Deep-dive: Ecommerce Blocks

How to find a specific component fast

When you know the component name, the fastest path is:

1. Open the Block library tab.
2. Read the group label that matches your component's category (use the table at the top of this page).
3. Scroll to that group.
4. Scan the palette labels within the group — they are short and distinct.

When you are not sure of the component name, start with the Component Catalog. The catalog lists all 48 components with one-line purpose descriptions. Identify the component you need from the catalog, note its palette label and group, then return to the Block library to place it.

Common assembly patterns

Anti-patterns

Do not drag a component onto a Section or Row directly. The valid drop target is a cell. If your canvas has no cells yet, place a layout block first (1 Column, 2 Columns, or 3 Columns from the Basic group) to create cells, then drop your content component into a cell.

Do not use the Code component as a first resort. The Code component is an HTML escape hatch. For collapsible FAQ content, use Accordion. For feature lists, use Cards or Icon Text Lists. For animated headings, use Typing Rotator. Reach for Code only when no dedicated component covers your need.

Do not place Posts components on static pages. Post Title, Post Content, Featured Image, and Post Navigation render content from a post context. On a static page with no active post, these components display nothing or placeholder text. Place them on blog templates and custom post-type templates only.

Do not place Ecommerce components on non-product pages without a product_id. Most Ecommerce components require a product_id selected in the Trait inspector. Without it, the component renders empty. For a product grid on a category page, use Products Archive instead — it does not require a single product selection.

What success looks like

The component is placed correctly when all of the following are true:

• Canvas renders the element without placeholder warning text.
• Side panel switches to Trait inspector automatically and shows configuration fields for the placed component.
• Layer Manager shows the component nested in a Section → Container → Row → cell hierarchy with a canonical label matching the palette name.
• Breakpoint switch in the action bar causes the content to stack or reflow cleanly without layout breakage.

Troubleshooting

The Ecommerce group does not appear in the Block library. The ECOMMERCE module is not enabled on this site. Enable it in your SGEN admin site settings, then refresh the SG-Builder page. The Ecommerce group appears in the Block library after the module is active and the page is reloaded.

Dragging a component onto the canvas does nothing. You are dragging over a node that is not a valid drop target. Valid drop targets are cells. Hover more slowly over the canvas — valid cells highlight when you drag over them. If no cells are present yet, place a layout block from the Basic group first (1 Column, 2 Columns, or 3 Columns) to create cells, then drag your component into a cell.

The component dropped but the canvas shows placeholder text. The component's content fields are empty. Select the component on the canvas and fill in the relevant fields in the Trait inspector — for example, the heading text for a Heading component, or the product_id for a Product Title.

The side panel is showing Trait inspector instead of Block library. A component is selected on the canvas. Click on an empty area of the canvas to deselect, or click the Block library tab icon at the top of the side panel to switch back.

The Layer Manager shows a label like "Sgb-component-cards" instead of "Cards". For drag-and-drop placements the builder sets the canonical label automatically. If you see a non-canonical label, delete the component and drag it again from the Block library.

See also

• Component Catalog — the full 48-component inventory with one-line purpose per component
• Builder Workspace — canvas, side panel, action bar, breakpoint switcher
• Editor Actions — the complete action set: insert, arrange, undo, publish
• Basic Blocks — deep-dive reference for the 14 Basic group components
• Extra Blocks — deep-dive reference for the 17 Extra group components
• Posts Blocks — deep-dive reference for the 6 Posts group components
• Ecommerce Blocks — deep-dive reference for the 11 Ecommerce group components