Masonry in Genesis – Basic Example – Free

This tutorial shows you how to use Dave Desandro’s masonry with the Genesis Sample themes home page.

This solution is the most basic compared to others i’ve seen and only uses a few lines of jQuery.

The width is handled by CSS and the height varies which is the main feature of masonry.

Here’s a archive without masonry.

columns

And here’s the same archive which includes the masonry effect:

masonry

If you don’t include featured images, masonry loads consistently.

Here’s all the code which is very minimal and easy to install.

  1. 1st step is to create a home.php file or any other archive.

Add the following PHP code to the file and upload to your child themes root directory.

Related Posts


Comments

One response to “Masonry in Genesis – Basic Example – Free”

Leave a Reply

Join 5000+ Followers

Get The Latest Free & Premium Tutorials Delivered The Second They’re Published.