Build a landing page in SG-Builder

How to build a hero, features section, and CTA layout in SG-Builder

A landing page has one job: move a specific visitor toward a specific action. The layout that does this reliably — hero, features, CTA — is three sections, each with a clear role. This guide walks you through building that layout in SG-Builder, from an empty canvas to a published page with the structure in place.

The hero is where the visitor decides whether to keep reading. The features section is where they understand what is being offered and why it matters to them. The CTA section is where they act. The work in SG-Builder is to build each section with enough clarity that the visitor moves from the first to the third without losing interest.

This guide uses SGEN's own Agency Partner Program page as the example site. SGEN is building a landing page to invite web agencies and freelance studios into the partner program — a campaign page for agencies that want to deliver client sites on SGEN. The principles apply to any landing page: product campaigns, event signups, consultation bookings, subscription offers, or service descriptions.

By the end of this guide, you will have a published three-section landing page: a hero with a headline, subheading, and primary CTA button; a features section explaining the value in parallel columns; and a closing CTA section that repeats the action in a clear, simple format.

What is this for?

This guide is for anyone building a landing page in SG-Builder. It is useful whether the page is for a campaign, a product offer, a program, or an event. The structure — hero, features, CTA — applies across all of these.

It is also useful as a reference for teams who have built landing pages before but want to tighten their process: adding breakpoint checks at the right points, configuring section spacing consistently, and verifying the published result before sharing the URL.

You will use the Pages area and SG-Builder. All steps take place inside the dashboard and the builder editor.

Good use cases

Landing pages built with this structure fit these situations.

• A partner or referral program page.

SGEN's Agency Partner Program page targets web agencies. The hero speaks to the pain of building client sites on stacks that fight back. The features section covers revenue share, white-label dashboards, and dedicated onboarding. The CTA links to the partner application form. The page runs year-round and gets refreshed each cohort cycle.

• A limited-window cohort or intake page.

SGEN runs two partner cohorts a year — spring and autumn intakes, with a 15-agency cap per cohort. The cohort landing page has a hero with the cohort name and intake dates, a two-column features section covering what cohort members get, and a CTA to the application form. It is built in SG-Builder, published for the intake window, and archived afterward.

• A subscription or recurring-program page.

A subscription offer has a value proposition that takes more than one sentence to explain. The hero frames it. The features section breaks it down: what arrives, how often, at what price, with what flexibility. The CTA is the signup form link.

• A feature launch page.

A new sg-module, a new dashboard surface, a new pricing tier — any product launch benefits from a dedicated page rather than a blog post. The hero announces it. The features section distinguishes it from what came before. The CTA drives the first signup, demo request, or upgrade.

• An event registration page.

A product webinar, a partner training session, or a virtual office-hours event needs a page that communicates the what, when, where, and why. Hero: event name and date. Features: what attendees get. CTA: RSVP or registration link.

• A referral or partner program page.

Programs that require someone to take a deliberate action — applying, registering, opting in — benefit from a landing page that explains the program before asking for commitment.

What NOT to use this for

• Do not use a landing page for your blog index or blog posts.

Blog posts are reverse-chronological content with their own editor and feed structure. A landing page promoting a blog series is fine. The blog posts themselves belong in the Blog editor.

• Do not use SG-Builder landing pages for dynamic e-commerce product detail pages.

Pages with live inventory, variant selectors, and a buy button are served by SGEN's commerce surfaces. A promotional landing page that links to the product page is an appropriate SG-Builder use. The product detail page itself is not.

• Do not use this layout for long-form editorial content.

Articles, guides, and blog posts that are primarily text benefit from a different structure. The hero + features + CTA layout is designed for pages where the goal is a visitor action, not extended reading.

• Do not publish the page mid-campaign to fix a small copy change.

Publishing replaces the live version of the page immediately. For high-traffic campaigns, schedule edits during low-traffic hours or prepare a complete revised version in the builder before publishing.

How this connects to other features

• Media — Images in your hero background and features section must be uploaded to the Media library

before you open SG-Builder. The builder's image picker draws from your existing Media uploads. Upload before you build. See Upload and manage media.

• Custom CSS — Landing pages built in SG-Builder inherit your site's global styles.

If you need to apply styles specific to this landing page — a unique background color on one section, a custom button radius — use scoped Custom CSS targeting the page by its body class (body.page_id-N). See Custom CSS basics.

• Theme customization — The global typography, color palette, and button styles

that your landing page sections inherit come from the Theme Editor. If the default section styles are close but not quite right, adjusting the Theme Editor globals is more efficient than overriding per section. See Theme customization.

• Pages (SEO fields) — After building and publishing in SG-Builder,

go to the page record in Pages and set the SEO Title, Meta Description, and URL Slug. These are not set inside the builder — they live on the page record.

• Forms — If your CTA section links to a form,

the form must exist in the Forms area before you build the CTA. Get the form's URL or shortcode ready before opening SG-Builder.

Before you start

Before opening SG-Builder, have these things ready.

