Build a SaaS landing site on SGEN in 30 minutes

SG-Builder editing the SaaS Landing Starter long-scroll Home page — a section (hero/pricing) selected with right-rail settings

⏱ 60-second answer below · full page ≈ 12 min · skim the bold step headers to move faster.

In short. Pick the SaaS Landing Starter template, fill in seven sections (hero, features, social proof, pricing, signup form, demo CTA, integrations), and hit Publish. Your product landing site is live at a *.sgen.com preview URL — two working forms included, mobile-responsive out of the box.

On this page: Before you start · Steps 1-9 · Variations · Common pitfalls · What's next

Overview

This tutorial takes a product team from a fresh SGEN account to a live SaaS landing site in about thirty minutes. The build covers one long-scroll Home page with seven sections: hero with primary CTA, feature triad, social proof, pricing tiers, signup form, demo-request CTA, and integrations strip. Positioning is your job before you start — the build is the publish step.

Who it's for: founders pre-launch, product teams shipping version one, anyone repositioning an existing SaaS product and needing a faster authoring loop.

What it is not for: multi-page product marketing sites, in-product UX, authenticated portals, or self-serve checkout with complex catalog logic.

How this connects to other features

Surface	Role in this build
SG-Builder	Visual editor — the seven sections are arranged and filled here
SG-Modules → Forms	Powers the signup form and demo-request form; submissions land in the admin list view
SG-Modules → SEO	Meta description, OG image, canonical URL — covered in Step 8
SG-Modules → Custom Codes	Where you paste analytics or pixels after launch — skip on first pass
SG-Modules → Tracking Consent	Consent overlay wrapping any pixels you add later — pre-wired, no first-pass config needed

Before you start

Gather seven things before you begin:

An SGEN account with at least the Launch tier active — free trial covers the build.
Product positioning on one page: product name, one-sentence value proposition, target customer.
Three feature descriptions: short title (2-4 words), icon or image, two-sentence description each.
Three to four pieces of social proof: logos, testimonial quotes, usage numbers, or press mentions.
Pricing tier data: tier name, monthly price, 3-6 feature bullets per tier, primary CTA per tier.
Demo-request routing: the email address that should receive demo requests.
Integrations to highlight (optional): logo files for 4-8 products your tool connects to.

You do not need a custom domain, a finished checkout, or a built-out product — a pre-launch landing site with email-only capture is a common and valid shape.

Where to find it

Step	URL	What lives here
Step 1 (template)	`https://dashboard.sgen.com`	New-site flow, SaaS Landing Starter pick
Steps 2-8 (build)	`https://.sgen.com/sg-admin`	Per-site editor, pages, forms
Step 9 (view)	`https://.sgen.com`	The live public landing site

Steps

Nine steps. Steps 1-8 build the seven sections plus SEO; Step 9 publishes and verifies. Total ≈ 30 minutes for a first-time user with copy ready.

1. Pick the SaaS Landing Starter template (≤ 3 min)

From SG-Dashboard, click Create New Site. The starter grid shows six templates; pick SaaS Landing Starter. Name the site with your product name, accept or shorten the suggested preview subdomain, then click Create Site.

End of step 1: SG-Admin loaded with a single Home page containing seven placeholder sections.

2. Write the hero — headline, subhead, CTA (≤ 5 min)

Click Pages → Home. The page opens in SG-Builder. Click the hero section; the right rail shows headline, subhead, primary CTA, secondary CTA, hero asset, and background style.

Headline: 8-12 words. Lead with the customer's problem, then the resolution. Subhead: 15-25 words — state who the product is for and what it specifically does. Primary CTA: link target #signup. Secondary CTA: link target #demo. Upload a product screenshot, illustration, or short looping video via Replace Hero Asset.

End of step 2: hero section showing real headline, subhead, two anchored CTAs, and a real product asset.

3. Build the feature triad (≤ 5 min)

