Advanced Template Features - Iluvana CMS Documentation

Shared Templates

Shared templates are reusable HTML fragments injected into pages through placeholders. Your header and footer live here, and so do the page-level meta tags and script blocks.

Templates the platform creates for you

When a theme is set up, the system guarantees a set of required shared templates so pages always build correctly. You do not create these yourself — they appear ready to edit:

Auto-Provided Shared Templates

Metatags — the title, description, keywords, and Open Graph tags for the page.
Scripts in Header / Scripts in Footer — slots for analytics, tag managers, and other scripts.
Declarations in Header / Declarations in Footer — slots for font links, CDN stylesheets, and similar declarations.

Edit their contents freely, but you generally will not add or remove these — the structure relies on them existing.

Templates you build

The fragments unique to your design — most commonly the header and footer wrapper — are the ones you add yourself. Name them deliberately, because the name becomes the placeholder:

Template name:  Headercontainer
Reference it:   {{SHARED_HEADERCONTAINER}}

Template name:  Footercontainer
Reference it:   {{SHARED_FOOTERCONTAINER}}

Example: Shared Stylesheets

Font and stylesheet declarations that must load early belong here:

Editing: CSS Declarations

Back to Templates Save Template

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/.../font-awesome/6.5.1/css/all.min.css">  <link rel="stylesheet" href="https://use.typekit.net/xxxxxxx.css"> <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Cormorant+Garamond&display=swap">

A trimmed view — declarations are plain markup that loads in the document head.

Example: Head Section with Shared Stylesheet Placeholder

The wrapper your navigation renders into. Structural markup, not content:

<head>
    <!-- resource links -->
    {{SHARED_STYLESHEET_RESOURCE}}
</head>

Example: Metatags

The Metatags template is mostly placeholders — the values come from each page's settings at build time:

<!-- Page Meta Tags -->
<title>{{page_meta_title}}</title>
<meta name="description" content="{{page_meta_desc}}">
<meta name="keywords" content="{{page_meta_keywords}}">

<!-- Open Graph -->
<meta property="og:title" content="{{page_og_title}}">
<meta property="og:description" content="{{page_og_description}}">
<meta property="og:image" content="{{page_og_image}}">
<meta property="og:url" content="{{page_og_url}}">
<meta name="robots" content="{{page_meta_index}}">
<meta name="format-detection" content="telephone=no">

Slug, name, placeholder The placeholder is always SHARED_ followed by the template name in uppercase with spaces removed. "Header Container" and "Headercontainer" both resolve to {{SHARED_HEADERCONTAINER}}.

Structure Templates

A Structure template is the complete <!DOCTYPE html> document shell — the outer wrapper that surrounds every page. It defines the <head>, the <body>, and the placeholders where your shared elements, page data, and content are injected.

What a structure looks like

Here is a complete, working structure. Notice that almost every meaningful position is a placeholder — the structure itself rarely contains literal content:

<!DOCTYPE html>
<html lang="{{META_LANGUAGE}}-{{META_REGION}}">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    {{SHARED_METATAGS}}
    {{pa_css_critical}}
    {{template_header}}
    {{page_header_addons}}
    {{_page_stylesheet}}
</head>
<body class="{{page_class}}">
    {{SHARED_HEADERCONTAINER}}
    {{content}}
    {{SHARED_FOOTERCONTAINER}}
    {{page_footer_addons}}
    {{_page_javascript}}
</body>
</html>

The visual structure editor

Unlike the other types, structures open in a line-by-line visual editor rather than a plain text box. Every line gets a control on the left edge, and lines are colour-coded by what they contain so you can read the document at a glance.

Structure Editor — Main Site Structure

<!DOCTYPE html>

<head>

[SHARED_METATAGS]

</head>

[SHARED_HEADERCONTAINER]

[CONTENT]

insert a line remove a line doctype tag comment placeholder

In the structure editor, placeholders appear in bracket form ([SHARED_HEADERCONTAINER]); the platform resolves them at build time.

Inserting an element

Click any on the left edge to open the element selector at that line. Choose a shared element from the dropdown, or use the toggle to switch to a free-form HTML box for one-off markup. Confirm with the check and the line drops into place.

Insert element

📄 Choose element…

The element selector. The page icon toggles between a shared-element dropdown and a raw-HTML field.

Set it as the default Mark your main structure as the system default so every new page layout is wrapped in it automatically. Default structures are protected from deletion.

Page Layouts

A Page Layout sits between the structure and your content. The structure provides the document shell; the layout arranges what goes inside the body for a particular kind of page. Pages are assigned a layout, and the layout is associated with a structure.

What a layout contains

