Having a space in your site to exhibit your paintings is essential. In the event you’re a stylist, you might want to create more than one tasks inside of your WordPress site to turn your ideas. In the event you’re a logo dressmaker, you’ll use a portfolio to exhibit your previous paintings. Moreover, we will even pass a step additional and upload in quite a lot of classes for our tasks. That is the place Divi’s Filterable Portfolio Module comes into play.
With this module, we’re ready to show our exhausting paintings in some way this is simple and arranged. In these days’s instructional, we’ll be styling the Filterable Portfolio Module’s particular person grid pieces. We’ll be the use of layouts from the Divi Conference and Divi Online Yoga Instructor loose structure packs that include each acquire of Divi. As with every issues Divi, we be able to taste this module to make it fit our wants and needs. Alternatively, earlier than we get into styling, let’s be informed a little extra concerning the module.
What’s Divi’s Filterable Portfolio Module?
Initiatives are a part of a customized submit sort that works in a similar fashion to posts. You’ll be able to in finding those within your WordPress dashboard.
That is the place you’ll create your personal tasks that can populate your Filterable Portfolio Module. The module offers us two tactics of revealing our tasks: in a grid layout, or in a fullwidth layout. For us, we’ll be the use of and styling the grid layout. With the Filterable Portfolio Module, we can exhibit our most up-to-date tasks. Customers of our website might be proven a filter out bar on peak of our portfolio grid. From there, they are able to cycle in the course of the quite a lot of portfolio classes that we permit to be displayed throughout the module.
Right here’s an instance of a vanilla setup of the module with some pattern tasks:
Spaces to Believe When Styling Divi’s Filterable Portfolio
Like any Divi modules, the Filterable Portfolio Module comes with quite a lot of options that we will taste to our wants and needs. As such, lots of the options that accompany the module we’re ready to edit throughout the Design tab of the modules settings modal field. We will edit the apply spaces and extra:
- Challenge Name
- Challenge Class
- Thumbnail
- Filter out Textual content
- Thumbnail Hover
- Pagination
This isn’t a complete record, and we haven’t even begun to speak about how CSS has upload deeper customizations to this module!
How We’ll Be Styling Divi’s Filterable Portfolio Module
As discussed previous, for this instructional we’ll be the use of two layouts from the Divi Conference and Divi Online Yoga Instructor. Under, you’ll catch a glimpse of the paintings that we’ll be doing all over this instructional.
Divi Convention Tournament Format
Divi On-line Yoga Trainer Touchdown Web page Format
You’ll be able to simply obtain each layouts from throughout the Divi Builder. Now, let’s get began!
Styling Divi’s Filterable Portfolio Module: Divi Convention Version
First issues first, we’ll wish to set up the development web page template from the Divi Convention Format Pack. After getting created your new web page in WordPress and activated the Divi Builder, we’re going to go into into the Divi Library.
Input the Divi Format Library
Click on at the Load from Library icon to go into into the Divi Format Library
Find Format Throughout the Divi Format Library
The use of the quest characteristic inside of Divi’s Format Library, seek for the Divi Convention Tournament Web page structure.
Set up the Format
After getting decided on the structure, click on the Use This Format button to put in the structure into your web page.
Take away and Exchange Symbol Module
We’re going to take away the Symbol Module pictured beneath to make room for the Filterable Portfolio Module that we’ll be styling. Click on at the Delete icon after soaring over the picture to take away the picture.
Insert the Divi Filterable Portfolio Module
With the Symbol Module got rid of, we will now make area for our Filterable Portfolio Module. We can click on at the Upload Module Icon (the gray plus signal) after which make a choice the module from the module modal field that pops up.
Surroundings the Put up Depend and Portfolio Format
Via default, this module will exhibit your paintings in a one column. Alternatively, we’ll be the use of the Grid structure which comes by means of default with 4 columns. As such, we suggest opting for a host that may be a more than one of four (4, 8, 12, 16 and so forth.) because the Put up Depend on your portfolio. For this instructional, we’ll be the use of 12 tasks in our grid.
Start Styling Divi’s Filterable Portfolio: Name and Meta Textual content
Now that we’ve got our tasks appearing up as a grid, let’s tie in one of the most design components from our decided on template. On this case, we’ll be the use of the styling that incorporates the Divi Convention Format Pack inside of our new module.
Textual content Styling
- Textual content Alignment: Heart
- Textual content Colour: Darkish
Name Textual content Styling
- Name Heading Degree:H2
- Name Font: Krona One
- Name Textual content Colour: #000000
Meta Textual content Styling
- Meta Font: Default (Open Sans)
- Meta Textual content Colour: #ff6651
Now that we’ve got our styling in position for the titles throughout the portfolio grid, let’s make some edits to the true form of the challenge thumbnails themselves.
Adjust Border and Rounded Corners of Challenge Thumbnail
Inside of our Divi Convention Format Pack, we’re the use of a singular mixture of rounded corners to present a singular form to one of the most key pictures throughout the pack. Let’s follow this styling to the thumbnails of our module.
Symbol
- Symbol Rounded Corners: 50px 50px 50px 0px
- Symbol Border Kinds: All
- Symbol Border Width: 3px
- Symbol Border Colour: #000000
- Symbol Border Taste: Forged
This may purpose our thumbnails to have a form that fits the remainder of the opposite pictures right through the structure pack.
Customizing the Hover Overlay
Let’s pass a step additional with our styling and make a slight edit to the overlay that comes by means of default with this module. We’re going to modify the colour in addition to the icon that’s used appropriate out of the field.
Overlay
- Zoom Icon Colour: #bcf5fd
- Hover Overlay Colour: #ff6651
- Hover Icon Picker: Zoom
As you’ll now see, we’ve added the logo colours of this structure into the overlay, in addition to modified the icon that Divi supplies by means of default for this module’s hover overlay characteristic.
Styling the Pagination
We’re now going to start out the use of small snippets of CSS so as to add some additional customization to our Filterable Portfolio Module. At first, we’re going to taste the pagination of this module. Subsequent, we’re going to take away the border that looks above with a unmarried line of CSS
Pagination Textual content
- Pagination Font: Krona One
- Pagination Textual content Alignment: Heart
- Pagination Textual content Colour: #ff6651
- Pagination Textual content Colour (Hover): #000000
For our CSS, we can be shifting to the Complicated tab of our module. Secondly, we can click on at the Customized CSS tab. Subsequent, we can input within the following code snippet to take away he border on peak of our pagination, giving it a cleaner glance.
Portfolio Pagination
border-top: 0px;
The use of Customized CSS & Divi Settings to Taste the Filter out Textual content
For the Filter out Textual content, we’ll be taking issues up a notch. We’re going to use CSS to modify the background in addition to the hover results. We need to have a detailed seamlessness between the newly added module and the styling of the structure pack. First, let’s input in our Divi settings for the font.
Filter out Standards Textual content
- Filter out Standards Font: Krona One
- Filter out Standards Textual content Colour: #ffffff
- Filter out Standards Textual content Colour (Hover): #000000
Because it recently stands, our filter out seems to have disappeared. It is because in its default state, it’s white textual content on a white background. Alternatively, we’re going to modify that with some customized CSS in two puts. At first, we’re going so as to add a snippet of CSS throughout the Web page Settings that’ll upload a background to the filter out textual content. Secondly, we’ll taste the Lively Portfolio Filter out the use of the Complicated tab of the module.
To get admission to the Web page Settings, click on at the 3 dots at the heart of the display. Then, make a choice the equipment icon which is able to open up the Web page Settings. Subsequent, you are going to navigate to the Customized CSS tab, and input within the following so as to add a background to the Filter out Textual content.
Customized CSS
On this CSS snippet, we’re concentrated on the background colour of the filter out. We also are concentrated on and styling its hover state. Subsequent at the schedule, let’s upload a little extra CSS to the module and exhibit our Lively Filter out tab extra prominently.
/* Alternate background colour of filters */ .et_pb_filterable_portfolio .et_pb_portfolio_filters li a { background: #000000; } .et_pb_filterable_portfolio .et_pb_portfolio_filters li a:hover { background: #ffffff; }
Styling the Lively Portfolio Filter out Tab
The Lively Portfolio Filter out Tab attracts our consumer’s consideration to the present portfolio class that they’re visiting. At this time, this filter out has white textual content and a mild background. We’re going to enter the Complicated tab of the Filterable Portfolio Module and upload some textual content to the default and hover states of this selection. Those are the CSS homes we’ll upload in a default state:
background: #ff6651; colour: #ffffff !essential;
Hover State
On hover, we’ll alternate the background to black.
colour: #000000!essential;
Ultimate Glance Styling Divi’s Filterable Portfolio with Divi Convention
Right here’s the overall glance!
And now, right here’s what it looks as if after we hover!
Styling Divi’s Filterable Portfolio Module: Divi On-line Yoga Trainer Version
In a similar way to the Divi Convention version, in finding your structure throughout the On-line Yoga Trainer Format Pack throughout the Divi Builder. We’ll be the use of the Touchdown Web page Format for this instructional. Scroll all the way down to the phase Categories phase with the name All Upcoming Categories Phase.
Placing Filterable Portfolio Module
From right here, we’re going to delete the rows with the categories. Click on the pink icon with 3 dots on it. Subsequent, make a choice the Wireframe view. Finally, you’re going to delete the 2 rows that experience 3 columns inside of them.
Subsequent, we’ll substitute them with a unmarried column throughout the row inside of which. Then, we’ll upload our Filterable Portfolio Module.
Like the former instance, we can be the use of the Grid Format for this module with a more than one of four for the Put up Depend. Now, let’s do one thing a little other with the guidelines that we exhibit at the card. Within the Content material tab, let’s navigate to Parts and unselect the Display Classes. This may imply that the Portfolio Module will most effective display the title of the challenge with out the title of the class that it’s in.
Taste Filter out Standards Textual content, Challenge Name and Pagination Textual content
Let’s set the manner basis for the textual content parts of our module. The frame textual content for this structure is Open Sans and the font used for the principle headings is Cinzel. Due to this fact we’ll be the use of a mix of those two fonts right through out styling procedure.
Textual content
- Textual content Alignment: Heart
- Textual content Colour: Mild
Name Textual content
- Name Font: Cinzel
- Name Textual content Colour: #ffffff
Filter out Standards Textual content
- Filter out Standards Font Weight: Daring
- Filter out Standards Textual content Colour: #ffffff
Pagination Textual content
- Pagination Textual content Colour: #ffffff
That is what our Filterable Portfolio Module is taking a look like at the moment. It’s no longer a lot, however we’re slowly getting there!
Making a Translucent Hover Overlay
Let’s pull some inspiration from the quite a lot of modules and lovely gradients inside of this structure. For this, we’re going to create a translucent hover overlay and elegance the icon that displays up on hover as smartly.
- Zoom Icon Colour: #323741
- Hover Overlay Colour: rgba(255,201,165,0.85)
- Hover Icon Picker: Seek leaf and spot icon above
Including a Border to the Portfolio Grid Pieces with Customized CSS
Very similar to our first instructional, we’re now going to make use of some CSS so as to add extra passion to our Filterable Portfolio Module. Now, we’re going to upload a border round every particular person portfolio grid merchandise. Use the CSS snippet beneath throughout the Customized CSS portion of the Web page Settings so as to add our border. We’ll even be assigning the CSS Magnificence border to this module.
- CSS Magnificence: border
Customized CSS
/* Border */ .border .et_pb_grid_item { border: 2px forged #ffffff; padding: 5px; }
Right here we have our Filterable Portfolio Module with a pleasing border – and soe padding – round every grid merchandise.
Including CSS to Taste Pagination Border
Not like our earlier instance, let’s upload some colour to the border for our pagination with some CSS. This may additionally pass throughout the Web page Settings > Customized CSS space.
/* Pagination Styling */ .et_pb_filterable_portfolio .et_pb_portofolio_pagination { border-top: 2px forged #adc6d9; }
Styling the Filter out Standards Textual content
Very similar to our Divi Convention Portfolio Module styling, we need to upload some jazz to our class filters. Once more, we need to pull from the styling this is already provide throughout the template supplied to us. Right here’s the CSS that we’ll be including into our Customized CSS phase to focus on the background and hover of our Filter out bar.
/* Alternate background colour of filters */ .et_pb_filterable_portfolio .et_pb_portfolio_filters li a { background: none; } .et_pb_filterable_portfolio .et_pb_portfolio_filters li a:hover { background: #ffffff; colour: #323741 !essential; }
With those two new additions to our Customized CSS, that is what our Filterable Portfolio Module is shaping as much as be.
Alternatively, understand how the Lively Portfolio Filter out is misplaced. It nonetheless has a mild background with white textual content on peak of it. Let’s pass into the module’s settings and upload some CSS to modify this.
Customized CSS
Lively Portfolio Filter out:
background: #ffffff; colour: #323741 !essential;
Getting rid of Animation From Module
To offer a cleaner enjoy, we’ll be eliminating the default animation that incorporates the Filterable Portfolio Module. For this, we’ll first wish to return into our Web page Settings and upload some CSS that can goal the portfolio grid pieces and take away the slide-in transition that happens out of the field with Divi.
Customized CSS
/* Take away transition */ .et_pb_filterable_portfolio .et_pb_portfolio_item.energetic { transition: none; } </code><code> .et_pb_portfolio_item { animation: none!essential; transition: none !essential; }
Alternate Portfolio Grid from 4 Columns to 3
Our ultimate CSS addition might be to change into our Portfolio module from 4 columns to a few. This may permit us extra space to look our tasks. Additionally, we’ll be including an extra row to our module. Right here’s the overall CSS snippet that you simply’ll be capable to use to transform your columns.
Customized CSS
For this final snippet, we’ll be including the CSS ID #three-column-grid to our module. We can nonetheless be retaining our CSS elegance from earlier than intact.
/* 4 to three Columns */ @media most effective display and ( min-width: 768px ) { #three-column-grid .et_pb_grid_item { width: 28.333%; margin: 0 7.5% 7.5% 0; } #three-column-grid .et_pb_grid_item:nth-child(3n) { margin-right: 0; } #three-column-grid .et_pb_grid_item:nth-child(3n+1) { transparent: left; } #three-column-grid .et_pb_grid_item:nth-child(4n+1) { transparent: unset; } }
Styling Divi’s Filterable Portfolio: In Conclusion
As with maximum of Divi’s modules, the settings that include Divi may also be additional expanded upon with CSS. Showcasing your paintings is a very powerful a part of operating a trade, weblog or logo on-line. As such, having an arranged approach during which to show your paintings is vital. Glean from the information that have been shared these days to partake to your personal adventure of styling Divi’s Filterable Portfolio module and display us your paintings within the feedback or on social media!
The submit How to Style a Grid Item in Divi’s Filterable Portfolio Module seemed first on Elegant Themes Blog.
Contents
- 1 What’s Divi’s Filterable Portfolio Module?
- 2 How We’ll Be Styling Divi’s Filterable Portfolio Module
- 3 Styling Divi’s Filterable Portfolio Module: Divi Convention Version
- 3.1 Input the Divi Format Library
- 3.2 Find Format Throughout the Divi Format Library
- 3.3 Set up the Format
- 3.4 Take away and Exchange Symbol Module
- 3.5 Insert the Divi Filterable Portfolio Module
- 3.6 Surroundings the Put up Depend and Portfolio Format
- 3.7 Start Styling Divi’s Filterable Portfolio: Name and Meta Textual content
- 3.8 Adjust Border and Rounded Corners of Challenge Thumbnail
- 3.9 Customizing the Hover Overlay
- 3.10 Styling the Pagination
- 3.11 The use of Customized CSS & Divi Settings to Taste the Filter out Textual content
- 3.12 Styling the Lively Portfolio Filter out Tab
- 3.13 Ultimate Glance Styling Divi’s Filterable Portfolio with Divi Convention
- 4 Styling Divi’s Filterable Portfolio Module: Divi On-line Yoga Trainer Version
- 4.1 Placing Filterable Portfolio Module
- 4.2 Taste Filter out Standards Textual content, Challenge Name and Pagination Textual content
- 4.3 Making a Translucent Hover Overlay
- 4.4 Including a Border to the Portfolio Grid Pieces with Customized CSS
- 4.5 Including CSS to Taste Pagination Border
- 4.6 Styling the Filter out Standards Textual content
- 4.7 Getting rid of Animation From Module
- 4.8 Alternate Portfolio Grid from 4 Columns to 3
- 4.9 Styling Divi’s Filterable Portfolio: In Conclusion
- 4.10 Related posts:
- 5 What is Omnichannel Marketing? A Complete Guide to Getting Started
- 6 What’s E mail Web hosting and The best way to In finding Easiest E mail Web hosting Carrier
- 7 Biggest Contentful Paint (LCP) and How one can Enhance It in WordPress
0 Comments