Believe it or not

We've made a professional CMS as easy as a web builder

How To Create New Layouts

To create a new layout:

1. Access the Site Structure option in the top menu of the CMS interface then click Layouts.

2. After you land on the orange Layouts tab, click the Add New button located in the upper-right corner of the Items list box.

3. In the Add New Layout box, enter an admin note to identify it by later and select the layout type (module, footer, drop mega menu) then click the Save button to continue with its structure.

4.1. In the details section of the layout:

You can optionally create tablet and mobile versions of the layout by selecting these options from the drop list located in the upper-left corner of the section and repeating the process of adding blocks.

Use the Edit/Save buttons located in the upper-right corner of the section to change the Admin Note and Type fields.

In the Layout Blocks list box, use these buttons to:

- add a new layout block.

- trigger the Layout Widgets Editor where you can drag & drop widgets to the desired position on the current layout.

- delete any layout block.

- trigger the edit section of any layout block.

- vertically drag & drop any layout block to change its order on the front end.

  • You must add at least one layout block before you can drag & drop widgets on a new layout.
  • You can add an unlimited number of layout blocks to each layout.

4.2. In the Add New Layout Block section, complete the settings from these boxes then click the Save button (repeat this process).

Settings box: enter an admin note to identify it by later, select the number of columns, the container style (boxed, fluid) and background.

Every layout block has a grid which you can divide into maximum 6 columns (technically groups of columns).

Width of Each Column box: set width values to each column.

For all columns to fit in one row on the front end, the sum of all column widths on any device (vertical) must be 12 or less. If you set a higher value, some columns will move on the next row(s).

Advanced Settings box: apply CSS classes on the whole layout block or columns individually, select column backgrounds and the block height/align.

If you want to get more technical about it, learn about the Bootstrap grid system.

Download your free website template with DevSaver CMS!

This site uses cookies to improve your browsing experience, perform analytics and research, and conduct advertising. To change your preferences, see our Cookies & Tracking Notice. Otherwise, closing the banner or clicking Accept all Cookies indicates you agree to the use of cookies on your device.