Templavoila: Create an additional template object and data structure

In this step you will create an additional template object and data structure. It will be a "1 column wihout menu" template. You can use this template when you need the full width of your website for content. Your new template will be based on the existing "Main template" template. Click on Templavoila, then on the Storage folder, then, if necessary, on the Page templates tab and finally on the "Update mapping" button:

In the next screen, click on the "Information" tab and click on the "Modify DS/TO" button:

A warning message shows, saying that editing the DS/TO this way may remove any manual changes. Since you haven't done that, it's safe to click "OK".

Be aware that at this moment you are editing the existing Main template object, indicated by the red rectangle in the screen shot below! To make sure that you don't overwrite the main template, make a copy of it immediately by clicking the "Save as" button:

You have seen this before. This time, the title of DS/TO will be "Main template without menu", Template type will be "Page template", it will again be stored in the Storage folder. Then click on the "CREATE DS/TO" button:

You will return to the previous overview. As you will see, the template object at the top now indicates you're editing the "Main template without menu" template. As the title suggests, this template won't have a menu in the content part of the website, so you will delete the Content menu by clicking the corresponding trash can icon:

Click "OK" when you're asked if you're sure you want to delete this data structure entry. Are you sure? Is it the "Content menu" entry? Good. Next, you will have to remap the "Content main" element, to make sure the "content_menu" div won't be included by the Templavoila engine. Click on the "Remap" button of the "Content main" element:

Make sure you're in "HTML Source" mode, search for the "content" div and click on its corresponding div button:

And click the "Set" button:

And finally, click the "Save and exit" button:

You'll see the new template appearing in the template overview. Next, you'll need to make sure that the "1 column without menu" page and the "2 columns without menu" page will use your new template, by right clicking the page icon in the page tree and choosing edit:

Click the "Appearance" tab and choose your new template at the "Use template design" part:

Save your changes. Do the same thing for the "2 columns without menu" page. This page won't have 2 columns yet, it will just have the same layout as the "1 column without menu" page. You're going to make a special template for the 2 columns, called "flexible content element". You will be able to use this element anywhere on the website! That's great. So let's continue making this flexible content element. And add content to the new layed out pages after that.

Please note that there are other ways to get rid of the content menu. You can create an additional CSS file, which makes the content_menu div hidden and the content_main div as wide as the website. You then can include this CSS file with typoscript for certain pages (with the PIDinRootline condition, for example), or include the CSS file with your new Templavoila template object (as described here), which will just be a copy of the existing template object.

Next step: create a 2 column flexible content element ->