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

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

 

Updated on April 21, 2022

Was this article helpful?

Need More Help?
Can't find the answer you're looking for?
Contact Support