Templavoila: Flexible content elements (FCE)

Flexible content is content with a layout formatted by a template. Consider the following example. You want the content to be presented in two equally wide columns. Of course, you can do that with a regular content element and put an HTML table in it. However, you want to reuse this setup and you want total control on how it's styled, wherever it's used.

To create a flexible content element (FCE), you also need an HTML template. In our example the HTML template for the flexible content element is integrated in the "content_main" part of our main HTML template. So have a look at the HTML template and search for the "content_2column_container" div. Eventually, it will look like this:

When you have a look at the HTML source of this page, you will notice that the content above is in a table. That's because this website is based on Fluid templating and Fluid does not support flexible content elements the way it's setup with Templavoila.

So we'll start creating a template, the same way as we did for the website. Click on Filelist, click on the templates folder, right click on the file icon of the HTML template and choose Templavoila:

It is possible that the next screen shows the data elements of the main template. Click on "Clear all" to clear all data elements. Make sure you're not editing the main template! To see if you're creating a new template object and data structure, check if there's "[NEW]" next to "Template Object" and "Data Structure Record".

Next, you'll create 2 data elements: Column left (field_content_column_left) and Column right (field_content_column_right). The latter is shown in the image below. Both will have "Page-Content Elements [Pos.: 0]" as Element Preset.

Click on Add or Update and Cancel/Close.

Next we'll map the root element.

Change the mode to HTML source. Scroll down to the "content_main" div. Look for the "content_2column_container" div and click on the corresponding icon.

Set the HTML path to "OUTER" and click on "Set". This element is set to OUTER because it has no parent container that includes this div tag. Templavoila needs to include it.

Map buttons will appear for the column left and column right data elements. Click'em.

Map the data elements to their corresponding divs (content_column_left and content_column_right):

Set the HTML path of both elements to "INNER" and click the "Set" button.

With all elements mapped, click the "Save as" button.

Enter a title of the template, which will be "2 Column template". The template type will be "Content Element". Click on "Create DS/TO" to create and save the template:

We're ready to add some flexible content to a page! Next step >