Native module · SG Builder
Drag-and-drop website builder on a real canvas — publish server-rendered.
SG Builder is a visual canvas that renders on the server. You open a page with Edit, the dark editor shell loads, you arrange sections on the canvas exactly as a visitor will see them, and you tune the layout per device. Build with 48 native components across four families, style any element in the left rail, and click Publish Changes to ship the page.
What is different is the other side of Publish. SG Builder is a native module that renders on the server, so the page a visitor loads is finished HTML, not a builder still drawing itself in the browser. The SG-BUILDER wordmark sits top-left, a six-pill device switcher runs across the center, and the red Publish Changes split-button waits top-right. One platform, one update cycle.
48 components, 4 families
A real component library, not ten generic blocks.
SG Builder ships 48 native components across four families: 14 Basic, 17 Extra, 6 Posts, and 11 Ecommerce. These are the building blocks of a finished site, accordions, tabs, sliders, pricing cards, testimonials with star ratings, galleries, an embed map, a form, a typing rotator, and a full storefront set, all native and all server-rendered. You assemble a finished page from real components, not from four primitive blocks plus a stack of add-ons.
Components carry real configuration, not just styling. The Cart Button ships 8 traits and Mini Cart ships 6. The CTA Button carries 9 button styles (default, primary, secondary, success, warning, info, danger, light, dark). Pricing Cards take a tiers array (title, price, period, features, cta label). The Typing Rotator drives 13 traits, including a typing speed of 100ms, a deleting speed of 50ms, and a 1500ms pause. The 11 Ecommerce primitives appear once the Ecommerce module is on. Most pages start finished too: the Templates library ships 50+ pre-built section blocks you drop straight onto the canvas.
Style any element
Click an element. Style it live in the left rail.
SG Builder docks a Style Manager in the left rail and applies six universal sectors to every component: General, Flex, Dimension, Typography, Decorations, and Extra. Select the button on the canvas, open Typography, and you have a Google-Fonts picker with 392 fonts, font-size, nine font-weights from 100 through 900, letter-spacing, line-height, text-align, and a text-transform control (None, Capitalize, Uppercase, Lowercase). Decorations carries background-color, a four-corner border-radius, border, box-shadow (Outside or Inside), a background image, and an overlay-color control. On a Section or Div, three more sectors appear: Background Video, Shape Divider (Top), and Shape Divider (Bottom) with 13 SVG shapes.
The Style Manager panel is source-derived from the live component catalog. Working panels dock on the left, and the four rail tabs are Blocks, Style Manager, Settings, and Layers.
Six breakpoints, per element
Every element carries settings and a show-or-hide control for all six breakpoints.
SG Builder gives every component a Settings tab and four universal traits. The tab opens with an ID field, then the per-component traits (a Heading shows a Title textarea, a Heading Tag select for h1 through h6 plus div, span, and p, and a Link), then four controls applied to every component: Additional CSS, where the selector keyword scopes a rule to the component; Entrance Animation, driven by AOS with 45 animations in 5 groups (Fade, Slide, Bounce, Zoom, Other) plus a delay; and Responsive Visibility, six hide-on-breakpoint checkboxes. The six widths are explicit (1920 or 1170 down through 1199, 991, 767, 575, 480), with per-device overrides, so the mobile break you would normally find after publishing, you fix on the canvas. Override only what needs to change per device, and let the rest cascade.
The gear is the Settings tab
One panel: the element's traits plus the six-device visibility control.
There is no separate gear or Advanced tab. The cog icon in the left rail is the Settings (Trait) tab, and it holds both the per-component fields and the four universal traits. Responsive Visibility renders as six checkboxes, one per device, so hiding the hero subtext on small mobile while it stays visible everywhere else is one click, not a media query you write by hand.
In one probe, the three universal traits (Additional CSS, Entrance Animation, Responsive Visibility) saved correctly but did not render on the published page, logged as a known gap. Treat them as the editor controls described here and verify the result on the published page.
The Settings panel and its trait fields are source-derived from the component catalog. Hiding on Mobile SM is shown checked; the other five stay visible.
Site-wide design system
SG Builder ships a real global design system, not just a drag canvas.
A Site Settings layer sets type, color, and buttons across every page from one drawer. Global Colors is a Default and Hover grid across 11 design-system roles (Body Background, Text, accent, primary, secondary, success, info, warning, danger, light, dark). Typography sets Body (Inter, 16px) plus a true H1 through H6 scale (72, 48, 30, 20, 16, 14 px), each a Font Family dropdown and a Font Size in px. The drawer slides in from the left, uses a Back breadcrumb between the menu and each detail form, and pins a Save Changes button. This is a global token layer, so change a heading size here and it updates site-wide. For the per-page Appearance editor, see the Theme Editor.
Site Settings Typography sets Font Family and Font Size; per-element weight and line-height live in the Style Manager. The hex values shown belong to the demo page, rendered as sample values.
Header, footer, layout
Sticky header, a CTA repeater, dark theme mode, all set once for the whole site.
SG Builder controls site structure from the same Site Settings drawer. Header carries Logo Alignment, two independent Sticky Header toggles (Desktop and Mobile), and an Enable CTA Buttons switch that feeds a CTA repeater (Button #1 with Text, Subtext, Link, and Target). Layout sets Theme Mode, Container Width, and a four-side Section Padding. The Navigation form assigns menus to Header, Footer, and Mobile, and the Footer form has an Enable Top Footer toggle with content alignment and a raw-HTML content box. The builder ships site-level structure, not just a per-page drag canvas.
Why native
SG Builder is one native module on one update cycle.
The canvas, the renderer, the theme system, and the hosting underneath all ship and update together as one platform. Nothing sits beneath the canvas on its own release schedule, so there is nothing under it to break on an update you did not choose, and nothing to reconcile when two layers move at once. A builder is only as reliable as the stack it runs on, and here the stack is the platform.
Native, not bolted on
SG Builder is one of 23 native modules, not a builder that needs a plugin stack.
SG Builder ships alongside 23 other native modules, and the jobs a builder usually offloads elsewhere are native too. A finished site is rarely just the builder: it is the builder plus forms, popups, SEO, security, and attribution. On SGEN every one of those is a native module that updates with the platform, on one bill, with no extra licenses to track.
| The plugin job | Typical WordPress plugin | SGEN native |
|---|---|---|
| Visual page builder | Elementor | SG Builder |
| Forms | WPForms, Gravity Forms | Forms module |
| Popups | OptinMonster | Popups module |
| On-page SEO | Yoast, Rank Math | SEO Manager |
| Image optimization | Smush, ShortPixel | Image Optimization |
| Security and WAF | Wordfence, Sucuri | Foundation Pack |
| Attribution, call tracking | CallRail | Attribution module |
SG Builder is one module among 23 native modules across 7 categories. It ships with your plan, updates with the platform, and renders finished HTML on the server.
What ships to the browser
SG Builder publishes finished HTML, rendered on the server before it leaves the data center.
SG Builder is where you design. Server-side rendering is what you publish. The server renders the complete page before it leaves the data center, so the visitor and Google's crawler both receive finished content with no client-side render step to wait on. It is not a setting you toggle or a cache you bolt on. It is how the platform works.
A builder is only as fast as what it outputs, so you get drag-and-drop convenience without a JavaScript-render penalty. SG Builder is the design surface; the server-side rendering is the platform behavior on the other side of Publish Changes.
Client-side rendervisitor waits on scripts
Page request
HTML shell
JS executes
Layout renders
Visible content
Server-side render · SGENfinished on first response
Page request
Finished HTML
Visible content
Questions
Frequently asked questions about SG Builder
How many components does SG Builder include, and what are they? +
48 native components across four families: 14 Basic (Div, columns, Section, Heading, Text, Image, Video, Embed Map, CTA Button, Code, Typing Rotator), 17 Extra (Accordion, Tabs, Testimonials, Slider, Pricing Cards, Gallery, Form, navigation, and more), 6 Posts components for dynamic content, and 11 Ecommerce components for the storefront. The Templates library adds 50+ pre-built section blocks on top. The 11 Ecommerce primitives appear once the Ecommerce module is on.
Can I make a design responsive, and how granular is it? +
Yes. SG Builder has 6 responsive breakpoints, from wide desktop (1920 or 1170) down through 1199, 991, 767, 575, and 480, with per-device overrides. A Responsive Visibility control hides any element on any of the six breakpoints, so you fix the mobile break in the editor before publishing rather than after.
Can I set fonts, colors, and type scale once for the whole site? +
Yes, via Site Settings. Global Colors covers 11 roles, each with a Default and a Hover value. Typography sets a Body style and an H1 through H6 scale (72, 48, 30, 20, 16, 14 px), each with a Font Family and a Font Size, drawn from a 392-font Google picker plus self-hosted Custom Fonts. Change a global value and it updates site-wide. Per-element weight and line-height live in the Style Manager, not in this drawer.
What does Publish Changes actually do? +
It pushes your edits from the editor draft to the live, server-rendered page. The server renders finished HTML before it ships, so visitors and crawlers get complete content with no client-side render step. Nothing is public until you click Publish Changes.
What does it not do, honestly? +
SG Builder is a page builder, not a no-limits design tool. Gallery masonry currently renders as a grid, video autoplay can be ignored by the browser, and the per-component Additional CSS, Entrance Animation, and Responsive Visibility traits are editor controls that should be verified on the published page (one probe logged a render gap). Posts components are server-rendered and largely id-only, so they inherit the template rather than carrying rich per-post styling. The free Sandbox is staging-only, not a production custom domain.
Do I need WordPress or separate hosting to run SG Builder? +
No. SG Builder is one of 23 native modules on SGEN, with no WordPress underneath and no separate hosting invoice. Hosting, SSL, CDN, WAF, security patching, and the multi-site dashboard ship in the Foundation Pack, free on every plan including the $0 Sandbox. Bringing over an existing site is a rebuild on the canvas, not a one-click import.
Start building
SG Builder is on every plan, including the free Sandbox. From $39/mo.
SG Builder ships on every plan, including the free unlimited Sandbox, so you can build a real page before you decide anything. The Foundation Pack (hosting, SSL, CDN, WAF, security patching, and the multi-site dashboard) is included on every plan, even Sandbox.
Bringing an existing site onto SG Builder is a rebuild, not an import. Two paths: a white-glove rebuild where we rebuild your site for you (contact sales for scope and pricing), or a DIY rebuild on the free Sandbox using SG Builder and the Templates library. Talk to sales about a rebuild.
From $39/mo, billed annually. $47 monthly. 2-week trial, cancel anytime. Every module included.