Template Content

Step 2 - Template >

Template Content

Previous pageReturn to chapter overviewNext page
Show/Hide hidden text

After you have chosen to work on a default template or an empty template and defined the Template Settings, you can use the features in this window to customize the template even further by working on the header, footer and sidebar (if there is one), adding various types of content, such as menus, texts, pictures, animations, galleries, HTML code, search fields and links.

You can work on the header, footer and sidebar of the graphic template for both the Desktop display and, if you are working on a responsive website, the various viewports that correspond to the breakpoints that you have set up.

You must choose the Responsive Site option in the Resolutions and Responsive Design window if you want to create a responsive website.

Click to expand/collapse

The Template Content window is organized in the Header, Footer and Side Bar sections: the commands and options for all three are identical.

The Side Bar section is only present if Header, footer and left side bar or Header, footer and right side bar has been selected as the Structure type in the Template Structure window.

Click to expand/collapseReference: The template editor

If you have chosen to create a responsive website, the Template Content window shows a Responsive Bar that you also see in the Resolutions and Responsive Design window.

The Responsive Bar displays all the breakpoints that have been set up and the various intervals between each breakpoint: click on an interval to select it and define the header, footer and sidebar for the corresponding viewport.

As well as the Responsive Bar, this window also includes the graphic editor, with a Toolbar and, underneath it, the work area which automatically shows the background image of the header, footer or sidebar of the template you have chosen (default or custom). The image is shown in a 1:1 scale, and you can scroll it, if necessary. Any changes you make with this editor will be shown in real time in the image.

There is a Status bar immediately underneath the image that gives this information:

Position: this displays the x and y coordinates of the upper right corner of the selected object, with respect to the area occupied by the header, footer or sidebar.
Size: this gives the height and width in pixels of the selected object.

There is a list of all the objects that can be used in the template's header, footer and sidebar underneath the status bar.

These objects are the ones used to compose the pages (see Step 4 - Pages): they are easy to identify, thanks to the filters, and there is a preview available for each one.

Click to expand/collapseReference: The list of available objects

To insert an object in the template's header, footer or sidebar, select its icon from the list and drag&drop it in the editor, in the required position.

To make your work easier, the objects can be filtered and managed with these commands:

More Objects

This opens the Objects Management window where you can install, uninstall and update all the objects that are not included in the initial Program installation.

Categories

This option shows a list of the categories that are available for selecting objects that are used for a particular purpose. You can, for example, show all the Main Objects Page or the Main Objects model.

Search field

You can search the Object you want to use by name so to find it and make it immediately available for you to use it.

The objects that are included in the Main Objects Page and the Main Objects model are:

Once you have inserted an object in the template's header, footer or sidebar, click on the Content button (or double-click the object) to open the window for actually creating it.

Click to expand/collapseReference: The toolbar options

When you have added the objects you need to the work area of the template's editor, you can select them and use the options in the toolbar to work on them.

You can make multiple selections:

hold down the CTRL or SHIFT key and click on the objects you want to select
click on the work area and, holding down the left mouse key, move the mouse to draw a rectangle that includes all the objects you want to select.

The commands in the toolbar are:

Cut [CTRL+X] - Copy [CTRL+C] - Paste [CTRL+V]

To cut, copy or paste the selected object.

Undo [CTRL+Z] - Redo

These commands undo/restore the last operation to be carried out/undone.

Bring to Front - Send to Back

To bring the selected object to the foreground or background (to show it over or underneath any other overlapping object.

Working area

This opens another window where you can specify the appearance of the work area. The options are:

Background color: you can set the color of the work area background as Light or Dark, so that the inserted objects can be seen better.
Enable grid: if the grid is active, it will be easier to place and size the objects in the work area. You can define the Grid size of the snap grid.

Arrange

This indicates how the objects are arranged in the work area. The available commands are:

Position and Size: to specify the coordinates of the position and size of the selected object. The Keep Ratio option maintains the object's original proportions if you should resize it.
Horizontal alignment / Vertical alignment: these are active if at least 2 objects have been selected. They allow you to align the objects horizontally (left, right or center) or vertically (top, center, bottom).
Distribute: this is active if at least 3 objects have been selected. It arranges the objects so that they have the same space between them, horizontally or vertically.

Hidden object management

This option is available if you are creating a responsive website. You can indicate whether the selected object is visible or invisible in the viewport you are working on (which is set up with the Responsive Bar).

Click on the triangle on the button to open a menu with these items:

Hide for this viewport: the selected object will be invisible in the current viewport.
Hide for this and subsequent viewports: the selected object will be invisible in the current viewport and all the viewports with lower resolutions.
Hidden object management for this viewport: a window opens with a list of all the objects that are invisible in the current viewport. A preview is available for each one, and you can restore visibility from here.

Enter contents of the selected Object

This option opens a window where you can create the object selected from those in the template's header or footer. The window varies according to the type of object (text, image, etc.).

Some of the objects in the header and footer, for example the animation    and HTML code objects that you add will be visible only when the website is opened in a browser.

 


Read the guides:

-

How to change Header and Footer