Build your first page with SG-Builder

| Field | Value ||---|---|| Audience | sgen-admins || Page type | tutorial || Area | Documentation || Updated | 2026-05-25 |

How to open SG-Builder, design your first page, and publish it live

Building a page in SG-Builder takes about twenty minutes from a blank canvas to something on your live site. This guide walks you through all of it — from opening the builder on an existing page to confirming the redesigned version is live and rendering correctly at every screen size.

SG-Builder is SGEN's native visual page editor. You work with sections and content blocks — drop them onto the canvas, configure their layout and copy in the right panel, preview at different screen sizes, and publish when it looks right. No code is required at any point. The editor saves your work to the page, and publishing replaces the current live version of that page with your new design.

The steps in this guide assume you are starting from an existing page that you want to redesign — a homepage, a landing page, or a campaign page. If you are creating a brand-new page and opening SG-Builder on it for the first time, the same steps apply; the only difference is that the canvas starts completely empty rather than carrying over the previous design.

By the end of this guide, you will have a published page on your live site, rebuilt with SG-Builder sections, visible to visitors, and rendering at the correct layout on desktop, tablet, and mobile. You will also know how to verify the result before you share the URL.

What is this for?

This guide is for anyone who has access to SG-Builder and wants a clear walkthrough of the complete publishing cycle — from opening the editor to confirming the live result. It covers the full sequence once, in order, with no assumed prior experience of the builder.

It is also useful as a reference if you have been building in SG-Builder already but skipping steps like the mobile breakpoint preview or the live verification step, and want to fill those gaps.

You will use the Pages area of the dashboard, the SG-Builder editor, and the Publish button inside the editor. Everything is in one workflow — you do not need to visit multiple areas of the dashboard to complete any step in this guide.

One thing to set as an expectation: the first time through the builder takes longer than subsequent sessions, because you are also getting familiar with where things are and how the section system works. The second page you build in SG-Builder will be faster. Expect twenty minutes for a first build with four to six sections; expect ten minutes once you know where the controls live.

Good use cases

SG-Builder is the right tool for each of these situations.

• A homepage redesign. SGEN's own marketing homepage needed a new

layout for the 2026 season — a larger hero with a product headline, a row of featured use cases, and a signup section lower on the page. SG-Builder let the marketing team rebuild it section by section, preview each one at mobile, and publish the complete redesign without touching any code. The old homepage was replaced the moment they hit Publish.

• A campaign landing page. SGEN runs a limited-release

campaign each quarter for new platform features. Each campaign gets its own page: a hero with the feature name and value summary, a two-column section with the story and an image, a feature highlight, and a call to action. These pages are built in SG-Builder, published for the campaign window, and then archived. SG-Builder is the right tool for this because the design is intentional and the layout matters.

• A partner or program page. A partnerships page covers

the program details, the team behind it, the available tiers, and a contact form. It has a layout — not text — and that layout needed to be different at desktop versus mobile. SG-Builder handles this at the section level, letting the team configure padding, column width, and section stacking per breakpoint without writing CSS.

• An About Us page. The story of how a team was founded,

the people behind the product, and what drives their decisions all on a single page. It uses a mix of text sections, a photo grid, and a quote section. All of it can be built and maintained in SG-Builder.

• A service or program page. SGEN's pricing page

is built in SG-Builder. It has a hero, a three-column feature grid, a pricing section, and a FAQ accordion at the bottom. Each section was configured independently, and the team can update any of them without affecting the others.

• An event or partnership page. When a team runs a

webinar or partner event, they build a one-page event site in SG-Builder. The page has a date, a registration embed, a session description, and an RSVP link. It takes about fifteen minutes to build from a template section and another five to publish.

What NOT to use this for

• Do not use SG-Builder for blog posts. Blog posts are

dated, reverse-chronological content with a specific feed and category structure. They have their own editor. Opening a blog post in SG-Builder is not supported. If you want to design a blog landing page, use SG-Builder on that page — but the individual posts themselves belong in the Blog editor.

