Templa Voila is an extremely powerful templating engine for typo3.

With it you can use virtually any html page(s) as the basis of the template(s) for your site, and change the template of any given page and its descendents very easily.


  • Design the page with any editor that can produce (X)HTML.
  • It is easiest to set up a fileadmin folder on your PC, with sub folders as appropriate for all the files associated with the template.
  • Normally, this design would include elements for the most complex layout you are likely to use on the site, as this makes it easier to produce templates for simpler pages based on sub-sets of the complex page.
  • Most sites benefit, for example from having the option on a page-by page basis, to have 3, 2 or 1 column(s) in the main content area, and these can often be mapped from a single (X)HTML master layout file.
  • If you are planning to include extensions such as log-in boxes on all pages, or menus you need to add placeholders for them, which are appropriate to the sort of element they are (block elements such as divs for block elements, inline elements such as spans for inline elements)
  • If a given area of the page will contain multiple content elements which apply to that page only, you normally only need to define a single element for them.
  • Upload the files to the fileadmin folder on your site, which is accessed through the Filelist plugin. (or use ftp or any other means)
  • Within the TemplaVoila interface (Accessed from Web<TemplaVoila), you indicate which area/element of the page is designed for which kind of content using a point and click interface.
  • As you do this you define what sort of variable content should be included in each section of the page, and then, as appropriate, define that element to be replaced with content elements from the back-end, or insert references to typoscript or other objects.
  • Anything not included in the abstracted areas appears unchanged when the template is displayed
  • You can add additional fields for elements which do not appear in the current template, and which may be needed later, without mapping them to the HTML template.
  • You also indicate which elements from the header area of the page should be included with the template, and which should be excluded.

What the system then does

The system then breaks the page down into a Data Structure (DS), and a Template Object (TO).

The Data Structure

The Data Structure is an abstract list of potential page elements, and does not in itself contain any spatial information. Rather it links what might appear on a page to the code which would be used to generate it.

Template objects

A template object connects the Data Structure to elements in an HTML file, thus connecting abstract data elements to positions on a visible page, within which they are embedded.

A single data structure can be referred to by many template objects, each of which can refer to a different HTML template file, within which the same data elements may be differently spatially organised, and embedded in a different containing design.

The HTML template itself is not modified by the process of mapping: the information, including HTML code which defines the overall look of the page is included in the Template Object. For this reason, you can re-edit the HTML template at will and upload the revised file.

The revisions do not change the appearance of the site unless and until you remap the template object.

How they relate 

The Data Structure provides the connections between the various content elements of your pages and the underlying system, its database, and other files.

Each template object surrounds these content elements with the HTML necessary to display a page.

The HTML templates determines the basic layout.

Why do it this way? 

TemplaVoila! provides a three-level model for site construction that separates page layout from page content and page configuration, making it much easier for the various people, each with their own skills, that normally interact to produce a website, to concentrate on their own area of expertise, without needing to worry about what the other is doing.

Because of this separation, it is much easier:

  • to provide a site with a variety of different designs
  • to provide variations of the same design, modifying numbers of columns or navigation layout, for example, to deal with the different functions of different pages or sections
  • to modify a single part of the system without having to change the rest
  • to upgrade the design of a section or the whole site without having to rewrite the content of the site

Flexible Content Elements

Templa Voila is not limited to working with whole pages. You can also use it to abstract what are called  Flexible Content Elements: effectively templates for parts of pages, which can combine arbitrary collections of other content elements.

These have their own Data Structures and Template Objects, independent of the page Template Object and Data Structure.

This allows you to combine a number of content types that you want to go together in more-or-less complex layouts, and also to provide libraries of alternative sub-layouts for parts of pages - for example, to alternate one and two columns in the vertical layout of the page.

Most of the content type options described below apply more to flexible content elements than to page templates, and by using them you can build up complex repeating layouts independent of extensions.