The Planet4 Campaign Generator (P4CG) is actually a group of features that allow to build “microsite-like” pages inside P4, targeted at the needs of (global) campaigns.

Piloted by the Climate Emergency, the P4CG radically changes how we will produce uniquely branded Campaign pages within the P4 architecture in 2020 and beyond.

Mockup of a “People vs Oil”branded Planet 4 Campaign Generator (P4CG)

Key unique features of P4CG

While built within the overall NRO P4 infrastructures, the P4CG has its own set of features:

  1. Customizable design: to meet the requirements of the campaign style guides. Some elements of default pages and blocks are hidden to maximize the focus on the campaign engagement needs.
  2. Exporting/importing complete campaign pages: to allow rapid distribution of campaign materials across offices, basically simplifying campaign launches to a few clicks.
  3. Syncing leads to different NRO databases: currently there is only support for Engaging Networks but our next step is to add support for other systems. This means that global campaigns will need to create one page only that they can roll out across all P4 NROs, which will reach a more than 80% NRO adoption rate by the end of the year.
  4. All the benefits of using the global IT infrastructure (as opposed to a standalone microsite installation): campaigners don’t have to worry about infrastructure, performance, security, software updates, GDPR or that other IT thing they have never heard of until the moment it stopped working.

Campaign pages are found in the new ‘Campaigns’ menu item in Planet4.

Key differences of P4CG from the P4 main theme

  1. Campaign pages are not integral parts of your Planet4 site. They don’t appear in the site navigation (though they do show up in site search). The reason for this is that they are conceptually closer to “microsites”: they are made to provide a more focused experience, with less of the “normal site” and more of the campaign content.
  2. Their primary audience are supporters coming from outside of the website, clicking links in newsletters, social media or ads.
  3. As a consequence of the above, some changes were made to the blocks.
    1. There are blocks not available under campaigns (e.g. Covers).
    2. There are blocks that have call to action buttons removed and links converted to regular text, to simplify the user flow and keep the visitors focused on the main engagement ask.
  4. Campaign pages can be customized within the P4 interface, and the custom options are available on the Edit pages.

Create a Campaign page

Creating a campaign page has the same steps as creating a regular page in Planet4.

KEY INFO – If you do not choose to use a custom design (see later) there are only a handful of differences between a Campaign page and a regular page. 

 

Beyond the the UX differences described in the previous section, the only obvious feature of Campaign pages is that they can be found in the /campaigns/ subdirectory (meaning that their URL will be greenpeace.org/xx/campaigns/pagename)

To create a new campaign page, just go the Campaigns menu in Planet4 and click on Add new…

Choose a template

In the right sidebar of every Campaign page there’s a ‘Campaign Templates’ dropdown with a number of available templates based on the respective campaign style guides. These templates inform the default fonts, colors and some other graphic elements (borders, arrows, button shapes) of a given page.

KEY INFO – If you choose a different template from the dropdown, it will change all the elements of the page that is specified in the template and is not overridden by a setting in the Page Design section (see below)


Customize the design

Campaign pages have a special section called Page Design where you can customize certain elements of the page. The available font and colour options were selected based on the campaign style guides, making sure that they are looking good in any combination.

The number of options is limited on purpose, making sure that the resulting pages will have a visual consistency.

Let’s take a look at the customization options.

Logo

If a campaign wants to use their own logo instead of the Greenpeace logo in the header, they can do so by choosing one in this dropdown.

Logo color

If the campaign style guide contains a dark and a light version of the logo then you can switch between the two using this radio button.

Navigation

To minimize the number of visitors who leave the page because they get distracted by the default header (and footer) items you can choose to use a ‘Minimal navigation’ that doesn’t have the standard header navigation items, search bar or donate button.

Navigation background color

You can change the background color of the header and the footer using this color picker. The available colours were handpicked from the campaign style guides and the Planet4 color palette.

Navigation bottom border

If you are using a background image on the top of the campaign page, it might improve the overall look and feel if you add a white border between the header and the top block so their colours are not interfering directly with each other.

Header Text Color

Header text is every text on the page that is a title, or for the webbies out there: every text which is having <h1>, <h2>, <h3>, etc markup. You can set their text color using this color picker. Please note that this will not affect the text color inside the EN Form Block, as it usually has a background image so it needs a different text color than the rest of the page.

Primary Button Color

Primary buttons are Call to action buttons like “Sign the petition”, “Donate”, etc. They have a white or black text on a full color fill button background. You can set their colours using this color picker. Since they are used to capture the visitor’s attention they have really bright colours.

Secondary Button and Link Text Color

Secondary buttons are buttons like “Read more”, etc. They have a coloured text on a transparent button which only has a coloured border. If you hover your mouse cursor over them they change to a full color fill. You can set their colours using this color picker.

This color picker also sets the color of all text links on the page.

Header Primary Font

Campaign style guides always specify a characteristic primary font that gives an easily recognisable identity to their materials. You can choose a primary font from this dropdown that will change the font of the block titles. The list was handpicked from the campaign style guides.

Header Secondary Font

Campaign style guides also specify a secondary font that is used in combination with the primary font. The fonts in this dropdown were picked from the campaign style guides. To ensure best results, make sure you follow the campaign style guides to match primary and secondary fonts.

Body Font

Planet4 offers two body fonts: a serif (Lora) and a sans serif (Roboto) one. If a campaign has a body font specified that is considerably different than the Planet4 defaults then it will appear in this dropdown. We wanted to limit the number of options as much as possible here to make sure that the pages you build will have some design consistency.

Footer Theme

By default the footer background color will match the header background color. However if that color is too intense, it might make sense to choose the white footer theme, where the footer background will be white and the text color will have the header color.

Footer Items

If a campaign has their own global social media channels, they have the option to overwrite the default footer elements using the Footer Items. Add the URL of the social media channel in the first field and the matching icon name in the second field. Make sure you consult the list of available icons (linked from the customizer) and that you fill in only the icon name, without the file extension. If you don’t fill in these fields then the default footer elements will be visible. However if you fill in at least one of these then Planet4 will hide the default elements and will only show the ones you specify. So if you fill in only the “Footer item 1” then you’ll see only one icon in the footer.

Sharing Campaign pages across P4 sites

One of the key features of Campaign pages is that you can export them with one click to an XML file (including all the page contents, galleries, embedded media, etc) that you can share with other NROs who can import it, meaning that only the translations need to be added and the campaign page is ready for launch.

Exporting

Under every campaign page in the Campaigns list you’ll find an Export button – clicking on it will export the complete page to an XML file.

Importing

You can find a step by step walkthrough of importing a campaign page here. In short: if you want to import an exported Campaign page into your Planet4 site, just click on the Import button on the ‘Campaigns’ page. Select the XML file containing the exported page, and click on Import.

If the original author doesn’t exist in the Planet4 site where you’re importing to, you have two options:
you can choose to assign the page to another, already existing author
or you can create a new user based on the original author and assign the page to this new user

What gets exported and what does not

Please note that any page has page-specific elements and site-specific elements. Only page-specific elements are exported (and imported), site-specific elements are not.

Page-specific elements include everything that you edit on that specific page, so here’s what will be exported (and imported)

There are, however, site-specific elements that are specified outside of the page:that cannot be exported / imported, such as

KEY INFO – If if you import a campaign page, you will have to add the forms (Engaging Networks or other) that your NRO is using. 

Please also note that if you import a campaign page that has links to local content of the original site (links other pages of that site, links to documents uploaded to that site, tags, etc) you’ll need to update the links as these resources will be most probably missing from your site.

Basically you should always triple-check the imported content before hitting the “publish” button.


Links & Resources