• **Do not use SG-Builder for frequently-changing content that

needs rapid edits.** If a page needs its text updated every day — a live event feed, a real-time pricing table, a daily schedule — SG-Builder's section-edit workflow adds overhead that is not worth it. Standard page text fields or Custom Objects are faster for high-frequency edits.

• **Do not use SG-Builder as your primary e-commerce product

catalog builder.** Product pages with dynamic inventory, variant selectors, and cart integration are handled by SGEN's commerce surfaces. SG-Builder is for static and semi-static layouts. A promotional page about a product is a good SG-Builder use case. The actual product detail page with a live buy button is not.

• Do not rebuild a page in SG-Builder mid-campaign.

If a page is live and receiving traffic from a paid campaign, rebuilding it in SG-Builder resets its content. Finish the campaign, then redesign. Rebuilding mid-flight risks losing the design state and disrupting the user experience for live visitors.

• **Do not publish a page built in SG-Builder without previewing

at mobile.** Desktop looks different from mobile in the builder. Use the breakpoint preview buttons before hitting Publish. A page that looks right on desktop can have broken stacking, overlapping text, or missing padding at 375 pixels wide.

How this connects to other features

SG-Builder does not work in isolation. Several other areas of your SGEN dashboard connect directly to what you build.

• Pages — Every SG-Builder page lives as a record in the

Pages area of your dashboard. When you finish building and hit Publish inside the editor, the page record in Pages reflects the new published state. You can also set the page's title, URL slug, and SEO fields from the Pages record — those fields are separate from the builder canvas.

• Media — Images and videos that you place in SG-Builder

sections come from your Media library. If you want to use an image in a hero section, it needs to be uploaded to Media first. The editor lets you browse and select from your Media library inside the section configuration panel. Upload before you build if you know which images you will need.

• Templates — SG-Builder includes section templates: pre-built

layouts you can drop onto the canvas and customize. When you find a combination of sections that works well for a page type — hero, feature grid, testimonials, CTA — you can save it as a template for reuse. Templates are per-site and available to any team member with access.

• Custom CSS and Custom Codes — For design teams that need

to extend beyond what SG-Builder's section controls provide, Custom CSS and Custom Codes surfaces are available in the dashboard. These apply at the site level. SG-Builder section styles are layered below Custom CSS, so site-level overrides apply on top. Most teams do not need this for standard builds.

• Settings (SEO) — The SEO title, meta description, and

URL slug for a SG-Builder page are set in the page record in the Pages area, not inside the builder. After building and publishing, go to the Pages record for that page and verify the SEO fields. The builder handles the visual design; the page record handles the metadata.

Before you start

Before you open SG-Builder, have these things ready.

Confirm you have SG-Builder access on your plan. SG-Builder is available on specific SGEN plans. If you navigate to a page and the button says "Open in SG-Builder" and it is active, you have access. If the button is greyed out or absent, your current plan may not include SG-Builder — check your subscription settings or contact SGEN support.

Know which page you are redesigning. This guide assumes you are building on a specific page — homepage, landing page, or campaign page. Have the page's title or URL ready so you can find it in the Pages list. If you are building a brand-new page, create the page record first (Add New Page in the Pages area), give it a title and slug, save it, and then open it in SG-Builder.

Have your images uploaded and ready in Media. If your design includes a hero image, a background image, or any photographs in content sections, upload them to Media before opening the builder. The media browser inside SG-Builder lets you select from your existing library — but if the images are not there yet, you will need to leave the builder to upload them, which interrupts the build flow. Upload all images for a page to Media before touching the builder.

Have your copy drafted. SG-Builder's text fields are for placing copy, not for writing it. Draft your hero headline, section headings, body copy, and call-to-action text in a document before you build. Copying and pasting into the section fields is faster than writing in the editor. The SGEN team drafts all page copy in a shared doc before opening the builder.

