Advanced HTML page templates

Every page-builder page requires a template which forms the top and bottom of the HTML document of the campaign page. The dynamic part that you use page-builder’s editor to build is sandwiched in between this header and footer.

Each template that you have will therefore be made of two blocks of HTML code. Each template will need to contain the appropriate html tags to make your live page a valid html document, and can also include calls for stylesheets and javascript files, favicons and so on.

The HTML templates are shared components, which means that several pages can use the same template and changes to the template will update all the pages using it. They are managed in Pages > Components > Templates and are set to be used for a campaign in the campaign’s admin screen. The dynamic content is managed by using page-builder’s editing tools.

Header

Edited in Components > Templates

Dynamic content (rows, columns, text blocks, form blocks etc)

Edited in page-builder

Footer

Edited in Components > Templates

HTML template – header and footer

The header and footer can have any HTML you like in it, so you can also include calls to external stylesheets or javascripts if you like. Files can be added to the files and images library.

For example, you might have this in the header:

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <meta name=viewport content="width=device-width, initial-scale=1">
  <title>${page~title}</title>
  <script src="https://aaf1a18515da0e792f78-c27fdabe952dfc357fe25ebf5c8897ee.ssl.cf5.rackcdn.com/1/jQuery-v3.6.0.js?v=1645177557000"></script>
</head>
<body>

And this in the footer:

</body>
</html>

When you create a page using this template, the bit between the <body> tags will be where the dynamic content sits. If you want a div to surround the dynamic content for example, then just add a <div>to the end of the header text box and a closing </div> to the start of the footer text box.

We supply several Sample Templates to use that you can look at, and also you can check this page for some examples .

Keep a simple template

It is recommended that, in addition to your HTML template, you have a “simple template” that you can use when troubleshooting pages. When troubleshooting, you can then check whether there is an issue in your HTML template’s code or something else, by switching to this template and re-testing the page. This header and footer code here is an example you can use.

What to include in the header

What you include in the header is up to you, although you must have the !DOCTYPE, <html>, <head>, and <body> tags in there so it is a valid html page. Other things to consider including are:

A !DOCTYPE declaration which must be the very first line of your header, e.g. <!doctype html>
A title tag. If you wish to dynamically get the title from the page’s settings, check this page on page tags
<meta charset=”UTF-8″> ensure that characters are displayed correctly
<meta name=viewport content=”width=device-width, initial-scale=1″> to zoom correctly on mobiles
Meta tags – note that our social networking tools will automatically set the title, description and image tags (see below) so you should not add these manually
A call to display a favicon
Calls to stylesheets or style tags
A call to jquery if you are using this (it is not automatically included)
Calls to javascript files
Google analytics or tag manager code
HTML to create the header (logo, menus and so on), so they are displayed but not editable within page-builder

It is recommended that you store files and images in the Engaging Networks library since files called from an external website could change or be removed without notice, breaking the page.

What not to include in the header

The following tags are generated automatically by the page via the social settings, so there is no need to have these in the header:

<meta name="title" content="Facebook/Google Share title "/>
<meta property="og:title" content="Facebook/Google Share title "/>
<meta property="og:description" content="Facebook/Google Share description "/>
<meta name="description" content="Facebook/Google Share description "/>
<meta property="og:image" content="Facebook-Google-share-image.png"/>
<link rel="canonical" href="https://actnow.ca.engagingnetworks.app/page/12345"/>
<meta property="og:url" content="https://actnow.ca.engagingnetworks.app/page/12345"/>
<link rel="image_src" href="https://example.com/Facebook-Google-share-image.png"/>

We don’t add twitter:title, twitter:description or twitter:image which you might want for Twitter Cards. However, Twitter will fallback to og:title and og:description etc if the Twitter-specific ones aren’t included, so it is recommended not to include those either.

The native social sharing tools in Engaging Networks will automatically append this data.

What to include in the footer

The footer should close off the body and html tags, and any other divs or other tags you have open in the header.

You can also add the footer html here, so it is displayed, but not editable, within page-builder.

Types of templates

What you want your pages to look like is up to you. You may wish to have a template that mimics the look of your website, so that when supporters go to an Engaging Networks page, they can’t tell they have moved server. Or you could modify it so that you remove some elements such as search and menus, so that there are less distractions for the supporter which hopefully means they are more likely to take part. Or, you could create a simple template with no logo or menus, that you can use for embedding in an iframe on your site.

