Want to learn how to use CSS with Divi?
Our CSS & Divi Beginner Course is now open for enrollment!
Masonry Filterable Portfolio Free Divi Layout.
This free Divi layout is a great way to display your portfolio when your featured images are of varying sizes. It is fully responsive and the column number will adjust based on the device size with no media queries needed. You can also use this with a fullwidth row and adjusted gutter values and the column number will increase automagically 
View the demo and download this free layout by subscribing below.
Be sure to view the ‘Read Me’ file in the download package for full instructions.
Subscribe to download
If you found this helpful please leave a comment.
Michelle X
Hey there, how do I impor the .json file into a new page? I’m having difficult in following the read me as I am new to Divi
Check here: https://support.divisoup.com/support/solutions/articles/29000005030-exporting-importing-individual-pages
Dear Michelle,
This tutorial is so great ! Thanks a lot for that.
I want to use it but i need the articles to be displayed horizontally and not vertically. Would you be ok to give a clue and let me know how to achieve that ?
have a nice day !
Elvis.
Sure, you can just change the width and height values in the php code
Hi Michelle – this is great. Only problem I have is that the hover effect is not working. Any help on the reason why would be much appreciated – see it here: https://cgp.az.design/
I don’t see any of our code on that module?
I have added the code and followed all instructions as per your read me file. Some elements are working like the masonry styling. I have moved the code from the page into the head and also the Custom CSS section incase this should make a difference. It’s just the hover that doesn’t seem to work. Take a look on this page as it only has the portfolio grid on it:
https://cgp.az.design/property-finding-service-case-studies/
Thanks in advance A
Im not seeing a masonry layout on that page?
Hi! I love this layout! But I have a problem with the overlay text: It doesn’t work. Theres is no hover effect at all. I have your js script to wrap the Title and Category, but it seems the page does not load it. Any suggestions? Thanks in advance!
Probably because of the new Divi hover options, they have messed with a lot! Can’t help without a link though
Hi Michelle I’ve tried this recipe and for some reason it doesn’t seem to be working. The hover is not coming up at all and the title of the post is sitting underneath the image. I couldn’t see anything in the replies below that indicated anyone else was having this issue therefore no possible solutions? Can you offer any suggestions as to why this could be happening. I’ve tested it on two separate Divi installations and both showed the same results. Thanks Tracey
I would say this is likely because of the new Divi hover options which seems to have messed a lot of things up
Up will update when I can but I don’t know when that will be, sorry.
Hi Michelle, I wondered if one of the new divi updates might be interfering with it. I love this layout so I’ll look forward to the update when you get around to it. Thanks for letting me know. Cheers Trace
Hi Michelle,
I seem to be having issues am able to load the layout but titles appear below images with no hover effects like in the example what could be the cause?
Your link is not working for me
Hi, WordPress won’t let me import Json files.
Can i use this layout with videos files or mp3?
Hello Michelle, I try this and it works perfectly, but I have another question. In Divi, portfolio module shows only worpdress projects with their relative categories. I would like to show pages, not projects, I have installed a wordpress plugin that assign categories to pages, but in portfolio module it doesn’t work. Is there a method to modify portfolio module to show other resources like pages, images, etc…, not only projects?
Only by creating a custom module. Take a look at the Portfolio Posts Pro plugin, you can choose any post type.
Thanks Michelle, this works great!
Is there a way to enable more than one filter button to be engaged at a time?
And, is it possible to add this grid to pre-existing pages?
Thanks in advance!
Not with the Divi module no. And yes you can add to any page
I tried to install the plugin, but it doesn’t succeed. I am using the divi theme on wordpress.
It is not a plugin, please read the included instructions
” Import the .json file into a new page (not the library)” but cant find where to “import” in the page..?
Can this masonry grid be applied to a list of blurb items without categories and featured images, Just a bunch of blurb items?
Yes it can with selector modification, but it obviously won’t be fiterable.
Hi! Is there a way to specify screen % or VH for the columns instead of ems? I can only get 4 or 6 columns to display, but I need 5.
I tried following the tutorial here: https://divisoup.com/how-to-change-columns-and-image-sizes-in-the-filterable-portfolio/ but I couldn’t marry the CSS from that tutorial to this one.
If you want to display exactly 5 columns, you don’t need to include a measure – all you need is the number. For example:
.ds-masonry-portfolio .et_pb_portfolio_items {
-webkit-columns: 5;
columns: 5;
}
thanks, this is amazing,
can you help me to edit the portfolio to 3 column
This recipe will help: https://divisoup.com/how-to-change-columns-and-image-sizes-in-the-filterable-portfolio/
Thank you so much for this. I seem to be maxing out at 10 images included in the portfolio, is there somewhere I should be looking to allow more images (projects) to appear?
That is the first setting in the filterable portfolio module – it is called “Posts Number”
Hi Margot, just to let you know :
from the library when i try to import this tells me “this item should not be imprted in this context”.
Best regards
Please be sure you read the instructions: “Import the .json file into a new page (not the library)”
This is great but it breaks the whole image hover link? Only the text is a link but the original filterable portfolio works that way.
That’s because this effect allows for linking to both the project and the category, so there are two links. If you want the whole image to link to the project you will need to leave off the category and then adjust the project link to be full height and width
Hi, thanks for your json, it’s perfect. I want to change one thing : the number of columns, in 4 column. Curently it’s 5 column, it’s possible ? How can I do that ? Thanks,
Columns are set with ems to be responsive, so just increase or decrease the columns: 14em; section in the CSS until you get your desired columns
Omg, a simple
display: none;
}
did the job. CSS is great and easy to use once u dive in. Sry for bothering you ;-)))
Glad you got it sorted!
Hi Michelle, I solved the last problem with the Redirection plugin and now i am stetting up a page for each of the categories, but dont know how to not show the “ALL and CATEGORYSELECTED” button in top of the actual portfolio. I want to give the information where the user is right now in the header and there is no need to show it twice. You got any idea how to not show it?
thanks and all the best from germany, Philipp
I must be a total idiot, I’ve spent hours trying to get this json into my divi and it just doesnt work. A video would be helpful.
Are you importing into the library or a page? Because as per the instructions you need to import into a page.
I have the same problem, I find the instructions to be a bit short for my needs. How do I import the json into a page? Thanks!!
You can find instructions on how to use that Divi Builder feature here: https://support.divisoup.com/support/solutions/articles/29000005030-exporting-importing-individual-pages
Thanks so much!
Would all of this work with the normal portfolio module too, not the filterable one?
It should, yes. You may need to strip out “.et_pb_filterable_portfolio” from some of the CSS, though.
I just hid the filter buttons with /*Hide the filter buttons*/
.et_pb_portfolio_filters{
display: none;
}
Hi, this download doesn’t appear to be working? It gave me the .zip file but uploading this to WP gave me:
Installing the plugin…
The package could not be installed. No valid plugins were found.
Plugin installation failed.
It isn’t a plugin and per the instructions in the recipe, “Be sure to view the ‘Read Me’ file in the download package for full instructions.”
And thanks, by the way, for all your recipes…
Hi there, works great – but it sorts the posts on date in vertical columns, while I need the screen to fill horizontally – so that if you scroll down the page, you go from the newer posts to the older posts. Any code tweaks that make that possible?
There are some free plugins in the repository that will help
Hi Shay, I’m interested in using this masonry layout and i also need to make the post sort horizontally and not vertically. You said that some free plugins can help in the repository. Do you mean in the blog archive ? i looked for that and did not find anything. Could you give me a clue and tell me where can i find that ? Thanks for your answer.
Just stumbled on your excellent work, thank you so much, you’re awesome!
26 is not on the ZIP I have just downloaded. Where is the DL link?
You are completing the wrong optin form, which I have now removed to avoid confusion. Under the view demo button it says ‘subscribe to download’ and there is a blue form under that
Thank you
nice, thank you! the hover over on desktop is nice but that’s not available on mobile, so i guess user can’t see the project info without clicking on it on mobile?
Hover works great on mobile now but obviously not the same, you just touch it and the hover effect will appear
Thanks Michelle!
You’re making our web design lives so much easier!
Thanks Hurri
Nice work Michelle. these masonry layouts are all the rage now, and good to see an easy fit for divi. thanks again and keep it up , your tutorials are great.
Shaun
Thank you Shaun
Wow!! this looks fantastic.
Thanks Michelle
Most welcome Paul
Wow, that looks great, just what I was looking for! Thank you for your work!
Welcome Axel
Looks great, Michelle, thanks! I asked ET about developing a similar module; now you’ve gone and done it! Can’t wait to give it a go!
Serendipity
Thanks Michelle. This is awesome! I am working on a project at the moment where this will come in handy.
While we’re on the subject of masonry layouts with different image dimensions, have you come across something similar that can be used to display posts as part of the Divi blog module. And also to display photo galleries?
ET have this tutorial which is for the archive pages and the standard Divi module is masonry by default.
As for the Gallery, I have two masonry layout in https://divi.academy/membership
Thanks Michelle
Nice Layout. Thank you for sharing. Is it possibile to replicate tha animation effect of pictures moving and take palce of the others when switching from category to category ?
Not without extensive modification to the core module file, you would be better off with a plugin if you are not comfortable editing those files.