TYPO3Buddy is on FacebookTYPO3Buddy is on Twitter

TYPO3 Fluid: Add content to the pages

It's time again to add some content to these pages which have a new layout. Click on Page, click on the "1 column without menu" page, click on the green plus icon in the content box, choose "Regular text element", add a header and some text and save and close it. You'll end up with this:

TYPO3 Fluid tutorial: Add content to the website - TYPO3Buddy website tutorial

Note that the title of the content box is "Content main (without menu)". If it's not, you've missed a step, or you forgot to save your work.

For the next page, the "2 columns witout menu" page, you'll see 2 content boxes: content column 1 and content column 2. Fill them with content. You'll end up with something like this:

TYPO3 Fluid tutorial: Add Fluid 2 column content to the website - TYPO3Buddy website tutorial

Great! Wanna see the result? Since you don't have a menu, you'll have to navigate manually to those pages. How? First, you have to identify the ID of those pages. This kind of works the same way as identifying the ID of a backend layout. You either hover with your mouse on the page icon in the page tree, or you edit the properties of a page and look for the ID in the right bottom corner, which says something like "Page [8]". Get that ID and use it in the URL like this: http://yourserver/index.php?id=8, where 8 is the ID of the page (which is the 2 column page in this example). At this point you'll see something like this:

Fluid website result - TYPO3 website tutorial

Please note: when using a recent version of TYPO3, loading your website at this point will result in an error. Temporarily remove all references to typoscript objects (<f:cObject ...>) from your template files to get a result like the screenshot.

You can also click on the "View" menu item in the "WEB" menu to view the page inside TYPO3 (note that this screen shot is taken from the Templavoila tutorial):

TYPO3 View example - TYPO3Buddy website tutorial

Of course, your website won't have any content in it, except for the content you've just put into TYPO3. This is how it will look like though:

TYPO3 Fluid tutorial: TYPO3Buddy website result

The example above shows the website how it will look like when you have added all the necessary typoscript in the next chapter.

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. That's great! We would be really grateful 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!

Are you ready for the next step? Populate the rest of your website with cool content? Dive into some hardcore typoscript action? Alrighty then.

Next step: add the logo, header image and menus to the website with typoscript ->

The TYPO3Buddy website is a tutorial to rebuild the TYPO3Buddy website from scratch. You can choose from a TYPO3 Fluid tutorial and a TYPO3 Templavoila tutorial. You'll build TYPO3 websites like you've done so for years!

Kind reminder! This tutorial has been tested with and updated for TYPO3 v10. Please keep in mind that the tutorial has once been set up for TYPO3 v6. It follows some deprecated conventions. If so, this will be mentioned in the tutorial.