How to setup the isotope masonry gallery
The 3 column masonry gallery is found on shop.html page
<ul class="product-grid"> <li class="product" data-category="wordpress" data-price='49.00' data-title='Startup' data-popularity='1' data-date='2009'> <div class="product-item"> [..] </div> </li> [..] </ul>
The class that triggers the isotope is ".product"
The layout of this element can be changed by adding in the markup " product--4col "
or "product--2col"
classes in li
element
The style of this element is found in app/css/scss/elements/_shop.scss
On the blog page the markup is the following:
<ul class="grid" data-isotope='{ "itemSelector": ".grid-item", "layoutMode": "masonry" }'> <!--start first article--> <li class="grid-item grid-item--width3"> [..] </li> [..] </ul>
The layout of this element can be changed by adding in the markup "grid-item--width2 "
or "grid-item--width2"
classes in li
element
The style of this element is found in app/css/scss/elements/_blog.scss