Free and flexible blueprint templates for page-builder

Item

Description

Organisation name

The name of your organisation. This displays in the tab title in your browser, along with the page name, for example:
Email your MP | The Human Fund

Layout

The layout of the page. You have four options. If you are unsure which to use, why not try a split test of two layouts?

• The first three offer a 1 column layout, where it is positioned to the left, centre or right. This is a good option for short content with few fields, such as a petition or multi-page campaigns

• The last option is for two columns and is wider and centred. The second column will have a background colour (defined under the “Secondary background colour”). This option is good for more complex pages such as Events.

Background image URL

The background image of the page. This will be resized to fill the entire background but not distorted

Background colour

The background colour of the main page. This will show if you do not have a background image

Content corners

Set the rounded corners of the main content box. 0px would give you square corners

Secondary background colour

The background colour of the second column if using the two column layout. 

Link colour

The colour of text links

Item

Description

Logo image URL

The URL of your logo that is shown at the top of the content 

Logo alignment

The horizontal position of the logo – middle is default, or choose left or right

Logo width

The width of your logo that is shown at the top of the content

Logo height

The height of your logo that is shown at the top of the content. Leave as “auto” and it will be in proportion based on its width

favicon image URL

The URL of the “favicon”. This is the small image that appears in the browser tab

Item

Description

Button background colour

The background colour of the buttons (submit buttons and donation buttons, if using)

Button background colour (on hover)

The background colour of these buttons that shows when the cursor hovers over them. If you don’t want this effect, keep both colours the same

Button corners

Set the rounded corners of the button. 0px would give you square corners

Button font colour

The font colour of your submit button. This defaults to white

Button font colour (on hover)

The font colour of your submit button when hovered over. This defaults to white

Item

Description

Default font familyu

The font that is used for all text on the page. You have a choice of all built-in browser fonts such as Arial and Verdana. If you wish to use an other font, choose “Other”. You will need to add any font code though which you can do under the “Fonts (advanced)” tab.

Root font size

The base font size for all paragraph text. Headings are proportionately larger than this

Main font colour

The colour of all other text

Headings colour

The colour of the Headings in your text blocks. If you want, can change individual heading types under Fonts (advanced)

Item

Description

Custom fonts

If you wish to use a font other than the ones provided, you can use Google Font’s service** by pasting in the code they give you.

Or you can upload your own font files and use this to assign a font name to the file. 

See this article for more information

Heading 1 font family

By default, Heading 1 will use the root font. But if you can change it here if you want a different heading to your paragraph text.

Heading 2 colour

Defaults to be the same as Heading 1 if left as var(–h1_color)

Heading 2 font family

As for Heading 1 font family

Heading 3 colour

As for Heading 2 colour

Heading 3 font family

As for Heading 1 font family

Heading 4 colour

As for Heading 2 colour

Heading 4 font family

As for Heading 1 font family

Item

Description

Donation amount input type

If using radios for your donation amounts to offer a string of choices, you can keep their style as radios or as buttons via this option

Donation frequency input type

If using radios for your donation frequencies to offer a string of choices (e.g. monthly or annually), you can keep their style as radios or as buttons via this option

Donation recurring payment input type

If using radios for your Recurring Payment field (that sets whether the donation will be recurring “Y” or not “N”), you can keep their style as radios or as buttons via this option

Donations buttons colour (selected)

For the buttons options, this sets the colour of the donation buttons' background when selected

Donations buttons colour (unselected)

For the buttons options, this sets the colour of the donation buttons' background colour when it is unselected

Donations buttons colour (on hover)

For the buttons options, this sets the colour of the donation buttons' background colour when it is hovered over

Donations buttons font colour (selected)

For the buttons options, the sets the colour of the font when selected

Donations buttons font colour (unselected)

For the buttons options, the sets the colour of the font when unselected

Donations buttons font colour (on hover)

For the buttons options, the sets the colour of the font when hovered over

Item

Description

One click currency symbol

This sets the currency symbol (e.g. $) for the amount buttons, and submit button if you are displaying the value there too, in one click donation pages

One click submit button label

This sets the text on the submit button for one click pages, for example “Donate” or “Give”

Add amount to end of submit button

If “Yes” is chosen, this will add the selected donation amount after the submit button’s label, set above. For example, if the label is “Give” and the supporter has selected £20, this will display “Give £20” on the button

Item

Description

Ticket block Additional Donation display

Show or hide the “Additional donation” box in the ticket block

Ticket block Promo Code display

Show or hide the “Promo Code” box in the ticket block

Item

Description

Add jQuery

If you want the latest jQuery library added to your template’s header, choose Yes. No is default

Header scripts (script tags included)

Any other scripts, such as Google Analytics, Tag Manager or Facebook Pixel, can be pasted here and they will be put into the <head> of the template.

Mandatory asterisk

Show a * after mandatory fields. You can show or hide it with this option

Item

Description

Events pages ticket block

The ticket block does not show the submit button when using this template. Instead add your own via a Form Block

Read more

Any block can be made to “click to expand” by adding the following class to it via the block’s style section (palette icon):

Hide

Add the hide class (via a block’s Palette icon and in the Custom class names box) to hide the block in preview/live mode but not in the page-builder

Troubleshooting

Need to troubleshoot the layout? Add this to the <body> tag:

Personal information title

To style a heading with a prefixed icon for your personal information heading (must be Heading 2), add the following class to the text block via its style section (palette icon):

Personal information form block

To layout a form block that contains the fields First Name, Last Name & Email Address, add the following class to the text block via its style section (palette icon):

Address title

To style a heading with a prefixed icon for your address heading (must be Heading 2), add the following class to the text block via its style section (palette icon):

Address form block

To layout a form block that contains the fields Address 1, Address 2, City, Region, Postal Code & Country, add the following class to the text block via its style section (palette icon):

Payment information title

To style a heading with a prefixed icon for your payment information heading (must be Heading 2), add the following class to the text block via its style section (palette icon):

Personal information form block

To layout a form block that contains the fields Payment Type, Credit Card Number, Credit Card Expiration [split select] & Credit Card Verification Value, add the following class to the text block via its style section (palette icon):