Dawn Butler

This page is your guide to understanding and controlling the features of this custom Nationbuilder template. It links to examples of best practices for page types and explains how to configure layouts and toggle certain features on and off using tags. It's also intended as your first port of call for troubleshooting. 

1. Quick Tips and Troubleshooting

1.1 Clear Cache 

Anyone who spends time working with Nationbuilder knows how important the 'clear cache' feature is. When modifying page layouts, adding or removing tags, activating video headers or uploading images it sometimes appears that nothing has changed when you refresh the user-facing page. What is likely happening is that you are being shown a 'cached version' of the page and not your latest changes. In order to see the changes, you'll often need to 'flush out' the cache periodically through your settings. You can find the 'clear cache' function through the following pathway: website > site settings > clear cache. Read about why websites use caching here.

1.2 Nice Buttons

You'll see on the 'advice surgery dates' page that some links have been styled into large colourful buttons. Large buttons like this are useful for drawing user attention to important actions and content. To create buttons like this, copy the code snippet below and paste it into the source code in a page's WYSIWYG content area. If you want your buttons in a horizontal row, then you should insert a table with a column for each button. Set the table border thickness to zero to make the table invisible.

1.3 Image and Video Dimensions

It's very important that you use the appropriate-sized image when adding content to pages. Here is a rough guide to the dimensions and image quality you should be using. 

1.4 SEO and Social Share Excerpt

Each time you create a new page you must ensure that some basic SEO text and a 'social share except' are added. Without this, the page will not be properly identified in search results and any link you share to social media won't have an image attached or a suitable text prompt. Links without imagery perform poorly. Pages without SEO rank poorly. 

1.5 Custom Fields - CLP, Branch, Trade Union

Sometimes, you'll want to collect Labour-party-specific data on forms. This data is usually recorded in what are called custom fields which are created in Nationbuilder. Unfortunately, custom fields are not available on the cheapest price plan. So, we have created a workaround until you have enough users and income to move up Nationbuilder's feature ladder. Currently, the ability to activate customs fields for CLP, Branch and Trade Union data collection is limited to sign-up and petition and survey type pages, which are generally the most utile data harvesting tools. 

It might be useful to think of your site as facing three primary audiences: the general public, the wider Labour Movement and your local Labour Party. For members of the public, forms should collect the standard range of data - name, email and sometimes location. For local, Labour party-facing initiatives, you may want to capture trade union affiliation and branch membership. When trying to reach the wider Labour movement, a focus on collecting CLP membership and union affiliation may be needed for organising purposes. The following tags can be added to any sign-up or petition page to activate any one, or a combination of the three, custom fields. 

As part of the workaround to activate these custom fields, the data collected is stored in a slightly unconventional way. The data recorded by these fields are mapped onto redundant 'address' fields in your database. You can use the following filters to identify and manipulate this data for the purposes of sending emails or creating walk-sheets. 

CLP data is mapped to Registered Address > City Address  Trade Union data is mapped Mailing Address > City Address Branch data is mapped to Work Address > City Address

Three simple filters have been created and saved so you can search and organise your database according to CLP, Union Membership and Branch. The buttons below will take you to different filters for you to familiarise yourself with. 

 

2. Page Layout Configuration

This section contains instructions on how to manipulate the layout and appearance of pages on this site. It largely reproduces the instructions provided in the user manual supplied at handover. You can download a pdf of the manual below.  

2.1 Featured Images and Content Slider

A featured image or featured content slider can be added to any page or post within the Dawn Butler MP theme as with any Nationbuilder theme. A video explaining this process can be found here.

If you only add one image to the featured content section then it will appear on your page as a banner image rather than a slider. If you add more than one image in this section the area will display as a slider.

‘Page to feature’ is a required field within Nationbuilder but If you don’t want to add a link to your slide you can enter the slug of the page you are currently editing. If this field matches the slug for your current page then the slide will not be linked to anything.

By default, the header image will display like the example below.


All shapes and dividing lines are added via the website's styling. You just need to upload the image at an appropriate size (see above).

Below is an example of a cutout header:

To add this style of header to a page first the image must be formatted properly and then saved with a name that includes the word ‘cutout’ (e.g. ‘main_header_cutout.png’).

2.2 Video Header 

Adding a video header is done through the page files section and not the featured content slider.

You can add a video header by following this process:

1. Add the tag ‘video_header’ to the page

2. Upload a video to the ‘Files’ section of the page (must be under 10MB and with an appropriate aspect ratio)

2.3 Header Sign-Up Form

A sign-up form can be displayed in the header area of any page by adding the tag ‘add_signup’ to the page. The sign-up displayed is based on the settings for whatever is set as the default sign-up form on the site.

Alternatively, if you do not want to use the default sign-up form in your page header, create a sub-page of the type 'sign-up' on the page you want to display this new form on. This will automatically replace the default form with this new form in the header. 

2.4 Header Tagline 

The ‘Our Community is Our Strength’ tagline can be displayed on any page by adding the tag ‘show_tagline’ to the page.

2.5 Action Page Formating (Petition, Donate, Sign-up etc)

If you want to display text on the left and the action form on the right on a given action page type (e.g. donate, sign up, petition etc) add the page tag ‘divide_page’.

Donate Page Tagged 'divide page'	Donate Page Default (no tag)

2.6 Blog Posts 

2.7 Alternative Blog Layout 

