Native module · Theme Editor
SGEN Theme Editor: your whole site's design, one panel.
SGEN's Theme Editor is a three-region design editor that sets your whole site from one place: a left rail with eight controls, a center panel that edits a 7-level type scale (Body plus H1 through H6, each a Font Family dropdown and a Font Size in px), and one green Save Changes that applies it everywhere.
Pick a named color swatch and it repaints colors, typography and button styles across the entire site in one click. The same Global Colors, Typography and Buttons tokens are editable inside the SG Builder Site Settings drawer without leaving the visual canvas. Type, color and button settings live together in one native panel, so you set the whole site's design in one place and Save once.
What you control
Eight controls. The whole site's design, in one form.
The Styles & Layout rail holds eight controls, and one Save applies them everywhere. These are global tokens, edited once in a native panel and never per template, so there is nothing to keep current on the side. Set typography, color, layout and buttons once, and the whole site follows.
Typography, site-wide
Set the body font and the size of every heading level. Seven rows: Body plus H1 through H6, each a Font Family dropdown and a Font Size in px. The live default scale runs Body 18, H1 60, H2 46, H3 36, H4 24, H5 20, H6 18.
Global Colors
A full token palette, not a few swatches: Body Background and Text plus accent, primary, secondary, success, info, warning, danger, light and dark, each as a Default and Hover pair.
Button Styles
Font, font size, border width, a four-corner border radius (set to 9999 for a pill), four-side padding, and Default and Hover overrides for text, background and border. Buttons are a first-class control here.
Themes and color swatches
Pick a full color swatch (Midnight Orchid, Slate Ember, Forest Mint, Burgundy Gold, Graphite Lime and more) to apply colors, typography and button styles site-wide in one click.
Native header and footer
Edit the global header (template, fonts, colors, logo alignment, sticky-on-desktop and sticky-on-mobile toggles, and in-header CTA buttons) and the footer (template plus a Top-Footer subsection with its own colors and HTML content) from the same rail. Plus a Mobile Menu editor.
Layout and accessibility
Theme mode (light or dark), container width (e.g. 1200px) and four-side section padding live in the Layout panel. An Accessibility ADA control sits in the same rail, alongside the controls you set type and color with.
Whole-site repaint
Pick a swatch, the whole site changes: color, type, buttons.
The Themes page is a gallery of named color swatches, each a mini site-preview thumbnail. Pick one and SGEN applies its colors, typography and button styles across the entire site at once. Switching a swatch repaints the hero, the CTAs, the cards and the footer in one Save, no per-page edits.
Named presets such as Midnight Orchid, Slate Ember, Forest Mint, Burgundy Gold and Graphite Lime, and more below the fold. One pick repaints the whole site, live on Save.
Design tokens
A real token palette. Editable in the admin or inside the builder.
Global Colors is a 2-column grid of hex inputs paired with swatches, laid out as Default and Hover pairs across ten token rows: Body Background and Text Color, plus accent, primary, secondary, success, info, warning, danger, light and dark. The same Global Colors, Typography and Buttons tokens are editable from the SG Builder Site Settings drawer, a full-height panel that opens over the page canvas while you build.
The same tokens, two ways to reach them: a green Save in the admin Theme Editor, and this white Save in the SG Builder drawer. The hexes shown here belong to one demo page, not a stock SGEN palette. The responsive toolbar runs the breakpoint chips 1920, 1199, 991, 767, 575 and 480px, so you tune the design at every width as you build.
Button styling
Buttons are a first-class control, not a checkbox.
The Buttons panel sets Font Family, Font Size, Border Width, a four-corner Border Radius (set to 9999 for a pill) and four-side Padding. Override Button Colors gives Default and Hover swatches for Text, Background and Border. Granular per-state button design, applied site-wide from one panel inside the SG Builder Site Settings drawer.
The drawer groups the same tokens as the admin Theme Editor: Design System (Global Colors, Typography), Theme Style (Buttons, Header, Footer) and Settings (Layout, Navigation). The padding, radius and hex values above are sample values from a demo page, not fixed product defaults.
Self-hosted fonts
Upload your brand fonts. They flow into the type scale.
Custom Fonts is a self-hosted webfont manager. The Font Manage form holds a Title and one or more Weight blocks. Each Weight block carries a Font Weight select (normal plus 100 through 900, ten options) and four upload slots, TTF, WOFF, WOFF2 and EOT, each with real browser-coverage helper text. Add Another stacks more weights, so one family ships its 300, 400 and 700 under a single font-family. Publish it (or stage it as Draft), and a published family auto-injects an @font-face block into every public page's head with font-display: swap, then becomes selectable in the Typography Font Family dropdowns.
Self-host your own licensed font files in four formats across as many weights as the family needs. This manager hosts your files, it does not manage Google Fonts, and it does not support OTF or variable fonts. The rows above are a crafted view of a populated family, shown to illustrate the multi-weight layout.
Native header and footer
The header and the footer are part of the same panel.
The Header panel sets the template, fonts, background and text colors, logo alignment, sticky-on-desktop and sticky-on-mobile toggles, and in-header CTA buttons. The Footer panel sets its template and colors, plus an Enable Top Footer subsection with its own alignment and an HTML Content area. Navigation assigns a menu to the header, footer and mobile drawer from three dropdowns.
Header, Footer and Mobile Menu sit in the same Theme Editor rail. Sticky behavior, the in-header CTA and the Top-Footer HTML are all editable without touching theme files.
Custom code, native
A managed snippet library, not a paste box.
Custom Codes manages your HTML snippets, scripts, pixels and tracking tags. Each snippet carries a placement (head, body start, or body end), a priority for deterministic ordering, and an Active or Inactive status, with a Trash and Restore safety net. Its sibling Custom CSS holds site-wide stylesheet snippets the same way, both in the native Appearance group.
Both managers run a real CodeMirror editor with a Tips sidebar, an Active and Inactive lifecycle with live counts, a Trash and Restore safety net, priority cascade and author plus timestamp attribution. Snippets are global, they apply across every page, and the Custom Codes Tips panel guides where each one belongs. The rows here are demo data, shown to illustrate the lifecycle.
In the box on every plan
Native modules, included on every plan.
23
native modules included on every plan
8
controls in the Theme Editor rail
7
type levels: Body plus H1 to H6
The Theme Editor, Themes, Custom Fonts, Custom Codes and Custom CSS all sit in the same native Appearance group, built into the platform, updated with it, with nothing to license or maintain separately.
Questions, answered
The Theme Editor, in plain terms
Do global style changes apply everywhere at once? +
Yes. One Save in Styles & Layout applies typography, Global Colors, Layout and Button Styles site-wide. Change the 7-level type scale (Body plus H1 to H6) or the 10-token Default and Hover palette once, and the whole site updates from those global tokens, with no per-template edits.
Can I use my own brand fonts? +
Yes, self-host them. Upload TTF, WOFF, WOFF2 and EOT files per weight (normal plus 100 through 900), stack multiple weights under one family with Add Another, set the font to Publish, and the family becomes selectable in the Typography Font Family dropdowns and injects with font-display: swap. Custom Fonts hosts your own licensed files. It does not manage Google Fonts here, and OTF and variable fonts are not supported.
Can I switch the whole site's look quickly? +
Yes. Pick a named Color Swatch, such as Midnight Orchid, Slate Ember, Forest Mint, Burgundy Gold or Graphite Lime, and SGEN applies its colors, typography and button styles across the site in one click. There are five named swatches and more below the fold.
Can I edit the design while building a page? +
Yes. The SG Builder Site Settings drawer edits the same Global Colors, Typography and Buttons tokens inside the visual canvas, grouped as Design System, Theme Style and Settings, with responsive breakpoint chips from 1920 down to 480px. The admin Theme Editor uses a green Save, the drawer uses a white one, and both write the same global tokens.
What does it not do? +
There is no preview-before-publish stage for global Appearance edits, changes go live on Save. The Typography panel exposes Font Family and Font Size only, with no weight or line-height columns. Custom Fonts hosts your own files, so it does not manage Google Fonts here, and OTF and variable fonts are not supported. We would rather be plain about the edges than over-claim them.
Is it a plugin I install, and which plan includes it? +
No separate plugin. The Theme Editor is one of 23 native modules in SGEN, on every plan, which differ only by how many live sites you run. Paid plans start at $39/mo (billed annually, $47 monthly), and the free Sandbox runs it too, so you can design your whole site before you pay anything.
Try the whole platform free
Design your whole site, globally. From $39/mo.
The Theme Editor is one of 23 native modules included in every plan. Set your type, color, swatches, buttons, header and footer on the free Sandbox across unlimited staging sites before you pay anything.
From $39/mo, billed annually. $47 monthly. 2-week trial, cancel anytime. Every module included.