Build a post in SG-Builder

In short. SG-Builder is the drag-and-drop visual editor built into SGEN. Open any post, click Edit with SG-Builder, and drag components onto the canvas. Autosave protects your work every few seconds — but it is recovery-only. What visitors see is set only when you click Publish Changes. That one distinction is all you need to use the editor confidently.

On this page: What it is and when to use it · Good use cases · What NOT to do · Steps — Build a post · Steps — Switch from standard editor · Troubleshooting

How to open the visual editor on any blog, page, or event and Publish your work to the public site

SG-Builder lets you build a post the way visitors will see it — sections, columns, headings, buttons, images — by dragging components onto a canvas instead of writing HTML. Every blog post, page, event, and custom-object detail supports it.

You can switch back and forth between the standard text editor and SG-Builder on the same post, but most teams pick one and stick with it for a given content type — the standard editor for short body-copy posts, SG-Builder for landing pages and feature-rich layouts where visual structure matters.

The one rule to internalise: autosave is your safety net for browser crashes; Publish Changes is what reaches the public site. Editing for an hour without Publish leaves the public site showing the previous version.

The editor opens at its own admin URL with the canvas filling most of the screen, a left-side component palette ready to drag from, and the Publish button in the top-right corner of the toolbar.

Here is what the toolbar looks like mid-edit:

The Publish Changes button sits top-right. The autosave indicator sits next to it. Autosave = safety net; Publish = what goes live.

What is this for?

SG-Builder answers one question: how do I build a visually-rich post without writing HTML?

The classic uses:

• Marketing landing pages — hero with countdown, feature columns, testimonials, big CTA.
• Long-form articles with rich layout — pull-quotes, image grids, embedded video, side-by-side comparisons.
• Product / service pages — tabbed feature lists, pricing tables, FAQ accordion.
• Event detail pages — hero photo, agenda timeline, speaker grid, RSVP form.
• Pages-as-templates — build one polished layout, save as a template, spin up new posts from it.

The companion pages on text, images, structure, and components cover what each component does and how to configure it.

This page covers the wrapper around those components: how to open the editor, how autosave protects your work mid-session, and how the final Publish click commits the post to the live site.

Good use cases

The three patterns below cover almost every reason to open a post in SG-Builder: building from scratch, recovering from a closed tab, and rolling back a published layout.

Each pattern ends with a Publish click — that is always the finish line.

Example 1 — Build a campaign landing page. Open Pages → Add New Page. Set title, slug, and status to Draft, then click Edit with SG-Builder. The canvas opens empty. Drag in a Section, add a Hero block, heading, and button. Add a three-column Section with three Card components, a Pricing Table, a Testimonials block, and a final CTA Section. The autosave indicator flashes "Autosaved Xs ago" throughout. When the layout is ready, click Publish Changes:

The canvas is stored as a structured tree of every component you placed. A simple hero section looks like this — useful to recognise if you export the page or copy a layout between sites:

