To learn more read our, How To Change The Mobile Menu Placement and Close It On Outside Click, How To Set The Divi MadMenu Elements Column Width, How To Change The Desktop And Mobile Menu Animations with Divi MadMenu, 10 Divi MadMenu Header Layouts Available For Download, Meet the Divi MadMenu – the Most Advanced Divi Menu Module, Divi MadMenu Sneak Peek #2: Layout Settings. However, the freebies are updated from time to time and re-sent to all subscribers. Divi Theme Filterable Portfolio Custom Style The Filters With CSS . When someone clicks on the project, i want the project picture to get bigger, thats everything i want. background: #FF6C89; The site I want to use this on has 6 different categories, which correspond to areas of their company. As Divi doesn’t do this out of the box, I had to look for options, one of them being Essential Grid but as I didn’t want to fork out for a plugin that would have been overkill, I decided to see if I could turn the Divi Tabs module into the same kind of thing and, with a little bit of tinkering, I managed to come right. box-shadow:2px 4px 10px #777; text-align: center; The filterable grid is built using some core PHP in the Divi theme and it’s extremely difficult finding out how to override this, but don’t worry, I’ll show you how In this tutorial we’ll be creating a customised version of the Divi Filterable Portfolio module that lets you add custom fields to your project entries as follows: margin: 0 50px; Thanks Mac. I plan on using the filterable portfolio module to display my work. Filterable Grid for Divi is the perfect solution if you want to display a filterable portfolio without the need to use Divis build in Project post type. Check out the short demo video of these layouts with custom hover effects below or click the button to navigate to the live demo. Thanks Create beautiful Masonry layouts setting the number of columns, ... All other parts, including but not limited to the CSS … Hello! I scrolled down to the bottom of the email and clicked the button instead of the one next to the effect I wanted. Sorry for not replying to your question, being too busy lately . Any ideas how I can bring the filtering box to the left side of the images? The Divi theme by Elegant Themes doesn’t have just one Portfolio Module, it has three… the Standard Portfolio Module, the Fullwidth Portfolio Module and the Filterable Portfolio Module. 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. DIVI Portfolio Module Designs are a premium DIVI Portfolio Module showcase layout packaged each bundle with 10+ Beautifully per-designed templates enriched with powerful components,Color options, settings and CSS code implementation features. Unfortunately this tutorial explains how to apply this effect to Portfolio module. So, since your email address has already been confirmed before you will not receve the the email again. 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. Masonry Filterable Portfolio Layout for Divi - This is a free layout for Divi which changes the standard filterable portfolio module into a masonry layout, allowing you to display your portfolio items of varying sizes in a clean and responsive masonry layout. Divi FilterGrid is a third-party plugin that adds a new filterable module to the Divi Builder. As you can see, we have added special data filters for each category which will help us to filter portfolio items by its category. I thought I read one of the comments that says it should, but I’m not seeing the categories. Alternatively, add the CSS to you child theme style.css file. Hi Emil, 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. Reply You’ll need to change 499 to whatever your page or post ID is. Lets Get Started. Having three Portfolio modules allows you to add variety and additional functionality to your Portfolios and because they are Modules, you can add them anywhere you want on your pages. Then open the Filterable Portfolio module settings and select your project categories which you would like to show on your site. 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. The subscribe for download doesn’t work. It is mandatory to procure user consent prior to running these cookies on your website. Try out the Divi theme: https://goo.gl/gqfUxZ. Still great work done so far. We want the image with a transparency first then on hover show the full image. My Website :http://web-design-and-tech-tips.com. We can’t say enough about how pleasant it was dealing... https://www.dienodigital.com/testimonials/jb-consulting/. by | Dec 21, 2020 | CSS Tips and Tricks | 0 comments. This is a great plugin. grid-template-columns: 200px auto; Thanks! Thanks. 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. Wondering if it no longer works with latest Divi updates. Divi by default display 4 images in Portfolio module. In line 8, I am referencing .et_pb_portfolio_filters, which is the CSS class for the filter container.If you only have one filterable … 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. 1. Added all layouts to library, loaded layouts to the page, added projects with title and images, added CSS. I've started this project with a goal to provide help to users of Divi theme by Elegant Themes. I would highly appreciate it if you could help me out! You can check out the demo here. The Filterable Portfolio module works with projects only, so, it won’t show the post categories but only the project categories. The problem is that when I apply your code to create three columns, I end up with only two columns. I found his service to be excellent,was always available to answer my... https://www.dienodigital.com/testimonials/kelicor-logistics/, COPYRIGHT - DIENO DIGITAL - Mr. WEBSITE REFRESH. You also have the option to opt-out of these cookies. Hi, thanks for sharing your code: it’s easy to use and works great! Hi Anthony, Then open the Filterable Portfolio module settings and select your project categories which you would like to show on your site. We'll assume you're ok with this, but you can opt-out if you wish. . We use cookies to improve your experience. }, .et_pb_filterable_portfolio .et_pb_portfolio_filters li a:hover { Never mind. First import the JSON file of the section layout into the Divi Library. 1. I join your question, I edited the css but after the first row it starts to look bad, @media (min-width: 981px) { In this tutorial we are going to show you how to add Excerpts to your filterable portfolio module and make the changes in your child theme so that you won’t lose the changes when you update/reinstall Divi. Thanks. For example, to add the Rectangles effect add these two CSS classes dvcs_portfolio effect-rectangles in Portfolio Settings -> Advanced -> CSS Class. I subscribed to the list, but still can’t download. The download link takes me back to this page. The Filterable Grid for Divi module by default mimics the style of the Filterable Portfolio module. 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? But i still do not know the solution to the picture / Project problem. 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. top:auto!important; I tried Stripe effect for my portfolio (link below). box-shadow:2px 4px 10px #777; I just want to have a plain white background. Sorts are maintained easily through lists, which can apply globally […] I’ve been using Divi for 6 years and designing websites for 20, what gives? Hi, I´ve installed the rectangles scale effect, but is there anyway to get rid of light blue background behind the logos? Divi Theme Filterable Portfolio Custom Style The Filters With CSS . 10 pre designed beautiful, responsive and 2 Different layout Made using Divi Portfolio Module ready to use. Help! justify-content:center!important; 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. Cool! Thx very much! gap: 10px; 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? Nothing happens. Yes, you can use these section layouts for both posts and pages. width: 115px; Did anyone else figure out how to get around this? Go to Advanced -> CSS ID & Classes -> CSS Class. First, THANK YOU for developing this. Hi Ivan, Great plugin, I got a question, One of our most common requests at DiviPlugins is how to change the portfolio layout from four columns to three. Does this work with posts? .et_pb_module_header { The Divi theme from elegant themes is absolutely awesome. Is it possible to make some custom sorting? Just to make the picture bigger like in the gallery module, and not direct me to a project page when i click on it. First, we need to create a link for every single category in our HTML file. The DP Filterable Blog module is similar to the default Filterable Portfolio module available in Divi, except it works on any custom post type and has several additional options. Thanks, in advance! ... than your filterable elements. (Make Your Own Website For Free) Bangla Tutorial, Do It Yourself – Tutorials – How to make your own website using PowerPoint (Basic), Do It Yourself – Tutorials – Design Your Own Sign – The Signmaker. Very nice – used them on a school website I just launched! Sorry for the late reply. 1. 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. https://www.dienodigital.com/testimonials/north-burnaby-boxing-club/. }, Facebook:https://www.facebook.com/system22.net/, Twitter: https://twitter.com/22ITSolutions1, Linkedin: https://www.linkedin.com/in/jamie-henry-546b7377/, Support the channel: https://paypal.me/system22, Courses I teach: https://www.udemy.com/user/jamiehenry2/, Subscribe: https://www.youtube.com/channel/UCYeyetu9B2QYrHAjJ5umN1Q, Elementor Ecommerce Store: https://www.youtube.com/watch?v=Sl1Ye9XHhgY&list=PLqabIl8dx2wrrX3YsjpIEL8uq5LnSkrhA, Divi Snippets: https://www.youtube.com/watch?v=x8AURRJVlWE&list=PLqabIl8dx2woGTX6yFqbufkqv-29PiElB, Divi 4 Ecommerce Store: https://www.youtube.com/watch?v=rNhjGUsnC3E&list=PLqabIl8dx2wq6ySkW_gPjiPrufojD4la9, Bootstrap 4 Basics: https://www.youtube.com/watch?v=PwUw2kgnkls&list=PLqabIl8dx2wocDgvU7lEirYjNNrm6iXGb, Elementor: https://www.youtube.com/watch?v=bYqbLiWWC-k&list=PLqabIl8dx2woAs4sOmMsgCU0cAqcyiDco, WordPress Tips: https://www.youtube.com/watch?v=3QlczYducdU&list=PLqabIl8dx2wpKhMW14Q1Rxwx864Zwx-1e, Bootstrap 4 Complete One Page Scrolling Website Tutorial : https://www.youtube.com/watch?v=JWmzgixLUUY, Elementor WordPress Builder One Page Scrolling Site In 15 Minutes: https://www.youtube.com/watch?v=CsNmVouqt38, Bootstrap – How to edit a bootstrap template: https://www.youtube.com/watch?v=_yFy5Zw2BQc, Divi Add a live facebook feed to your divi or any wordpress website: https://www.youtube.com/watch?v=4KReMpWdEz8, Divi 4 Theme How To Build A Multi Page Website In 20 Minutes: https://www.youtube.com/watch?v=mNDtB86_hGU, Elementor WordPress Builder How To Build A Parallax Section: https://www.youtube.com/watch?v=aXoCtPAJiGk, Free Tech Courses – Web Design, game development, javascript, wordpress, bootstrap: https://bestwebdevelopmentcourses.com/free/, #YouTubeTips #WebDesignTips #FreeWebDesignTutorials #BuildYourOwnWebsite There you have our nine best free Divi portfolio layouts. The project name is actually being displayed on hover. So, subscribe and stay tuned! If you need to display a larger image on click then you should use the Gallery module for that. You’re welcome, Cliff. Is that possible somehow? I enjoyed the workshop, we covered a broad range of topics in a short space of time, but I appreciated... https://www.dienodigital.com/testimonials/uniglobe-travel-western-canada/. How To Collapse Divi Menu Module Submenus And Keep Parent Links Clickable On Mobile, New Divi Section Layout: The Bottom Navigation Bar 5. Hi Johan. border:none; You can display posts or custom post types in a grid or fullwidth layout. That’s it . Hello, I subscribed but I did not receive an email to confirm, how do I receive the files? F. Ok, that’s great, Fabio. Because for a real estate company i only want the projects to display and not have a project page for each project. I like to have our newest 4 projects displayed on the landing page without any categories, buttons, pages. Out of these, the cookies that are categorized as necessary are stored on your browser as they are essential for the working of basic functionalities of the website. Hi Lee. I received a confirmation email, followed directions but get sent back to the original page with the subscription form. The filterable portfolio looks just like the normal portfolio module, except that it loads new projects using an Ajax request, and it includes options to filter the project list by categories. there is nothing complicated about the installation of these layouts, you import the layouts the same way any other Divi layouts are imported. The Divi theme from elegant themes is absolutely awesome. It seems that you have used Filterable Portfolio module on your website. 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. Masonry Filterable Portfolio plugin for Divi Builder! These cookies do not store any personal information. 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. Is that possible? Hi Tom, How to add, configure and customize the Divi filterable portfolio module. Unsubscribe at any moment. Nevermind, I figured it out with the transparency I was just used to write like 0,5 and not 0.5 on opacity. You can adjust these values for different screen widths using @media queries. The first step is to add a custom css class to the filterable portfolio module. in advanced option – Portfolio Filter. Hi Helena. I’m trying to style the Divi Filterable Portfolio Grid using your code, but no luck so far. Join our mailing list to get notified when the Divi MadMenu module is released! I was wondering, if i could set a transparancy to the rectangle colors? I'm using the Divi Wordpress theme for my portfolio site. display:none; the overlay icon in the module Custom CSS area, then add the following CSS to Theme Options: .et_pb_portfolio_item { can you please explain what you mean by light blue background behind logos? Here you can find both free and premium resources(tutorials, layouts, plugins and child themes) that will improve your web design workflow with Divi. Hi, I’ve seen your reply to Tom Kreuzberger and did the same. Help! source. The codes shared below will work on both the Filterable Portfolio module and the Portfolio module. This means that you won’t have to add custom classes or anything. 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. Masonry Filterable Portfolio plugin for Divi Builder! ... you don not need to change the html just update the code in your style.css or custom css for adding above hovering effects. My Website :http://web-design-and-tech-tips.com, Try out the Divi theme: https://goo.gl/gqfUxZ, Playlists: https://www.youtube.com/c/System22Net/playlists?view=1&sort=dd&shelf_id=0, Divi 4 Theme Build A Multi Page Website In 20 Minutes https://youtu.be/mNDtB86_hGU, Divi 4 Theme Create An Ecommerce Store In One Hour: https://youtu.be/qP-ViPakoSw, Divi Snippets Playlist : https://www.youtube.com/watch?v=1OexlA8wLQk&list=LLYeyetu9B2QYrHAjJ5umN1Q, Divi 4 Ecommerce Site: https://www.youtube.com/watch?v=rNhjGUsnC3E&list=PLqabIl8dx2wq6ySkW_gPjiPrufojD4la9, .et_pb_filterable_portfolio_0.et_pb_filterable_portfolio .et_pb_portfolio_filter a { I’m glad you’ve figured it out. 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. First you will need to add the filterable portfolio module in your child theme. Also, how can i display the project name on hover instead of the icon? Next, go to the page where you would like to have your portfolio and add the imported section from the Divi Library. that cloudy shape in the background is a section divider, you can easily remove it in the Section Settings->Design->Dividers. If you need further help please contact me via support page. Can you help me?? I am using the portfolio with the rectangles effect. With the Divi Builder active on a new page, create a new regular section with a one-column row. Make sure you keep that email to be able to download the freebies anytime you need them later. align-items:center!important; 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. The following options are available in the DP Filterable Blog module. Excellent functionality provided through their visual composer and modules, make things easy to manage and stunning layout creation a breeze. Before you can add a filterable portfolio module to your page, you will first need to jump into the Divi Builder. To make it working with Filterable Portfolio module, some classes in CSS would have to be changed. 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. We also use third-party cookies that help us analyze and understand how you use this website. Hi lars, good luck it’s not possible to make a video to show the installation I did not understand anything, Hi eli, Could you resolve this problem, please. Hi Hamza, thanks for stopping by. * Affiliate Disclaimer: Some of the links in this site are affiliate links. Yes, it opens in the same window, I’ve double checked Btw, your portfolio looks great. The PHP if statement in the first line limits this script to one page or post. I’ve tested this freebie with the latest Divi version and can confirm that it is working just fine. 10 pre designed beautiful, responsive layout templates ready to use in each … Glad you like it. yes, you can apply these effects to the non-filterable Portfolio module too. 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. box-shadow:2px 2px 5px #777; display: grid; “In this tutorial we will implement a full width filterable portfolio which is common request in the Divi Community. Have fun! 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. These cookies will be stored in your browser only with your consent. If you want to customize the icon and text you can do that in module settings as usually. Join our mailing list to receive exclusive FREE file downloads, news and updates right in your inbox. Check out the sneak peek... Download 17 ready-to-use Divi section layouts for FREE! In Recipe #27 I am going to show you how to replicate the Library layout I made for my Ventura Child Theme using the filterable portfolio module.. One thing I hear lots of people complaining about with Divi is that as far as the default builder goes, it’s limited to 4 columns, in this recipe I will show you how to have as many columns as you like AND how to change the default image … Add Custom CSS Class to Show Title On Hover. This license allows the item to be used in projects for either personal or commercial use by you or on behalf of a client. 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. You can easily do this by applying a new class to the module and adding a little CSS to your child theme or the Custom CSS section in the Divi Options panel. In a recent project I was asked to create a filterable image gallery. This layout adjusts the number of columns based on the device. and list them there, also, I want to make subcategories listed under main categories, like ladders ( i think its called taxonomy). .dvcs_portfolio.et_pb_filterable_portfolio .et_pb_portfolio_item.et_pb_grid_item { that would be super. I try to affiliate your newsletter to be able to download this layout, but, all the time your website return “Unauthorized”. Get Masonry Filterable Portfolio plugin to create easily a responsive filterable masonry look for your projects! Hi Nikola. Do It Yourself – Tutorials – How To Make a Giant Built-In Cabinet || Built-In Cabinet Tutorial, Do It Yourself – Tutorials – How To Make a Free Website? Hello again! Join our mailing list to download Divi freebies and get notified of our discounts, latest news and updates. Section: Click on blue gear icon to access the Section Settings. Leland created my website for my new venture. width: 33.166% !important; The Divi theme from elegant themes is absolutely awesome. Thanks! Ok Ivan. Thanks. The Filterable Portfolio allows you to display your most recent projects in either a Grid or Standard fashion. Thanks so much for all the great work you have done in developing our website Leland! I’m designin a website with one filtrable portfolio and several non filtrable portfolios, and it will be nice to have the same effects. Looks good, but the link opens up the portfolio page in a new window. Required fields are marked *. margin: 0 .25% .25% 0 !important; on this page https://www.west-street.org/learning/. DP Filterable Blog – Like the filterable portfolio module, it adds support for posts and custom posts. This improves your browsing experience and helps us serve you better. Now we can work on styling the portfolio's filtering links. But the rest of the styling and custom hover effects will work with earlier versions of Divi too. The only difference is that you need to add the additional custom CSS into the Custom CSS field in Divi->Theme Options. Hi, 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. Plus, I thought that if someone were to use the filterable portfolio module, and wanted to center or justify the buttons, then.. yeah.. I’d assume that’s it.