Guides → Build an agency portfolio site on SGEN in 30 minutes

Build an agency portfolio site on SGEN in 30 minutes

A hand-held tutorial from sign-up to a working agency site — case studies, services pages, team grid, contact form, and SEO basics

This tutorial takes you from a fresh SGEN account to a working agency portfolio site with three case studies, four services pages, a team grid, a contact form wired for project inquiries, and the SEO basics that get the site found by prospects searching for "[your discipline] agency in [city]." Read top to bottom. Each step uses sample data, every decision is pre-made on the first pass, and you can swap your real case studies and team in once the shape works.

What you'll have at the end: a published *.sgen.com preview site with a Home page, a Case Studies index, three sample case study detail pages, four services pages (one per service), an About page with a team grid, a Contact page with a project-inquiry form, and the SEO basics that prospects need to find the site.

What is this for?

Reach for this tutorial when you want to see what an agency site looks like on SGEN before committing real client work, team bios, and inquiry routing to it. The tutorial is built around the smallest shape that still feels like a working agency site — three case studies, four services, a team grid, and a project-inquiry form. Logo wall, awards page, blog, and lead-magnet downloads are later additions; this one is the foundation.

The thirty-minute target is honest. A first-time user lands between twenty-eight and thirty-three minutes; a returning operator lands closer to twenty. If you go over thirty-five minutes, the most common cause is rewriting case study narratives in the editor — bring three short case studies in a text file (problem, approach, outcome, one image each) before you start, and the build moves fast.

This is a tutorial in the strict sense — it teaches by doing, with sample data, and the example you build evolves into your real site once the shape is right.

Good use cases

Reach for this tutorial when:

You're an independent designer, developer, or strategist launching your first portfolio site.
You're a small agency (two to ten people) rebuilding your site without a freelancer's three-month engagement.
You're an existing agency leaving WordPress because the maintenance burden stopped making sense.
You're a consultancy or studio that needs a credible web presence for new business outreach within a week.
You're an agency-of-record building a pitch site for a specific category (B2B SaaS, restaurant branding, healthcare).

What NOT to use this for

This tutorial is not the place to:

Build a fully bespoke design system. The starter template's defaults are intentional — they get you to a working shape fast. Custom design happens in a later pass.
Migrate an existing portfolio from WordPress with all its custom fields. Migration is a separate engagement; the tutorial starts from a blank starter.
Set up a client portal or password-protected case study area. Client portals use the Members module and is a separate doc.
Build a multi-language agency site. Localization is a separate engagement; the tutorial is English-only.

How this connects to other features

The tutorial touches several SGEN surfaces.

SG-Dashboard — where the site is created.
SG-Admin — where pages, posts, navigation, and settings live.
SG-Builder — the visual composer used for the hero, case study detail pages, and team grid.
SG-Core — Media library for case study screenshots and team headshots; Menu Builder for navigation.
Pages — case studies, services pages, About, Contact all live here.
Posts (optional) — if you want a "Thinking" or "Field Notes" section later, Posts gives you the categorized blog surface.
Forms module — the project-inquiry form's capture, conditional routing, and email-delivery layer.
SEO settings — the meta tags, sitemap, and Open Graph that get prospects to the site.

Before you start

You need:

An SGEN account. If you don't have one, run the 5-minute quickstart first.
About thirty minutes of focused time.
A current browser (Chrome, Edge, Firefox, or Safari).
Helpful but optional: three short case studies (problem, approach, outcome, one image each) and team bios in a text file. Saves ten minutes of typing.

You do not need:

