1. Home
  2. page-builder
  3. Page templates
  4. Sample blueprint templates for page-builder

Sample blueprint templates for page-builder

The page-builder contains a series of sample templates for you to use if you do not wish to create your own.

The sample templates are created from blueprints, and they allow you to alter the design (for example colours, fonts and logos) without having to edit HTML and CSS, although this option is available for advanced users.

How to create a template from a blueprint

  1. Go to Pages > Components, and then Templates on the left menu
  2. Click New Template, and then click on the Template blueprints tab. This will list all Sample templates (that we provide) as well as any Account blueprints that you may have added yourselves
  3. Under Sample templates, click on the one you would like to use (see below for a rundown), and then click ✔ Select
  4. The editor will open. On the left you’ll see various vertical tabs that allow you to adjust different parts of the template that will be created from the blueprint. For more information on what is available, read the information on the blueprint you are working with below
  5. Give the template a name and Save. This will create a new page template for you to use on your page or pages.

Available blueprint templates

Free & Flexible page template V2

Added for Toronto clients, Dallas clients will be added 13 Oct.
This blueprint has been designed and tested for all page types, except eCommerce (for which there is a dedicated blueprint template) and Click to Call

This template is the latest blueprint available and the recommended one to use, although note that it is in “beta” so please report any issues you may come across.

It works with many page types and allows you to alter the position of the content (left, centered or right) and supports one or two column layouts.

Additionally, there is support for Google Fonts, expandable “read more” text blocks and many other features.

Here’s a rundown of the blueprint options:

General tab

Item Description
Background color The background color of the main page. This will show if you do not have a background image
Background image The background image of the page. This will be resized to fill the entire background but not distorted
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 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 centered. The second column will have a background color (defined under the “Secondary background color”). This option is good for more complex pages such as Events.
Link color The color of text links
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
Secondary background color The background color of the second column if using the two column layout. 

Button tab

Item Description
Button background color The background color of the buttons (submit buttons and donation buttons, if using)
Button background cover on hover The background color of these buttons that shows when the cursor hovers over them. If you don’t want this effect, keep both colors the same
Button corners Used if you want rounded corners on your buttons

Fonts

Item Description
Default font family 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.
Headings color The color of the Headings in your text blocks
Main font color The color of all other text
Root font size The base font size for all paragraph text. Headings are proportionately larger than this

Donations

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
Selected background color If using buttons for any of the above, when one is selected by the supporter, or selected as the default on page load, this is the color of the button background
Item Description
favicon URL
The URL of the “favicon”. This is the small image that appears in the browser tab
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
Logo URL The URL of your logo that is shown at the top of the content 
Logo width The width of your logo that is shown at the top of the content

Fonts (advanced)

Item Description
Google 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. In the screenshot above, you can see the code in the “Use on the web” area. Copy this code and paste it here and that font will be available if added as an “Other” font
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 font family As above
Heading 3 font family As above
Heading 4 font family As above

Here’s an example:

  1. Go to https://fonts.google.com/ and select the Font you wish to use
  2. It will open up a list of available styles. Generally picking Regular 400 is enough but you can add more. Click on “+ Select this style” next to this and any others you want.
  3. You can add more fonts in this way if desired
  4. Once done, the right hand panel will show the fonts you have chosen and the code to copy. Under “Use on the web”, copy the long code they give you, for example if you selected Roboto as your font you would copy this code:
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Roboto&display=swap" rel="stylesheet">
  5. Paste this into the Google Fonts box in your blueprint template
  6. Back in Google Fonts, in the same panel, there is another section headed “CSS rules to specify families”. To specify an “Other” font, you need to copy the text after font-family:, for example if it says:
    font-family: 'Roboto', sans-serif;

    then copy

    'Roboto', sans-serif
  7. To apply this font, select the “Other” option for your fonts and paste it in there, for example the Root Font or Heading fonts.

Extras

Item Description
Mandatory asterisk Show a * after mandatory fields. You can show or hide it with this option
Scripts 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

Events

These items are specific to Event pages only.

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

Additional functionality

Once created, there is additional functionality you can take advantage of within the page-builder.

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):

click-to-expand
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-title
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):

personal-information
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-title
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):

address
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):

payment-information-title
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):

payment-information

iFrame Template (beta)

This template is designed to be used as an iFrame – when you embed an Engaging Networks page within another page, e.g. your website.

It does not have design items such as a background image, or logo, since that would be handled by the parent site. 

These are the blueprint options available:

Design tab

Item Description
Base font color The color of text on the page
Base font size The size of text on the page. Headings’ sizes are relative to this size
Iframe margin left and right The left and right margin surrounding the content of the page. “0” would be it would run down the very left of the iframe, and so in line with the parent content
Iframe margin top and bottom The top and bottom margin surrounding the content of the page
Link color The color of links
Organisation title 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

Buttons tab

Item Description
Button background color The background color of the buttons (submit buttons and donation buttons, if using)
Button border radius (corners) Used if you want rounded corners on your buttons
Button padding left and right Padding of the text in the button (left and right)
Button padding top and bottom Padding of the text in the button (top and bottom)
Button width Auto, full width or Other

Advanced tab

Item Description
Custom font code You can insert Google font code here (see previous “Free & Flexible page template V2” for an explanation)
Header code Scripts such as Google Analytics can be placed here
Mandatory asterisk? Whether a mandatory field should show an * or not

Headings

Item Description
Heading1 font size
Heading2 font size
Heading3 font size
The font size of the headings
Headings color The color of the headings. “inherit” will keep them the same color as your base font

Engaging Networks Wide Template & Engaging Networks Multistep Template

These are legacy blueprint options. They have been designed and tested for most page types, except Events, eCommerce (for which there is a dedicated blueprint template) and Click to Call

These are essentially the first versions of the “Free & Flexible page template V2” template. The wide and multistep have different page widths so can be used depending on the layout of your pages. 

The blueprint options are similar to the newest V2 version, but do not have as many choices.

E-commerce Template (Symbolic Gifts)

Ecommerce pages are designed as a microsite, and therefore the standard templates may not work as well for these as for other page types. Therefore, we have created a dedicated template for these page types.

Creating your own blueprint

Read this article for more

 

Updated on October 13, 2021

Was this article helpful?

Need Support?
Can’t find the answer you’re looking for? Don’t worry we’re here to help!
Contact Support