Displaying projects on Elegant Themes’ Divi can be done with the Divi Filterable Portfolio Module (Grid or Fullwidth) or the Fullwidth Portfolio Module. Using the Filterable Portfolio seems fairly common since it allows a user to narrow down their search to a particular project category. On one hand, displaying projects information with the portfolio grid does not form a perfect grid, since the titles and project meta are displayed below the portfolio image; on the other hand, excluding the title and project information leaves a user confused about what the project is about. How can we achieve the perfect balance between the two?

View a Live Demo

In this Divi tutorial, we’ll look at how to:

  1. Add the project title on Divi Filterable Portfolio Grid image on Hover
  2. Customise and style the Portfolio Grid module by:

 

Add the Project Title on Divi Filterable Portfolio Grid image on Hover

1. Add a Divi Filterable Portfolio Grid Module

Add a Filterable Portfolio Module. In the ‘Design’ panel,

  • Change the layout to ‘Grid’

Digital Marketing and Design Blog - Divi Tutorials - Add Divi Filterable Portfolio Module - Leow Hou Teng

Add a Divi Filterable Portfolio Module

Digital Marketing and Design Blog - Divi Tutorials - Divi Filterable Portfolio Grid Layout - Leow Hou Teng

Change the Layout Settings to Grid

 

2. Show Title and Project Category on Contents Tab Elements Section

Continue Reading

In the “Contents’ tab

  • Post Number: 12 (or Multiples of 4)
  • Show Title’ and
  • Show Category’ button (Optional, Personal Preference)

Digital Marketing and Design Blog - Divi Tutorials - Divi Filterable Portfolio Show Title and Category - Leow Hou Teng

Filterable Portfolio Module – Content Settings

 

3. Change the Hover Overlay Colour and Text Colour

In the ‘Design’ Panel

  • Change the Hover Overlay Colour to rgba(0,0,0,0.7)
  • Title Text Colour to #ffffff
  • and Meta Text Colour to #ffffff

Digital Marketing and Design Blog - Divi Tutorials - Divi Filterable Portfolio Module Design Settings - Leow Hou Teng

Filterable Portfolio Module – Design Settings

 

4. Make the Row Fullwidth

In the Row Module Settings under the ‘Design’ panel,

  • Make this Row Fullwidth
  • Use Custom Gutter Width
  • Gutter Width 1

Digital Marketing and Design Blog - Divi Tutorials - Divi Fullwidth Row Module Settings - Leow Hou Teng

Row Module – Design Settings

 

5. Add CSS to the Divi Theme Options Custom CSS

To style the titles and project categories, add the following codes to Divi Theme Options > Custom CSS.

.et_pb_filterable_portfolio .et_pb_portfolio_item h2 {
  width: 100%;
  font-size: 18px;
  text-align: left;
  position: absolute;
  bottom: 10%;
  left: 10%;
  max-width: 200px;
}
.et_pb_filterable_portfolio .et_pb_portfolio_item h2 a {
  color: #ffffff;
}
.et_pb_filterable_portfolio .et_pb_portfolio_item p {
  top: 10%; 
  padding-left: 10%;
}

.et_pb_filterable_portfolio .et_pb_portfolio_filters {
  display: none; /*hides portfolio filters*/
}
.et_pb_filterable_portfolio .et_overlay {
  border: none;
}
.et_pb_filterable_portfolio .et_overlay:before {
  display: none; /*hides overlay icon*/
}

Digital Marketing and Design Blog - Divi Tutorials - Divi Theme Options Custom CSS - Leow Hou Teng

Divi Theme Options > Custom CSS

 

READ  How to Add Divi Animations to Any Sections, Rows and Modules

6. Add a Script to the Website < head > tag

Toggle to Divi Theme Options > Integration > Add code to the < head > of your blog.

<script type="text/javascript">
(function($) {
$(document).ready(function() {
$('.et_pb_filterable_portfolio .et_pb_portfolio_item').each(function() {
var title = $(this).find('h2');
p = $(this).find('p');
$(title).appendTo($(this).find('.et_portfolio_image .et_overlay'));
$(p).appendTo($(this).find('.et_portfolio_image .et_overlay'));
});
});
})(jQuery);
</script>

Digital Marketing and Design Blog - Divi Tutorials - Divi Theme Options Codes Integration - Leow Hou Teng

Divi Theme Options > Integration >

 

To Customise Portfolio Filters:

Add the following code to Divi Theme Options > Custom CSS.

/* Portfolio Filters */

.et_pb_portfolio_filters ul.clearfix {
  max-width: 1260px;
  margin: auto !important;
}
@media only screen and ( min-width: 981px ) {
.et_pb_portfolio_filters ul {
  text-align: center;
}
.et_pb_portfolio_filters ul li {
  display: inline-block;
  float: none !important;
}
}
.et_pb_filterable_portfolio.et_pb_filterable_portfolio .et_pb_portfolio_filters li a {
  border: none;
  background-color: #1b3d5c;
  border-radius: 0;
}
.et_pb_filterable_portfolio.et_pb_filterable_portfolio .et_pb_portfolio_filters li a:hover {
  color: #c58a68 !important;
  transition: 0.5s;
}
.et_pb_filterable_portfolio.et_pb_filterable_portfolio .et_pb_portfolio_filters li a.active {
  color: #00c3e3 !important;
  transition: 0.5s;
}

 

To Add a Different Overlay Colour to a Specific Portfolio Box

NOTE: The colours are not tied to a specific project, but rather, a specific box.

A Different Colour to Even Number Boxes

/* Different Colour to Even Number Portfolios */
.et_pb_filterable_portfolio .et_pb_grid_item:nth-child(even) .et_overlay {
  background-color: rgba(179,179,179,0.7)!important;
}

 

A Different Colour to Every Box

Change the number in nth-child( ) to the box number.

/* Multi-Colour Overlay */
.et_pb_filterable_portfolio .et_pb_grid_item:nth-child(2) .et_overlay, .et_pb_filterable_portfolio .et_pb_grid_item:nth-child(7) .et_overlay {
  background-color: rgba(197,138,104,0.7)!important;
}
.et_pb_filterable_portfolio .et_pb_grid_item:nth-child(3) .et_overlay, .et_pb_filterable_portfolio .et_pb_grid_item:nth-child(8) .et_overlay {
  background-color: rgba(0,195,227,0.7)!important;
}
.et_pb_filterable_portfolio .et_pb_grid_item:nth-child(5) .et_overlay, .et_pb_filterable_portfolio .et_pb_grid_item:nth-child(10) .et_overlay {
  background-color: rgba(0,146,170,0.7)!important;
}
.et_pb_filterable_portfolio .et_pb_grid_item:nth-child(4) .et_overlay, .et_pb_filterable_portfolio .et_pb_grid_item:nth-child(12) .et_overlay {
  background-color: rgba(179,179,179,0.7)!important;
}

Hou Teng

Hou Teng

Art Director, Digital Marketing Strategist at LeowHouTeng.com
Hou Teng is a Singaporean graphic designer, specialising in both print and web. After graduating from Nanyang Technological University, School of Art, Design & Media, he has worked in advertising and launched an education startup as a side project. He has also worked briefly in a renovation start-up in Shen Zhen, China. While his strengths are in branding and layout design, he is also skilled in digital imaging, web design (HTML & CSS), WordPress content management and administration, search engine optimisation, and digital marketing.
Hou Teng