Template

Fully Customizable Site Template

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

The site template give you the ability to modify the underlying template code for your entire site. It's perfect for placing scripts, such as Google Analytics anywhere within the page structure.

The site template is used on every page of your website. If you need to insert a script just on specific pages, you should use the page level code areas instead.

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

To reference a file in you Resources folder you can use the following page tag to get the correct path to the resources folder:{{page.resourcesPath}}.

The following example shows how you might link to a "store.js" file that's in a "scripts" folder in the Resources area.

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

Site Template Example

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

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

<!doctype html>
<html {{page.languageAttributes}}>
<head>
    {{page.customHeadStart}}
    {{page.componentHeadStart}}
    
    <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>
    {{page.customBodyStart}}
    {{page.componentBodyStart}}

    {{page.content}}

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

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

You might like to add Twitter/X specific meta tags to your site so pages display correctly on their platform. Simply add the following 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 videos will show you how to use the Template feature in Elements. The videos were recorded with a development version of Elements so the feature(s) available now may differ slightly to those in the video.

PreviousSite Settings NextPublishing

Last updated 1 month ago

Was this helpful?

{{page.customPageStart}} {{page.componentPageStart}} <!doctype html> <html {{page.languageAttributes}}> <head> {{page.customHeadStart}} {{page.componentHeadStart}} <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> {{page.customBodyStart}} {{page.componentBodyStart}} {{page.content}} {{page.componentBodyEnd}} {{page.customBodyEnd}} </body> </html> {{page.componentPageEnd}} {{page.customPageEnd}}

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

Properties

Site Template Example

Example of adding Twitter/X social tags

Dev Diary Videos for Site Templates

Properties

Site Template Example

Example of adding Twitter/X social tags

Dev Diary Videos for Site Templates