Know your section order in advance. Decide the layout of the page before you open the builder: what sections appear, in what order, and roughly what each contains. A one-paragraph plan like "hero, three-column features, testimonial, CTA" is enough. Building with a plan is faster than building by feel.

Where to go

Go to Pages in the left sidebar of your SGEN dashboard. Find the page you want to redesign in the list. Click the page title to open the page record, then click Open in SG-Builder. The SG-Builder editor opens with that page's current content loaded on the canvas.

If you are building a brand-new page, click Add New Page at the top right of the Pages list, fill in the Title and URL Slug, save the page record, and then click Open in SG-Builder from the page record view.

The SG-Builder editor has three main areas: the canvas in the center (where your sections render), the section panel on the left (where you add new sections and templates), and the configuration panel on the right (where you set text, images, colors, spacing, and layout options for the selected section). The breakpoint preview buttons sit at the top of the canvas — use them throughout the build.

Steps — Build and publish your first page with SG-Builder

These steps take you from opening the editor on an empty or existing page to confirming the redesigned page is live on your public site.

1. Open the page in SG-Builder and clear or review the canvas

After clicking Open in SG-Builder from the page record, the editor loads with the current page content on the canvas. If this is a page you are redesigning, you will see the existing sections already placed. If it is a brand-new page, the canvas is blank.

For a redesign, review what is already on the canvas. You can edit individual sections in place, add new ones, remove sections that are no longer needed, or clear the entire canvas and start from scratch. For a first build, starting from scratch is often faster — you are not working around existing structure, you are building the structure you want.

To remove a section, click on it to select it, then use the delete action in the section's control bar. To reorder sections, use the drag handle on the left side of each section row.

2. Add a hero section

Click Add Section in the left panel or click the plus icon on the canvas where you want the section to appear. The section panel opens with a list of section types and templates. Choose a Hero section type — this is the large full-width section that typically appears at the top of the page and carries the main headline and call to action.

In the configuration panel on the right, set the hero's content:

• Headline — this is the H1 for the page. Write it for

the reader arriving on this page. SGEN's May campaign hero reads "One platform. Every page." — specific, direct, no filler.

• Subheading — one sentence that supports the headline and

gives the reader context. Keep it under twenty words.

• Call to action — the button label and the destination URL.

"See this season's arrivals" linking to the wholesale inquiry form is more specific than "Learn more."

• Background image — click the image picker and select from

your Media library. If the image you need is not there yet, leave the hero and upload it to Media, then come back.

After setting the hero content, use the breakpoint buttons at the top of the canvas to check how the hero looks at tablet (991px) and mobile (767px). Hero sections often need their heading font size reduced for narrow viewports. Configure those adjustments in the same configuration panel — the breakpoint context is shown in the panel header.

3. Add content sections below the hero

After the hero is built and previewed, add the remaining sections for the page. The section order you planned before opening the builder is your guide here — work from top to bottom.

For SGEN's May campaign page, the structure after the hero is: a two-column feature highlight (SG-Builder left, Custom Objects right), a use-case section with a text block and a screenshot, a three-column plan overview, and a closing CTA section with a button linking to the signup form.

For each section, follow the same process:

1. Click Add Section below the previous section.
2. Choose the section type that fits — two-column, three-column,

text + image, full-width CTA, accordion, or another template.

1. In the configuration panel, set the text, images, colors,

and spacing for that section.

1. Preview at desktop, tablet, and mobile before moving to the next.
2. If the layout looks wrong at a narrow breakpoint, configure

the breakpoint-specific overrides in the panel before continuing.

Do not skip the breakpoint preview between sections. Finding a layout problem on the tenth section and tracing it back to the second section adds unnecessary time. Preview as you go.

4. Configure section spacing, colors, and alignment

With your sections placed and their content filled in, review the page as a whole at desktop. Common items to check at this stage:

Section spacing — the padding above and below each section. Sections that are too close together feel cramped; sections with too much space between them feel disconnected. Configure top and bottom padding in the spacing controls of each section's configuration panel. Use a consistent vertical rhythm — larger padding on hero sections and CTAs, tighter padding on feature sections in the middle of the page.

Column alignment and width — in multi-column sections, check that the text alignment matches the design intent. A two-column origin feature section typically has left-aligned text in each column. A centered CTA section typically has center-aligned text.

Typography — check that headings and body text are using the correct font and size from your site's design system. SG-Builder sections inherit your site's global typography by default. If a section heading looks different from the others, it may have a custom style override set in a previous edit. Reset it via the text configuration panel.

Colors — section background colors, button colors, and text colors are all configurable per section. If you are building a campaign page with a seasonal palette, set the background colors in each section's configuration panel. Colors set here are section-level — they do not affect other pages or other sections on this page.

5. Preview the full page at all breakpoints

Before publishing, run a full preview of the page at every breakpoint using the buttons at the top of the canvas. SGEN's breakpoints are desktop (1920px), wide (1199px), tablet landscape (991px), tablet portrait (767px), and mobile (575px and 480px).

Work through each breakpoint in order from widest to narrowest. For each breakpoint, scroll through the entire page and check:

• Section stacking — multi-column sections should collapse to

single-column on mobile without text or images overlapping.

• Heading sizes — large desktop headlines may be too large at

narrow widths. Configure per-breakpoint font sizes in the text block's style panel if needed.

• Button placement — CTA buttons should be full-width on mobile

and sized appropriately on tablet. Check that buttons are not cut off or hidden behind other elements.

• Image cropping — background images and inline images often

crop differently at narrow widths. Verify that the subject of each image is visible and centered at mobile.

• Padding — sections that look well-spaced at desktop can feel

cramped or over-spaced at mobile. Adjust mobile-specific padding in the section spacing panel under the mobile breakpoint.

This review step is the most important quality check before publishing. Take five minutes here. It saves re-publishes after the page is live.

6. Publish and verify on the live site

When the design is complete and all breakpoints are checked, click Publish inside the SG-Builder editor. The button is at the top right of the editor window. Clicking Publish saves the current builder state and replaces the live version of the page on your public site.

After publishing, leave the editor and open a private browser window. Navigate to the public URL of the page you built. The redesigned page should load with the sections you built, at the correct layout.

Scroll through the entire page in the private browser window as a visitor would. Confirm:

• The hero headline, subheading, and CTA button are correct.
• All sections appear in the correct order.
• Images are loading — no broken image placeholders.
• The CTA button links to the correct destination.
• The page title in the browser tab matches the page title you set.

Now resize the private browser window to a narrow width — under 400 pixels — and scroll through again. If the sections stack cleanly, the text is readable, and the buttons are accessible, the page is ready to share. If something looks wrong at mobile in the live site, go back into SG-Builder and address it in the affected section's mobile breakpoint configuration, then re-publish.

What success looks like

When the page is published correctly and the build is complete, these things are true.

• The page is visible at its public URL in a private browser

window without logging in to the dashboard.

• The hero section renders with the correct headline, subheading,

background image, and CTA button.

• All sections appear in the order you built them, with the

content and images you configured.

• At mobile width (under 400px), sections stack cleanly — no

overlapping text, no images cut off, no buttons hidden.

• The page title in the browser tab matches the title you set

in the page record.

• Clicking the CTA button takes the visitor to the correct

destination.

• No sections show placeholder content or empty image slots.
• The page status in the Pages list shows Published.

What to do if it does not work

• Changes are not appearing on the live site after clicking Publish.

First, confirm you clicked Publish — not Save. Save stores the builder state without publishing to the live site. If you clicked Publish and the live page still shows the old version, try a hard refresh on the public URL (hold Shift and click the browser refresh button). If the old version persists after a hard refresh, open the page record in Pages, confirm the status is Published, and re-open the page in SG-Builder to verify the current canvas state reflects your build.