Decide the page goal and the visitor action. The single most important decision before building a landing page is knowing the one action you want the visitor to take. Every section, every headline, every button on the page should point at that action. For SGEN's Agency Partner Program page, the action is submitting the partner application form. Write that action down before you open the builder.

Have your hero headline, subheading, and CTA button text written. These three pieces of copy carry the page. Draft them before building. The headline should name the offer or the problem being solved — directly. "Build client sites faster. Bill more. Partner with a CMS that respects your stack." Not "Welcome to our partner program."

Know your features. The features section needs three to four specific points. Each point is a concrete benefit, not a category label. "Revenue share — 20% recurring on every client site you manage" is a feature. "Revenue share" alone is not. Write all of them before you build.

Upload your images to Media. If your hero has a background image, upload it before opening the builder. If your features section uses icons or photographs, upload those too. The media picker inside the builder requires the images to already be in your Media library.

Know the URL slug. Set a short, descriptive slug before you start. For SGEN's Agency Partner Program page: agency-partner-program. Not agency-partner-program-landing-page-2026-spring-cohort.

Where to go

Go to Pages in the left sidebar of your SGEN dashboard. Click Add New Page at the top right. Fill in the Page Title (this becomes the browser tab title and the page record label) and the URL Slug (the public URL path for the page). Save the page record. Then click Open in SG-Builder from the page record view. The builder opens with an empty canvas.

Steps — Build a landing page with hero, features, and CTA

These steps take you from an empty canvas to a published page with all three sections in place.

1. Add the hero section

Click Add Section in the left panel. In the section picker, choose a Hero section type. Hero sections are designed for the top of the page — full width, large heading, and a primary call-to-action button.

In the configuration panel on the right, set:

• Headline — the primary message. Write it for the visitor arriving cold.

SGEN's partner program hero: "Build client sites faster. Bill more. Partner with a CMS that respects your stack." Specific, direct, and addresses the pain of the typical agency sourcing situation.

• Subheading — one sentence that gives the headline context.

"The SGEN Agency Partner Program offers 20% recurring revenue share, white-label dashboards, and dedicated technical onboarding." Under twenty-five words. Names the offer and the benefit.

• Primary CTA button — the label and the destination URL.

"Apply to the Partner Program" linking to the application form. Not "Learn more." Not "Get started." The label names the action.

• Background image — click the image picker and select the hero image from your Media library.

For SGEN's partner program page: a wide photograph of an agency team collaborating around a shared screen showing the SGEN dashboard. Minimum 1440px wide for a full-bleed hero.

After setting the content, use the breakpoint buttons at the top of the canvas to preview the hero at tablet (991px) and mobile (767px and 480px). Hero headlines at desktop often need to be smaller at mobile — configure the font size per breakpoint in the text style panel. Check that the CTA button is accessible and the background image crops to a meaningful subject at narrow widths.

2. Add the features section

Below the hero, click Add Section and choose a multi-column layout — three columns for three features, or a two-by-two grid for four. SGEN's partner program page uses three columns.

For each column, set:

• Icon or image — a small visual anchor for the feature.

Icons from a library or a simple photograph work equally well. For SGEN's partner program page: a revenue-chart icon, a shield-and-lock icon, and a handshake icon.

• Feature heading — three to five words naming the benefit.

"Revenue share that scales. White-label dashboards. Onboarding that sticks."

• Feature body — two to three sentences with the specific detail.

"Earn 20% recurring revenue on every client site you manage on SGEN. No annual commitment in your first three months. Scale to higher tiers as your portfolio grows."

Write each feature so that a reader who skims only the heading and the first sentence still understands the benefit. Most visitors scan before they read. The heading is for scanners. The body is for readers who paused on the heading.

3. Configure features section spacing and alignment

After placing the features section, check three things before moving on.

Column vertical alignment — if the feature headings are different lengths, the icon-heading-body stack will be misaligned across columns. Set the column vertical alignment to top in the section's layout controls so all three columns start at the same point.

