Campaign Pages & Templates
Give a campaign's site a distinct visual layout with opt-in page templates, and build extra pages from composable CMS sections – including an embedded social feed.
Overview
By default, every campaign site uses PurposeTech's standard layout – jobs, shifts, and the signup flow presented in the standard theme. Two optional layers let you go further without writing custom CSS:
- Page templates – apply a patterned, campaign-specific visual treatment (header band, split hero, alternating content bands) on top of the standard layout
- CMS page sections – compose extra full-width pages (landing pages, "how it works" explainers, FAQs) from reusable content blocks
Both are entirely opt-in. A campaign that doesn't use either looks and behaves exactly as it does today.
Page templates
Turn on a page template to give a campaign's site a more editorial, branded look – a full-width header band with a title card, a split hero panel with a photo, alternating content bands down the page, and tinted sections to break up the layout.
Page templates are opt-in per campaign, set via the Style Data JSON field – the same field used for colour and CSS overrides. Campaigns that don't set a template are completely unaffected.
Enabling a template
Set pageTemplate in the campaign's Style Data. Your PurposeTech onboarding contact can set this up with you, or you can configure it directly if you're comfortable working with the JSON field.
Header band
A full-width, patterned band at the top of the page with a title card layered on top:
| Field | What it controls | Notes |
|---|---|---|
headerBand.imageUrl | Background image for the band | Must be an https:// URL |
headerBand.backgroundColor | Fallback / underlying colour | Shows while the image loads, or if none is set |
headerBand.titleBackgroundColor | Background behind the title card | |
headerBand.titleColor | Title text colour | |
headerBand.minHeight | Minimum height of the band | e.g. 320px |
Split hero
An alternative to the header band – a two-panel hero with a copy panel on one side and a photo on a patterned band on the other:
| Field | What it controls |
|---|---|
heroVariant: "split" | Enables the split hero layout |
heroPanelColor | Background colour of the copy panel |
heroPanelTextColor | Text colour on the copy panel |
heroImageOverlayColor | Colour overlay applied on top of the hero photo |
Content bands & tinted sections
Below the hero, page content can alternate between full-width bands to create visual rhythm:
| Field | What it controls |
|---|---|
sectionTintColor | Background tint applied to alternating sections |
cardImageFit | How images fit inside content cards – "contain" (show the whole image) or "cover" (fill the space, cropping if needed) |
Use "cover" for photography-led campaigns where a consistent card size matters more than showing the whole image. Use "contain" for logos, diagrams, or images where cropping would cut something important off.
CMS page sections
Beyond the standard signup site, a campaign can have additional full-width pages – an "About" page, a sponsor page, an FAQ page – built entirely from the CMS, without custom CSS.
Pages are composed from an ordered list of sections, each with its own type:
| Section type | What it's for |
|---|---|
| Banner | A full-width image or colour banner with a heading and short message – good for a page intro or a call-to-attention block |
| Icon steps | A numbered, iconed sequence – e.g. "1. Sign up · 2. Pick a shift · 3. Show up" |
| Image + text | An image alongside a block of copy, alternating sides as you add more |
| FAQ | An accordion of question-and-answer pairs |
| Social feed | An embedded live feed of social media posts – see Social feed embed below |
Add, remove, and reorder sections to build the page you need. Because every section is a self-contained block, you can mix and match without worrying about layout conflicts.
Ask your PurposeTech onboarding contact to help build out a new CMS page. Once the structure is in place, updating the copy, images, and ordering is straightforward.
Social feed embed
Show a live wall of social media posts on your campaign's home page – recent posts from your organisation's accounts, a campaign hashtag, or a curated collection, pulled in via Curator.io.
Configuration
Set the following on the campaign's home page content:
| Field | What it controls |
|---|---|
socialFeed.feedId | The Curator.io feed ID to display |
socialFeed.containerId | The Curator.io container ID for that feed |
socialFeed.height | The height of the embedded feed |
socialFeedTitle | Heading shown above the feed |
socialFeedBody | Short intro copy shown above the feed |
The feed renders in a sandboxed, cross-origin iframe – it can't access the rest of your campaign page, and a problem with the feed (or with Curator.io itself) can't affect the rest of the site.
The same social feed block is also available as a Social feed section (see above) if you want it on a page other than the home page.
Next steps
- Campaigns & Events – campaign creation and configuration
- Custom Domains & Branding – style and copy overrides
- SEO & Search Visibility – making your campaign pages discoverable