Transform Your Website with Divi: Build a Stunning Filterable Portfolio
Welcome to another exciting Divi theme tutorial video! This is Jamie from System22 and WebDesignInc.com, and today we have a fun and incredibly useful project lined up for you. We’ll be creating a stunning filterable portfolio of projects, perfect for showcasing various categories of your work. A filterable portfolio is a fantastic feature to have on your website, providing an easy way for visitors to view different types of projects. Recently, we used this feature on a construction website to display their diverse build projects, and it worked wonders. Let’s dive right in and get started!
First, we need to enable the visual builder in Divi. Once enabled, navigate down the page to where you want to add the new section. Click the little blue button to add a section, and choose to make it a regular section. Inside this new section, add a single column. Next, scroll down until you find the “Filterable Portfolio” module and select it. Before we go any further, let’s clean up the page by deleting any unnecessary sections at the top.
To display projects in your filterable portfolio, you need to have projects created in Divi. Creating projects is similar to creating blog posts. Go to your WordPress dashboard, find the “Projects” section, and click “Add New.” You can build these projects any way you like. However, to make them show up in the filterable portfolio, you must have projects created and categorized. Assign categories to your projects just like you would with blog posts. By giving each project a name and a category, you ensure that they are organized and easy to filter through.
Once your projects are set up with categories, you’ll see them appearing in the filterable portfolio module. In the module settings, you can choose which categories to display by checking the relevant boxes. This adds a filter for each selected category. You can also customize the elements displayed, such as the project title and categories. If you’re not displaying all your projects on one page, you can enable pagination at the bottom. Adjust the number of projects displayed per page to suit your needs.
For instance, if you choose to display three projects per page, pagination will allow users to navigate through additional projects. This is a great way to manage large portfolios. For this demonstration, we’ll display all the projects, so no pagination is needed. Moving on to the design tab, you can adjust the layout. Choose between full width or grid fashion. In grid fashion, the projects are displayed in four columns with titles and descriptions below each image.
When hovering over a project, you can enable an overlay that displays the project title. Customize this overlay by changing its color and opacity. To do this, click on the overlay tab in the design settings. You can also change the overlay icon. Divi offers a wide range of icons through their integration with Font Awesome, allowing you to pick the perfect one for your portfolio.
Further customization options include adding borders or box shadows to your images. This helps to lift the images off the page, giving them a subtle, professional look. If you prefer rounded corners instead of square ones, you can easily adjust this in the settings. Additionally, Divi’s powerful design tools allow for hover effects and filters to make your portfolio even more dynamic.
Once you’re happy with the layout and design, save your settings. But we’re not done yet! To give your filter bar a more polished look, we’ll use a bit of custom CSS. Go to the Advanced tab in the portfolio module settings and find the Custom CSS section. Here, you can paste a few lines of CSS code to make the filter bar transparent, remove borders, and style the active filter. Don’t worry if you’re not familiar with CSS – I’ve written the code for you and will provide it below.
Now, let’s style the section background. Choose a color that complements your website’s theme. In this example, we’re using a dark blue background. Customize the text color to ensure it stands out against the background. Since Divi doesn’t provide an option to change the filter bar color directly within the module, our custom CSS will handle that, making the filter bar blend seamlessly with your site’s design.
After applying these settings, save your changes and exit the visual builder. Preview your page to see your newly created filterable portfolio in action. When users click on a project, they’ll be taken to that project’s individual page. The filter bar allows visitors to sort projects by category, enhancing their browsing experience.
We recently implemented this feature on a construction site, and the clients were thrilled with how easy it was to showcase their various construction projects. It’s a versatile tool that can be adapted for any industry, from creative portfolios to business projects. With Divi’s filterable portfolio module, you can create an engaging, user-friendly display that highlights your work beautifully.
So there you have it – a comprehensive guide to creating a custom filterable portfolio in Divi. I hope you’ve enjoyed this tutorial and found it helpful. If you did, please give it a thumbs up, ring the bell for notifications, comment, share, and subscribe to our YouTube channel. Once again, this is Jamie with System22 and WebDesign Tech Tips. Thanks for watching, and have a great day!
Try out the Divi theme:
Divi Supreme Modules Pro Plugin 10% Off:
Divi Supreme Modules Light Plugin: https://divisupreme.com/divi-plugins/?ref=6
Divi Supreme Modules Playlist: https://www.youtube.com/watch? v=ZAO2MH0dQtk&list=PLqabIl8dx2wo8rcs-fkk5tnBDyHthjiLw
Playlist page for more videos on this: https://www.youtube.com/c/System22Net/playlists
Full Ecommerce Site Build Playlist: https://www.youtube.com/watch? v=rNhjGUsnC3E&list=PLqabIl8dx2wq6ySkW_gPjiPrufojD4la9
Contact Form With File Upload Video: https://youtu.be/WDo07nurfUU
Divi 4 Theme Create An Ecommerce Store In One Hour: https://youtu.be/qP-ViPakoSw
Check out our playlist page for more videos on this: https://www.youtube.com/c/System22Net/playlists
Sub: https://www.youtube.com/channel/UCYeyetu9B2QYrHAjJ5umN1Q?sub_confirmation=1
Why Divi?
Divi is a popular WordPress theme known for its ease of use and versatile design. It is a versatile theme that can be used for a variety of websites, including business, personal, and eCommerce stores.
The Divi Theme offers a wide range of customization options, allowing users to create a unique website that is tailored to their needs. The theme has a drag and drop page builder, which makes it easy to create custom layouts and pages. This feature makes it easy to customize the look and feel of your site without having to do any coding.
The Divi Theme also offers a variety of pre-made layouts and designs, making it easy to find something that meets your needs. It also has a library of modules, which are snippets of code that can be used to add functionality to your website. This makes it easy to add contact forms, social media buttons, and other features to your website quickly and easily.
The Divi Theme also comes with a wide range of customization options, allowing users to easily change the colors, fonts, and other elements on their website. It also has a wide range of plugins, which can be used to extend the functionality of the theme and add more features to your website.
The Divi Theme is also optimized for speed and performance, making sure that your website loads quickly and runs smoothly. It is also optimized for search engine optimization, making sure that your website is visible in search engine results.
The Divi Theme also comes with a wide range of support options, including video tutorials and a dedicated support forum. This makes it easy to get help if you have any questions or need assistance with the theme.
Overall, the Divi Theme is a great option for anyone looking to create a professional website quickly and easily. It is easy to use, versatile, and offers a wide range of customization options. It is also optimized for speed, performance, and search engine optimization, making sure that your website is visible in search engine results. With its powerful features and great support options, the Divi Theme is an excellent choice for
anyone looking to create a website.
Free Stock Photos
Stock photos are essential when you’re building a website. Of course it’s quite possible to build a website not using any photos or images, but it’s going to be a pretty uninteresting looking site, even if the content is top-notch. Adding images to any website creates an interest factor, attracts the eye and will surely make your visitors more likely to read on and see a little more.
There are a huge number of stock photo sites available out there, and they all have some really fantastic looking images ready for you to insert into your site. But buying these images can get quite expensive especially from some of the more well-known sites like Shutterstock.
Free Stock Photos – Where to get an unlimited supply
Have a great website design
It is essential to have a great website design nowadays as so many people tend to shop and find services online. It is also very important to have a responsive website design as almost 50% of today’s browsing is done on smartphones and tablets, I certainly use mine for browsing. If a customer navigates to your site and they have to pinch and zoom to be able to read and navigate, the chances are that they will move away to another site and you will almost certainly lose that customer.
A well-developed website can convey trust and credibility, making people to buy from you, or support you. Whether you are a professional looking for a job, or an expert in your industry: you can show that to the whole world by having a custom responsive website.
Be sure to check out our playlist page to find the help you need!
Latest YouTube Videos
