Customizing your first Quanta pages

So you installed Quanta, huh!?

That's amazing!

Now that you have a running quanta site, it's time to learn how to create your first site / application.

1) Check your index.html

The first thing you want to do, is to edit the skeleton of your web app, aka the index.html file.

It probably looks like this.

Play around a bit with the index.html file, adding random text here and there, or slightly editing its basic structure.

Exercise: create a custom css file (i.e. /assets/mystyle.css) and include it in your index.html headers (i.e. )

2) Create new components and include them as blocks

Don't be fooled about the "component" or "block" words: we are still, always, talking about nodes - aka folders + json files.

A node's body, title, or other attributes, in Quanta can easily be used as a block, by using the [BLOCK] qtag.

In my projects, I like to put all the structural nodes inside a directory named _components, so it looks cleaner.

This is an example of components node structure taken from the site:

quanta components

I created a new node/folder per each component (header, footer, logo, etc.) so I can include it everywhere I want.

Now, this site's index.html page, looks like this:

<!DOCTYPE html>
<html lang="[LANGUAGE]">
<!-- Headers -->

<meta name="google-site-verification" content="ZYUhEnx0HWBqwNEA-meUbDpHyHXZ9zr5y-UgiAjqE8k" /i>
<meta name="google-site-verification" content="oIxywnCPeoi7quK2wwOmBEuLjYV4JUu7OKsuLQdtPkI" />
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />
<meta name="theme-color" content="#333">


<!-- Global site tag (gtag.js) - Google Analytics -->
<script async src=""></script>
window.dataLayer = window.dataLayer || [];

function gtag() {
gtag('js', new Date());

gtag('config', 'UA-90634835-3');

<!-- Body -->
<body class="canonical grid three-rows [BODYCLASSES]">
<!-- Display messages (if any) -->

<!-- Site's header -->

<!-- Currently viewed node's content -->

<!-- Site's footer -->



As you can see, code seems to talk by itself.

The html headers are completed with the [HEAD] qtag (including minified global JS / CSS files), and the [META_DATA] qtag, adding lots of useful metadata to your page (it can be hooked by modules, to customize meta tags).

Additionally, a couple other meta tags (charset and viewport), and some JS / CSS (i.e. quantasite.js) has been added in html, the old way.

This is not a mistake: Quanta gives you the freedom to choose your favorite approach. Your template files are white papers that you can use as you wish, by creating hypercomplex qtags, or by just adding the HTML code you want to see.

Exercise: create a custom node in the _components folder, by copy-pasting an existing one (i.e. the logo). Include it as a block in index.html, using the [BLOCK:yourcomponent] qtag.

3) Edit your homepage's tpl and metadata

The first thing you see, when opening your site, is the homepage.

Quanta will in facts load the home node by default, if no node is specified as a target.

Let's see how we structured the Quanta homepage in this site.

quanta home

As you see, the home node contains both a json file, and a tpl file.

The json file contains the home node's metadata. Its title, body, etc.

The tpl file contains the html structure of the home node; it represents, in facts, its template.

Both json and tpl files are optional in a node / folder. A node could just be a bunch of html code (as it happens with most components), and in this case it would only need a tpl.html file. Or a node could be just metadata (title, body, etc.), and it would only need a json file. 

In this case, it's both.

Let's see what the home/tpl.html file looks like:


[WRAPPER|grid_html_tag=section|grid_id=home-welcome|grid=grid|wrapper_class=grid grid-start-lg-2 grid-start-xl-3 grid-span-lg-10 grid-span-xl-8 p-3 p-x-lg-0 align-items-center:{CONTENT:_home-welcome}]

[CONTENT|grid_html_tag=section|grid_id=home-features|grid=grid p-x-1 p-x-lg-0 p-y-3:_home-features]

[CONTENT|grid_html_tag=section|grid_id=home-showcase|grid=grid p-x-1 p-x-lg-0 p-y-3:_home-showcase]


...oh yes! Again qtags, and no html at all!

That's the Quanta concept. While being free to add as much HTML as you want to your templates, you probably won't add any... in facts, you just need qtags.

Back to the example:

You will see several embedded blocks (that - just to make it clear once again - are nodes / folders!), plus an interesting qtag: 


This qtag, actually takes the body of the current (or target) node, and returns it. So, it will contain the body of the home node, that is taken from its JSON file. 

Of course, if the home node didn't have a data_en.json file, this attribute would be empty.

Exercise: try to add some text (i.e. "Hello world!") in your home's tpl.html file, and refresh the homepage in your browser. Do you see your text displayed?

Exercise: try to change the home's body in the data_en.json file, either using a json editor, or editing the home node with Shadow UI. Do you see your change?