Text, headings, and buttons in SG-Builder

The 60-second answer. SG-Builder has five content leaf components — Text block (body copy in HTML), Typing Rotator (animated cycling headline), CTA (a styled button link), Icon (a single glyph), and Form embed (renders a form you built in Settings > Forms). All five drop into the innermost container level (a Cell). Pick the one that matches the content shape you need, drop it into a Cell, fill its traits, and publish. That's it — the component sections below cover every trait, anti-pattern, and troubleshooting step when you need the depth.

On this page: Steps · Text block · Typing Rotator · CTA (button) · Icon · Form embed · Troubleshooting

What is this for?

These five content leaf components are how you put words, buttons, icons, and forms onto a page in SG-Builder. Use this page to pick the right component for the content shape you need, set its traits correctly the first time, and avoid the handful of anti-patterns that silently break a render.

How to add and style content blocks in SGEN's page builder

Good use cases

Hero section — headline, subheading, button. Drop a Text block for the headline, a second Text block for the subheading, and a CTA for the button — all three in the same Cell inside the hero Section.

How that hero cell renders once published:

Animated headline. Use the Typing Rotator when the headline should cycle through a word list — static prefix "Built for" followed by rotating words "comfort", "quality", "every day". See The Typing Rotator.

Contact section with an inline form. Put a headline in the left cell and a Form embed in the right cell. Create the form first in Settings > Forms, then reference it by ID. See The Form embed.

What NOT to use this for

• Page structure. These are leaf components — they cannot hold other components. For columns and layout bands, see Structure and Layout.
• Automatic heading tags. The Text block outputs whatever HTML you put in content. Wrap your text in <h1> or <h2> manually — the builder does not assign tags automatically.
• Paragraph-level animations. The Typing Rotator does one thing: cycle a word list with a typewriter effect. For scroll-triggered reveals, use the Style Manager entrance animation on any component.
• Form submission. The CTA is a link — it navigates to a URL. For submission, embed a Form component.
• Site navigation. Don't substitute a list of CTAs for a nav menu. Use the Navigation component — see Structure and Layout.

How this connects to other features

• Structure and Layout — every Text, CTA, and Icon must live inside a Cell. If content is not appearing, confirm the Section > Container > Row > Cell hierarchy is intact.
• Site Settings (Appearance) — button shape, border radius, and color are set once in Appearance > Site Settings and flow into every CTA. Change it there, not per-component.
• Forms — the Form component is an embed slot. Manage fields, notifications, and integrations in Settings > Forms, not in the builder.
• Custom CSS — for global typography or button hover effects, use Custom CSS rather than per-component Additional CSS.

Before you start

• Confirm the 5-level hierarchy is in place: Section > Container > Row > Cell, then drop content components into the Cell.
• Form embeds: create the form in Settings > Forms before placing the component — it is a rendering slot, not a form editor.
• Typing Rotator: decide your static prefix and word list before building — changing items after initial render fires a 2-second re-render.
• Icons: the icon name must be spelled exactly as the library defines it (Lucide or FontAwesome).

Where to go

Open SG-Builder for any page: Pages > [page name] > Edit in Builder. The Components panel is the left drawer (icon: grid of squares). Expand Basic to find Text, CTA, Icon, and Form embed. The Typing Rotator is under Elements > Animated. Drag any component into a Cell on the canvas.

Steps

1. Navigate into the target Cell

In SG-Builder, select or create a Section. Navigate into the Cell where content belongs: click the Section, then the Container, then the Row, then the Cell. The breadcrumb trail in the top bar confirms your depth. The Cell is the innermost container — content components drop here, not onto the Row or Container.

2. Drag a component from the Components panel

Open the left panel (Components tab). Drag a component — Text, CTA, Icon, Typing Rotator, or Form embed — onto the Cell in the canvas. The Cell highlights green when the drop target is valid. Release to drop. The component appears at the bottom of the Cell's stack.

3. Set the component's content

Click the newly dropped component to select it, then open the right-hand Traits panel to set values. For a Text block: click "Edit content" in the Traits panel and paste or type your HTML. For a CTA: set the button label in "Button text", pick a style, and enter the destination URL. For a Typing Rotator: set the static prefix in "name" and add at least two items in { title } format. For a Form embed: pick the form from the "Form" dropdown — only forms created in Settings > Forms appear here. For an Icon: type the icon name (e.g. tag, star, phone) in the "Icon name" field.

4. Publish the section

