TYPO3 Fluid: Update your typoscript "Main template" to use the content templates

To make your content templates selectable in the backend, you can link them to the corresponding backend layout. Therefore you need to edit your typoscript "Main Template" once more. Furthermore, you have introduced two new Fluid variables in the 2 column template; content_column_1 and content_column_2. TYPO3 needs to know about those, too. So they have to be configured. Update your typoscript "Main template" until it looks like this:

config.no_cache = 1
config.doctype = html5

page = PAGE
page.typeNum = 0

page.10 = FLUIDTEMPLATE
page.10 {
    format = html
    file = fileadmin/templates/layouts/main_layout.html
    partialRootPath = fileadmin/templates/partials/
    layoutRootPath = fileadmin/templates/layouts/
    variables {
        content_main < styles.content.get
        content_main.select.where = colPos = 0
        content_column_1 < styles.content.get
        content_column_1.select.where = colPos = 1
        content_column_2 < styles.content.get
        content_column_2.select.where = colPos = 2
    }
}

page.10.file.stdWrap.cObject = CASE
page.10.file.stdWrap.cObject {
    key.data = levelfield:-1, backend_layout_next_level, slide
    key.override.field = backend_layout
    
    default = TEXT
    default.value = fileadmin/templates/main_1_column_with_menu.html
    1 = TEXT
    1.value = fileadmin/templates/main_1_column_with_menu.html
    2 = TEXT
    2.value = fileadmin/templates/main_1_column_without_menu.html
    3 = TEXT
    3.value = fileadmin/templates/main_2_column_without_menu.html
}

page.includeCSS {
    file1 = fileadmin/templates/css/main.css
}

Take a good look at what parts have been updated, and what their function could be. You'll end up with this:

Save your typoscript! Please note that the follow-up numbers indicated in the screenshot above, need to correspond with the IDs of the backend layouts you've created. To find out the ID of a backend layout, click on list, click on "Storage folder" and then hover with your mouse on the icon of the backend layout element:

The ID should popup in a second. You can also edit the backend layout by clicking the pencil. The content type with its ID shows in the right bottom corner of the edit window and will look like "Backend Layout [1]", where the number is the ID. Check this. When you have deleted a backend layout, or created them in another order, the numbering will be different for you!

Next step: assign the backend layouts to the pages ->