Create Better Divi Headers

Free Download: Divi Filterable Portfolio Sections with Custom Hover Effects

by | Feb 11, 2018 | 87 comments

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!

View Live Demos & Get Divi MadMenu

    Download FREE Divi Sections

      87 Comments

      1. Nana

        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.

        Reply
        • Ivan Chiurcci

          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.

          Reply
          • Nana

            Worked like a charm. Thank you.

            Reply
            • Ivan Chiurcci

              Happy to help you, Nana :)

              Reply
      2. Sueli

        Hi Ivan,

        I subscribed about one hour ago (twice) and still have not received the confirmation email.
        I have never subscribed in the past.

        Reply
        • Ivan Chiurcci

          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.

          Reply
          • Sueli Vieira

            Thank you Ivan. Indeed, the email was in the Spam folder.

            Reply
            • Ivan Chiurcci

              You’re welcome, Sueli! Enjoy the freebies :)

              Reply
      3. Rishi

        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?

        Reply
        • Ivan

          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.

          Reply
      4. Matthew Bushen

        Hi Ivan,

        Thanks for you work.

        My download does not include any CCS files. Can you post here?

        Thanks

        Reply
        • Ivan Chi

          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.

          Reply
          • Matthew Bushen

            Hi Ivan,

            Thanks for your reply.

            Keep up the good work.

            Reply
      5. wpdivifix

        I want to add this on my site wpdivifix.com why it is not working?

        Reply
        • Ivan Chi

          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.

          Reply
      6. Erik

        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.

        Reply
        • Erik

          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.

          Reply
      7. Anna

        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

        Reply
        • Ivan Chi

          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.

          Reply
      8. Rian Hibatul Wafi

        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

        Reply
      9. mike

        the subscribe form doesn’t work. it takes ages to load but it doesn’t send out the email

        Reply
        • Ivan Chi

          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.

          Reply
      10. Irene Dall'Ora

        Hello! Can you send me please the email to confirm the plugin?
        Thanks

        Reply
        • Ivan Chi

          Hi Irene.

          Sometimes it may take a bit longer for the confirmation email to be delivered. Please check again later.

          Reply
      11. Miguel

        Hi,
        I´am a suscriber but i dont recive the dowload e-mail
        Can you help me??
        Thanks

        Reply
        • Ivan Chi

          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.

          Reply
      12. Suffian Ahmed

        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

        Reply
        • Ivan Chi

          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.

          Reply
          • Karen Harding-Alonzi

            I’m with these guys. The download link takes me back to this page. Did anyone else figure out how to get around this?

            Reply
            • Karen Harding-Alonzi

              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!

              Reply
              • Ivan Chi

                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.

      13. Leandro

        Hello, I subscribed but I did not receive an email to confirm, how do I receive the files?

        Reply
        • Ivan Chi

          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.

          Reply
      14. Nawshad

        Many many thanks

        Reply
      15. Joe

        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?

        Reply
        • Joe

          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;
          }

          Reply
          • Ivan Chi

            Thanks Joe. Sorry for not replying to your question, being too busy lately :)

            Reply
      16. Kevin

        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

        Reply
        • 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?

          Reply
          • Ivan Chi

            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.

            Reply
      17. Christine

        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

        Reply
        • Ivan Chi

          Hi Christine.

          Sorry about that, the issue has been fixed, please try again.

          Reply
          • CHRISTINE

            Thanks a lot, that’s OK now…

            Reply
      18. Elvin Aliyev

        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).

        Reply
        • Ivan Chi

          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.

          Reply
      19. Ruben Y.

        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.

        Reply
        • Ivan Chi

          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.

          Reply
      20. Fabio

        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

        Reply
        • Fabio

          Hi, I’ve seen your reply to Tom Kreuzberger and did the same.
          Thanks!
          F.

          Reply
          • Ivan Chi

            Ok, that’s great, Fabio. Sometimes I am not able to reply immediately, sorry about that.

            Reply
      21. Kennedy

        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,

        Reply
        • Leandro

          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

          Reply
      22. Tom Kreuzberger

        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

        Reply
        • Ivan Chi

          Hi Tom,
          that cloudy shape in the background is a section divider, you can easily remove it in the Section Settings->Design->Dividers.

          Reply
          • Tom Kreuzberger

            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

            Reply
            • Ivan Chi

              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-rectangles in 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.

              Reply
      23. Myles Becker

        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!

        Reply
        • Ivan Chi

          The Filterable Portfolio module works with projects only, so, it won’t show the post categories but only the project categories.

          Reply
      24. Myles Becker

        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!

        Reply
        • Ivan Chi

          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.

          Reply
      25. lars

        Hi, I´ve installed the rectangles scale effect, but is there anyway to get rid of light blue background behind the logos? Thank you.

        Reply
        • Ivan Chi

          Hi lars,
          can you please explain what you mean by light blue background behind logos?

          Reply
      26. Anthony

        Hello! I subscribed to mailing list but have yet to receive an email containing the download.

        Please advise :)

        Thanks

        Reply
        • Ivan Chi

          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 ;)

          Reply
      27. Mac

        Great work! Is there any hope of a 5 column masonry version of this?
        that would be super.

        Reply
        • Ivan Chi

          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.

          Reply
          • Mac

            Ok Ivan.
            Still great work done so far. Thanks

            Reply
      28. Emil Willis

        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.

        Reply
        • Ivan Chi

          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.

          Reply
      29. Nikola

        Thank for the share :) Great work!
        Is it possible to make some custom sorting?

        Reply
        • Ivan Chi

          Hi Nikola.
          Glad you like it. What do you mean by custom sorting?

          Reply
      30. Lee

        Hi guys

        I didn’t get an email to download the filterable portfolio files please

        Reply
        • Ivan Chi

          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.

          Reply
      31. Lee

        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!

        Reply
      32. KoenDS

        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.

        Reply
        • Ivan Chi

          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.

          Reply
          • eli

            good luck it’s not possible to make a video to show the installation I did not understand anything

            Reply
            • Ivan Chi

              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 :)

              Reply
      33. Hamza Abdullah

        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?

        Reply
        • Ivan Chi

          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.

          Reply
      34. Helena

        Can this be used for pages or just posts?

        Reply
        • Ivan Chi

          Hi Helena.
          Yes, you can use these section layouts for both posts and pages.

          Reply
        • Ivan Chi

          You’re welcome, Cliff. Looks really nice on your site.

          Reply
      35. Johan Linder

        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?

        Reply
        • Johan Linder

          Remove my original comment. Links does opens in same window.

          Reply
          • Ivan Chi

            Hi Johan.
            Thanks for your comment. Yes, it opens in the same window, I’ve double checked :) Btw, your portfolio looks great.

            Reply

      Submit a Comment

      Your email address will not be published. Required fields are marked *

      Subscribe To Our Newsletter

      Join our mailing list to download Divi freebies and get notified of our discounts, latest news and updates.

      You have Successfully Subscribed! Please confirm your email address.

      Divi MadMenu Coming Soon!

      Join our mailing list to get notified when the Divi MadMenu module is released! Check out the sneak peek...

      You have Successfully Subscribed! Please confirm your email address.

      Get FREE Divi Layouts

      Download 20+ Divi templates for FREE!

      Please confirm your email address to complete your subscription. Thank you!

      Black Friday Is Coming!

      Subscribe to get notified when our BIGGEST SALE starts!

      Please confirm your email address to complete your subscription. Thank you!

      Cyber Monday Is Coming!

      Subscribe to get notified when the SALE starts!

      Please confirm your email address to complete your subscription. Thank you!

      Black Friday Is Coming!

      Subscribe to get notified when our BIGGEST SALE starts!

      Please confirm your email address to complete your subscription. Thank you!