A custom domain.
A logo (the starter template's text-only header works fine for the tutorial).
A photographer's headshot session (placeholder or phone photos work).
A credit card.

Where to find it

Step	URL	What lives here
1 (template)	`https://dashboard.sgen.com` → New Site	Template picker, naming, preview subdomain
2-7 (build)	`https://.sgen.com/sg-admin`	Pages, Posts, Menu Builder, Media, Settings
8 (view)	`https://.sgen.com`	The live public site

Steps

Eight steps. Each names a target time and a success signal. If a step takes longer than the target, accept the sample and move on — polish is the second pass.

1. Pick the Agency Starter template (≤ 2 minutes)

Sign in to SG-Dashboard. Click Create Site. SGEN shows a grid of starter templates. Pick Agency Starter — it ships with a Home page, a Case Studies index, a case-study detail template, four services pages, an About page with a team grid, a Contact page with a project-inquiry form, and a footer wired with the standard agency social and contact links.

Name the site ("Your Agency Demo" or whatever fits). Accept the suggested preview subdomain. Click Create Site. SGEN provisions in three to five seconds and redirects you into the admin.

What you'll see at the end of step 1: SG-Admin loaded for the new site, every starter page in Draft status, and the Agency Starter's pre-populated sample case studies visible in the Case Studies list.

2. Customize the Home hero and the services-overview block (≤ 4 minutes)

Click Pages → Home. The page opens in SG-Builder. The hero is a clean centered block with a headline, a one-line value proposition, and a primary CTA pointing at the Contact page. Replace the headline with something specific to your agency ("Strategy and design for ambitious B2B teams" or "Brand identity for restaurants and hospitality").

Scroll down to the Services Overview block below the hero. The Agency Starter ships four service cards — Strategy, Design, Development, Operations. Click each card and replace the title and one-line description with your actual services. If you have fewer than four services, delete the extras; if you have more than four, drag the existing cards into a 2x2 grid and add new ones below.

Click Publish at the top-right.

What you'll see at the end of step 2: the Home page is Published, the hero shows your custom headline, and the services overview shows your services with one-line descriptions. The Home row in the Pages list shows a green Published badge.

3. Build three case study detail pages (≤ 8 minutes)

Open Pages → Sample Case Study 1. The Agency Starter ships with three sample case studies, each using the case-study detail template. The template has a defined structure:

Project hero — client name, project title, and one feature image.
At a glance — three short stats (timeline, team, scope).
The problem — two to three sentences on what the client was facing.
The approach — three to four bullets on what your agency did.
The outcome — concrete results, ideally one or two measurable.
Gallery — two to four supporting images.
Next case study — auto-populated link to the next case study in the index.

For each case study, fill the slots. Aim for short, scannable copy — case studies sell when they're skimmable, not when they're exhaustive. Each section should fit in two to three sentences.

For the first pass, accept the sample images. You can swap them for real client screenshots in the second pass. If your real client work is under NDA, write a generic version ("a B2B SaaS startup in the analytics space" instead of the real client name).

Publish each case study as you finish.

What you'll see at the end of step 3: three case study detail pages are Published. The Case Studies index (which auto-pulls from Pages tagged "case-study") shows three entries with their hero images, titles, and one-line summaries.

4. Customize the four services pages (≤ 6 minutes)

Open Pages → Service: Strategy. The Agency Starter ships four services pages, one per service area, each using the services-detail template. The template has:

Service hero — service name, one-line description.
What we do — three to four bullets on the scope.
How we work — two to three sentences on the process or method.
Recent work — auto-populated list of case studies tagged with this service.
Get in touch — CTA pointing at the project-inquiry form on the Contact page.

For each services page, fill the slots. Aim for one screen of content per service — prospects scanning your services page need to know what you do and how you work, not the full philosophical foundation.

Tag each case study (back in the case study Pages from step 3) with the service area it falls under. Open the case study, scroll to Tags, and add the tag for the matching service. This wires the "Recent work" auto-population on the service detail pages.

Publish each service page.

What you'll see at the end of step 4: four services pages are Published. Each one's "Recent work" section shows the case studies you tagged with that service.

5. Build the team grid on the About page (≤ 4 minutes)

Open Pages → About. The About page holds the agency story at the top and a team grid at the bottom. The team grid uses the team-member template — each team member is a small card with a headshot, name, role, and optional social link (LinkedIn, Twitter, Dribbble, GitHub).

The Agency Starter ships with three placeholder team members. Click each one to edit. Fill in:

Name — full name.
Role — short role title ("Strategy Lead," "Design Director," "Senior Engineer").
Headshot — replace the placeholder; if you don't have professional headshots yet, a current phone selfie cropped square works for a soft launch.
Bio — one or two sentences. Keep it specific (what they do at the agency, what they did before) rather than philosophical.
Social link — LinkedIn is the safe default for an agency; replace if you prefer a different network.

If you have more than three team members, click + Add Team Member at the bottom of the grid. The grid handles up to twelve members before pagination kicks in. If you're a solo operator, delete the extras and let the page show one large card.

Customize the agency story at the top of the About page — one paragraph on what you do, one on how you got here, one on what you're working toward. Three short paragraphs. Don't write a memoir.

Publish.

What you'll see at the end of step 5: the About page shows your customized agency story and a team grid with your real (or placeholder) team members. Each team card shows headshot, name, role, and social link.

6. Wire the project-inquiry form (≤ 3 minutes)

Open Pages → Contact. The Agency Starter ships a project-inquiry form with these fields: name, email, company, project type (dropdown — matches your services), budget range (dropdown — Under $10k, $10k-$50k, $50k-$100k, $100k+), timeline (dropdown — ASAP, This quarter, Next quarter, exploring), and a "Tell us about the project" textarea.

Click the form, then Settings. Confirm:

Recipient email — set to your real new-business inbox (e.g., newbusiness@youragency.com or your founder's email).
Conditional routing (optional) — if you want inquiries above a certain budget threshold to route to a different inbox, the Forms module supports it. Open Conditions and add a rule like "if budget = $100k+, send to founder@" alongside the standard delivery.
Auto-reply — enable the auto-reply with a default text like "Thanks for reaching out. We read every project inquiry and respond within two business days."

Save.

What you'll see at the end of step 6: the Contact page shows the project-inquiry form with your configured fields and routing. The form's settings panel shows the recipient inbox and the auto-reply enabled.

7. Set the SEO basics and OG image (≤ 3 minutes)

Open Settings → SEO. Fill in:

Site title: "[Agency Name] — [Discipline] agency in [city]" (concise, keyword-friendly).
Meta description: one sentence, 150 characters or less, describing what your agency does and who you do it for.
Open Graph image: upload a 1200x630 image — this is what shows when prospects share your URL. The hero shot from your best case study works well; so does a clean agency logo on a brand-colored background.
Sitemap: confirm enabled (default). Reachable at https://.sgen.com/sitemap.xml.
robots.txt: confirm "allow indexing" is on.

Then open Settings → Structured Data and enable Organization schema. SGEN auto-generates the JSON-LD from your contact info, social links, and logo. The schema is what enables Google to show a knowledge-panel-style result with your agency's name, logo, and social links.

What you'll see at the end of step 7: the SEO settings show your title, description, and OG image. The Organization schema preview shows your agency name, logo, and social links. The sitemap is reachable.

8. Publish everything and view the live site (≤ 2 minutes)

Walk through the Pages list. Confirm every page shows the green Published badge:

Home — Published
Case Studies (index) — Published
Sample Case Study 1, 2, 3 — Published
Service: Strategy, Design, Development, Operations — Published (rename if needed)
About — Published
Contact — Published

Click View Site in the top-right. SGEN opens the preview URL in a new tab.

Walk through the live site. Confirm:

The Home hero displays correctly on desktop and mobile.
The services overview shows your services.
Each case study renders with hero, problem, approach, outcome, gallery.
The services pages each show their "Recent work" auto-list correctly.
The team grid loads on the About page.
Submitting the project-inquiry form delivers to the right inbox.
The auto-reply lands in the prospect's inbox.

What you'll see at the end of step 8: a fully working agency portfolio site at https://.sgen.com. Total elapsed time from step 1: about thirty minutes.

What success looks like

You finish the tutorial with these artifacts:

A published *.sgen.com agency portfolio site.
A Home page with a customized hero and a four-card services overview.
A Case Studies index that auto-populates from the three published case studies.
Three case study detail pages with hero, problem, approach, outcome, gallery.
Four services pages, each linked to its relevant case studies.
An About page with your customized story and a team grid.
A Contact page with a project-inquiry form delivering to a real inbox.
The SEO basics (title, meta, OG image, sitemap, robots, Organization schema) configured.

A fuller success check:

Loading the Home page on a phone shows the hero, the services overview as a 1-column stack, and the footer at correct mobile widths.
The Case Studies index is scrollable on mobile with images loading at appropriate sizes.
Each services page's "Recent work" auto-list shows the right case studies.
Submitting the project-inquiry form delivers a real message to your inbox AND triggers the auto-reply to the prospect.
Pasting the preview URL into LinkedIn or X shows the OG image and meta description.
The Google "Test for Rich Results" tool reports valid Organization schema for the live URL.

What to do if it does not work

Symptom: the Case Studies index is empty even though three case studies are published.

Open each case study detail page. Confirm the case-study tag is in the Tags field (Pages → \ → Settings → Tags). The Case Studies index auto-pulls pages tagged "case-study"; without the tag, the page is not picked up.

Symptom: a services page's "Recent work" section is empty.

The "Recent work" auto-list pulls case studies tagged with the matching service slug. Open the case study, add a tag matching the service ("strategy," "design," "development," "operations"). Save. Refresh the services page.

Symptom: the project-inquiry form submits but no email arrives.

Confirm the Recipient email field is set (Contact → Form → Settings). Confirm the recipient mailbox accepts mail from noreply@sgen.com. Submit a test from the live page, then check Modules → Forms → Submissions — the entry is there even if delivery failed.

Symptom: the team grid shows only one card despite having three team members configured.

The team grid is responsive — on narrow viewports it collapses to a single column. Check on desktop. If still showing one card on desktop, refresh the About page; the grid loads team-member entries on render, and a stale cache can show a partial list.

Symptom: the OG image doesn't appear when sharing the URL on LinkedIn or X.

Social platforms cache OG images aggressively. Use the platform's official share-debugger (LinkedIn Post Inspector, X Card Validator, Facebook Sharing Debugger) — each one has a "refresh" button that forces the platform to re-fetch the OG metadata. Run the refresh once, then re-share.

Sample data used in this tutorial

The Agency Starter ships with sample data ready to go.

Case studies (three samples)

Title	Client (sample)	Service tags	Timeline
Rebrand for an analytics platform	an analytics platform	Strategy, Design	8 weeks
Website redesign for a fintech	Aspen Finance	Design, Development	12 weeks
Brand system for a hospitality group	Maple Hospitality	Strategy, Design	6 weeks

Services (four samples)

Service	One-line scope
Strategy	Brand and product positioning, market research, naming
Design	Identity, websites, packaging, brand systems
Development	Web, ecommerce, custom platforms
Operations	Brand maintenance, content systems, design ops

Team (three samples)

Name	Role	Social
Jordan Bell	Founder + Strategy Lead	LinkedIn
Sam Park	Design Director	Dribbble
Riley Cohen	Senior Engineer	GitHub

Project-inquiry form fields

Name, email, company, project type (matches services dropdown), budget range, timeline, project description (textarea), how-did-you-hear (optional).

Variations

Once the basic shape works, these variations cover most of what an agency portfolio needs.

Add a "Thinking" / blog section. Posts → New Post. Use the Posts surface as a Field Notes or Thinking section. Add three to five articles; the footer's "Latest from the studio" block auto-pulls the newest entries.
Add a logo wall (client roster). Drop a Logo Grid block on the Home page below the hero, showing client logos in a 4x2 or 6x2 grid. Each logo links to the corresponding case study.
Add an awards / recognition section. A small block on the About page listing publications and awards. Update once per quarter.
Add a careers page. A single Pages entry titled "Careers" with current open roles and an "always hiring for" section. Wire to a job-listings inbox or an ATS via the Forms module.
Add a press kit. A Pages entry titled "Press" with downloadable logos, founder bios, and a press contact. Useful when journalists or partners need assets fast.
Add lead magnets. Free reports, templates, or guides gated behind a short form. The Forms module captures the email, the file download triggers on submit.
Add a per-client portal. Use the Members module to gate a private case-study or project-update area per client. Each client gets a unique login.
Add multi-region pricing or scope tables. If you operate across geographies, a small Services-level pricing or scope reference table per region. Conditional content blocks in SG-Builder support this.

Common pitfalls

Three things go wrong most often on a first agency site. Each has a one-step fix.

Pitfall 1 — writing exhaustive case study narratives in the editor.

Case studies sell when they're skimmable. A prospect spends thirty seconds on a case study. Problem in two sentences. Approach in three bullets. Outcome with one number. Save the long-form for a follow-up conversation.

Pitfall 2 — using only placeholder client work because real client work is under NDA.

Write a generic version. "A B2B SaaS startup in the analytics space" or "a hospitality group with five locations" reads as credible without violating NDA. Run the generic version past the client first if you're uncertain — most clients are fine with anonymized case studies on a portfolio.

Pitfall 3 — leaving the team grid on placeholder bios.

The team grid is the highest-trust section of the site — prospects use it to evaluate whether they want to work with you. Don't ship with placeholder bios. Even a one-sentence "what you do here, what you did before" reads more credible than the starter's default text.

Pitfall 4 — setting the project-inquiry form's budget threshold to discourage small clients you want.

The budget dropdown is a signal to prospects about your floor. If your minimum engagement is $25k, set the lowest bracket as "$10k-$50k" — not "Under $10k." Conversely, if you're early in your agency's life and want every inquiry, keep the lowest bracket as "Under $10k" or "Tell us in the message."

Guides

Reference

Changelog

Roadmap