StepContext, or building killer landing pages in WordPress

Journeys, not pages

One of the most common mistakes when designing campaign pages is thinking that the landing page and the follow-up thank you page are separate stages. They’re not – they’re just different steps on the same path. So instead, think about the experience and journey of the supporter.

A typical campaign flow might look like this:

1. Sign a petition
2. Share the campaign
3. Donate

If each step lives on a separate page, every page reload becomes a moment where you can lose supporters. A better approach is to keep everything on the same page and let the page reveal the right step as supporters move through the journey. This keeps the experience smooth and reduces drop-off.

WordPress action page hacks

The best campaign landing pages do one thing well: they guide supporters toward action, and limit distractions.

Modern WordPress editors are structured around blocks which makes pages easy to build and edit. Your ideal campaign landing page can be built from reusable pieces like:

• the campaign headline
• background information
• the action form
• donation asks
• share prompts

You can move blocks around, adjust layouts, and experiment with different designs without touching code.

Here’s a simple tip that saves a lot of time. Once you create a campaign layout you like, select all the blocks and save it as a pattern (this is an option available in the recent versions of WordPress). 

For example:

• two columns
• action form on the right
• campaign story on the left
• share and donate blocks below

Next time you launch a campaign, you simply select the pattern and everything is already in place. All you need to do is add the new campaign content. It turns campaign setup from a full page build into a quick content update. 

Here’s the real awesome bit though: the Proca campaign widget can work with your page to control which elements of the page are visible when. The supporter stays on one page – but the page changes in response to their actions. We call this feature StepContext.

StepContext or what gets displayed on the page

The Proca widget is designed to guide supporters through a customisable journey, which typically includes several steps. Each step on this journey has a different purpose and needs different content. For instance, during the main action step, you might focus on explaining the campaign’s context, the crisis at hand, the opportunity for change, and your theory of change. When transitioning to the sharing step, you could emphasise how sharing allows supporters to multiply their impact. If you include a donation step, you might highlight the tangible outcomes that donations can achieve.

Let’s have a look at an example:

• main petition action
• share
• donate

To make it easier for the campaigner, you write all the content for all the steps into your page and let the StepContext feature of our widget control which one to show or hide.

It operates by using HTML class names to control the visibility of content blocks based on the current step. This means you have the flexibility to write all your content blocks in advance and use specific class names to instruct the widget when to show or hide each block. For your supporters, it means instant transitions between steps, that has been proven to increase engagement.

Adding these classes in WordPress’s Gutenberg editor is straightforward. We will be using our petition widget as an example but the process is virtually the same with a mail-to-target widget. Here’s how you can do it:

1. Select the block you wish to control.
2. In the block settings sidebar, locate the ‘Advanced’ section.
3. Find the ‘Additional CSS Class(es)’ field.
4. Enter the required classes, separated by spaces.

Each block that you want the widget to control needs two classes:

1. “proca-text“: This class indicates that the block is controlled by the widget.
2. “proca-[step]“: This class specifies which step the block corresponds to. For example, “proca-Petition” for the main action step, or “proca-Share” for the sharing step.

So, a complete class for a block might look like “proca-text proca-Petition” (displayed only on the Petition step) or “proca-text proca-Share” (only on the share step)

This system provides you with granular control over your content, allowing you to craft a supporter journey that is both engaging and effective. By strategically revealing content at each step, you can guide supporters through your campaign in a way that maximises their engagement and impact.

Structure for campaigns’ page

The structure of your campaign page is likely to be unique to your campaign and communication style, but we recommend to cover these main points

1. Campaign title
2. Petition text
   • this is the short version of your demands (2 or 3 paragraphs), this is the only content that needs to be identical between all the partners
3. Main campaign content with context
   • Purpose: Explain the problem, highlight urgency, present the opportunity and introduce the theory of change.
   • This section sets the stage for the entire campaign, providing context and motivation for action.
4. Sharing encouragement:
   • Purpose: Focus on amplifying impact through social proof and network effects.
   • This section reinforces the theory of change by showing how individual actions contribute to the larger goal.
5. Donation appeal:
   • Purpose: Raising money to power your campaigns.
   • This section connects donations to concrete actions, demonstrating real-world impact of financial support.

These purpose statements help to:

• Clarify the strategic intent behind each section of content
• Ensure that each part of the campaign journey serves a specific function
• Guide content creators in maintaining focus and consistency across the campaign

When adapting this structure to a real campaign, you would:

1. Adjust the content to reflect your actual cause and goals
2. Ensure each section fulfills its intended purpose within your campaign strategy
3. Use the proca classes to control when each section is displayed during the supporter’s journey

Example campaign: Ban pineapple on pizza

To illustrate, let’s create a campaign to ban Hawaiian pizza! (yes, we’re pineapple haters).

Join the Fight Against Culinary Chaos!

Next month, the United Nations World Food Programme is set to pass a groundbreaking resolution declaring “hawaiian pizzas” a crime of poor taste. This is our chance to make history and protect the sanctity of proper pizza!

However, the battle is not yet won. Several countries remain undecided on this crucial issue. That’s where you come in! We need to show massive support against that horrible topping to convince these wavering nations to vote for the ban.

Why Your Signature Matters:

• Preserve Pizza Purity: Keep pizza free from tropical intrusions!
• Protect Global Taste: Ensure future generations enjoy proper pizza combinations.
• Unite Pizza Lovers: Join millions worldwide in this critical culinary cause.

Together, we can stop the abomination! Sign our petition now and be part of this cheesy revolution!

Spread the Word, Not the Pineapple!

Thank you for signing our petition! But don’t stop there – your voice can echo even louder!

By sharing this campaign with your friends and family, you can:

• Amplify Our Message: Each share could bring in 3-5 new signatures!
• Educate Others: Many people don’t realise the gravity of this pizza crisis.
• Create a Domino Effect: Your share might inspire others to share too!

Remember, every share brings us one step closer to a world free from pineapple-topped pizzas. Be a pizza hero – share now!

Fuel the Fight Against Fruity Toppings!

Your signature and shares are incredibly valuable, but we need more ammunition to win this battle. Consider making a donation to supercharge our campaign!

Your Donation Will Help Us:

• Lobby Decision Makers: We’ll send miniature pineapple-free pizzas to UN delegates!
• Spread Awareness: Fund our cheesy ad campaign across social media platforms.
• Support Pizza Purists: Provide counselling for those traumatised by unexpected pineapple encounters.

Every pound counts in this crusade for culinary correctness. Donate now and help us slice through the opposition!