Click the Features section. For each of the three tiles, click Replace Icon, write the feature title (2-4 words), and write a two-sentence description (sentence 1: what it does; sentence 2: what changes for the user). Add Feature Tile supports up to six tiles; Delete Tile to keep two.

End of step 3: three real feature tiles with icons, titles, and descriptions.

4. Add social proof (≤ 3 min)

Click the Social Proof section. Upload 3-6 customer logos in the Logo Strip block — or hide the strip via Logo Strip → Hide if you don't have logos yet. Update the testimonial block with a real quote and attribution. Update the usage-number callout with a real metric ("1,200 teams," "50K emails sent") — if no real number yet, hide the block via Block → Hide.

End of step 4: real logos (or hidden), one or more real testimonials, at most one real usage-number callout.

5. Configure pricing tiers (≤ 6 min)

Click the Pricing section. For each of the three cards: update tier name, monthly price, 3-6 feature bullets, and CTA linked to your billing platform's checkout URL (or #signup for free-tier). Toggle Recommended Badge on one card. Toggle Add Comparison Table in the section right rail if you want a full feature comparison below the cards.

End of step 5: three tiers with real prices, feature bullets, working CTAs, and one tier marked Recommended.

6. Wire the signup and demo-request forms (≤ 4 min)

Signup section: verify the Delivery Email in the right rail. Toggle Notify on each submission (low volume) or Daily digest (high volume). Optionally add a name field — email-only converts better; name field gives richer lead data.

Demo CTA section: set the Delivery Email to your sales or founder inbox. Update the Company Size dropdown to match your sales-qualification thresholds.

Test both forms using Test Submission in the right rail — confirm inbox arrivals and check the Submissions list view in SG-Modules → Forms.

End of step 6: two working forms, both delivery emails confirmed, both tested with submissions visible in the list view.

7. Add the integrations strip (≤ 3 min)

Click the Integrations section. For each slot, click Replace Logo, upload the integration's logo, and set the link target to that integration's page. Add Integration Slot supports up to twelve; right-click Delete Slot to remove extras. Three logos read as "few but credible"; six read as "we've done the work."

End of step 7: real integration logos in a clean row, each linked.

8. SEO sweep — meta description and OG image (≤ 1 min)

Click SG-Modules → SEO. Update three fields: Meta title — product name + value prop, under 60 characters. Meta description — 25-35 words, same value prop as the hero subhead, compressed. OG image — 1200×630 px, lossless PNG, product name and screenshot legible at a one-inch preview size.

End of step 8: real meta title under 60 characters, real meta description, branded OG image.

9. Publish and view the live site (≤ 1 min)

Click Publish in the top right of SG-Admin. The Home page status pill switches to Published in about five seconds. Click View Site — scroll hero to integrations, click the primary hero CTA (should jump to signup), click a pricing CTA (should link to checkout or signup anchor). Open the URL on your phone — features reflow to single column, pricing cards stack, forms scale full-screen. Share the URL in a Slack DM and confirm the link preview renders with your OG image, meta title, and description.

End of step 9: live landing site at *.sgen.com, seven published sections, two working forms, working pricing CTAs, responsive mobile view, clean link preview.

What success looks like

Live SaaS landing site at https://.sgen.com, publicly accessible
One Home page — Hero → Features → Social Proof → Pricing → Signup → Demo CTA → Integrations
Signup form delivering to inbox; submissions visible in the list view
Demo-request form delivering to sales or founder inbox
Two to four pricing tiers with working checkout or signup CTAs
Meta title under 60 characters, real meta description, branded OG image
Clean link preview when the URL is shared in chat or email

If a colleague unfamiliar with the project can identify what the product does in under thirty seconds, locate pricing, and either sign up or request a demo — the build worked.

Variations

