Customise and create templates
Templates are plain HTML and CSS. Copy one, change it and it appears in the Appearance page automatically.
Create a template
- Copy the folder
templates/moderntotemplates/mytemplate(letters, numbers, dash and underscore only). - Edit
template.json:name,descriptionandaccent(the default colour). - Edit
index.htmlandstyle.css. - Open Appearance. Your template appears with a live preview.
{
"name": "My Template",
"description": "A short description shown in the admin panel.",
"accent": "#0175B8"
}
Placeholder tags in index.html
| Tag | Output |
|---|---|
<site head/> | Required inside <head>: meta tags, base CSS, template CSS, colour and font settings, structured data. |
<site scripts/> | Required before </body>: the shared script (and the lightbox when needed). |
<site content/> | Required. All sections or the current page. Put it directly inside <main>. |
<site page_title/> | Text for the <title> element. |
<site title/>, <site description/> | Site name and meta description (escaped). |
<site lang/> | Language code for the html tag. |
<site logo/>, <site logo_text/> | Logo image or text, and the text only. |
<site menu/>, <site footer_menu/> | Menu links (with class nav-link) and plain footer links. |
<site footer_text/> | Footer text from Branding. |
<site contact_details/>, <site contact_block/> | Phone, email and address list; or the same in a ready footer column (empty when nothing is set). |
<site social_links/> | Social icons (empty when none are set). |
<site home_url/>, contact_url, blog_url, theme_url | Useful addresses. theme_url is the template folder, for images. |
<site year/> | The current year. |
{{ get_in_touch }} | Any text key from include/texts_en.php. |
CSS variables
css/base.css styles all section types using variables. Define yours in your style.css under :root:
--primary --primary-dark --primary-soft --primary-rgb --on-primary --bg --bg-alt --surface --text --muted --border --radius --radius-sm --shadow --shadow-sm --font-body --font-heading --container --section-y --header-h --header-offset
When an administrator picks a colour or font in the Appearance page, the system overrides --primary and its relatives and --font-body / --font-heading after your CSS.
Helpful HTML classes
- Every section:
section,section-<type>(for examplesection-pricing),section-firstand, for the hero,is-hero. The hero image is also available as the CSS variable--hero-image. - Inside:
container,section-head,section-title,section-subtitle, and card classes such asfeature-card,team-card,pricing-card,testimonial-card,gallery-item,slide,faq-item,blog-card.
JavaScript hooks
Give the header data-header (gets is-scrolled), the burger button data-nav-toggle and the menu container data-nav. Opening the mobile menu adds nav-open to the body. The active menu link gets is-active.
Adding tracking code
To add Google Analytics or any other script, paste it into your template's index.html just before </head>. Remember that visitors in many countries must consent before tracking starts.
The quickest start: duplicate the Modern template and change only the CSS variables at the top of style.css.
Last updated