Click Publish (the red button in the top bar) to push the change to your public site. The save confirmation flash confirms which fields were written. Hard-reload your public page (Ctrl+Shift+R) to see the update — browser caching can hold the old version for up to a minute.

The Text block

The Text block stores arbitrary HTML — paragraphs, lists, inline links, bold/italic, headings. Double-click it in the canvas to open the HTML editor. It renders whatever HTML is in content verbatim on the public page — no stripping occurs at the render layer.

Key traits:

Programmatic write:

textComponent.setAttributes({ content: '<p>Your Store ships everyday essentials from a small lineup of products.</p>' + '<ul><li>Canvas Tote Bag — $30, built to last</li>' + '<li>Classic T-Shirt — $24.99, restocked weekly</li>' + '<li>Subscription skips available any month</li></ul>'});

Anti-patterns:

• Do not set name: — that is the heading component's trait. Text uses content:.
• Do not put <style> tags inside content. Use the component's Additional CSS field instead.

The Typing Rotator

A full-line animated component that types and deletes a cycling list of words after a static prefix string. Works on any heading tag level (h1–h6). In the builder canvas it shows the static HTML structure; the animation only plays on the published public page.

Key traits:

Anti-patterns:

• items: ['comfort', 'quality'] — wrong shape. Must be [{ title: 'comfort' }, { title: 'quality' }]. Flat strings produce an empty animation.
• Do not set margin via Site Settings — the rotator has no default margin (unlike Text which has 15px bottom). Add margin-bottom via the Style Manager.

The CTA (button)

A single <a class="btn btn-.."> rendered with Bootstrap-style button classes. Solid or outline variant, 9 color options from Site Settings. The button's default shape (radius, padding, font weight) is set in Appearance > Styles & Layouts > Button Styles and cascades to every CTA on every page.

Key traits:

Anti-patterns:

• Do not set tagName: 'a' on the component itself. The outer wrapper must stay div (the default). Setting it to 'a' collapses the inner anchor and renders an empty button.
• btn_style: 'outline-primary' is wrong — the enum does not include prefixed values. Use btn_style: 'primary' + btn_is_outline: true.

The Icon

A single icon from the Lucide or FontAwesome library, optionally wrapped in a link. Use it alongside a text block or CTA to add a visual anchor to a feature card or contact row.

Key traits:

Anti-patterns:

• Do not mix Lucide and FontAwesome — they are separate icon systems.
• In the builder canvas, Lucide icons show as <i data-lucide=".."> (not yet the SVG). On the public page, client-side JS replaces them with the actual SVG. This is expected behavior.

The Form embed

Embeds a saved SGEN form record into the page. The component is a rendering slot — you create the form's fields, notifications, and integrations in Settings > Forms, then reference it here by ID. The form renders inline with your site's existing input and button styling.

Key traits:

Anti-patterns:

• Do not set form_id to an integer — pass it as a string ("3", not 3). Integer form IDs silently fail to match.
• If is_ajax: false is needed, set it explicitly — the default is true.
• CSS rules targeting extra_class in Custom CSS must be scoped to the page. Unscoped rules leak to other pages that embed the same form.

What success looks like

• Text block: paragraph(s) render in the canvas immediately after saving.
• Typing Rotator: the canvas shows the static HTML structure; the animation only plays on the published public page.
• CTA: button renders with the chosen style and navigates to the URL. On mobile, verify padding doesn't make the button too narrow — add a Style Manager override at the tablet breakpoint if needed.
• Icon: shows as a raw element in the canvas; renders as the actual SVG or glyph on the public page.
• Form embed: renders inline with your site's input styling. An empty form_id shows a "Select a form.." placeholder — set the ID to fix it.

Here is what the published Your Store hero cell looks like after all three components — headline Text, subheading Text, and CTA — are in place:

What to do if it does not work

• Text shows default lorem ipsum — you set name: instead of content:. Text uses content.
• Button renders empty — tagName was set to 'a'. Reset tagName to 'div' (the default).
• Typing rotator words do not cycle — items was passed as flat strings. Use [{ title: 'Word' }] format.
• Form shows "Select a form.." placeholder — form_id is empty or the referenced form was deleted. Confirm the form exists in Settings > Forms.
• Icon renders blank on the public page — the Lucide JS may not be loaded on this page template, or the icon name was misspelled. Try a FontAwesome class as a fallback to isolate.

Related reading

• Site structure and layout in SG-Builder
• Images and media in SG-Builder