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.
While built within the overall NRO P4 infrastructures, the P4CG has its own set of features:
Campaign pages are found in the new ‘Campaigns’ menu item in Planet4.
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…
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).
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.
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.
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.
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.
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.
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 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 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 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.
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.
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.
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.
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.
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.
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.
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.
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
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.