When building your video website, you have full control of how your video content is presented. For styling, you write your own CSS, for modifying behaviour or extending built-in functionality, you can use JavaScript; and when deciding exactly what content should be shown where and when on your site, you work with layout blocks.

Layout blocks are predefined pieces of content that you can pick and choose from as you like. They are divided into two different kinds that behave a little differently: Floating layout blocks and static layout blocks.

Floating layout blocks

With floating layout blocks, you can insert content into your layout grid, and you can specify which pages each layout block should be shown on or excluded from. As an example, consider the floating layout block Category list. When inserted into your layout, this block provides a list of all your public non-empty categories along with clickable links to each of these.

You add a floating layout block by going to Power Mode → Site Designer → Layout, and then choosing a layout block in the "Add a new block" dropdown menu and clicking the "Add" button.

Then you will be presented with the settings for that block. In the simple case of the category list layout block, you can choose whether the categories should be shown as list of links, or if they should be presented in a dropdown menu. When you save these settings, the layout block will be added to the layout grid, and you will see five small icons in the upper right corner of the block.

Each icon allows you to manipulate the layout block in the following ways:

Placement of the block

By clicking and dragging on the first icon, you can place the layout block exactly where you want in the grid, eg. in the sidebar or in the site header.

Entering the settings

If you wish to change the settings of a block after it has been added to the layout, simply click the gear icon and you will be taking to the settings of that block.

Editing the markup of a block

If you click the icon with the < > characters, you will enter the code editor, where you will be able to manipulate the HTML markup of the block and move content around using the Liquid templating language.

Cloning a layout block

If you wish to clone a layout block, click the cloning icon. This can come in handy if you want the same type of content to appear multiple places on the video site, but maybe with slightly different settings.

Deleting a layout block

You can delete a layout block from the grid by clicking the delete icon. This will remove the layout block from all pages, and the settings of the block will no longer be stored. Delete layout blocks with caution.

Custom includes

With custom includes you do not have to edit each layout block every time you want to change f.ex the thumbnails on your site. Simply make the change once, in the custom include template for Video Thumbnails. You'll find the custom include templates under Power Mode → Site Designer → Page Templates in the TwentyThree backend.

Static layout blocks

Static layout blocks contain content that is connected to a specific type of page on your video website. This could be an video overview page (for example, when you have clicked to see all videos in a specific category) or it could be an Open Upload page. Since these blocks are directly connected to a type of page, they are static in the sense that they can not be moved around in the layout grid, and you cannot change which pages they are shown on. Of course, you always have the option of manipulating the markup of static layout blocks in Liquid, just as you can with floating layout blocks and the master template. Simply go to Power Mode → Site Designer → Page Templates and click on the template you want to edit. This will take you to the code editor for that specific static layout block.