iFrame blueprint templates for page-builder

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. 

Features

  • No margins or padding means by default this template will have the content flow in where you embed it within the parent site

  • Code will ensure your social links open in the parent site

For other sample templates that are available, click here.

How to create a template from this 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 “iFrame Template (beta)” (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.

Editing iFrame blueprint templates

These are the blueprint options available:

Design tab

Item

Description

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

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

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

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