Build your first page with SG-Builder

The short answer. Go to Pages, open any page in SG-Builder, add sections (hero → content → CTA), preview at every breakpoint, then click Publish. Your redesigned page replaces the live version immediately. Verify in a private browser window — done. Read on for the complete step-by-step walkthrough.

On this page: When to use SG-Builder · Before you start · Steps (1-6) · What success looks like · Troubleshooting · Tips

SG-Builder is SGEN's visual page editor. You work with sections — drop them onto the canvas, configure layout and copy in the right panel, preview at breakpoints, and publish. No code required. Publishing replaces the live version of that page immediately.

Expect ~20 minutes for a first build with 4-6 sections. The second page is faster once you know where the controls are.

Good use cases

SG-Builder is the right tool for intentional, layout-driven pages:

• Homepage redesign — new hero, feature rows, signup section. Build section by section, preview at mobile, publish once. The old version is replaced the moment you hit Publish.
• Campaign landing page — hero + story section + feature highlight + CTA. Build for the campaign window, then archive. Use SG-Builder when layout matters.
• Partner or program page — program details, team intro, tiers, contact form. Configure column layout, padding, and stacking per breakpoint without writing CSS.
• About Us / story page — text sections, photo grid, quote block. Built and maintained entirely in SG-Builder.
• Service or pricing page — hero, feature grid, pricing table, FAQ accordion. Each section configured independently.
• Event or webinar page — date, session description, registration embed, RSVP link. ~15 minutes from a template section.

What NOT to use this for

• Blog posts — blog content has its own editor. If you want to design a blog landing page, SG-Builder is fine — but individual posts belong in the Blog editor.
• High-frequency content — if a page's text changes daily (schedules, live feeds, real-time data), Custom Objects or standard text fields are faster.
• Product detail pages with live commerce — dynamic inventory, variant selectors, and cart integration belong on SGEN's commerce surfaces. SG-Builder is for static and semi-static layouts; a promotional page about a product is fine.
• Mid-campaign rebuilds — rebuilding a page that is live under a paid campaign resets its content. Finish the campaign first.
• Publishing without a mobile preview — always use the breakpoint buttons before Publish. A page that looks right at 1920px can have broken stacking or hidden buttons at 375px.

How this connects to other features

Before you start

Have these five things ready before opening the builder:

• SG-Builder access confirmed — go to Pages, find any page, and check if the "Open in SG-Builder" button is active. If it is greyed out, your plan may not include the builder — check your subscription settings or contact support.
• Your page identified — know which page you are redesigning, or create a new page record first (Add New Page → set title and slug → save → Open in SG-Builder).
• Images uploaded to Media — every image your design uses must already be in your Media library. Leaving the builder mid-build to upload breaks the flow. Upload first.
• Copy drafted — write your headlines, body copy, and CTA text in a document before you open the builder. Paste in; don't compose in the editor.
• Section order planned — a quick note like "hero → feature columns → 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. Click the page title to open its record, then click Open in SG-Builder. The editor loads with that page's current content on the canvas.

For a new page: click Add New Page, set the title and slug, save, then click Open in SG-Builder from the page record.

Editor layout: canvas (center) · section panel (left — add sections and templates) · configuration panel (right — text, images, colors, spacing). Breakpoint buttons sit at the top of the canvas — use them throughout the build.

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

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 for the reader arriving on this page. Be specific and direct.
• Subheading — one supporting sentence, under 20 words.
• Call to action — the button label and destination URL. Specific labels ("Get started free") convert better than generic ones ("Learn more").
• Background image — select from your Media library. If the image is not there yet, leave the hero, upload it to Media, and 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. Your planned section order is the guide — work top to bottom.

For each section:

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 a template.
3. In the configuration panel, set text, images, colors, and spacing.
4. Preview at desktop, tablet, and mobile before moving to the next.
5. If layout looks wrong at a narrow breakpoint, configure the breakpoint-specific overrides before continuing.