There is an alternative blog layout that can be seen in used to display a grid more suitable for listing things like team members or policy priorities.

In order to display a blog like this, the tag ‘alt_blog’ should be added to the page. The excerpt for this type of post is taken from the ‘Before the flip’ section of the content (optional).

If there is also content in the ‘After the flip’ section then a ‘find out more’ link will be added and you will be able to click through to a full post. If not then no link will be added and the post will not be clickable.

To change the order of alternative blog posts on the front end you can add the tag ‘order_X’. With ‘X’ being the number where you want it to appear on the page (e.g. order_1 will appear before order_2 etc).

2.8 Landing Pages and Sub-Pages

A landing page consists of a basic page which in turn has sub-pages that can be pulled into the parent page to display a more dynamic structure. This site's current homepage is an example of a landing page that pulls in content from other pages. 

The process for creating a landing page is as follows:

1. Create a basic page within Nationbuilder and name it as you would any other page.

2. Tag the page with ‘landing_page’

3. Add any content to this page. This will act as the introduction to the landing page.

4. Add a featured slider/image if required.

5. Add sub-pages to the landing page - Extra content is added to the page by adding sub-pages to the basic page you’ve just created. You can add different types of pages here for different content needs (e.g. blog, survey, petition etc).

Extra options for Landing Pages

Hide navigation

You can hide the main navigation of a landing page by adding ‘hide_nav’ to the page’s tag list.

You might want to do this if this page is intended to stand alone from the rest of the site.

With Navigation

Without Navigation

If the landing page has more than one sub-page then a secondary navigation will be added to the page automatically, allowing the user to scroll to different sections.

If you do not want that to appear you can add the tag ‘hide_sub_nav’ to the page’s tag list.

The sub-nav is also hidden if the page contains header buttons (see ‘Extra options for landing page sub pages’ below). 


With most model page types, you can 'clone' the example pages when creating, for example, a new petition page or survey. Starting each time from the examples pages listed in this guide will ensure continuity and consistency across all of your activities. 

Extra options for landing page sub-pages

There are also a few extra options that can be added to sub-pages to alter how they display on the landing page.

Hiding a sub-page on the landing page

If you do not want a landing page sub-page to appear on the landing page you can add the tag ‘hide_on_parent’ to the sub-page’s tag list.

Remove the sub-page’s header from the landing page

If you don’t want to header for the sub-page to appear on the landing page you can add the tag ‘no_header’ to the sub-page’s tag list.

Alternative backgrounds

Adding ‘alt_background’ to the sub-page’s tag list changes its background colour from white to light grey.

Adding ‘alt_background2’ to the sub-page’s tag list changes its background colour from white to dark purple.

Background image

You can add a background image to a sub-section (which appears behind a gradient) by giving the sub-page a featured content slider image and then adding the tag ‘bg_image’ to the sub-page’s tag list.

Intro button

You add a button to the header of the landing page that links to the subpage section by adding the tag ‘intro_button’ to the sub-page’s tag list.

If the subpage also has the ‘hide on parent’ tag then the button will link directly to the page rather than the landing page sub-section.

As mentioned previously, if intro buttons exist on any sub-pages, the sub-nav will no longer appear.

Highlight blog

For landing pages, there is a third blog style available designed to display highlight content. This should be used sparingly and works best for small numbers of posts.

To turn a sub-blog into a highlight blog add the tag ‘highlight_blog’ to the sub-page’s tag list. Ordering subpages

Landing page sub-pages can also be reordered using the same method as with alternative blog posts, i.e. adding the tag ‘order_1’, ‘order_2’ etc.

Sub subpages

The final available feature for a landing page are sub-sub-pages. These allow for a bit more flexibility around the arrangement of content blocks on a landing page.

A sub-sub-page sits as a sub-page of a basic page which in turn sits as a sub-page to a landing page. So an example structure for a landing page might be:

• Landing page         •  Basic subpage             • Sub sub-page 01                       • Sub sub-page 02 • Blog subpage • Petition subpage

Sub sub-page widths

The widths that a sub-sub-page appears on larger screens will change depending on how many other sub-sub-pages exist.

If there is just one sub-sub-page it will appear at 100% width on all screen sizes.

• If there are two sub-sub-pages they will appear at 50% width at on mid-sized screens upwards.

• If there are three sub-sub-pages they will appear at 33.33% width on mid-sized screens and upwards.

• If there are four sub-sub-pages they will appear at 50% width on mid-sized screens and 25% width on larger screens.

• If there are more than four sub-sub-pages they will appear at 50% width on mid-sized screens and 25% width on larger screens and will stack on top of each other when you get past the fourth block.

Ordering sub-sub-pages

Sub sub-pages can also be reordered using the same method as with alternative blog posts, i.e. adding the tag ‘order_1’, ‘order_2’ etc.

3. Example Page Types 

Below you will find best practice examples of a selection of page types. You can clone these pages, and carry over their formatting and settings, whenever you need to start a new action or campaign. 

3.1 Petition 

CLONE THIS PETITION TEMPLATE

3.2 Sign-up

CLONE THIS SIGN-UP TEMPLATE Extra Features: CLP Field  UNION Field  Labour Party Member Checkbox

3.3 Survey

CLONE THIS SURVEY TEMPLATE

3.4 Recruitment

CLONE THIS EVENT TEMPLATE