Section background — a subtle background color change between the hero and the features section creates visual separation. A light cool off-white (#F4F6FB) behind the features section works for SGEN's brand. Set this in the section's background controls.

Mobile stacking order — at mobile widths, three-column sections stack to single column. Switch to the 480px breakpoint and confirm the columns stack in the order you want: feature one at the top, feature three at the bottom. If the stacking order is wrong, adjust the column order in the section's mobile layout settings.

4. Add the closing CTA section

Below the features, click Add Section and choose a CTA or Call to Action section type. This is typically a full-width section with a centered headline, a supporting sentence, and one primary button. No images. No columns. The ask, nothing more.

For SGEN's partner program closing CTA:

• Heading — "Ready to grow your agency on SGEN?"
• Subtext — "Applications take five minutes. You will hear back within two business days."
• CTA button — "Apply to the Partner Program" — the same label as the hero CTA.

Both buttons link to the same application form. Consistent labeling means the visitor knows exactly what they are clicking, regardless of where they are on the page.

Set the CTA section background to a deep brand-aligned dark color — SGEN uses a deep navy. The contrast with the features section creates a visual landing point at the bottom of the page. White text on a dark background works here. Confirm text contrast is readable at all breakpoints.

5. Review the full page layout at every breakpoint

With all three sections placed, run a full breakpoint review before publishing. Use the breakpoint buttons at the top of the SG-Builder canvas: desktop (1920px), wide (1199px), tablet (991px), tablet portrait (767px), and mobile (480px).

At each breakpoint, scroll through the full page and check:

• Hero headline size — large enough to read, not overflowing at narrow widths.
• Features columns — stacking cleanly at mobile, no column clipping or overlap.
• CTA section — button is accessible and full-width at mobile.
• Section spacing — no excessive padding gaps between sections at any width.
• Background colors — hero, features, and CTA backgrounds rendering correctly.
• Images — hero background image cropping correctly at narrow widths.

Fix any issues before publishing. Finding a stacking problem in the builder takes two minutes. Finding it in a live visitor report takes longer.

6. Set SEO fields and publish

Before publishing from SG-Builder, you need to complete one step in the page record.

Return to Pages in the left sidebar and open the Agency Partner Program page record. In the SEO fields:

• SEO Title — "Agency Partner Program — SGEN" (under 60 characters)
• Meta Description — "Web agencies partner with SGEN to deliver client sites faster. 20% recurring revenue share, white-label dashboards, and dedicated onboarding." (under 155 characters)

Save the page record. Then open the page in SG-Builder and click Publish at the top right of the editor. Publishing replaces the live version of the page immediately.

After publishing, open a private browser window and navigate to the page's public URL. Scroll through the whole page as a visitor would. Confirm the hero, features, and CTA are all in place with the correct content. Click the CTA button and confirm it reaches the correct destination.

What success looks like

When the landing page is published correctly, these things are true.

• The page is visible at its public URL in a private browser window without logging in.
• The hero headline, subheading, background image, and CTA button are correct.
• The features section shows three columns with headings and body copy.
• At mobile width (480px), the features columns stack cleanly — no overlap.
• The closing CTA section is visible at the bottom of the page, dark background, white text.
• Clicking either CTA button reaches the correct destination.
• The SEO Title and Meta Description are set on the page record.
• The page title in the browser tab matches the page title you set.

What to do if it does not work

• Hero background image is not displaying.

Confirm the image was selected from the Media library in the hero section's image picker — not referenced by filename only. If the image picker shows the image selected but it is not rendering on the live site, re-open the hero section configuration panel, reselect the image, save, and re-publish.

• Features columns are not stacking on mobile — they are side by side and clipping.

Open SG-Builder on the page, switch to the 480px breakpoint, and check the features section's mobile layout setting. Set the column layout to single-column for the mobile breakpoint. Save and re-publish.

• CTA button is not linking to the correct destination.

Open the CTA section in SG-Builder and verify the destination URL in the CTA button field. Also check the hero section — both CTA buttons should link to the same URL. Make sure the URL is correct (no missing slash, no typo). Save and re-publish.

• The page is not showing as Published in the Pages list after clicking Publish in SG-Builder.

Check the page status in the Pages record. If it still shows Draft, the Publish action may not have completed. Re-open the page in SG-Builder and click Publish again. Confirm the builder shows a published confirmation before closing.

• Section spacing looks inconsistent between desktop and mobile.

Section padding values set at the desktop breakpoint do not automatically carry to mobile. Open SG-Builder, switch to the 480px breakpoint, and check the padding settings for each section under the mobile breakpoint context. Set explicit mobile padding values for the hero, features, and CTA sections. Save and re-publish.

• Text contrast in the CTA section is too low on mobile.

If the dark background and white text look fine on desktop but poor on mobile, check whether any breakpoint-specific color override was inadvertently set. Open the CTA section at the 480px breakpoint and confirm the background and text colors match the desktop settings.

Tips for a strong landing page

• One page, one action.

Landing pages with multiple CTAs — "inquire," "subscribe," "download," and "book a call" on the same page — convert worse than pages with a single, repeated action. Pick one. Repeat it twice: once in the hero, once in the closing CTA.

• Name features, not categories.

"Revenue share" is a category label. "20% recurring on every client site you manage" is a feature. "Onboarding" is a label. "Your dedicated partner manager walks you through your first three client builds" is the receipt. Write the receipt.

• Preview mobile before you write the desktop layout.

Think mobile-first even in a desktop-first editor. The page will be read on phones by more visitors than on desktops. If the mobile layout works, the desktop layout will too.

• Upload images before opening the builder.

Leave the builder to upload images mid-build and you break the flow. All images for the hero and features section should be in Media before you open the editor.

• Verify the CTA link immediately after publishing.

The most common landing page failure is a CTA button that links to the wrong URL — a staging URL, a form that no longer exists, or a typo in the path. Click the CTA button on the published page in a private browser window as the first check.