Variation	What changes
Pre-launch email-only	Hide Pricing section; replace hero CTA with "Join the Waitlist"; route signup form to a waitlist label
Free tool + paid upgrade	Keep two tiers (Free + Pro); move Pricing above Features
B2B, no public pricing	Replace Pricing section with a Talk to Sales block; add "Pricing tailored to team size" under hero CTA
Developer-tool launch	Add a Code Example section between Features and Social Proof — show a 5-line snippet
Vertical-specific variant	Duplicate the site per vertical; swap hero headline, feature titles, one or two testimonials
Product Hunt / Show HN launch day	Add a Top Banner section with launch-day copy and vote link; remove the day after
International expansion	SG-Modules → Translations for language variants; SGEN handles the language switcher in the footer

Common pitfalls

The hero headline reads like the template. The default structural words signal an unfinished page. Rewrite in your customer's language — name the specific pain in their vocabulary.

Pricing CTAs link to a broken checkout. Test every pricing CTA with a real link before publishing — Stripe, Lemon Squeezy, Paddle, and Chargebee checkout links carry product and price IDs that fail silently if mis-pasted.

The OG image is blurry on social. Social platforms re-compress OG images. Upload at 1200×630 px, lossless PNG, and test the preview by sharing the URL in Slack before launch.

Form deliveries land in spam on first send. First-time deliveries from a new *.sgen.com subdomain sometimes land in spam. Send test submissions in the days before launch and mark them Not Spam — subsequent submissions deliver to inbox.

Examples

Sales-tool launch. Hero naming sales-team pain, three feature tiles, three tiers with billing checkout links, signup form for free trial, demo form to founder inbox, five integration logos. Build time: 32 minutes.

Developer-tool launch. Code Example section between Features and Social Proof, two tiers (Free + Pro), Pro CTA to billing checkout, demo form to a developer-relations inbox, six integration logos. Build time: 35 minutes.

Pre-launch waitlist. Pricing hidden, hero CTA "Join the Waitlist," signup form to a waitlist label, two concrete feature promises, one advisor testimonial, three future-plan integration logos. Build time: 24 minutes.

After the build — second and third passes

Second pass (launch week, 30-60 min):

Install analytics via SG-Modules → Custom Codes (Google Analytics, Plausible, Fathom, or any pixel). Tracking Consent wraps it automatically.
Set up conversion goals in your analytics tool — signup-form completions and demo-form completions as separate goals.
Set up an email sequence for new signups via SG-Modules → Forms → Email Sequence (welcome + 3-day + 7-day follow-ups).

Third pass (post-launch, 30-60 min):

Point a custom domain via SG-Admin → Settings → Domains. Update the canonical URL in SG-Modules → SEO once the domain resolves.
A/B test the hero headline against a second variant via SG-Modules → A/B Testing. Run two weeks per test.
Add a customer-story surface via the Blog setup; link from the Social Proof section.

What to do if it does not work

Signup form not sending confirmation emails. SMTP must be configured under Site Settings → Email before any transactional email fires.
Pricing section shows incorrect pricing. Open the Custom Object record for the pricing tier and confirm the price field. The SG-Builder pricing block reads from that record and updates within a few minutes of saving.
Demo booking notifications not routing correctly. Open My Forms → the demo-booking form → Notifications and confirm the recipient email. Team-member routing requires a configured recipient per form.
Comparison table truncated on mobile. In SG-Builder, configure mobile-specific padding and text size on the comparison table section; add a horizontal scroll container in the section's Custom CSS setting.
CTA button links to the wrong page after a URL change. Open the CTA button configuration in SG-Builder and update the destination URL — button URLs do not update automatically when page slugs change.

What's next

Wire analytics and pixels. Add tracking scripts in SG-Modules → Custom Codes; Tracking Consent wraps them automatically.
Add an email sequence to signups. Read the Forms guide for confirmation, welcome, and drip configuration.
Add a blog or customer-story surface. Read the Blog setup guide for adding a content surface alongside the landing page.