iFrame blueprint templates for page-builder
- Michael Kalnicki
- Sam Louk
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
Go to Pages > Components, and then Templates on the left menu
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
Under Sample templates, click on “iFrame Template (beta)” (see below for a rundown), and then click
✔️ Select
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
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: |
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 | The font size of the headings |
Headings color | The color of the headings. “inherit” will keep them the same color as your base font |