Preview after every section, not just at the end. A layout problem found on section three takes two minutes to fix. Found after ten sections, it takes fifteen.

4. Configure section spacing, colors, and alignment

With sections placed and content filled in, review the full page at desktop:

• Section spacing — configure top and bottom padding per section. Use a consistent vertical rhythm: more padding on hero and CTA sections, tighter padding on mid-page feature sections.
• Column alignment — multi-column feature sections typically use left-aligned text; CTA sections typically use centered text.
• Typography — sections inherit your site's global typography by default. If a heading looks different from the rest, it may have a custom style override from a previous edit — reset it in the text configuration panel.
• Colors — background, button, and text colors are configurable per section and do not affect other pages or sections.

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

• Page is visible at its public URL in a private browser window without logging in.
• Hero headline, subheading, background image, and CTA button are correct.
• All sections appear in the order you built them, with the correct content and images.
• At mobile width (under 400px), sections stack cleanly — no overlapping text, no cut-off images, no hidden buttons.
• Browser tab title matches the title set in the page record.
• CTA button links to the correct destination.
• No sections show placeholder content or empty image slots.
• Page status in the Pages list shows Published.

What to do if it does not work

• Changes not appearing after Publish. Confirm you clicked Publish �� not Save. Save stores the builder state without publishing. If you did click Publish and the old version still shows, do a hard refresh (Shift + click the browser refresh button). If it persists, open the page record in Pages, confirm status is Published, and re-open SG-Builder to verify the canvas state.

• Layout breaking on mobile after publishing. Re-open SG-Builder and switch to the 480px breakpoint. Find the section where columns are not stacking correctly. In that section's configuration panel under the mobile breakpoint, set column layout to single-column. Adjust padding and font sizes, then re-publish.

• SG-Builder button greyed out or missing. Your plan may not include SG-Builder — check Subscription settings. If the plan includes it but the button is still greyed out, the page type may not support the builder (blog posts and system pages such as checkout cannot be opened in SG-Builder).

• Section styles not saving — panel reverts on close. Confirm each value in the panel before clicking away. Clicking outside a text field or color picker without pressing the apply/confirm control discards the change. Re-open the panel and verify the values before closing.

• Images blurry on the live site. The source file in Media is likely low-resolution — SG-Builder cannot improve the original upload. Replace with a higher-resolution version (minimum: 1440px wide for hero backgrounds, 800px for inline images), reassign in the section panel, and re-publish. Also confirm that Media upload compression settings are not reducing quality on upload.

• Deleted section reappears after reopening. This is a stale editor state. Use the Save action (separate from Publish) before and after deleting a section. If the section reappears, the save did not complete — delete it again, save explicitly, and verify the canvas before closing.

• Text formatting differs between editor preview and live site. The editor is an approximation, not a pixel-for-pixel render. Site-level Custom CSS may affect how text renders live. Check in a private browser window after publishing. If formatting looks wrong, it is likely a site-level CSS rule — check your Custom CSS surface or contact SGEN support with a screenshot.

Tips for a strong first build

• Plan section order before opening the builder. A quick note — "hero, feature columns, testimonial, CTA" — takes five minutes and saves twenty. Rearranging configured sections is slower than placing them right the first time.
• Upload all images to Media first. The media picker inside the builder assumes images are already there. Leaving mid-build to upload breaks the flow.
• Preview at mobile after every section. A layout issue found at section three takes two minutes to fix. Found after ten sections and a publish, it takes fifteen.
• Start from section templates, then customize. Templates for hero, feature grid, testimonial, and CTA patterns are pre-calibrated for spacing and alignment. Customize from there — faster than blank.
• Publish once, not section by section. Publishing incrementally exposes a partially complete page to live visitors. Build the full page, verify all breakpoints, then publish once.
• Verify in a private browser window immediately after publishing. Your admin session may cache parts of the page. A private window shows exactly what a visitor sees.