Hosted pages

Hosted pages live on an Engaging Networks server, and their URL will start with ca.engagingnetworks.app, us.engagingnetworks.app, or your own subdomain if it has been set up to point to our server.

Often they are made to mimic the look of your website. The recommended steps to create a template like this (if you wish to this yourself) are:

Find a page on your website you want to mimic and get its HTML code
Strip out the content part of the code, which will instead be dynamically created by the software, and split the code into two (header and footer)
Remove any unnecessary HTML, such as menus, search boxes, or calls to JS files that you do not need
Upload any CSS, JS, image or font files you want to keep so they refer to files within your Engaging Networks library, and make calls to them in the code instead (it is better to host everything in one place). You may also need to amend CSS code so that they too refer to images within your library
Create your template in Engaging Networks and review and amend if necessary
Add any additional styles that are specific to the dynamic content of the page (rows, columns, blocks, fields, buttons and so on)
Test on various devices

Embedded pages

Embedded page templates are useful for when you want to embed your page within your website. They are created in much the same way as a hosted template, except they do not usually require any logos, menus, or padding, so that the iframe sits comfortably within the hosted website.

You should consider using a subdomain of the hosted site if doing this to ensure the iframe is not blocked by the browser, and you should also ensure you iframe settings are set in your page admin.

You may also want to add code to your hosting page that resizes the iframe when the browser page is resized.

Page-builder CSS

It is possible to amend some styles of form blocks, text blocks and other components via the block’s palette button. But if you wish styles to be universal or to have more functionality beyond the available functions, then it can be easier to link to your own css files or add inline style tags to the template Header.

Default CSS

When you view your page, page-builder will, by default, add its own css file called enPage.css. This is for some very basic formatting, and can be overridden if necessary.

The file sets the rows as flexboxes – they have a display of flex, which the columns use to position themselves. You do not need to use floats. A good guide to flexboxes is here. Note that at 600px width or less, the rows change to have a display of block.

Overriding the default CSS

If you wish to override styles that are in the default CSS, you can be more specific by adding a class to the body tag and using that in your rules. For example, you might add a class and call it “pb” so the body tag reads. Now you can be sure that rules such as .pb .en__field__input–text override any of page-builder’s default styles for that class.

Understanding the HTML structure and classes

Very roughly, the dynamic content within your Engaging Networks page is contained within a <form>. Inside that are divs that act as rows, and inside those are divs that act as columns. Blocks then sit inside the columns.

The easiest way to understand the HTML structure and which rules to apply to style components is to create your page and use your browser’s in-built “inspect” tools to see how it has been put together. The dynamic content occurs between your HTML Template’s header and footer. It consists of a form, and then one or more rows which each contain a column or columns. The form and text components then sit inside the columns. The rows and columns are divs with classes like this:

Note that en__component–row–1 refers to a row that contains a single column, but en__component–column–1 refers to the first column in a two-column row. Advanced rows can contain more than two columns and have a en__component–advrow class, while its columns have a “en__component–advcolumn” class.

Text blocks and form blocks have a class of en__component–copyblock and en__component–formblock respectively. All components (the form, rows, columns and blocks) have an en__component class.

Form blocks contain input fields and buttons along with labels in this structure:

Tagged fields have set classes such as en__field–emailAddress, while untagged ones will have a class such as en__field–NOT_TAGGED_35.

Some example CSS rules

These assume that you have a pb body class like <body class=”pb”>

To style a submit button

To style a submit button when the mouse hovers over it:

To add a mandatory asterisk after a label:

To add a border and glow to selected fields:

To hide the additional donation box on event pages:

Page-builder Javascript

Be careful using bespoke Javascript – it can break the functionality of your page-builder pages if not tested thoroughly. Read more on our warning here.

You can use Javascript and any other libraries such as jQuery in your pages. Note that any code that is in your template could run in the editor when you go to edit the page. This can potentially cause issues with the editor, so if they are one-off functions that you don’t want to be available to all pages that use the template, then use a code block instead, which do not run in the editor, and can be saved as shared components.

If you want to put the code in the template but not have it run in the editor, then surround your script with the below, which will stop it running in the editor:

You must test your scripts thoroughly to ensure they do not cause any problems. Some examples of scripts can be found here.