The filter layout displays your content in responsive grid that can be filtered to show items from a specific category or items that have a specific tag.

The filtered layout can be used for any content source. For content sources that are not able to be tagged their respective categories are used as a filter and when using images from a folder as a content source the image's folder is used to filter the content.

Navbar style nav and images and marginless grid with overlay

 The example below uses the navbar style navigation and displays images from a folder in a marginless grid. When the user scrolls over an item the title is transitioned onto the screen in an overlay. This module also has the filter sort buttons enabled which allow the content to be sorted in Asc, Desc or random order.

Separator nav and boxed layout

The filter example below uses the separator navbar style and shows it's content in a two column boxed layout. The sort buttons have been disabled and a scale and fade transition have been applied. You can combine up to 8 effects to control how the items behave when they are filtered.

Filter using the button style

The filter below uses the button style navbar (the style is inherited from your template) and uses a simple fade transition for when items in the grid are filtered.

Single column filter

The filter below displays multi-column content in a single filter column using the separator nav style.

Options and settings

The Filter layout uses the same maximum column layout used for the responsive grid layouts.

Maximum number of columns.

This option determines the number of columns to group each category of items in. Columns within each group are defined in the layout tool.

Disable Margin between columns

Used to create a grid of items where there is no space between items.

Make items equal heights

Force all items to have the same height. Useful for maintaining the grid structure and if you have items with different heights.

Filter type

Determines whether to use category or tags to filter the content with. Content sources that do not have tags automatically use the category option. When using images from a folder as a content source the folder name of the image is used as thecategory.

Override filter

When enabled, the custom filter order specified below is used instead of the generated filter list.

Custom filter order

A comma separated list of items to be used for the filter navigation

Display show all button

Determines whether or not the filter navigation starts with a button that can be used to show all items.

Show all text

The text used to show all the items in the grid.

Hide items until images have loaded

Acts as a preloader that hides the content of the moduel until all of the images in that module have loaded

Display loading animation

Option to display a loading animation while the images are loaded in the background.

Loading Message

The text used to display while the images are loading. Leave blank to avoid showing any message.

Select a theme

Determines the theme to be applied to each item. Options include none, boxed, overlay and animated overlay.

Navbar style

Determines the style to be applied to the filter list. Options include none, buttons, separator and navbar.

Effects

Determines the effect to be applied to each item as the grid is filtered. You can combine any number of the effects included, however please note that some effects take precedence over others and will cancel opposing effects out. Efefcts include: fade, sclae, translate x, translate y, translate z, rotate x, rotate y and rotate z.

Add easing to animation

When enabled this adds an easing algorhythm to the animation so that the animation slows down at the start and the end of the transition event.

Effect delay

Determines the time between transitions per items in ms. Set to 0 to have each item appear ont he page at the same time when filtered. Or set to 300 to allow for an elegant scattered display after each time the grid is filtered.

Sort buttons

When enabled default, asc, desc and random buttons are displayed which allow the user to further sort the items on the page. Useful for large lists of items.

Zentools2 caption layouts display your content's images in a responsive grid and overlay the title and other elements when the user hovers over the image.

The caption style comes with 7 different effects as well as all of the settings available for the grid layout.

An example of the caption layout with margins removed.

Options and settings for the caption layout

Maximum number of columns.

This option determines the number of columns to group each category of items in. Columns within each group are defined in the layout tool.

Select a style

Determines the style of animation that occurs when the user hovers over the image.

Options: caption-style-1,caption-style-2,caption-style-3,caption-style-4,caption-style-5,caption-style-6,caption-style-7

Remove margin between items

Removes the gutter between each item so that the columns sit next to eachother.

Hide items until images have loaded

Acts as a preloader that hides the content of the moduel until all of the images in that module have loaded

Display loading animation

Option to display a loading animation while the images are loaded in the background.

Loading Message

The text used to display while the images are loading. Leave blank to avoid showing any message.

The expanding preview layout takes a grid of items, and displays the item's content once the user clicks on the item.  

The Expanded preview uses responsive grid similar to the grid featured in our other responsive layouts.

Required elements

The Expanded preview requires at least the item image and the item title in order to function.

Options available for Expanding Preview

Theme

Options include: none, boxed, lines

Maximum Number of Columns

Sets the maximum number of columns the grid will be displayed in (1-6). See the Grid documentation for further information.

The Zentools2 pagination layout displays your content in a single row of items. A navbar is positioned above the row of items which can be used to change the items displayed on the page.

The pagination layout uses a selection of css transitions to hide and show items on the page when the pagination is triggered.

Pagination using the Separator navbar type.

The example below displays the pagination layout using the fade, scale and translate x transitions effects in a 4 item grid.

Pagination using the Buttons navbar type.

The layout below displays the pagination layout using buttons for the navbar, in a 3 column marginless grid, using the translate x, and rotate y transition.

Pagination using the Navbar type.

The example below displays the pagination layout with content in 5 columns using the fade, scale and translate x transitions.

Pagination using boxed layouts.

The example below uses the separator style navbar and boxed style layout for each item.

Options and settings

Select a theme

The theme to apply to each item: none and boxed.

Disable margin between items

Removes the padding between items in the display.

Maximum Columns

The maximum number of columns to display your content in. Please see the responsive grid documentation for understanding how this works.

Start page

The page to start the display of items in the module. If the number supplied here is greater than the total number of items the last page in the display will be shown.

Maximum number of pager buttons

The maximum number of pager buttons to display in the pagination list.

Effects

Determines the effect to be applied to each item as the grid is paginated. You can combine any number of the effects included, however please note that some effects take precedence over others and will cancel opposing effects out. Efefcts include: fade, sclae, translate x, translate y, translate z, rotate x, rotate y and rotate z.

Add easing animation

When enabled this adds an easing algorhythm to the animation so that the animation slows down at the start and the end of the transition event.

Item delay speed

Determines the time between transitions per items in ms. Set to 0 to have each item appear ont he page at the same time when filtered. Or set to 300 to allow for an elegant scattered display after each time the grid is filtered.

Navbar style

The style applied to the pager list above the module content. Includes: none, button, separator, navbar.

Hide items until images have loaded

Acts as a preloader that hides the content of the moduel until all of the images in that module have loaded

Display loading animation

Option to display a loading animation while the images are loaded in the background.

Loading Message

The text used to display while the images are loading. Leave blank to avoid showing any message.