Layouts are usually small — they position the main content and any layout-specific shared elements. A minimal layout can be as simple as:

<!-- begin content -->
{{content}}
<!-- end content -->

A richer layout might frame the content with a sidebar or hero region built from shared elements:

{{SHARED_PAGEHERO}}
<main class="layout-body">
    <div class="layout-main">{{content}}</div>
    {{SHARED_SIDEBAR}}
</main>

Associating a structure and setting the default

On the Page Layout tab, each layout exposes a Structure dropdown and a Default selector. The dropdown chooses which document shell wraps the layout; the default layout is applied to new pages automatically. New layouts are associated with the default structure for you, so you only change this when you need a different shell.

Templates — Page Layout

Standard Page

Structure Main Site Structure

Default Edit

Print Page

Structure Print Structure

Edit

Two layouts associated with different structures — one standard, one print — with "Standard Page" set as the default.

CSS / Stylesheet Files

Stylesheets are managed as files rather than inline templates. Each file carries loading options — where it loads, whether it is minified, and how it is linked — and the platform emits the correct tags wherever you place the {{FILES_STYLESHEETS}} placeholder.

Templates — CSS

main.css

Updated May 10, 2025 by you

Header Minify media: all rel: stylesheet

Edit

A managed stylesheet with its loading options shown as chips.

Per-File Stylesheet Options

Placement — load the file in the document header (the usual choice for CSS).
Minify — the platform generates and serves a minified copy automatically, keeping your source readable.
Media — the media attribute, for example all, screen, or print.
Rel — the link relationship, normally stylesheet.
Disabled — keep a file managed but excluded from output, useful while testing.
Sort order — controls the order files are emitted, which matters for the cascade.

Critical CSS For above-the-fold styles you want inline in the head, use the dedicated critical-CSS placeholder ({{pa_css_critical}}) in your structure rather than a linked file. This avoids a render-blocking request for your most important styles.

JavaScript Files

JavaScript files work like stylesheets but with script-specific options. Place the {{FILES_SCRIPTS}} placeholder where scripts should be emitted — usually near the end of the body.

Templates — JavaScript

app.js

Updated May 11, 2025 by you

Footer Minify defer async type: text/javascript

Edit

A footer-loaded, deferred, minified script. The sort handle reorders files within their placement.

Per-File Script Options

Placement — load in the header or, more commonly, the footer so it does not block rendering.
Async — load the script asynchronously, without blocking parsing.
Defer — download in parallel but execute after the document is parsed (a safe default for footer scripts).
Minify — serve an auto-generated minified copy.
Type — the script type attribute, normally text/javascript.
Sort order — controls execution order among your scripts.

Placeholder Reference

A consolidated list of the placeholders you will reach for most. Page-data placeholders are filled from each page's settings; injection placeholders are filled by the platform during the build.

Page data & meta

Placeholder	Resolves to
`{{content}}`	The main page content. (Layouts may also see `{{CONTENTS}}` in generated defaults.)
`{{page_meta_title}}`	The page title.
`{{page_meta_desc}}`	The page meta description.
`{{page_meta_keywords}}`	The page keywords.
`{{page_meta_index}}`	The robots directive (index / noindex).
`{{page_class}}`	A body class derived from the page.
`{{META_LANGUAGE}}` / `{{META_REGION}}`	Language and region for the `html lang` attribute.

Open Graph

Placeholder	Resolves to
`{{page_og_title}}`	Open Graph title.
`{{page_og_description}}`	Open Graph description.
`{{page_og_image}}`	Open Graph image URL.
`{{page_og_url}}`	Canonical Open Graph URL.
`{{page_og_type}}` / `{{page_og_site_name}}`	Object type and site name.

Shared elements & injection points

Placeholder	Resolves to
`{{SHARED_NAME}}`	A shared template, by its uppercased name (e.g. `{{SHARED_HEADERCONTAINER}}`).
`{{template_header}}`	The platform's collected header output.
`{{page_header_addons}}` / `{{page_footer_addons}}`	Per-page header / footer additions.
`{{_page_stylesheet}}` / `{{_page_javascript}}`	Page-level stylesheet / script output.
`{{pa_css_critical}}`	Inline critical CSS for the head.

Managed files

Placeholder	Resolves to
`{{FILES_STYLESHEETS}}`	All active CSS files, with attributes and load order applied.
`{{FILES_SCRIPTS}}`	All active JavaScript files, with async / defer and order applied.

Two notations, one system You will mostly write placeholders as {{NAME}}. Inside the visual structure editor they are shown in bracket form ([NAME]) for readability — both refer to the same resolved value.

Back to Template Management