{ "sgBuilder": { "component": { "type": "Section", "name": "Hero — Black Friday 2026", "components": [ { "type": "Heading", "name": "Everything 30% off through Friday", "heading_tag": "h1" }, { "type": "Text", "content": "
Save on the Canvas Tote Bag, Classic T-Shirt, and more across the store, on sale for the next seven days only.
" }, { "type": "Button", "text": "Shop the sale", "link": "/shop?sale=bf2026" } ] } }}

Example 2 — Recover from a closed tab mid-build. You have been editing for forty minutes, close the tab without Publish. Re-open the post in SG-Builder. A prompt appears: "We found autosaved changes from 4 minutes ago. Restore?" Click Restore. Your forty minutes of work is back. Make final tweaks, click Publish Changes.

Restore is the safe choice in almost every case. Discard is for when you have already published a newer version and want to start fresh from the public-site state.

Example 3 — Rollback after a launch hiccup. You publish a new homepage layout. Twenty minutes later the team spots a typo. Open the post-history view, find the prior published revision, click Restore. The page rolls back instantly. Re-open SG-Builder, fix the typo, click Publish Changes. Full detail: Restore a post from a saved revision.

The post-history view — every Publish click creates a revision row:

The Live row is what visitors see now. Every other row is a prior Publish or standard-editor save, newest first.

After every successful Publish, the editor's status header updates:

A "Pending publish" count above zero means canvas changes are autosaved but not yet live — your reminder to click Publish Changes before closing.

What NOT to use this for

• Do not assume autosave makes your work live. Only Publish Changes commits to the public site.
• Do not edit the same post in SG-Builder and the standard editor at the same time. The two editors store content in different formats; switching mid-session can corrupt the body. Pick one per post.
• Do not use SG-Builder for posts that syndicate to RSS or third-party readers. RSS readers expect plain article text. The SG-Builder layout is HTML; the syndicated version will be a flattened rendering.
• Do not nest more than three section levels deep. Beyond three levels, the canvas becomes hard to navigate and mobile rendering can become unpredictable.
• Do not paste raw <style> blocks into Text components. SGEN's content sanitiser strips body-level <style> tags. Use the Custom CSS surface (Settings → Custom CSS) scoped to body.page_id-<n>.
• Do not paste raw <script> tags into Text components. Scripts are stripped. Use Custom Codes (Settings → Custom Codes) for tracking pixels and analytics tags.
• Do not bulk-edit SG-Builder canvases. SG-Builder is one-post-at-a-time. To replicate a layout, save the canvas as a template and create new posts from it.
• Do not Publish a half-built canvas during peak traffic. The public site reflects the published version on the very next request.
• Do not assume SEO meta tags carry over when you switch a post to SG-Builder. Re-confirm title, description, and Open Graph image in the SEO panel after the switch.
• Do not Publish without checking device previews. Click Desktop / Tablet / Mobile in the toolbar before Publish — mobile-broken layouts bleed conversions.

How this connects to other features

• Restore a post from a saved revision — every Publish creates a revision; use this doc for rollback mechanics.
• Bulk-edit your post list — bulk Move to Draft / Move to Active survives without touching SG-Builder canvases.
• Manage post categories and tags — categories, tags, and SEO meta are edited from the post-edit form, not from inside the canvas.
• Customize post-type URL slugs — SG-Builder edits body content, not slugs.
• SG-Builder component pages — text/headings, images/media, structure/layout are documented in the companion pages linked in Next step.
• Custom CSS — for per-page or site-wide styling the canvas traits do not cover, scope rules to body.page_id-<n>.
• Custom Codes — analytics pixels, tag-manager snippets, and third-party scripts go here, not in SG-Builder Text components.

Before you start

• You are signed in as an Administrator or with a role that has post-edit and SG-Builder rights.
• The post exists. For a brand-new post: create it from the standard post-edit form first — set title, slug, and status — then click Edit with SG-Builder.
• You have a clear vision for the layout. SG-Builder is faster than writing HTML, but you still need to know what you are building before you open the canvas.
• Your media is uploaded to the Media library. Image components pick from the library; pre-uploading is faster than uploading mid-build.
• You have an off-peak window if the post is currently published. Each Publish click updates the public site immediately on the next page request.
• You have agreement from anyone else who might edit the same post. Two admins editing simultaneously will overwrite each other on Publish — whichever clicks Publish second wins.
• You have a recent revision in mind for rollback. Every Publish creates a revision; you can restore an older one from the post-history view if needed.

There is no scheduled publish inside SG-Builder. For scheduled publishing, use the Schedule field on the standard post-edit form before opening the canvas.

Where to go

1. Open the post you want to edit from any list view — Pages, Blog, or Events — or create a new post via Add New.

1. The standard post-edit form opens. Confirm the title, slug, and status are correct before proceeding.

1. Click Edit with SG-Builder at the top of the post-edit form.

1. The form posts and the SG-Builder editor loads with the post's current canvas — or an empty canvas for a brand-new post.

The breadcrumb at the top of the editor reads "Dashboard / Pages / [post title] / Edit (SG-Builder)" — confirm the post title matches the one you intended to open.

If you opened the wrong post, click out of the editor without Publish, open the correct post, and click Edit with SG-Builder again.

If the editor loads with a "Restore unsaved changes?" prompt, you have an autosave from a previous session — see Example 2 above for the Restore vs. Discard decision.

The SG-Builder editor is read-and-write: autosave protects in-progress canvas state continuously, and Publish commits to the public site immediately on the next page request.

There is no draft-preview URL separate from the public URL. What the canvas shows is what will be live after Publish.

Steps — Build a post in SG-Builder

1. Open the SG-Builder editor

From the post-edit form, click Edit with SG-Builder.

The form posts and the browser navigates to the SG-Builder editor URL.

The editor loads with the canvas in the centre, the component palette on the left, and the toolbar (Undo / Redo / Device-preview / Publish Changes) along the top.

The breadcrumb at the top reads "Dashboard / Pages / [post title] / Edit (SG-Builder)" — confirm the post title matches the one you intended to open. If you opened the wrong post, click out of the editor without Publish, open the right post, and click Edit with SG-Builder again.

2. (Optional) Restore an autosave if prompted

If "Restore unsaved changes?" appears, choose:

• Restore unsaved changes — continue from where you stopped in a previous session.
• Discard and start from last published — start fresh from the version currently on the public site.

The choice is per-session. The prompt does not reappear until SG-Builder detects autosave content newer than the published version in a future session.

3. Build the canvas

Drag components from the left palette onto the canvas.

Configure each component using its right-side trait panel — set heading text, button labels, image picks, padding, margins, colours, and so on.

Use the Section component as the wrapper for groups of related components.

Use the Column component inside a Section to lay out side-by-side content.

Use the Spacer component to add vertical breathing room between sections.

Use the Image, Video, and Map components for media-rich blocks.

Use the Card, Pricing Table, Testimonials, Accordion, and Tabs components for structured content blocks.

Full component reference: SG-Builder text, headings, and buttons · SG-Builder images and media · SG-Builder structure and layout.

4. Watch the autosave indicator

The autosave indicator near the Publish button updates every few seconds while you work.

It cycles through: "Saving…" then "Autosaved Xs ago."

If it shows "Save failed — retrying," check your network connection. The autosave retries automatically on intermittent failures. Persistent failures suggest a session timeout — re-login in another tab and continue editing.

5. Preview at every device size

Click the Desktop / Tablet / Mobile toggles in the toolbar.

The canvas re-renders at the chosen device width.

Walk through the canvas at each width — confirm the hero scales correctly, columns stack appropriately on mobile, buttons fit on narrow screens, and images do not overflow.

Mobile-broken landing pages convert poorly. Fix any layout issues before Publish.

6. Click Publish Changes

When the canvas is ready, click Publish Changes in the top-right of the toolbar.

A confirmation flash names the post and timestamp.

The public URL renders the new canvas on the very next request.

If a CDN sits in front of the site, allow a moment for cache invalidation before verifying the live URL.

7. Verify on the public site

Open the post's public URL in a new browser tab.

Hard-refresh (Ctrl+Shift+R or Cmd+Shift+R).

Read through the page once.

Click each interactive component (button, accordion, tab) to confirm the public-site behaviour matches what you saw on the canvas.

If anything looks wrong, return to the editor, fix the issue, and click Publish again.

Steps — Switch a post from the standard editor to SG-Builder

1. Open the post in the standard editor

Find the post in the list view.

Click the title to open the post-edit form.

The standard editor renders the body content as it currently is.

2. Save your current work

Click Save Draft (or Update if the post is already published).

This snapshots the current body content as a revision.

If the SG-Builder switch goes wrong, you can roll back to this revision from the post-history view.

3. Click Edit with SG-Builder

Click Edit with SG-Builder on the post-edit form.

The form posts and the SG-Builder editor loads.

The current body content may or may not import cleanly into the canvas.

Heavily-formatted standard-editor body (custom HTML, embedded shortcodes) can land as a single Text component that you then re-decompose into proper SG-Builder components.

4. Re-build or refine the canvas

Use the SG-Builder palette to break any imported body content into proper components.

For short body-copy posts, expect to re-do the layout in SG-Builder rather than expecting an automatic conversion.

This step is more like a fresh build than a port — plan accordingly.

5. Click Publish Changes

When the canvas is ready, click Publish Changes.

The new SG-Builder canvas commits to the public site.

The post is now an SG-Builder post. Future edits should stay in SG-Builder — switching back to the standard editor mid-flight usually creates more cleanup than it saves.

What success looks like

• The SG-Builder editor loads without errors and the canvas matches the last published version (or a fresh empty canvas for a new post).
• The autosave indicator updates every few seconds while you work, showing "Autosaved Xs ago."
• Clicking Publish Changes shows a success flash and updates the post-modified timestamp.
• The public URL serves the new canvas on the very next request — hard-refresh once to confirm.
• The post-history view shows a new revision corresponding to the Publish click. The previous published version is the next entry down.
• The Desktop / Tablet / Mobile toggles render the canvas at the corresponding widths.
• Closing the browser tab mid-edit and re-opening the post in SG-Builder shows the "Restore unsaved changes?" prompt.
• Restoring an autosave brings the canvas back to the state it was in before you closed the tab.
• The post appears in the list view's status column with the correct status (Published / Draft) after the SG-Builder Publish.
• Categories, tags, and SEO meta on the post-edit form are unchanged by SG-Builder edits — those fields belong to the post record, not to the canvas.

What to do if it does not work

• The SG-Builder editor does not load. Hard-refresh the browser. Confirm the post exists and is editable. Check the browser address bar — if it does not show the SG-Builder editor URL, the form did not post correctly. Return to the post-edit form and click Edit with SG-Builder again.

• The canvas is empty after opening a post that previously had content. The post may have been edited in the standard editor and not yet imported into SG-Builder. Body content from the standard editor does not auto-decompose into canvas components. Build the canvas from scratch or restore an older SG-Builder revision from the post-history view.

• Autosave shows "Save failed." Check your network connection. The autosave retries automatically on intermittent failures. Persistent failures suggest a session timeout — re-login in another tab and continue editing.

• The Publish Changes button does not respond. Refresh the editor (copy any in-progress text out of the canvas first). Re-open the post in SG-Builder. The "Restore unsaved changes?" prompt should appear with your last autosave — restore it and try Publish again.

• The public URL still shows the old version after Publish. Hard-refresh the browser (Ctrl+Shift+R or Cmd+Shift+R). CDN and edge caches can take a moment to invalidate. If the old version persists for more than a minute, check the cache settings on your hosting layer.

• An image does not render on the public site but renders in the editor. The image's media file may have been deleted from the Media library. Open the image component, re-pick the image from the library, and click Publish.

• The mobile preview shows broken layout but desktop looks fine. Open the broken section in the canvas, find the column or component that is overflowing, and adjust its width or padding for mobile only via the device-specific style controls.

• Two admins edited the same post simultaneously. Whichever admin clicked Publish second overwrote the first's changes. Use the post-history view to recover the lost work — the first admin's Publish click created a revision that can be Restored.

• The "Restore unsaved changes?" prompt is showing autosave content I do not recognise. The autosave is from another admin who edited the post in a previous session. Discard if you are confident their work was already merged or rolled back; Restore if you need to see what they were working on before deciding.

• Custom CSS for this page is not applying. Open Settings → Custom CSS and confirm the rule is scoped to body.page_id-<n> (using the page's numeric ID), not body.page-<slug>. The slug-based class disappears when the page is set as the site homepage.

• The Edit with SG-Builder button is not visible. SG-Builder access is permission-gated. Ask an Administrator to grant your role the SG-Builder edit permission.

Next step

Once the canvas is published and verified, the companion component pages cover the building blocks inside the canvas. Start with text and headings — they are the most-used components on almost every layout — then work outward to images, structure, and specialised blocks.

• SG-Builder text, headings, and buttons — the most-used components; start here.
• SG-Builder images and media — add images, video, and maps.
• SG-Builder structure and layout — sections, columns, and grids.
• Restore a post from a saved revision — roll back a problematic SG-Builder Publish.