Description

In version 4.0 instead of columns appeared a new unit of measure - frames.

Frame is a term used to indicate a group of blocks.

DIV Frames are much more flexible than table columns - you have a possibility to create any layouts with your own blocks
positioning. Default CMS Layouts are: Three Columns, Two Columns, One Column and Hot Layout. Their settings are located in
CMS > CMS Layouts. To create a new layout we recommend to take one of the available default layouts and use it as example when creating
your own one.

In this tutorial we will illustrate the process of creating a new layout using for example a new Multi-Hot layout.

Example: Creating a new Multi-Hot Layout

Let's create a layout structure with two Hot blocks, one Hot block above, two usual columns below and a second hot block below them,
third column will be one frame stretching from header to footer. As a basis we will take the Hot Layout templates: 'templates/user/layout_hot.html'
and 'templates/admin/admin_cms_hot_layout.html'. Copy these files on your PC and name them, for example 'layout_hot_2.html' and 'admin_cms_hot_layout_2.html'.
Next:

Draw a picture how you would like to position blocks, for example like below

Using this sketch create a mockup of the admin template. The easiest way to do this is using a table structure:

Now that we have laid the foundation we can add a new layout in admin:

Go to CMS > CMS Layouts and click on the New link.

Specify Sort Order, Name and templates path. In the 'Layout Blocks' section under the column Name specify the frame titles you would like to see in admin.

Important! In the column Tag Name specify exactly the values from figure brackets {} in this layout's templates, if you are wrong even in one character like an additional space or a capital letter the blocks wouldn't be parsed into the frames.

If everything is done correctly you will be able to select the Multi-Hot Layout from Layout Type selection and add blocks into new frames.

And on the site it will look like this:

Note: every design is individual so most likely you will need to edit other styles to achieve the perfect look of your site.