The Zentools grid layout is a classic multi-column responsive grid that positions your content into horizontal rows of content. The grid layout also comes with the added feature of being able to filter your content based on the categories used in the module.
Features
- A flexible grid based on 1 to 12 columns
- Create columns within columns.
- Filter items in the grid based on the item categories
A simple grid with the filter option enabledpreset available
The list and the grid layouts also have the option to filter the item results via the categories of the items displayed. When this setting is enabled a list of available categories is automatically displayed above the module content.
Example
-
Lorem Ipsum dolor sit amet
Integer commodo dolor eget tellus convallis eget sollicitudin justo feugiat. Donec laoreet aliquam quam, a porttitor dolor feugiat ut. Donec pellentesque purus vel dolor cursus aliquet. Quisque non tellus in ante pellentesque viverra ac ut enim. Vivamus pretium convallis suscipit. Pellentesque aliquam sollicitudin urna sed suscipit. Quisque dignissim ligula quis nisi feugiat id euismod arcu vestibulum. Sed in volutpat nibh. Vestibulum lectus purus, semper et placerat et, eleifend ut massa. Nulla leo odio, congue non fermentum in, vestibulum vitae dolor.
Nunc sit amet urna non augue sodales semper non et velit. Nullam sodales dapibus tempor. Aliquam quis turpis sed nulla convallis feugiat. Vestibulum laoreet venenatis iaculis. Vivamus augue erat, sagittis vestibulum aliquet non, blandit ac sem. Sed eros tellus, dapibus eu auctor ac, sodales ac est. Aliquam neque lacus, fringilla quis sagittis lobortis, bibendum eget tellus. Nam blandit adipiscing nisi eget suscipit. Mauris auctor lobortis enim sit amet ullamcorper. Morbi nulla lorem, auctor at varius eu, hendrerit eget lectus. Suspendisse nec auctor nulla.
-
Tremendous burst of speed
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 leo vulputate diam, eu vulputate lectus elit et augue. Cras a leo in quam bibendum dapibus tempus euismod est.
-
Agave Life
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 leo vulputate diam, eu vulputate lectus elit et augue. Cras a leo in quam bibendum dapibus tempus euismod est.
-
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 leo vulputate diam, eu vulputate lectus elit et augue. Cras a leo in quam bibendum dapibus tempus euismod est. -
Waiting watching listening
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 leo vulputate diam, eu vulputate lectus elit et augue. Cras a leo in quam bibendum dapibus tempus euismod est.
-
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, augue leo vulputate diam, eu vulputate lectus elit et augue. Cras a leo in quam bibendum dapibus tempus euismod est.
Boxed
A simple two column grid that has the boxed style applied to it. For optimum results using this theme you need to ensure that the image is the first tag in the template layout and that the image does not have an image style applied to it.
-
Tremendous burst of speed
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 leo vulputate diam, eu vulputate lectus elit et augue. Cras a leo in quam bibendum dapibus tempus euismod est.
-
The Far Journey
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 leo vulputate diam, eu vulputate lectus elit et augue. Cras a leo in quam bibendum dapibus tempus euismod est.
Screenshot of settings
Lots of columns
A simple 6 column layout using a folder as the source content. Images can be set to display alphanumerically or randomly.
Columns within columnspreset available
Each item can be divided into up to four columns. The example below uses a two column grid layout with two columns assigned in the Zentools layout template.
Disable margin between items
When enabled this option disables the margin between the items in the row. This option can be used to create a pure / seamless grid layout where each item is flush up against the other item.
-
Lorem Ipsum dolor sit amet
Integer commodo dolor eget tellus convallis eget sollicitudin justo feugiat. Donec laoreet aliquam quam, a porttitor dolor feugiat ut. Donec pellentesque purus vel dolor cursus aliquet. Quisque non tellus in ante pellentesque viverra ac ut enim. Vivamus pretium convallis suscipit. Pellentesque aliquam sollicitudin urna sed suscipit. Quisque dignissim ligula quis nisi feugiat id euismod arcu vestibulum. Sed in volutpat nibh. Vestibulum lectus purus, semper et placerat et, eleifend ut massa. Nulla leo odio, congue non fermentum in, vestibulum vitae dolor.
Nunc sit amet urna non augue sodales semper non et velit. Nullam sodales dapibus tempor. Aliquam quis turpis sed nulla convallis feugiat. Vestibulum laoreet venenatis iaculis. Vivamus augue erat, sagittis vestibulum aliquet non, blandit ac sem. Sed eros tellus, dapibus eu auctor ac, sodales ac est. Aliquam neque lacus, fringilla quis sagittis lobortis, bibendum eget tellus. Nam blandit adipiscing nisi eget suscipit. Mauris auctor lobortis enim sit amet ullamcorper. Morbi nulla lorem, auctor at varius eu, hendrerit eget lectus. Suspendisse nec auctor nulla.
-
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 leo vulputate diam, eu vulputate lectus elit et augue. Cras a leo in quam bibendum dapibus tempus euismod est. -
The Far Journey
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 leo vulputate diam, eu vulputate lectus elit et augue. Cras a leo in quam bibendum dapibus tempus euismod est.
-
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, augue leo vulputate diam, eu vulputate lectus elit et augue. Cras a leo in quam bibendum dapibus tempus euismod est.
-
Waiting watching listening
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 leo vulputate diam, eu vulputate lectus elit et augue. Cras a leo in quam bibendum dapibus tempus euismod est.
-
Tremendous burst of speed
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 leo vulputate diam, eu vulputate lectus elit et augue. Cras a leo in quam bibendum dapibus tempus euismod est.
Add an overlay effect
This option groups all items from the tag layout - other than the first item - and positions them at the bottom of the item container. This option is designed to be used where the image tag is the first item in the layout options. See the Captify Content preset documentation for more information.
-
Lorem Ipsum dolor sit amet
Integer commodo dolor eget tellus convallis eget sollicitudin justo feugiat. Donec laoreet aliquam quam, a porttitor dolor feugiat ut. Donec pellentesque purus vel dolor cursus aliquet. Quisque non tellus in ante pellentesque viverra ac ut enim. Vivamus pretium convallis suscipit. Pellentesque aliquam sollicitudin urna sed suscipit. Quisque dignissim ligula quis nisi feugiat id euismod arcu vestibulum. Sed in volutpat nibh. Vestibulum lectus purus, semper et placerat et, eleifend ut massa. Nulla leo odio, congue non fermentum in, vestibulum vitae dolor.
Nunc sit amet urna non augue sodales semper non et velit. Nullam sodales dapibus tempor. Aliquam quis turpis sed nulla convallis feugiat. Vestibulum laoreet venenatis iaculis. Vivamus augue erat, sagittis vestibulum aliquet non, blandit ac sem. Sed eros tellus, dapibus eu auctor ac, sodales ac est. Aliquam neque lacus, fringilla quis sagittis lobortis, bibendum eget tellus. Nam blandit adipiscing nisi eget suscipit. Mauris auctor lobortis enim sit amet ullamcorper. Morbi nulla lorem, auctor at varius eu, hendrerit eget lectus. Suspendisse nec auctor nulla.
-
Agave Life
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 leo vulputate diam, eu vulputate lectus elit et augue. Cras a leo in quam bibendum dapibus tempus euismod est.
-
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 leo vulputate diam, eu vulputate lectus elit et augue. Cras a leo in quam bibendum dapibus tempus euismod est.
Animate overlay effect - Rollover the items below and the title will appearpreset available
When enabled the grouped items are hidden from view and are only displayed on the page when the user hovers over each individual item.
-
Agave Life
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 leo vulputate diam, eu vulputate lectus elit et augue. Cras a leo in quam bibendum dapibus tempus euismod est.
-
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, augue leo vulputate diam, eu vulputate lectus elit et augue. Cras a leo in quam bibendum dapibus tempus euismod est.
-
Tremendous burst of speed
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 leo vulputate diam, eu vulputate lectus elit et augue. Cras a leo in quam bibendum dapibus tempus euismod est.
Readmore Overlay
When enabled the grouped items are hidden from view and are only displayed on the page when the user hovers over each individual item.
-
Lorem Ipsum dolor sit amet
Integer commodo dolor eget tellus convallis eget sollicitudin justo feugiat. Donec laoreet aliquam quam, a porttitor dolor feugiat ut. Donec pellentesque purus vel dolor cursus aliquet. Quisque non tellus in ante pellentesque viverra ac ut enim. Vivamus pretium convallis suscipit. Pellentesque aliquam sollicitudin urna sed suscipit. Quisque dignissim ligula quis nisi feugiat id euismod arcu vestibulum. Sed in volutpat nibh. Vestibulum lectus purus, semper et placerat et, eleifend ut massa. Nulla leo odio, congue non fermentum in, vestibulum vitae dolor.
Nunc sit amet urna non augue sodales semper non et velit. Nullam sodales dapibus tempor. Aliquam quis turpis sed nulla convallis feugiat. Vestibulum laoreet venenatis iaculis. Vivamus augue erat, sagittis vestibulum aliquet non, blandit ac sem. Sed eros tellus, dapibus eu auctor ac, sodales ac est. Aliquam neque lacus, fringilla quis sagittis lobortis, bibendum eget tellus. Nam blandit adipiscing nisi eget suscipit. Mauris auctor lobortis enim sit amet ullamcorper. Morbi nulla lorem, auctor at varius eu, hendrerit eget lectus. Suspendisse nec auctor nulla.
-
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, augue leo vulputate diam, eu vulputate lectus elit et augue. Cras a leo in quam bibendum dapibus tempus euismod est.
-
Waiting watching listening
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 leo vulputate diam, eu vulputate lectus elit et augue. Cras a leo in quam bibendum dapibus tempus euismod est.
