New SG-Builder blocks — 2026 update
The 2026 SG-Builder update adds 44 new blocks to the editor, bringing the total from 48 to 92. A brand-new Locations category arrives with 10 blocks built for location-aware pages. Thirty-two new Extra blocks cover alerts, countdowns, team cards, comparison tables, flip cards, marquees, and more. Two new Basic blocks — Spacer and Table — close foundational layout gaps. Every block is drag-and-drop and configured entirely from the trait panel — no code required.
Drag and configure
Every block is placed by dragging a tile from the Blocks panel onto the canvas. All options are set through the Traits panel on the right — no code editing.
Three new groups
Locations (10 blocks), Extra (32 blocks), and Basic (2 blocks). Locations blocks connect to Location records in your SGEN admin. Extra and Basic blocks are available immediately.
Trait values are exact
Block names, trait names, and select-option values in this reference were captured from the live editor on 2026-06-23. Use them exactly as listed — they match what the trait panel shows.
How to add and configure a block in SG-Builder
Open any page in SG-Builder, find the block in the Blocks panel, drag it onto the canvas, and fill in its traits. The steps below apply to every block in this reference.
What blocks are for
SG-Builder blocks are pre-built content sections. Each block renders a specific content type — a location selector, a countdown timer, a comparison table — and exposes its options through the trait panel. You fill in the traits and the block renders accordingly.
Where to find them
Navigate to Pages → (your page) → Edit with SG-Builder → Blocks panel (four-square icon, top toolbar). Blocks are grouped by category. Scroll to Locations, Extra, or Basic, or use the search field at the top of the panel.
Good use cases
Multi-location business pages with store addresses and directions · Countdown timers for product launches or sale end dates · Team grids, author cards, and avatar groups · Feature comparison tables for pricing decisions · Announcement bars for time-sensitive information · Marquees or logo carousels · Newsletter signups tied to an existing SGEN form.
What blocks are not for
Blog post prose — use the post editor for article content. Site-wide navigation — use the Menu Builder; the Mega Menu block renders a menu but items must be built there first. Global CSS overrides — use Custom Codes or Appearance settings for styles that apply across all pages.
Before you start: Confirm your site is on the 2026 SG-Builder build. If the Locations category does not appear in the Blocks panel, the update has not yet been applied — contact support with your site URL. Location blocks require Location records to be configured in the SGEN admin before they surface meaningful content. The Newsletter block requires at least one form to exist in SGEN Forms before the
form_id dropdown populates. The editor does not auto-save — save before navigating away.Steps
Follow these steps to place and configure any block from this reference.
1
Open a page in SG-Builder
Navigate to Pages in the SGEN admin. Click the page you want to edit. Click Edit with SG-Builder. The editor loads with the page canvas in the centre and the toolbar along the top.
2
Open the Blocks panel and find the block
Click the four-square icon (Blocks) in the top toolbar. The Blocks panel slides open on the left side of the editor. Blocks are grouped by category: Basic, Extra, Posts, Ecommerce, Locations. Scroll to the category that contains the block you want, or type its name in the search field at the top of the panel.
3
Drag the block onto the canvas
Click and hold the block tile in the Blocks panel. Drag it to the position on the page canvas where you want it to appear. A blue drop indicator shows valid drop targets as you drag. Release to place the block.
4
Select the block and open the Traits panel
Click the block on the canvas to select it. A blue outline confirms selection. In the toolbar, click the Traits icon (sliders icon, labelled "Traits" on hover). The Traits panel appears on the right. Each configurable option for the block appears as an input field, dropdown, checkbox, number field, or picker.
5
Fill in the block's traits
Each trait type works as follows:
- Text / Textarea — type directly into the field. The canvas updates in real time.
- Select (dropdown) — click to expand the options list and choose one.
- Checkbox — tick to enable the option; untick to disable.
- Number — type a value or use the up/down arrows.
- Image — click to open the media picker and select or upload an image.
- Icon picker — click to open the icon selection modal.
sgb-items(repeater) — click Add item to add entries to a list. Each item exposes its own set of sub-traits.button(modal) — click to open a dedicated editor modal (used by the Table block for data entry).link_opts— set the URL, target, and link title.datetime— click the field to open the date/time picker (used by the Countdown block).
6
Save and publish
Click Save in the editor toolbar. The page saves with the new block in place. Preview the page to confirm the block renders correctly on desktop and on mobile. Use the device-breakpoint buttons in the toolbar to switch between the 6 breakpoints and check the responsive layout.
Locations — 10 blocks
The Locations category is entirely new in the 2026 update. These blocks connect to Location records in your SGEN admin. Use them on any page that serves a multi-location business: store finders, franchise directories, clinic locators, and similar. All Locations blocks share an id trait for targeting a specific location context.
Location Selector
Primary discovery block
Renders a list, grid, dropdown, or step-by-step finder of your location records. Traits: id (text), layout select (grid, list, dropdown, steps), group_by select (none, state, country), columns (number), include_address (checkbox), include_phone (checkbox), placeholder (text), class (text).
Location Field
Single data-point output
Outputs one piece of data from a location record. The field trait selects which data point: name, full_address, street_address, city, state, zip_code, phone_number, email_address, shop_url, gbp_link, location_url, hours_of_operation, map_embed, shop_main_image, shop_gallery. The format trait controls display: text, html, compact, or json. Set fallback for empty fields.
Location CTA Button
Location-specific call-to-action
Renders a button linking to a location-specific URL. The field trait selects the target URL: shop_url, gbp_link, or location_url. Set label for the button text and class for additional styling.
Location Heading
Location section heading
Renders the heading for a location section. The tag trait selects the HTML element: h1, h2, h3, h4, or div.
Archive Locations
Browseable location archive
Traits: id, card_style (style_1, style_2), cta_label, config (gallery-config).
Location Cards
Card grid of locations
Traits: id, card_style (style_1, style_2), config (gallery-config).
Location Selection Button
Location picker trigger
Traits: id, sub_label, placeholder.
Location Title
Location name display
Traits: id, prefix.
Location Picker Button
Inline picker button
Traits: id, label, class.
Location Content
Custom location text area
Traits: id, content (textarea).
Extra — 32 blocks
The Extra category gains 32 new blocks in the 2026 update. They cover content patterns that previously required custom code or workarounds — alerts, countdowns, team cards, comparison tables, flip cards, marquees, and more.
Alert
sgb-component-alert
Renders an inline notice or callout. Set variant (draws from the site's button-style palette), add an icon, a title, and body content. Enable dismissible to let visitors close the alert. Add link_text and link (link_opts) for a call-to-action inside the alert.
Announcement Bar
sgb-component-announcement
A thin bar, sticky or static, across the top of a section. Traits: text (textarea), link_text, link (link_opts), sticky (checkbox), dismissible (checkbox), bar_style (default, slim).
Author Card
sgb-component-author
Displays a single author profile. The layout trait offers 3 style options. Set image, name, role, and bio. Add social links via the socials repeater.
Avatar Group
sgb-component-avatars
A stacked or row cluster of user avatar images with optional star rating. Traits: size (small, medium, large), count_text, show_rating (checkbox), rating (number), items (sgb-items).
Awards
sgb-component-awards
A grid of award badges or accreditation logos. Traits: align (center, left, right), badge_style (pill, outline, minimal), items (sgb-items).
Bento Grid
sgb-component-bento
An asymmetric tile layout. Set columns and add tiles via items. Each item carries its own content and span settings.
Button Group
sgb-component-button-group
Multiple buttons in a row or stack. Traits: layout (row, stacked), align (left, center, right), items (sgb-items).
Chips
sgb-component-chips
A row of tag-style chips for topics, filters, or category labels. Traits: chip_style (soft, solid, outline), size (small, medium), items (sgb-items).
Before / After
sgb-component-compare
An image comparison slider with a drag handle. Set before_image, after_image, label each side, and set the initial handle start position (0–100).
Comparison Table
sgb-component-comparison
A feature matrix for comparing products or plans. Set a feature_heading and choose table_style: boxed, striped, or plain. Add columns via the columns repeater and feature rows via rows.
Countdown
sgb-component-countdown
A live countdown timer to a target date. Set target_date via the date/time picker. Choose layout (boxed, plain, or circle), enable show_labels, and set on_expire: message shows the expire message text, hide removes the block at zero, keep freezes it at zero.
Counter
sgb-component-counter
Animated counting numbers for stats blocks. Traits: layout (inline, grid), duration (number — animation time in milliseconds), items (sgb-items).
CTA Banner
sgb-component-cta-banner
A full-width call-to-action section. Traits: heading (textarea), text (textarea), bg_style (accent, dark, light), align (center, left), ctas (sgb-items).
Flip Card
sgb-component-flip-card
A card that flips on hover or click to reveal a back face. Choose flip_direction (horizontal, vertical) and flip_trigger (hover, click). Set front_bg and back_bg independently: light, dark, or accent. Set card height in pixels.
Opening Hours
sgb-component-hours
A structured weekly hours display. Traits: time_format (12h, 24h), day_format (full, short), group_days (checkbox — merges consecutive days with identical hours), items (sgb-items).
Logo Carousel
sgb-component-logos
A scrolling or grid strip of logos. Traits: config (gallery-config), grid_style (grid_style 4), grayscale (checkbox), logo_style (plain, bordered, boxed), items (sgb-items).
Marquee
sgb-component-marquee
A scrolling ticker. Traits: direction (left, right, up, down), speed (number), separator, items (sgb-items).
Mega Menu
sgb-component-mega-menu
A dropdown navigation panel with grouped links and an optional featured image. Set the trigger text, columns, and link groups via groups. Set feature_image and feature_text for a promoted panel. Menu items must exist in the Menu Builder before this block can link to them.
Mosaic
sgb-component-mosaic
An irregular photo-tile grid. Set columns, min_height, and gap. Enable show_overlay to add text across tiles. Set overlay_style: glass, solid_light, or solid_dark.
Newsletter
sgb-component-newsletter
An email signup form tied to an existing SGEN form. Choose form_id from the dropdown (lists forms from your SGEN Forms settings). Traits: layout (card, inline, banner), align (center, left).
Numbered List
sgb-component-numbered
An ordered list with styled numbering. Traits: num_style (plain, circle, card, inline), config (gallery-config), items (sgb-items).
Numbered Nav
sgb-component-numbered-nav
A horizontal numbered step-navigation strip. Traits: nav_style (inline, stack), items (sgb-items).
Progress Bars
sgb-component-progress
Horizontal skill or completion bars. Traits: bar_style (bar, striped, circle), thickness (thin, medium, thick), show_value (checkbox), items (sgb-items).
Pull Quote
sgb-component-pullquote
A large styled blockquote. Traits: quote (textarea), cite, pq_style (plain, mark, bordered), align (center, left).
Star Rating
sgb-component-rating
A static star-rating display. Set rating (current value), max, and size (small, medium, or large). Enable show_value to display the number.
Schedule
sgb-component-schedule
A list of scheduled events or sessions. Add each event via items — each carries its own time, title, and description sub-traits.
Scroll Cue
sgb-component-scroll-cue
An animated scroll-down indicator. Set label. Choose cue_style from 6 options: line, arrow, chevron, caret, mouse, or dots. Set align and optionally link to a page anchor.
Social Share
sgb-component-share
Share buttons for major networks. Set share_label, shape (rounded, circle, square), size (small, medium, large), color_style (soft, solid, brand). Enable per-network checkboxes: net_facebook, net_x, net_linkedin, net_email, net_copy.
Social Icons
sgb-component-social
Icon links to social profiles. Traits: shape (bare, rounded, circle, square), size (small, medium, large), brand_colors (checkbox), items (sgb-items).
Team
sgb-component-team
A card grid of team members. Traits: card_style (style_1, style_2, style_3, style_4), config (gallery-config), grid_style (grid_style 5), items (sgb-items).
Timeline
sgb-component-timeline
A vertical or horizontal timeline of events. Traits: layout (vertical, horizontal), items (sgb-items).
Vs / Comparison
sgb-component-vs
A side-by-side comparison for plans or feature differentiation. Set labels and headings for each column, then add items via the left_items and right_items repeaters.
Basic — 2 blocks
Two new Basic blocks close gaps in the foundational layout toolkit.
Spacer
sgb-component-spacer
Adds controlled vertical whitespace between sections. Set height in pixels. Enable show_rule to add a horizontal divider line. Choose rule_style: solid, dashed, or dotted. Use Spacer instead of empty paragraphs or padding hacks — it produces cleaner markup and is easier to adjust later.
Table
sgb-component-table
Renders a structured data table. Click table_data in the trait panel to open the data editor modal and enter rows and columns directly. Set table_style: striped, bordered, or plain. Set header_mode: top (first row as header), first-col (first column as header), both, or none. Enable compact for tighter row spacing. Enable responsive to allow horizontal scroll on small screens.
Examples
Three common patterns that combine blocks from this reference.
Example 1 — Location finder for a multi-location business
Place a Location Selector block at the top of the page. Set layout to grid and columns to 3. Enable include_address and include_phone. Set group_by to state. Below the selector, add an Archive Locations block as a browseable fallback. Set cta_label to "Get directions" and card_style to style_1. The result: a self-contained location finder — no custom code required.
Example 2 — Product launch countdown with CTA Banner
Place a Countdown block on the landing page. Set target_date via the date/time picker. Set layout to boxed, enable show_labels, and set on_expire to message. Write your expire message text in expire_message. Below the countdown, add a CTA Banner block. Set bg_style to dark and align to center. Add a CTA button via ctas.
Example 3 — Team page with Author Card and Social Icons
Place a Team block on the About page. Set card_style to style_2 and add team members via items. Above the grid, add a standalone Author Card block for a featured member — choose a layout from the 3 available style options and fill in image, name, role, and bio. Add profile links via socials. Below the grid, add a Social Icons block for company accounts. Enable brand_colors, set shape to rounded and size to medium.
What to do if it does not work
Common issues and how to resolve them.
Block not visible in the Blocks panel
The Locations category and 44 new blocks require the 2026 SG-Builder build. If the category is absent, the update has not been applied to your instance. Contact support with your site URL and the date you expect the update to be live.
Locations blocks show no data
Location blocks pull from Location records in your SGEN admin. If no records exist, the blocks render empty. Add Location records in the admin first, then return to the page in SG-Builder.
Newsletter block
form_id dropdown is emptyThe Newsletter block requires at least one form to exist in SGEN Forms. Create a form first, then return to the SG-Builder trait panel — the form will appear in the dropdown.
Mega Menu renders without links
Mega Menu groups are defined in the block's trait panel, but the link destinations must be menu items created in the Menu Builder. Build the menu in the admin first, then configure the Mega Menu block.
Countdown shows the wrong time
The target_date trait stores the date in the server's timezone. If the countdown is off by several hours, confirm the target date matches the intended timezone and adjust accordingly.
Flip Card does not flip
Confirm flip_trigger is set to the interaction you expect (hover or click). On touch devices, hover triggers behave as click — this is expected.
Table block
table_data button does nothingThe table data editor opens as a modal. If the modal does not appear, ensure you are using the 2026 SG-Builder build and that popups are not blocked in your browser.