Divi includes a filterable portfolio module which lets you display your projects along with "tab" buttons that let your users select particular categories of project to view. Here's some tips for styling the filterable portfolio module tabs.
First, though, here's how the tabs normally appear:
Style the Text of the Filterable Portfolio Tabs
The filterable portfolio module settings include options for styling the text of the tabs, which are referred to as "Filter Criteria" in the settings. You'll find the options at:
Filterable Portfolio Settings > Design > Filter Criteria Text
Like so:
Style the Active Filterable Portfolio Tab
If you want to apply some styles to just the active tab in the filterable portfolio, you can do so using the Custom CSS setting at:
Filterable Portfolio Settings > Advanced > Custom CSS > Active Portfolio Filter
For example:
Style the Individual Filterable Portfolio Tabs
While the module settings let you style the text of individual tabs, there isn't an option to style other aspects of the individual tabs, such as their background color. For this, you can use some custom CSS added into the page or global-level custom CSS. For example:
Note that "!important" has been added to make the "background-color" override the existing background color set on the active tab. The "color" property, on the other hand does not include "!important" and as a result does not override the existing text color of the active tab.
For easy copy-and-pasting, here's the CSS from the example above:
.et_pb_filterable_portfolio .et_pb_portfolio_filters li a {
border: 1px solid black;
background-color: green !important;
color: white;
}Style the Filterable Portfolio Tab Area
If you want to apply styles to the entire portfolio tab area, you can do so using the Custom CSS setting at:
Filterable Portfolio Settings > Advanced > Custom CSS > Portfolio Filters
For example:
It's worth noting that the tab area extends the full width of the filterable portfolio module and that while some settings (such as the font-weight, shown above) are inherited by the tabs, some (such as the background color) aren't.
0 Comments