Site Template

Customise the HTML template used by every page of your website

The site template is only used during preview and export. It is not used in Edit mode.

The site template lets you modify the underlying template code for your entire website. It is useful for placing scripts, such as Google Analytics, anywhere within the page structure.

The site template is used on every page of your website. To insert a script on specific pages only, use the page-level code areas instead.

Template Project Settings displaying the editable site HTML template

Properties

The Site Template has access to the following properties.

Property Name

Type

Description

{{site.title}}

String

Website title

{{site.url}}

String

Website URL

{{page.title}}

String

Page title

{{page.path}}

String

Page path from site root

{{page.languageAttributes}}

String

Page language attributes

{{page.resourcesPath}}

String

Path to site resources directory

{{page.opengraph}}

String

OpenGraph social meta tag

{{page.social.title}}

String

Title for social media

{{page.social.description}}

String

Description for social media

{{page.social.url}}

String

Full page URL

{{page.social.image}}

String

Image for social media

{{page.content}}

String

Page content

{{page.componentHeader}}

String

Headers required by components

{{page.componentCSS}}

String

CSS required by components

{{page.componentJS}}

String

JS required by components

{{page.componentPageStart}}

String

Code required by components at start of page

{{page.componentPageEnd}}

String

Code required by components at end of page

{{page.componentHeadStart}}

String

Code required by components at start of headers

{{page.componentHeadEnd}}

String

Code required by components at end of headers

{{page.componentBodyStart}}

String

Code required by components at start of body

{{page.componentBodyEnd}}

String

Code required by components at end of body

{{page.customHeader}}

String

Custom page headers

{{page.customCSS}}

String

Custom page CSS

{{page.customJS}}

String

Custom page JS

{{page.customPageStart}}

String

Custom code at start of page

{{page.customPageEnd}}

String

Custom code at end of page

{{page.customHeadStart}}

String

Custom code at start of headers

{{page.customHeadEnd}}

String

Custom code at end of headers

{{page.customBodyStart}}

String

Custom code at start of body

{{page.customBodyEnd}}

String

Custom code at end of body

{{page.bodyClasses}}

String

required inside of classes body tag to support background colour

{{page.bodyAttributes}}

String

Should be placed inside of body tag to support custom attributes

To reference a file in your Resources folder, use the {{page.resourcesPath}} page tag to get the correct path.

The following example links to a javascript.js file in a scripts folder within Resources.

<script src="{{page.resourcesPath}}/scripts/javascript.js"></script>

Site Template Example

The following is an example of the default site template. The template is used only during preview and export, not in Edit mode.

{{page.customPageStart}}
{{page.componentPageStart}}

<!doctype html>
<html class="scroll-smooth" {{page.languageAttributes}}>
<head>
    {{page.customHeadStart}}
    {{page.componentHeadStart}}
    
    <meta charset="utf-8">
    <meta http-equiv="x-ua-compatible" content="ie=edge">
    <meta name="viewport" content="width=device-width">

    {{page.componentHeader}}
    {{page.opengraph}}
    {{page.customHeader}}
    
    <title>{{page.title}}</title>
    
    {{page.componentCSS}}
    {{page.customCSS}}

    {{page.componentJS}}
    {{page.customJS}}

    {{page.componentHeadEnd}}
    {{page.customHeadEnd}}
</head>
<body class="{{page.bodyClasses}}" {{page.bodyAttributes}}>
    {{page.customBodyStart}}
    {{page.componentBodyStart}}

    {{page.content}}

    {{page.componentBodyEnd}}
    {{page.customBodyEnd}}
</body>
</html>

{{page.componentPageEnd}}
{{page.customPageEnd}}

You can add Twitter/X-specific meta tags so your pages display correctly on the platform. Add the following code to your site template.

    <!-- Twitter/X Card Tags (Ensures Proper Display on Twitter) -->
    <meta name="twitter:card" content="summary_large_image">
    <meta name="twitter:title" content="{{page.social.title}}">
    <meta name="twitter:description" content="{{page.social.description}}">
    <meta name="twitter:image" content="{{page.social.image}}">
    <meta name="twitter:url" content="{{page.social.url}}">

Dev Diary Videos for Site Templates

The following video shows you how to use the Template feature in Elements. It was recorded using a development version, so the current interface may differ slightly.

PreviousAdvanced Settings NextBrowser Preview

Last updated 10 days ago

Was this helpful?

Good afternoon

Properties

Site Template Example

Example: Add Twitter/X Social Tags

Dev Diary Videos for Site Templates