Guides → Build a SaaS landing site on SGEN in 30 minutes

Build a SaaS landing site on SGEN in 30 minutes

A 30-minute walkthrough for founders and product teams â€" hero, features, pricing, signup, demo CTA, integrations, all published.

This tutorial takes a product team from a fresh SGEN account to a live SaaS landing site in about thirty minutes. The build covers a single long-scroll Home page with the seven sections most product launches need: hero with primary CTA, feature triad, social proof, pricing tiers, signup form, demo-request CTA, and integrations strip. Every section is wired to convert â€" the build is the publish step, not the brand-and-positioning step.

What you'll have at the end: a live SaaS landing site at a *.sgen.com preview URL, one Home page with seven published sections (Hero â†' Features â†' Social Proof â†' Pricing â†' Signup â†' Demo CTA â†' Integrations), a working signup form that captures emails to a list view in the admin, a demo-request form that delivers to a sales inbox, and three pricing tiers with linked CTAs. Mobile-responsive out of the box.

What is this for?

This page is for product teams shipping a landing site for a software product, service, or paid tool. The thirty-minute target assumes the product positioning is already settled â€" you know the headline, the three features that matter, the pricing tiers, and what the demo CTA leads to. The build is the publish step; the positioning is your job before you start.

A SaaS landing page lives or dies on two things: the hero (does the visitor recognize their problem and click) and the pricing (can they decide). Everything else is supporting. The build below puts the hero and pricing in their proven positions and gives you simple slots for the supporting evidence.

This is a tutorial in the strict sense â€" you build the example, then keep extending it. Unlike the five-minute quickstart, the landing site you publish here is meant to be the real product page, not a throwaway. Sample data slots are placeholders for your real copy; swap them inline as you go.

If you have shipped a landing page before on Webflow, Framer, or a custom-coded build, the SGEN path will feel familiar. The signup form and demo-request form are built into the platform; you do not configure a third-party form service to receive submissions.

Good use cases

Reach for this tutorial when:

You are a founder pre-launch and you need a landing page with email capture before the product is fully built.
You are a product team launching version one and you need the marketing site live the same week the product ships.
You are repositioning an existing SaaS product and you want a faster authoring loop than your current site rebuild offers.
You are running a beta with limited slots and you need a signup page with waitlist capture.
You are launching a paid tool, template pack, or developer-focused service that needs pricing tiers and a buy or signup flow.
You are testing a new product direction with a "smoke-test" landing page before committing engineering time to the build.
You are launching a feature, integration, or vertical-specific variant alongside a main product site and you need a dedicated landing surface.

What NOT to use this for

This tutorial does not cover:

Multi-page product marketing sites with separate use-case, integration, and customer-story sections. That scale needs a multi-page build, not a single landing page. Start here and extend later.
Application onboarding flows or in-product UX. SGEN is the marketing surface; the product itself runs in your application stack.
Authenticated dashboards or customer portals. Use the SaaS Admin starter for that build, not the landing template.
Content-marketing-led growth sites with blogs, guides, and SEO clusters. Start with the Blog Starter or the SaaS Marketing starter, both of which include the landing-page shape plus a content surface.
Self-serve checkout with credit-card processing for a complex catalog. The Pricing section here links to checkout â€" the checkout itself runs in your billing platform.

How this connects to other features

The SaaS landing build touches five surfaces.

SG-Builder â€" the visual editor where the seven sections get arranged. Most of the build happens here.
SG-Modules â†' Forms â€" powers the signup form (email capture) and the demo-request form (sales-routed). Submissions land in list views inside the admin.
SG-Modules â†' SEO â€" meta description, OG image, canonical URL. Critical for a launch site that needs to perform well on social shares.
SG-Modules â†' Tracking Consent â€" the consent overlay that wraps any analytics or pixel you install later. Pre-wired in the template; you do not need to configure it on the first pass.
SG-Modules â†' Custom Codes â€" where you paste analytics or marketing pixels (Google Analytics, Plausible, Fathom, Meta Pixel) when you have them ready. Skip on first pass.

For the build steps, the active surfaces are SG-Builder and SG-Modules â†' Forms. The others are flagged so you know they exist when you extend.

