Versions Compared

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.
Note

This blueprint has been designed and tested for all page types, except Symbolic Giving (formerly ecommerce) for which there is a dedicated blueprint template and Click to Call.

This template is an all-round blueprint that can be used to create templates for your page-builder pages if you do not wish to design your own.

...

Features

  • The template is designed to work with almost all Engaging Networks page types, except eCommerce (for which there is a dedicated blueprint template) and Click to Call

  • It features a full-screen fixed background image, or background colour

  • The content is within a white area on top of the image that can be positioned to the left, centre or right, or to support one or two columns.

  • It is mobile optimised

  • There is support for custom or Adobe/Google Fonts*

  • You can add expandable “read more” text blocks

...

Here’s a rundown of the blueprint options:

...

image-20240829-104805.pngImage Added

General

Item

Description

Organization Organisation name

The name of your organizationorganisation. 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, center 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 centeredcentred. The second column will have a background color colour (defined under the “Secondary background color”colour”). This option is good for more complex pages such as Events.

Background color

The background color of the main page
  • .

This will show if you do not have a background image

Background image URL

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

Link colorBackground colour

The color of text linksbackground 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 colorcolour

The background color 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 rightfavicon image URL
The URL of the “favicon”. This is the small image that appears in the browser tab

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

Submit button

...

Item

Description

Button background colorcolour

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

Button background color colour (on hover)

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

Button corners

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

Button font colorcolour

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

Button font color colour (on hover)

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

...

Item

Description

Default font familyfamilyu

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.

Default Root font size

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

Main font colorcolour

The color colour of all other text

Headings colorcolour

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

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 familyCustom 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

Donation pages

These items are specific to Donation pages only.

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 color colour (unselectedselected)

If using buttons for any of the aboveFor the buttons options, this sets the color colour of the amount, frequency or recurring payment background button color when it is unselecteddonation buttons' background when selected

Donations buttons font color colour (unselected)

The color of the amount, frequency or recurring payment font color For the buttons options, this sets the colour of the donation buttons' background colour when it is unselected

Donations buttons color colour (selectedon hover)

The color For the buttons options, this sets the colour of the button donation buttons' background colour when selectedit is hovered over

Donations buttons font color colour (selected)

The color For the buttons options, the sets the colour of the button font color when selected

Donations buttons color font colour (on hoverunselected)The color of the button background on hover

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

Donations buttons font color colour (on hover)The color of the button font color  on hover

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

One click donations

These items style one click donation pages, which display when the right conditions are met. You would need to set the template for the one click donation page for this to work.

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

Event pages

These items are specific to Event pages only.

...

Item

Description

Add jQuery

If you want the latest jQuery library (3.6.0) 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. DO NOT INCLUDE <script> TAGS HERE

Note

Do not include<script> tags here. If you wish to, you can edit the template directly for more flexibility

Mandatory asterisk

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

...