Templavoila: Add flexible content to a page

So you've created a flexible content element (FCE); a template for 2 equally wide columns. If you don't use the TYPO3Buddy css file, you obviously have to add css which styles the flexible content element.

To add this element to the "2 columns without menu" page from our example, click on "Page", click on the "2 columns without menu" page and click on the green plus icon to add content, like you did with regular content. A list of content elements will appear. This time, choose "2 Column template" at the Flexible content section:

The next screen will look like regular content, but the Type is set to Flexible Content. Enter a header. This header will be for administrative purposes only (to locate the element in "List" mode, for example), so you will have to set its type to "hidden". This way it will not show on the website.

At the bottom of the screen shot above, at the "Content" part, you'll see two content containers; "Column left" and "Column right". It is possible to provide them with (existing) content by clicking the map icon besides those containers, but we'll just hit the "save and close" button for now. Remember, if these boxes are empty, nothing will show on the website! It is possible that there's content on the page (visible in "List" mode), but not linked to the flexible content containers. If so, you can assign content to those boxes here, by clicking the map icon next to the content boxes in the screen shot above.

After having clicked the save and close button, you'll see that there has appeared a new element on the page, the 2 Column container. To add regular content to the columns, click the green plus icons.

Now is the time to view the result of your hard work. Since your website doesn't have menus yet, you have to navigate manually to your "2 column without menu" page. First, obtain the page ID by hovering on the page icon of the page in de page tree. Then type "http://yourserver/index.php?id=8" in your browser URL bar, where 8 is the ID of the "2 columns without menu" page in this example. Of course you need to replace "yourserver" with the name of your server. Or you can just click the "View" item in the WEB menu of TYPO3.

The result will look like this... Nice!

If there's still white space on the left in the content part of your website, you either didn't create a new Templavoila template object, or you forgot to set the template for the "2 columns without menu" page, as documented here. When you've created the new template object, also fill the "1 column without menu" page and it will look like this:

Wow, that actually looks pretty good, doesn't it?

If you've come this far, good job! You've pretty much built an entire TYPO3 website, really fast. We'd really appreciate if you'd consider a small donation to keep the TYPO3Buddy website up and running. You can do this by clicking the donate button on the right. You'll be part of our contributors' list too! Thanks in advance!

The screen shots show the website without all other parts (header and menus) being filled with content, so let's continue with the next chapter!

Next step: populate the website with content with typoscript ->