In this tutorial we will implement a full width filterable portfolio which is common request in the Divi Community. Actually, what we will do is change the normal filterable portfolio with some custom modules in order to be working as full width too. You can see the live example in our Horizzons Web Design´s portfolio:

Step 1: Use a Child Theme

If you are not using a child theme yet, it´s time to download ours and install it just as a regular theme and activate it.

Step 2: Create new folder and custom files in the child theme

After installing the child theme create a folder named custom-modules inside the divi-child root folder, using a FTP Client or Cpanel File Manager. Inside that folder place this two .php files (cfpm.php and cfwpm.php) that you can download here:

Step 3: Create the portfolio

Create a standard section and insert a normal Filterable Portfolio. In the Custom CSS tab of the portfolio module insert the class wpc-full-width-portfolio. In the Row Module Settings > Make This Row Fullwidth and Use a Custom Gutter Width = 1.

Step 4: Insert Custom CSS

In the divi child theme style.css file or in the Divi Theme Options > General > Custom CSS, insert the following css code and customize it accordingly to your needs.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
/***********************************************
/* PORTFOLIO CUSTOM MODULES - FULLWIDTH
/**********************************************/

.wpc-full-width-portfolio {
max-width:1265px!important;
margin:auto!important;
}
.wpc-full-width-portfolio .et_pb_portfolio_filters ul {
text-align: center;
}
.wpc-full-width-portfolio .et_pb_portfolio_filters li {
float: none;
font-size: 14px;
line-height: 1em;
display: inline-block;
}
.et_pb_filterable_portfolio .et_pb_portfolio_filters li a {
color: #000000;
}
.et_pb_gutters3 .et_pb_column_4_4 .wpc-full-width-portfolio .et_pb_portfolio_item.et_pb_grid_item {
margin:0px;
}

/* Portfolio Thumbnail Title */
.wpc-full-width-portfolio .wpc-portfolio-title {
position: absolute;
top: 20%;
width: 100%;
text-align: center;
font-size: 20px;
}
.wpc-full-width-portfolio .et_portfolio_image {
margin:5px!important;
}

Step 4: Adjust portfolio thumbnail title

In order to have the portfolio title appearing on thumbnail hover, insert the following code on your child theme functions.php.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
/****************************************
Portfolio Thumbnail Customisation
****************************************/


function add_icons_fullwidth_portfolio() {
   if ( class_exists('ET_Builder_Module')) {
     get_template_part( 'custom-modules/cfwpm' );
     $cfwpm = new WPC_ET_Builder_Module_Fullwidth_Portfolio ();
     remove_shortcode( 'et_pb_fullwidth_portfolio' );
     add_shortcode( 'et_pb_fullwidth_portfolio', array($cfwpm, '_shortcode_callback') );
   }
}
add_action('wp', 'add_icons_fullwidth_portfolio', 9999);


function add_title_filterable_portfolio() {
   if ( class_exists('ET_Builder_Module')) {
      get_template_part( 'custom-modules/cfpm' );
      $cfpm = new WPC_ET_Builder_Module_Filterable_Portfolio();
      remove_shortcode( 'et_pb_filterable_portfolio' );
      add_shortcode( 'et_pb_filterable_portfolio', array($cfpm, '_shortcode_callback') );
   }
}