See the SGEN quickstart for the foundational account-creation flow, and the portfolio tutorial, event tutorial, and nonprofit tutorial for adjacent vertical builds.

Before you start

You need seven things gathered before you begin.

An SGEN account with at least the Launch tier active. The free trial covers the build.
Product positioning on one page: product name, one-sentence value proposition, target customer description.
Three feature descriptions: for each, a short title (two to four words), an icon or image, and a two-sentence description.
Three to four pieces of social proof: customer logos, testimonial quotes, usage numbers, or press mentions. At least one is required; four is the maximum the template displays in one strip.
Pricing tier data: name, monthly price, three to six bullet features per tier, primary CTA per tier. Three tiers is the default; two or four also work.
Demo-request routing: the sales or founder email address that should receive demo requests.
Integrations to highlight (optional): logo files for the four to eight products your tool connects to.

You do not need:

A custom domain on day one. The *.sgen.com preview URL is shareable from publish.
A built-out checkout. Pricing CTAs link out to your billing platform.
A finished product. A pre-launch landing site with email-only capture is a common shape.

Where to find it

Every step in the build starts from one of these three URLs:

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

Steps

Nine steps. Steps 1 through 8 build the seven sections plus SEO. Step 9 publishes and views. Time budgets per step; total runs about thirty minutes for a first-time SGEN user with copy ready.

1. Pick the SaaS Landing Starter template (â‰¤ 3 minutes)

From SG-Dashboard, click Create New Site. The starter grid shows six templates; pick SaaS Landing Starter. The thumbnail shows the seven-section long-scroll layout with hero at the top and integrations strip at the bottom.

Name the site with the product name (for example, "Notion-Inbox" or "Postman 2"). Accept the suggested preview subdomain or pick a shorter version aligned to the product name. Click Create Site.

What you'll see at the end of step 1: SG-Admin loaded with a single Home page containing seven placeholder sections.

2. Write the hero â€" headline, subhead, CTA (â‰¤ 5 minutes)

Click Pages â†' Home. The page opens in SG-Builder. Click the hero section to select it. The right rail shows hero settings: headline, subhead, primary CTA, secondary CTA (optional), hero image or video, background style.

Write the headline first. The template's headline slot supports eight to twelve words. Lead with the customer's problem in their language, then the resolution. For example: "Email follow-up shouldn't be a calendar tax. Inbox-Cal sends the next nudge for you."

Write the subhead. Fifteen to twenty-five words. State who the product is for and what specifically it does. For example: "For sales teams that follow up by hand. Inbox-Cal watches your reply threads and schedules the next outreach when the conversation stalls."

Set the primary CTA to Start Free or Get Started with the link target set to #signup (the anchor on the same page). Set the secondary CTA to Watch Demo or Book a Call with the link target to #demo. Upload a product screenshot, hero illustration, or short looping video using Replace Hero Asset.

What you'll see at the end of step 2: the hero section showing your real headline, real subhead, two working CTAs anchored to in-page sections, and a real product asset.

3. Build the feature triad (â‰¤ 5 minutes)

Click the Features section in the page outline. The section shows three tiles in a row, each with an icon, a feature title, and a two-sentence description.