• The layout is breaking on mobile after publishing.

Go back into SG-Builder on that page. Switch to the 480px breakpoint using the breakpoint selector at the top of the canvas. Identify which section is breaking — usually a multi-column section where columns are not stacking correctly. In the configuration panel for that section, under the mobile breakpoint, set the column layout to single-column and verify the stacking order. Adjust padding and font sizes as needed, then re-publish.

• The SG-Builder button on a page is greyed out or missing.

Your current SGEN plan may not include SG-Builder. Go to your account's Subscription settings and verify the plan includes SG-Builder. If it does and the button is still greyed out, the page may be of a type that does not support SG-Builder — blog post pages and system pages (like the checkout page) cannot be opened in SG-Builder. Use the standard editor for those page types.

• **Section styles are not saving — the section reverts to its

previous styles after closing the panel.** This can happen if the configuration panel was closed before the field was confirmed. In SG-Builder, clicking outside a text field or color picker without pressing the apply or confirm control may discard the change. After setting any style or content value, confirm the change in the panel before clicking elsewhere. Re-open the section configuration panel and verify the values are reflecting what you set.

• Images in sections are blurry or low-resolution on the live site.

The source image in your Media library may be low-resolution. SG-Builder cannot improve the quality of the original upload — it displays what is in Media. Replace the image in the Media library with a higher-resolution version (recommended minimum: 1440px wide for hero backgrounds, 800px wide for inline images), then reassign the image in the section configuration panel and re-publish. Also confirm that the Media upload settings have compression configured appropriately — the default compression setting may be reducing quality on upload.

• A section I deleted keeps reappearing after I re-open SG-Builder.

This is a stale editor state. Before deleting a section, save the current canvas state using the Save action (separate from Publish). After deleting the section, save again before closing or navigating away. If the deleted section reappears on the next session, the save did not complete. Delete it again, save explicitly, and verify the section is no longer on the canvas before closing the editor.

• **Text formatting inside a section looks different on the

live site than in the editor preview.** The editor preview is a close approximation of the live site, not a pixel-for-pixel render. Theme-level typography and any Custom CSS applied at the site level may affect how section text renders on the live site. Check the live site in a private browser window after publishing. If the formatting looks wrong, it is likely a site-level CSS rule affecting the section's text styles — confirm with your site's design settings or contact SGEN support with a screenshot of the discrepancy.

Tips for a strong first build

A few habits that make the first build faster and the result more solid.

• Plan the section order before opening the builder.

Deciding the layout in a document — "hero, two-column feature, testimonial, CTA" — takes five minutes and saves twenty. Rearranging sections after they are configured is slower than placing them in the right order from the start.

• Upload all images to Media before building.

Leaving the builder to upload an image breaks the build flow. Gather your images, upload them in Media, confirm the filenames and alt text, then open SG-Builder. The media picker inside the editor assumes the images are already there.

• Preview at mobile after every section, not at the end.

A five-second breakpoint check after each section catches problems early. Catching a layout issue on section three takes two minutes to fix. Catching it after you have built ten sections and published takes fifteen.

• Use section templates for structural sections, then customize.

The section template library has pre-built hero layouts, feature grids, testimonial sections, and CTA patterns. Start from a template for each section type and customize the content, colors, and spacing. Building from a template is faster than building from a blank section — and the template's default spacing and alignment is already calibrated for common use cases.

• Publish once, not incrementally.

Build the full page, preview it at all breakpoints, then publish once. Publishing section by section exposes a partially complete page to live visitors. Build the whole thing in the editor, verify the complete design, and publish the final version.

• Verify in a private browser window immediately after publishing.

Your admin session may cache parts of the page. A private browser window shows you exactly what a visitor sees — which is the version that matters. Open one immediately after publishing and scroll through the whole page.

## Related reading

Topic
Manage pages in SGEN
Upload and manage media in SGEN
Use page templates in SG-Builder
SGEN in 5 minutes
Companion video script