Pro Tips for Designers: Create Stylish Effects with Divi’s Filter Button!

by | May 22, 2024 | Divi Theme, Web Design, Wordpress

Pro Tips for Designers: Create Stylish Effects with Divi's Filter Button!

​Pro Tips for Designers: Create Stylish Effects with Divi’s Filter Button!

Hey everyone, welcome back to another exciting tutorial on Divi Theme. This is Jamie from System22 and web-design-and-tech-tips.com/m. In our last video, we showed you how to create a filterable portfolio. Today, we’re going to take it a step further by transforming those filters into sleek, stylish buttons that match the colors of your logo, just like the ones I have here. When you click on these buttons, they’ll filter the portfolio items into their respective categories. It’s a fantastic way to enhance your site’s aesthetics and usability. So, let’s dive right in and get started!

First, let’s enable the Visual Builder in Divi. I’ll open it in a new tab so we can keep our current view intact. Now, as you can see, we have a regular portfolio filter with the default colors. To achieve our desired button effect, we need to write some CSS code and inspect the elements to customize them. I’ll guide you through this step-by-step.

With our site loaded without the Visual Builder, right-click on one of the filter links and select ‘Inspect’. I’m using Google Chrome, which has excellent developer tools, but most modern browsers offer similar functionality. If yours doesn’t, Chrome is a free download. Once in the inspection mode, ensure you have the ‘Elements’ tab selected on one side to view the HTML and the ‘Styles’ tab on the other to see the CSS.

When you hover over different elements in the HTML, you’ll see which ones you are targeting. Click on a filter link. We need the class names associated with this element. You’ll notice it has classes like `.et_pb_filterable_portfolio` and `.et_pb_portfolio_filters li a`. Copy these class names.

Now, return to the Divi Builder. Open the settings for your portfolio module, go to the ‘Advanced’ tab, and scroll down to the ‘Custom CSS’ section. In the CSS box, paste the class names you copied, followed by opening and closing curly brackets `{}`. Within these brackets, we’ll define our custom styles.

Let’s start by giving our filters a border. For instance, you can add `border: 2px solid #000000;` to create a black border. Next, to make them pill-shaped, add `border-radius: 50px;`. If you prefer slightly rounded corners, use a smaller value like `5px`.

To create some space between the buttons, use `margin-right: 10px;`. This will space them out nicely. Now, let’s match the button color to our logo. Use a color picker tool to find the hex code of your desired color and set it with `background-color: #yourcolor;`.

Notice that the first filter is not styled like the others because it’s the active filter, and the last one might look different too. We need to target these specifically. To style the active filter, copy the class names again and append `:active` to the end. Similarly, to style the last child, append `:last-child`.

For both of these, you can define styles similar to what we did earlier. For instance, add `border-radius: 50px !important;` to force the border-radius if it’s not applying correctly. This ensures uniform styling across all buttons.

To enhance interactivity, let’s add a hover effect. Copy the class names again and append `:hover`. Define a different background color for when the user hovers over the buttons, such as a lighter shade of your primary color. For example, use `background-color: #lightercolor;`.

You might also want to change the text color on hover. This can be easily done by going to the ‘Design’ tab in the module settings and adjusting the ‘Filter Criteria Text’ color for the hover state.

Now that we have the hover effect in place, let’s address the button widths. To ensure that all buttons have the same width, we can set a minimum width. This helps maintain a consistent look, especially if the filter names vary in length. In the CSS code, add `min-width: 180px;`. This sets a minimum width of 180 pixels, but the buttons can expand if necessary.

Once you’ve set the minimum width, check the spacing and alignment of the buttons. If they look too cramped or too spaced out, adjust the margin or padding values accordingly. For example, if you need more space between the buttons, increase the `margin-right` value. Conversely, if the buttons are too far apart, reduce the margin.

Next, let’s focus on ensuring that the button styles are consistent across different states. We already styled the buttons for the normal and hover states, but we need to make sure the active state and the last child element are styled correctly too. Use the same approach we used earlier: copy the class names and add `:active` or `:last-child` as needed, then define the styles within curly brackets.

To make the buttons look more cohesive, you can add a slight box shadow. This creates a subtle 3D effect, making the buttons appear more interactive. In the CSS, add `box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1);`. This adds a shadow below the buttons, giving them a lifted appearance.

After making these adjustments, preview your changes in the Visual Builder. Click around to ensure the buttons are functioning as expected and that the styles look consistent. If you notice any issues, tweak the CSS until you’re satisfied with the result.

It’s also important to test your changes on different devices. The Visual Builder allows you to switch between desktop, tablet, and mobile views. Make sure the buttons look good and are easy to use on all screen sizes. If necessary, use media queries in your CSS to apply specific styles for different devices.

For example, you might find that the buttons are too wide on smaller screens. In that case, use a media query to adjust the button width for mobile devices. Add the following CSS:

“`css
@media (max-width: 768px) {
.et_pb_filterable_portfolio .et_pb_portfolio_filters li a {
min-width: 120px;
font-size: 14px;
}
}
“`

This code sets a smaller minimum width and font size for screens that are 768 pixels wide or narrower. Adjust these values as needed to achieve the best appearance on mobile devices.

Once you’re happy with the changes, save your work. Remember to copy the CSS code and include it below the video for viewers who want to follow along. Sharing the code makes it easier for others to replicate the tutorial and encourages engagement with your content.

With everything in place, exit the Visual Builder and refresh your site to see the final result. The buttons should now look stylish and match your branding, with smooth hover effects and consistent sizing. They’ll provide a more polished user experience, making it easy for visitors to filter your portfolio items.

I hope you found this tutorial helpful and easy to follow. Customizing the filter buttons in Divi can significantly enhance your site’s appearance and functionality. If you enjoyed this video, please give it a thumbs up, ring the bell, comment, share, and subscribe to our YouTube channel. Your support helps us create more valuable content.

Once again, this has been Jamie from System22 and WebDesignDetectives.com. Thanks for watching, and have a fantastic 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

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

Subscribe To Our YouTube Channel

4.5 million views on youtube




Test Out The Divi Theme

IT Certification Category (English)300x250

Elementor Page Builder




Pin It on Pinterest

Share This