Free Download: Divi Filterable Portfolio Sections with Custom Hover Effects
In this post I would like to share with you four Divi Filterable Portfolio section layouts with different custom hover effects applied to portfolio items on hovering over.
I decided to make it a FREE download rather than a DIY tutorial since this will allow Divi users to implement these effects on their sites with much less effort.
Check out the short demo video of these layouts with custom hover effects below or click the button to navigate to the live demo.
Demo
How To Download
This download is exclusive to our subscribers, so, in order to download first you’ll need to subscribe via the form below and confirm your email and after that you will receive an email with the download link.
Requirements
These protfolio sections make use of the section dividers feature of Divi, so, at least Divi v3.0.101 is required in order for the divider shapes to show up in the section background.
But the rest of the styling and custom hover effects will work with earlier versions of Divi too.
Installation
The download is a single .zip file with separate folders for each section layout and a README.txt file which you need to read first before installation since it contains the instructions for installation of these layouts.
Each of the section layout folders is named accordingly and contains two files – the section layout JSON file which needs to be imported into the Divi Library, and a CSS file with the section custom styling and hover effect.
First import the JSON file of the section layout into the Divi Library.
Then add the CSS from the CSS file of the same section layout folder either into the Custom CSS field on Divi -> Theme Options page or into the Divi -> Theme Customizer -> Additional CSS field.
Alternatively, add the CSS to you child theme style.css file.
Next, go to the page where you would like to have your portfolio and add the imported section from the Divi Library. Then open the Filterable Portfolio module settings and select your project categories which you would like to show on your site.
Save everything and you are done, enjoy!
Hope these section layouts with custom hover effects will come in handy, this is the first free download I am offering but there’s more to come. So, subscribe and stay tuned!
Hi!
Thank you for making this and offering it as a free download. Is there a way to change the hover and the main filter color? I didn’t find anything in the portfolio settings for that. Fyi, I selected the square version with the blue colors preset.
Hi Nana.
Thanks for your question.
If you use the demo with “Rectangles” hover effect then in order to change the active and hover colors for the filter and pagination please find the following CSS snippet in the custom CSS and change the background and font colors as you need:
.dvcs_portfolio.effect-rectangles .et_pb_portfolio_filters li a.active,
.dvcs_portfolio.effect-rectangles .et_pb_portfolio_filters li a:hover,
.dvcs_portfolio.effect-rectangles .et_pb_portofolio_pagination ul li a.active,
.dvcs_portfolio.effect-rectangles .et_pb_portofolio_pagination ul li a:hover {
background-color: #043b9a;
color: #fff !important;
}
And to change the color of the “rectangles” that show up when you hover over the portfolio items again find the following snippet in the custom CSS and edit the background colors:
/* top-left and bottom-right rectangle */
.effect-rectangles .et_pb_portfolio_item:hover > a:before,
.effect-rectangles .et_pb_portfolio_item:hover > a:after {
background-color: #0877c1;
opacity: 1;
}
/* top-right and bottom-left rectangle */
.effect-rectangles .et_pb_portfolio_item:hover .et_portfolio_image:before,
.effect-rectangles .et_pb_portfolio_item:hover .et_portfolio_image:after {
background-color: #043b9a;
opacity: 1;
}
Hope this helps.
Worked like a charm. Thank you.
Happy to help you, Nana :)
Hi Ivan,
I subscribed about one hour ago (twice) and still have not received the confirmation email.
I have never subscribed in the past.
Hi Sueli.
The Confirmation email has been sent to your email address, please check your inbox and confirm your email address. After confirmation you will receive another email with the download link. If you don’t see the Confirmation email in your inbox then please check the spam folder as well because the email may have been filtered by your email client. To avoid this issue from happening again in the future please whitelist the emails from Divicio.us.
Thank you Ivan. Indeed, the email was in the Spam folder.
You’re welcome, Sueli! Enjoy the freebies :)
I am a new subscriber. I tried to install this section from the library. But categories weren’t available. The portfolio section is not working on my website. It is saying “You currently do not have any project categories.” How to add them?
Hi Rishi.
First you need to create projects and categories in Projects->Add New and Projects->Categories, and organize these created projects into the categories.
Then select the project categories you would like to include in the settings of the Filterable Portfolio module.
Hi Ivan,
Thanks for you work.
My download does not include any CCS files. Can you post here?
Thanks
Hi Mattew.
The latest version of the freebie does not come with CSS in a separate file, the CSS is included in a Code module in the section template to make it easier to install it. If you want to edit the CSS you can do that in that Code module, it is labeled accordingly.
Hi Ivan,
Thanks for your reply.
Keep up the good work.
I want to add this on my site wpdivifix.com why it is not working?
It’s because you didn’t use this Portfolio Section Layout to create your portfolio. You need to import this section layout in Divi Library and then add it as section to your portfolio page from Divi Library and add your projects to it.
Hi Ivan. Thank you for the tutorial and freebie. It is working great on my desktop website. For some reason, on my iPhone 11 iOS 14.4 in safari, the portfolio shows the first 5 items but no navigation/pagination.
When I use inspector in Chrome on the desktop and set the dimensions to iPhoneX it looks fine. But, on the actual phone, it doesn’t load the entire first page and not pagination.
I Just reloaded the site in my browser and now everything is working fine. I will keep an eye out to see if it is recurring or just a fluke. Thanks.
Hi there – I have subscribed twice and still have not received a confirmation email, I would very much like to have these portfolios, can you please let me know an alternative way to receive them?
Many thanks and kind regards
Anna
Hi Anna.
You’ve already subscribed with this email address before, that’s why you don’t receive the Confirmation email, it’s sent only once. You can still download the Freebies package from the same email that you’ve received before, the latest updated Freebies email was sent to all subscribers on December 26, please search for it in your inbox.
is there a way to make this into 3 column ?
tried change
@media (min-width: 981px) {
.dvcs_portfolio.et_pb_filterable_portfolio .et_pb_portfolio_item.et_pb_grid_item {
width: 33.166% !important;
margin: 0 .25% .25% 0 !important;
}
this doesn’t work for 3 columns
the subscribe form doesn’t work. it takes ages to load but it doesn’t send out the email
Hi Mike.
Sorry about that. We were having some technical issues with our site today, now it’s fixed and you should be able to subscribe, please try again. Thanks.
Hello! Can you send me please the email to confirm the plugin?
Thanks
Hi Irene.
Sometimes it may take a bit longer for the confirmation email to be delivered. Please check again later.
Hi,
I´am a suscriber but i dont recive the dowload e-mail
Can you help me??
Thanks
Hi Miguel.
The email with the download link is sent only after email confirmation when you first subscribe and confirm your email address. So, since your email address has already been confirmed before you will not receve the the email again.
However, the freebies are updated from time to time and re-sent to all subscribers. The email with the updated freebies has been recently sent to all subscribers again last week, please check your inbox. Make sure you keep that email to be able to download the freebies anytime you need them later.
Hello Ivan,
I already subscribed but didn’t receive any download link to my mail id, please send it and activate my link so that I can download it.
Thanks
Suffian Ahmed
Hi Ahmed,
you’re actually an existing subscriber and the email with the download link has already been sent to your email address before, please search your inbox for the Welcome email from Divicio.us.
I’m with these guys. The download link takes me back to this page. Did anyone else figure out how to get around this?
Never mind. I scrolled down to the bottom of the email and clicked the button instead of the one next to the effect I wanted. That did it – sorry to bother you!
Hi Karen.
I’m glad you’ve figured it out. To download the freebies you need to click the FREE DOWNLOAD button at the very bottom of the email (this is mentioned in the email), and the link next to each freebie redirects to the post with the installation instructions & demo(s) of that freebie.
Hello, I subscribed but I did not receive an email to confirm, how do I receive the files?
Hi Leandro.
You’ve already confirmed your email address before and the email with the download link has been sent to your email address on Aug 7, 2020. Please check your incoming emails for that date.
Many many thanks
Great work Ivan :) do you have some CSS that would remove the icon and center the text on hover, so it sits right in the middle of the box?
For anyone looking to do the same:
display:none; the overlay icon in the module Custom CSS area, then add the following CSS to Theme Options:
.et_pb_portfolio_item {
display:flex!important;
align-items:center!important;
justify-content:center!important;
}
.et_pb_module_header {
top:auto!important;
}
Thanks Joe. Sorry for not replying to your question, being too busy lately :)
Hey! :-)
I was wondering, if i could set a transparancy to the rectangle colors? Like i still want to see the pictures from the portfolio on hover, so thats why i would like to set a transparency on the colors if that makes sense?
Also, is it possible when i click on the pictures (Projects) of the portfolio, that it is not directing me to the projects page? Because for a real estate company i only want the projects to display and not have a project page for each project. When someone clicks on the project, i want the project picture to get bigger, thats everything i want. Just to make the picture bigger like in the gallery module, and not direct me to a project page when i click on it.
I would highly appreciate it if you could help me out! :-)
Stay healthy and Best Regards
Kevin
Nevermind, I figured it out with the transparency :D I was just used to write like 0,5 and not 0.5 on opacity.
But i still do not know the solution to the picture / Project problem.
Also, how can i display the project name on hover instead of the icon?
Hi Kevin,
glad you’ve figured out the transparency issue. Regarding the redirection to project page on click: this is how the Portfolio module works, it is intended to redirect the visitor to project page providing more info about the project. If you need to display a larger image on click then you should use the Gallery module for that.
The project name is actually being displayed on hover. When you hover over the project it’s name appears at the top, the icon in the middle and the project category at the bottom.
Hello, first, excuse my poor english, I’m french.
I try to affiliate your newsletter to be able to download this layout, but, all the time your website return “Unauthorized”.
Could you resolve this problem, please.
kind regards
Hi Christine.
Sorry about that, the issue has been fixed, please try again.
Thanks a lot, that’s OK now…
Hi Ivan, Great plugin, I got a question,
Any ideas how I can bring the filtering box to the left side of the images?
and list them there, also, I want to make subcategories listed under main categories, like ladders ( i think its called taxonomy).
Hi Elvin.
You can easily move the filter to the left using CSS Grid, try the following:
.et_pb_filterable_portfolio.dvcs_portfolio {display: grid;
grid-template-columns: 200px auto;
gap: 10px;
}
it will allocate 200px width for the filter column on the left and the rest for the images column on the right with a 10px gap between the two columns. You can adjust these values for different screen widths using @media queries.
And, unfortunately, there is no way to add subcategories to the filter items, as far as I know.
I just downloaded and tried this with no results. Added all layouts to library, loaded layouts to the page, added projects with title and images, added CSS. Nothing happens. I’ve been using Divi for 6 years and designing websites for 20, what gives? Demo site, localhost so can’t share, but literally nothing happens. No changes.
Wondering if it no longer works with latest Divi updates.
Hi Ruben.
I’ve tested this freebie with the latest Divi version and can confirm that it is working just fine. Can’t tell why it wouldn’t work for you, a url would be helpful.
Hi, thanks for sharing your code: it’s easy to use and works great!
Do you think is it possible to use it for normal portfolios?
I’m designin a website with one filtrable portfolio and several non filtrable portfolios, and it will be nice to have the same effects.
Thanks
Hi, I’ve seen your reply to Tom Kreuzberger and did the same.
Thanks!
F.
Ok, that’s great, Fabio. Sometimes I am not able to reply immediately, sorry about that.
Hi Iva,
I do you edit the layout so 3 columns are displayed?
Also, how can you make the items bigger?
I am using the portfolio with the rectangles effect.
Thank you,
I join your question, I edited the css but after the first row it starts to look bad
@media (min-width: 981px) {
.dvcs_portfolio.et_pb_filterable_portfolio .et_pb_portfolio_item.et_pb_grid_item {
width: 33.166% !important;
margin: 0 .25% .25% 0 !important;
}
this doesn’t work for 3 columns
Hi there, thx for this cool portfolio section. I decided to go with the strip one but is there a way to get rid of the light purple cloudy background? I just want to have a plain white background.
Thx Tom
Hi Tom,
that cloudy shape in the background is a section divider, you can easily remove it in the Section Settings->Design->Dividers.
Cool! Thx very much!
Is it also possible to add the layout style to a non filterable portfolio module? I like to have our newest 4 projects displayed on the landing page without any categories, buttons, pages.
Is that possible somehow?
Thx
Tom
Hi Tom,
yes, you can apply these effects to the non-filterable Portfolio module too. All you need to do is to add the effect’s custom CSS classes to the module and make the overlay color transparent in module settings.
For example, to add the Rectangles effect add these two CSS classes
dvcs_portfolio effect-rectanglesin Portfolio Settings -> Advanced -> CSS Class.If you want to customize the icon and text you can do that in module settings as usually.
Hope this helps.
Hello again! I’ve got this downloaded and installed, but it’s not showing me the post categories, so I can’t select which post categories to use. Does this work with posts? I thought I read one of the comments that says it should, but I’m not seeing the categories. Help!
Thanks!
The Filterable Portfolio module works with projects only, so, it won’t show the post categories but only the project categories.
First, THANK YOU for developing this. It’s nearly perfect for what I’m looking for, and I look forward to seeing the newsletter. I had a question, though: is it possible to “force” a category by using some sort of tag like http://website.com/projects/?cat=mining – so I can link to the blog page, but have it already filtered to a specific category? The site I want to use this on has 6 different categories, which correspond to areas of their company. Each area has its own page, and we want to link to projects for that specific area, so it would be nice to be able to take the user to the projects page and already have it filtered to that specific category/area. Thanks, in advance!
Hi Myles,
thanks for reaching out.
I did not alter the default functionality of the Divi Filterable Portfolio Module but only added the custom hover effects. So, as far as I know, this module does not provide such a feature that would allow you to link to a specific category of projects. But, since each area of the company has its own page, you can add the Filterable Portfolio modules on each one of those pages and set the corresponding project category in module settings to show on that page.
Hope this is helpful.
Hi, I´ve installed the rectangles scale effect, but is there anyway to get rid of light blue background behind the logos? Thank you.
Hi lars,
can you please explain what you mean by light blue background behind logos?
Hello! I subscribed to mailing list but have yet to receive an email containing the download.
Please advise :)
Thanks
Hi Anthony,
it may take some time to be delivered. I’ve checked the delivery status for your email address and looks like you’ve already received and downloaded it ;)
Great work! Is there any hope of a 5 column masonry version of this?
that would be super.
Thanks Mac.
Technically it is possible to do that but currently I’m too busy working on a few other projects, so, don’t have time for that right now, unfortunately.
Ok Ivan.
Still great work done so far. Thanks
Hi Ivan,
This is a great plugin. Is it possible to reverse the effect of the strip version. We want the image with a transparency first then on hover show the full image.
Hi Emil,
yes, it is possible, but will require some work to be done, the normal state should be turned to hover and vice versa, it might require revision of all CSS selectors of this effect.
Thank for the share :) Great work!
Is it possible to make some custom sorting?
Hi Nikola.
Glad you like it. What do you mean by custom sorting?
Hi guys
I didn’t get an email to download the filterable portfolio files please
Hi Lee.
Sorry for the late reply. Please make sure you’ve confirmed your email, the welcome email containing download links is sent to confirmed email addresses only and only when you subscribe for the very first time.
If you need further help please contact me via support page.
Hi There
the filterable portfolio section with custom hover effects looks amazing and I’m keen to get it … I’ve subscribed to newsletter but not received download files email yet?
Love the work!
The subscribe for download doesn’t work. I subscribed to the list, but still can’t download. I received a confirmation email, followed directions but get sent back to the original page with the subscription form.
Hi KoenDS.
You have been sent a welcome email containing the download links, please check your inbox as well as the spam folder, sometimes it may arrive there too.
good luck it’s not possible to make a video to show the installation I did not understand anything
Hi eli,
there is nothing complicated about the installation of these layouts, you import the layouts the same way any other Divi layouts are imported. The only difference is that you need to add the additional custom CSS into the Custom CSS field in Divi->Theme Options. That’s it :)
I am planning to build a portfolio but I would like the filterable portfolio to just pop up and not go to the projects page. Takes a long time to build each project. Is that possible?
Hi Hamza, thanks for stopping by.
If you want to have only images in your portfolio that would pop up on click then try using the Gallery module instead of the Portfolio module.
Can this be used for pages or just posts?
Hi Helena.
Yes, you can use these section layouts for both posts and pages.
Very nice – used them on a school website I just launched! on this page https://www.west-street.org/learning/
Thanks for sharing!
You’re welcome, Cliff. Looks really nice on your site.
I tried Stripe effect for my portfolio (link below). Looks good, but the link opens up the portfolio page in a new window. I do not like that. How can I change that?
Remove my original comment. Links does opens in same window.
Hi Johan.
Thanks for your comment. Yes, it opens in the same window, I’ve double checked :) Btw, your portfolio looks great.