How to Style a Grid Item in Divi’s Filterable Portfolio Module

by | Oct 11, 2022 | Etcetera | 0 comments

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.

The Projects custom post type that comes with every Divi install

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:

The Divi Filterable Portfolio Module with sample projects

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

The Divi Conference Event Layout with the Filterable Portfolio Module

Divi On-line Yoga Trainer Touchdown Web page Format

The Divi Online Yoga Instructor Layout with the Filterable Portfolio Module

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

Load the Divi Layout 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.

Search for the Divi Conference event page layout within the Divi Layout Library

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.

Install selected layout

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.

Remove Image Module

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.

See also  Using Basic Captcha vs ReCaptcha in Divi’s Contact Form Module

Insert the Filterable Portfolio Module

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.

Setting the Post Count and Portfolio Layout

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

Text styling edits for your newly added module

Styled titles within the Filterable Portfolio Module

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

Adding the corners and borders to the featured image

Rounded corners and border styling added to portfolio list items

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

Setting for the hover overlay effect

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.

Hover styling from in effect within the Divi Conference Event Page Layout

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

Styling the pagination of the Divi Filterable Module

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;

Portfolio Pagination CSS

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

Filter criteria text styling

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.

See also  How to Push a WordPress Development Site Live

Access page settings

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.

Access and enter into the page settings for adding additional CSS

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;
}

Using Page Settings to set the color of the background of the module's filters

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;

Active Portfolio Filter styling

Hover State

On hover, we’ll alternate the background to black.

colour: #000000!essential;

Background styling of hover for Active Portfolio Filter

Ultimate Glance Styling Divi’s Filterable Portfolio with Divi Convention

Right here’s the overall glance!

Finished Styling Divi's Filterable Portfolio Module for Divi Conference

And now, right here’s what it looks as if after we hover!

Finished Styling Divi's Filterable Portfolio Module for Divi Conference

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.

Updating the Online Yoga Instructor layout

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.

Rearranging the layout in preparation for our new module

Subsequent, we’ll substitute them with a unmarried column throughout the row inside of which. Then, we’ll upload our Filterable Portfolio Module.

Inserting Filterable Portfolio Module into newly created row

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.

Disable show categories for the module

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

Title and Text Styling - Part One

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

Title and Text Styling - Part One

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!

New text styling implemented into the portfolio module

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
See also  Personnel Traits You Want To Know About in 2022 [New Data]

Styling the hover overlay

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;
}

Adding a CSS class to our module in addition to custom CSS

Right here we have our Filterable Portfolio Module with a pleasing border – and soe padding – round every grid merchandise.

Some padding and a border for the portfolio module

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.

Filter text and border styling added to Divi's Filterable Portfolio Module

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;

Styling the Active Filter setting with Custom CSS

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;
}
}

Adding CSS ID

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.

WordPress Maintenance Plans | WordPress Hosting

read more

0 Comments

Submit a Comment

Your email address will not be published. Required fields are marked *