Tip:
Highlight text to annotate it
X
Let’s have a look at how the different components: Master Template, Content Template and Content Components
work together to form a functioning site
First and foremost, you need to have planned how you want your site to look and feel
and what will be the layout and functionalities.
We start with the Default Template to create a site wide background and a menu.
Double-click the Default Template to open it on canvas.
First we create the layout by adding a three row and two column table.
We grab the corner of the table and drag it to a suitable size.
We then right click the upper left corner to open the settings box to edit cell.
In the Style Tab’s dimensions, we define the appropriate row heights in pixels.
Then we navigate to attributes tab to merge the cells by defining number two for "colspan".
Click OK and repeat the same process for footer.
Then lets go to the settings of the middle left cell and define width, this time in percentage
which allows the background to scale according to the size of the displays.
Always remember to save
Now we go back to the table settings by double-clicking the table and again navigate to the style tab
We select a background image by choosing ‘define’ on the drop down menu and click on ‘select’.
In the file list view we click on ‘add file’ to bring in the correct image from our computer.
We don’t want the image to be repeated, so we choose "no-repeat".
Now the background image is nicely shown on the canvas.
Let’s then put a link on the header by dragging and dropping it from the elements tray.
In the appearing settings box you may define the target of the link.
In this case we want it to point to the HammerKit website.
make sure that the entire URL is written correctly
You can either type text to the link or choose it to be a so called container,
which means that you can add another element to create the visual part.
We drag an image element on top of the link and select the HammerKit logo.
We want the left column to act as a menu for the site.
Let’s do it by adding a couple of link elements.
Now we want the links to point to content on the website instead of an external source.
In the settings box we choose the link to point into a content component.
This time we will also be happy with a simple text link and write the text directly here.
In this case our background is dark, so in the Style Tab we change the default blue to a lighter color.
We also change the font size to a bit bigger one.
We then repeat the process and make a link for another component.
We add some line breaks to place the links on top of each other.
These can also be created by just pressing ‘Enter’.
saying after editing
A key element for any template is a Component Include function.
This element adds a place holder for the one or several components you want to show on a template.
From the Elements tray we add a Component Include Element on the right column.
We choose “Include template’s content component” option.
This means that the template will show which ever component is being called.
Now the Default Template is done and we can move on creating more components.
Let’s then add something in the two content components.
Open them by double clicking.
It can be just a simple image for Component number 1.
Let’s drag an image on the canvas.
You may either select your image from a folder or URL.
Let’s then add a bit of styling to make the image slightly transparent.
Remember to save the components individually
For the second component we add a text element and write just Hello World.
Let’s apply some of the rich text editor’s features, such as font, color
and what ever you like to use for styling.
The master template is useful when you want to include site wide functionality,
such as an analytics script that will track visits to the whole site.
Let’s add some content on the Master Template.
Open it by double clicking.
We want to include a visitor tracking script and this can be done by simply adding
a plain text element and pasting the script there.
Now the code functions in the background and registers all visitors navigating to any component
included on your entire site.
Like on any template, we need to place also here a component include element.
Note that you can also build a site without a Master Template.
Now just save and preview
We see a fully functional site made in just a few minutes.
Now that you are familiar with the logic, you can start creating sites
and apps from as simple as this example to more complex ones.