For each tile, click Replace Icon in the right rail and either pick from the built-in icon library or upload a custom icon. Write the feature title (two to four words â€" "Auto-Schedule," "Smart Replies," "Team Inbox"). Write the description in two sentences. First sentence: what it does. Second sentence: what changes for the user.

If you have more than three features worth surfacing, click Add Feature Tile at the bottom of the section. The template supports up to six tiles before wrapping to a second row. For a leaner page, right-click and Delete Tile to keep two.

What you'll see at the end of step 3: the Features section showing three real feature tiles with icons, titles, and two-sentence descriptions.

4. Add social proof (â‰¤ 3 minutes)

Click the Social Proof section in the page outline. The section shows three formats stacked: a customer-logo strip, a testimonial quote with attribution, and a usage-number callout.

Upload three to six customer logos in the Logo Strip block. If you don't have customer logos yet, use Logo Strip â†' Hide in the right rail and lead with the testimonial or usage-number block instead.

Update the testimonial block with a real quote and attribution (name, title, company). If you have multiple testimonials, click Add Testimonial and use the carousel option in the right rail.

Update the usage-number callout with a real number â€" "1,200 teams," "50K emails sent," "98% delivery rate." Numbers benchmark performance; vague claims do not. If you do not have a real number yet, hide this block via Block â†' Hide.

What you'll see at the end of step 4: the Social Proof section showing real customer logos (or hidden), one or more real testimonials with attribution, and at most one real usage-number callout.

5. Configure pricing tiers (â‰¤ 6 minutes)

Click the Pricing section in the page outline. The section shows three pricing cards in a row, each with a tier name, a monthly price, a feature list, and a primary CTA.

For each card, update the tier name (typical pattern: "Starter," "Growth," "Scale" â€" but use names that match your product positioning). Update the monthly price. Update the feature list â€" three to six bullets per tier, each starting with what the customer gets. Update the CTA on each card to link to your billing platform's checkout URL for that tier, or to #signup if the tier is "Start Free" with no checkout.

Mark one tier as Recommended by toggling the Recommended Badge option in that card's right rail. The recommended badge adds a visual emphasis and is the conversion default for the page.

Below the pricing cards, the template includes a Compare All Features link. If you want a full comparison table, toggle Add Comparison Table in the section right rail; SGEN injects a feature-by-feature table below the cards.

What you'll see at the end of step 5: the Pricing section showing three real tiers with real prices, real feature bullets, working CTAs linking to checkout or signup, and one tier marked as Recommended.

6. Wire the signup and demo-request forms (â‰¤ 4 minutes)

Click the Signup section. The section shows a single-field form (email address) with a button labeled Get Started Free. Verify the Delivery Email in the right rail is the email you want signup leads routed to. Toggle Notify on each submission for low-volume launches or Daily digest for higher volumes.

Optional: add a name field to the signup form using Add Field â†' Name. Email-only is the conversion default; adding a name reduces conversion by a small but measurable margin in exchange for richer lead data. Pick the trade based on what your team will use.

Click the Demo CTA section. The section shows a three-field form (name, email, company size) with a button labeled Book a Demo. Set the Delivery Email to your sales or founder inbox. Update the Company Size dropdown options to match your sales-qualification thresholds.

Test both forms. Test Submission in the right rail sends a test message; check inbox and the Submissions list view in SG-Modules â†' Forms.

What you'll see at the end of step 6: two working forms, both with delivery emails confirmed, both tested with confirmed inbox arrivals and submissions visible in the list view.

7. Add the integrations strip (â‰¤ 3 minutes)

Click the Integrations section at the bottom of the page outline. The section shows a single row of six logo slots labeled "Works with."

For each slot, click Replace Logo and upload the integration's logo. Set the link target to that integration's marketing page or to your in-product integration doc. If you have more than six integrations, click Add Integration Slot; the template supports up to twelve before wrapping.

Below the logo row, optionally add a View All Integrations link pointing to a future dedicated integrations page. If you have only two or three integrations to highlight, right-click and Delete Slot on the extras â€" three logos in a strip read as "few but credible," six read as "we've done the work."

What you'll see at the end of step 7: the Integrations section showing real integration logos in a clean row, linked to integration detail surfaces.

8. SEO sweep â€" meta description and OG image (â‰¤ 1 minute)

Click SG-Modules â†' SEO. The SEO panel shows the Home page with three editable fields: meta title, meta description, OG image.

Write the meta title. Lead with the product name and value prop â€" for example, "Inbox-Cal â€" Sales follow-up that schedules itself." Keep under sixty characters.

Write the meta description in twenty-five to thirty-five words. Use the same value prop as the hero subhead but compressed. The meta description shows in search results and on link previews; it carries the click decision when the page is not yet visible.

Upload an OG image. The template includes a default; replace it with a branded image showing the product name, the value prop, and a screenshot. OG images drive the link preview that appears when the URL is shared in Slack, Twitter, LinkedIn, or email.

What you'll see at the end of step 8: the SEO panel showing a real meta title under sixty characters, a real meta description, and a branded OG image set as the page default.

9. Publish and view the live site (â‰¤ 1 minute)

Click Publish in the top right of SG-Admin. The Home page status pill switches from Draft to Published within about five seconds.

Click View Site. The live landing site opens in a new browser tab at https://.sgen.com. Scroll the full page from hero to integrations to verify each section renders with real content. Click the primary hero CTA â€" it should jump to the signup section. Click a pricing CTA â€" it should link to your billing checkout or the signup anchor.

Open the URL on your phone. The features triad reflows to a single column, the pricing cards stack vertically with the recommended tier first, the forms scale to full screen, and the integrations strip wraps to two rows of three logos.

Test by sharing the URL in a Slack DM or email to yourself. The link preview should render with the OG image, meta title, and meta description from step 8.

What you'll see at the end of step 9: a live landing site at your *.sgen.com preview URL, one published Home page with seven sections, two working forms, working pricing CTAs, a responsive mobile view, and a clean link-preview render.

What success looks like

You finish the build with seven concrete artifacts:

A live SaaS landing site at https://.sgen.com, publicly accessible
One Home page with seven published sections in the order Hero â†' Features â†' Social Proof â†' Pricing â†' Signup â†' Demo CTA â†' Integrations
A signup form delivering to your inbox and visible in the Submissions list view
A demo-request form delivering to your sales or founder inbox
Three (or two, or four) pricing tiers with working checkout or signup CTAs
An SEO baseline â€" meta title under sixty characters, real meta description, branded OG image
A working link preview when the URL is shared in chat or email

If a colleague unfamiliar with the project can land on the page, identify what the product does in under thirty seconds, locate the pricing, decide on a tier, and either sign up or request a demo â€" the build worked.

Variations

Seven adaptations of the base build.

Pre-launch with email-only capture. Hide the Pricing section entirely (right-click â†' Section â†' Hide). Replace the hero primary CTA with Join the Waitlist and route the signup form to a waitlist label in your Submissions list view.

Free tool with optional paid upgrade. Keep two pricing tiers â€" Free and Pro. Move the Pricing section above the Features section so the value prop and the pricing land within the first scroll.

B2B with no public pricing. Replace the Pricing section with a Talk to Sales block. Route the form to your sales inbox. Add a sentence under the hero CTA â€" "Pricing tailored to team size and usage."

Developer-tool launch. Add a Code Example section between Features and Social Proof using Add Section â†' Code Block. Show a five-line snippet of the product's primary API or CLI call. Developers convert on seeing real code, not screenshots of code.

Vertical-specific variant. Duplicate the landing site for each vertical (HR-tech variant, healthcare variant, etc.). Swap the hero headline, the feature titles, and one or two testimonials per variant. The pricing and integrations stay shared.

Product Hunt or Show HN launch day. Add a top banner using Add Section â†' Top Banner with launch-day copy and a vote or upvote link. Remove the banner the day after launch.

International market expansion. Use SG-Modules â†' Translations to add language variants for the same single page. Each language gets its own URL; SGEN handles the language switcher in the page footer.

Common pitfalls

Four things go wrong most often during a SaaS landing build.

The hero headline reads like the template. The default "Solve [problem] [adjective] [noun]" pattern is structural; using the structural words verbatim signals an unfinished page. Rewrite in your customer's language. A headline that names the specific pain in the customer's vocabulary outperforms an abstract benefit statement.

Pricing CTAs link to a checkout that returns errors. Test every pricing CTA with a real card before publishing. Stripe, Lemon Squeezy, Paddle, and Chargebee checkout links carry product IDs and price IDs that fail silently if mis-pasted. A broken checkout costs a paying customer at the worst moment.

The OG image renders a low-quality preview on social. Social platforms re-compress OG images; an OG image already compressed loses sharpness. Upload at 1200 by 630 pixels, lossless PNG, with the product name and a screenshot legible at a one-inch preview size. Test the preview by sharing the URL in Slack and Twitter before launch.

The form delivery email goes to spam on first send. First-time deliveries from a new *.sgen.com subdomain sometimes land in spam. Send yourself test submissions for both the signup and demo forms in the days before launch, mark them as Not Spam when they arrive in spam, and subsequent submissions deliver to inbox.

Examples

Three real-shape SaaS landing builds.

Example A â€" Sales-tool launch (Inbox-Cal)

A founder launching a sales follow-up tool with three pricing tiers and a fourteen-day trial. The founder picks the SaaS Landing Starter, writes a hero headline naming sales-team pain, adds three features (Auto-Schedule, Smart Replies, Team Inbox), wires Stripe Checkout links for the three tiers, configures the signup form for the free trial, sets the demo form to route to the founder's inbox, and adds five integration logos (Gmail, Outlook, HubSpot, Salesforce, Slack). Total build time: 32 minutes.

Example B â€" Developer tool (Postman 2)

A developer-tools team launching version two with a free-and-pro model and a code-snippet section. The team picks the SaaS Landing Starter, adds a Code Example section between Features and Social Proof, keeps two pricing tiers (Free and Pro), wires the Pro CTA to Lemon Squeezy checkout, adds a Demo form routed to a developer-relations inbox, and adds six integration logos (GitHub, GitLab, CircleCI, Jenkins, Docker, Kubernetes). Total build time: 35 minutes.

Example C â€" Pre-launch waitlist (Notion-Inbox)

A founder building a future product and capturing pre-launch interest. The founder picks the SaaS Landing Starter, hides the Pricing section, replaces the hero primary CTA with "Join the Waitlist," routes the signup form to a "waitlist" label, adds two features (the founder's most concrete promises), adds a single testimonial from an advisor, and adds three integration logos representing the future plan. Total build time: 24 minutes (no pricing or demo CTA cuts the work).

After the build â€" second and third passes

The landing site is shipped. Second and third passes turn it into a growth surface.

Second pass (recommended: launch week, 30-60 minutes):

Install analytics. SG-Modules â†' Custom Codes accepts Google Analytics, Plausible, Fathom, or any pixel via a paste-in script block. Tracking Consent wraps it automatically.
Set up conversion goals. Track signup-form completions and demo-form completions as separate goals in your analytics tool.
Add a launch banner if you are doing Product Hunt, Show HN, or a press push. Remove the banner once the launch news cycle ends.
Set up an email sequence for new signups via SG-Modules â†' Forms â†' Email Sequence. A welcome email plus a three-day follow-up plus a seven-day "are you stuck" email recovers conversion that would otherwise drop off.

Third pass (recommended: post-launch, 30-60 minutes):

Point a custom domain at the site. 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 using SG-Modules â†' A/B Testing. Run for two weeks per test; the winning variant becomes the new default.
Add a customer-story or use-case page surface. Start with the Blog Starter; link from the landing page Social Proof section to the new customer-story surface.
Add a comparison page if you compete with named alternatives. The Comparison Starter shape works alongside the landing page.

What to do if it does not work

The trial sign-up form is not sending confirmation emails. SMTP must be configured under Site Settings → Email. Transactional confirmation and welcome emails require a working SMTP connection before any email fires.
The pricing tier section is showing incorrect pricing. Open the Custom Object record for the pricing tier and confirm the price field is correct. The SG-Builder pricing block reads from that record and updates within a few minutes of saving.
The demo booking form is not routing notifications to the right person. Open My Forms → the demo-booking form → Notifications settings and confirm the recipient email address. Team-member routing requires a configured recipient per form.
The feature comparison table is truncated on mobile. Open the page in SG-Builder and configure mobile-specific padding and text size on the comparison table section. Wide tables often need a horizontal scroll container on narrow viewports — add this in the section's Custom CSS setting.
The 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 â€" pick your second read

The SaaS landing site is live. Pick one of three next reads:

You want to wire analytics and pixels. Read the Custom Codes guide for paste-in script management and the Tracking Consent integration.
You want to add an email sequence to signups. Read the Forms â€" email sequences guide for confirmation, welcome, and drip configuration.
You want to add a blog or customer-story surface. Read the Blog setup guide for adding a content surface alongside the landing page.

Guides

Reference

Changelog

Roadmap