The leading then list layout is ideal for creating mini blog layouts where you want to show the availability of a lot of items but also add some visual interest via one of the articles images.

The leading then list layout is a single column layout that can show all layout tags available to your content source for the first item and then display the titles of other items beneath it.

Leading then list

 

Leading Item with boxed layout

The example below highlights the boxed theme applied to the leading then list layout.

 

Bullets layout

The example below displays the list then leading layout using the bullets option.

Leading then bullets

 

Lines layout

The example below displays the image, title and introtext of the first item and then the titles of the rest of the items separated by a 1px border.

Leading then lines

 

Settings and Options

Theme

The theme applied to the module. Options: none, bullets, lines, boxed lines.

 

Display more items text

When enabled a heading is added below the first item and between the list of items.

 

Text for more items heading

The text used for the more items text.

 

Title style

The style appled to the title of the leading item. Options include:

Overlay - where the title is placed in an overlay above the leading item image. Requires an image to be displayed in the layout tool.

Boxed - where the title and other items are placed in a box below the leading item image.

 

List item class

This is the class applied to the title of items that appear in the list below the leading items. eg h2, h3, p etc.

Masonry layouts are like a jigsaw puzzle. This layout attempts to create a layout that best fits the various sizes and shape of the items in the layout. The width of featured and non-featured items can be specified in the module settings as well as the gutter size.

Masonry

Masonry layouts are typically vertical grids rather than horizontal grids which means that the script will try to place the items evenly across the page rather than evenly down the page.

The example below shows a masonry layout using the default settings. The middle larger image is a featured item and takes approximately twice as much space in the layout as the non featured items.

 

Masonry with Overlay

This style adds a static overlay to all items in the layout.

 

Masonry with Animated Overlay

This style adds an animated overlay ot the item when the user hovers over any item in the layout.

 

Masonry with Overlay only on featured items

The overlay on featured items only option adds the title, text or any other elements specified in the item layout with an overlay effect only to featured items. Any non featured items are displayed as an image only. 

 

Masonry with boxed styling

The masonry example below uses the built in boxed styling that can be applied to most of the Zentools layouts. The boxed styling targets all items other than the first item (in this case all items except for the image) and places in a padded box. The color of the box is easily specified in the module settings.

  • Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus lacinia sem sed sem lobortis viverr...

  • Cras nec lorem eget ligula varius aliquet at et mi. Fusce id quam in justo suscipit porta. Fusce non...

  • Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus lacinia sem sed sem lobortis viverr...

  • Cras nec lorem eget ligula varius aliquet at et mi. Fusce id quam in justo suscipit porta. Fusce non...

 

Masonry with small items

This is an example of the masonry layout using custom values for the widths of the standard and featured items. In this case standard items have a width of 12% and featured items have a width of 25%. Custom widths are easily created by creating custom settings in the module parameters.

 

A note on using masonry layouts

The Zentools2 module provides a lot of control when it comes to rendering masonry layouts. It's important to note that you may experience inconsistent results depending on the values you supply for item widths and gutters.

The demo above (other than the small example) use the following width values:

  • Item width: 24%
  • Featured Item Width:49%
  • Gutter Width:1%
  • Bottom gutter: 4px 
 

Masonry Settings

Options

The following options can be found in the options panel in the module settings.

Select a theme:

none / boxed / overlay / Featured Overlay / Animated Overlay

 

Make items equal height:

off / on

 

Theme

The following options can be found in the theme panel in the module settings

Item Collapse width

This setting specifies the browser width at which all items are given 100% width.

 

Item Width

This setting specifies the width of non-featured items in the layout. Use px or % values.

 

Featured Item Width

This setting specifies the width of the featured items in the layout. Use px or %.

 

Gutter width

This setting specifies the gutter between items in the layout. Use px or %.

 

Bottom gutter width

This item specifies the margin below items in the layout. Use px.

The grouped option displays in much the same way as the grid layout however it's main focus is to group the categories of items into discrete groups or lists - making it ideal for creating a user friendly sitemap or category overview for your site. 

 

 

Multiple columns

Each item in each group can be displayed in single or multiple column layouts.

 

Sitemap or table of content

The grouped option is ideal for displaying your content in a table of contents or site map type of layout. The module provides the option to hide or show the button at the bottom of each column, as well as specifying the text used and the class / style applied to it. The options for thje class include none, simple and btn - which inheirts your template's button style.

 

Options for the Grouped 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 int he layout tool.

 

Theme

None, boxed, overlay, animated overlay

 

Remove margin between items

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

 

Link to more items

When enabled a link is added to the bottom of each column that provides a link to the corresponding category. This option is not available for the images and gallery content source.

 

Link to more items button style

This option allows the user to specify a class / style to apply to the link to more text button. There are three options:

  • None - used for a simple text link.
  • Simple - uses the item border, item back ground and color specified in the module settings
  • BTN BTN-primary - Inherits the btn btn-primary class from your template
 

Text for link to more items

This allows the user to define the text used for the more items link.

 

Display item count

Displays the number of items being displayed for each column at the top of each column.

 

Display item category

Displays the category for each column at the top of the column.

 

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 single image gallery is a simple way to display a single image or item in a module that is able to be linked to a lightbox gallery that is able to display the rest of the items available to the module.

 

Single image example

Clicking on the image below will launch the zentools2 lightbox which contains another 4 images included in the gallery.

The stacked layout is a faux parallax effect where the item's images are fixed in position behind an overlay which can contain any of the other items specified in the Zentools2 item layout.

As the user scrolls down the page the images remain fixed in place and are covere dup by the following images.

 
Page 2 of 3