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.
-
Cras nec lorem eget ligula varius aliquet at et mi. Fusce id quam in justo suscipit porta. Fusce non...
-
I get my inspiration from the fictional world. I'm a social geek.
-
Easter Gaeltacht Adventure Camp/Campa Eachtraíochta Cáisc -Camps for Kids -Sunrise Walks -Nig... -
Are you looking for something different for your school tour or day out?
A day out packed with fun,... -
I get my inspiration from nature and objects around me. I have a passion to colours, typography and ...
-
I have a cat named Napoleon. I love spicy foods and beautiful pictures.
-
Ambles & Rambles offer fun, outdoor parties for all adventurous kids - whether you're aged 9 or 90!
W... -
We offer guided hikes and walks in the Dublin Mountains. Enjoy the beautiful views of our city and b...
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.
