We'll start where we left off in the previous step, where all data elements were created. When mapping (linking) the elements to the HTML template, you always have to start with the root data element. This will be the body of your HTML template and the main container for the Templavoila data structure. Click on the "Map" button:
After clicking on the "Map" button, your template will appear. As you probably can see, Templavoila doesn't handle the presentation of floating elements very well, so most of the time it's better to change the Mode from "Exploded Visual" to "HTML Source". After that, click on the "body" icon:
After clicking the body icon, choose "INNER (Exclude tag)" and click on the "Set" button:
As TYPO3 will generate the body tag, you don't need Templavoila to copy it from your HTML template. Therefore you've selected "INNER (exclude tag)". When you've hit the "Set" button, "Map" buttons will appear behind every data element. You'll start with mapping the "Header top left" data element:
After clicking on the "Map" icon for the "Header top left" data element, click on the corresponding div icon. Hover on it to see what the ID of the div is. Obviously, you look for "header_top_left". Click on that div icon:
After clicking the div icon, choose "INNER (Exclude tag)" and click on the "Set" button:
Repeat these steps for all other data elements until you've mapped them all and you see the following result, where you'll click on the "Save as" button:
The following screen will appear. Give your template a title. In this case it's the main template, so you can call it "Main template". After that, click on "CREATE DS/TO":
And you're done!
Finally, to double check your mappings, an overview of the data elements and the mapped divs:
|Data element||Field name||Mapped div id|
|Header top left||field_header_top_left||header_top_left|
|Header top right||field_header_top_right||header_top_right|
Please note: field names and div ids do not need to be the same. However, it is good practice to be consistent in giving names.