The Zentools module provides the ability to create columns within each individual item - regardless of the overall layout you have chosen. This means that you can create complex layouts - up to 4 columns per item - all with the ease of using drag and drop.

An example of the grid layout with two columns.

 

Screenshot of the settings.

columnlayoutsNotated

12 column layouts

In keeping with the Zengrid Framework and css grid layouts in general, each item displayed in the Zentools module is divided into 12 columns. This means that in order to keep the specified content elements in a row you need to ensure that the column widths do not total more than 12.

Where is the column1 element?

As you can see from the example above, the column1 element is automatically created when you add the column2, column3 or column4 element.

If column2, column3 or column4 are not used in the content elements then each item will automatically stretch to fill 12 column widths across the item. In these cases it is not necessary to specify column widths and so consequently the column width panel will not appear.

Creating more complex layouts

In some cases you may like to create vertical based layouts that have supplementary rows of content items. As an example, the module below is a grid layout with the image filling the whole first row and the other content elements split into two.

An example of a complex layout

  • Powerful methods

    Donec mollis orci vel turpis tempus aliquam. Suspendisse tincidunt tincidunt ante eget lacinia. In iaculis pulvinar urna, in iaculis lacus blandit in. Vivamus euismod, nisi eget interdum mollis, augue

    10 Jul, 10 Jul 10
  • A tree too far

    Donec mollis orci vel turpis tempus aliquam. Suspendisse tincidunt tincidunt ante eget lacinia. In iaculis pulvinar urna, in iaculis lacus blandit in. Vivamus euismod, nisi eget interdum mollis, aug

    10 Jul, 10 Jul 10
  • Waiting watching lis..

    Donec mollis orci vel turpis tempus aliquam. Suspendisse tincidunt tincidunt ante eget lacinia. In iaculis pulvinar urna, in iaculis lacus blandit in. Vivamus euismod, nisi eget interdum mollis, aug

    10 Jul, 10 Jul 10

 

Screenshot of the settings.

columnlayouts3

As you can see the first row which contains the title and text stretch to fill the full width of the row. The subsequent items eg category, date and read more each fill one third or four column widths of the item.

Back to top