So for a while now people have wanted to do more with the standard Divi portfolio grid. In fact I have been referring people to the amazing Essential Grid plugin for quite some time now. In fact it is what I have used on many projects including my own Monterey Premier.

But now there is a way to give the native Divi Portfolio Grid some new options without the cost of a premium plugin and without having to have an extra plugin at all.

You can see it in action on Landscapes, A Premium Divi Child Theme.

ls005

Click to see live demo

 

Lets Get Started On The Divi Portfolio Grid

First thing you need to do is create a unique section for the Portfolio Grid

1. Create a new section, open the settings and in the Custom CSS tab, give it the following CSS Class: gq-portfolio-section

001a

 

2. In the row settings you may want to decrease the custom gutter width. I recommend changing it to 2.

002a

 

3. Now you are going to insert a Portfolio Module into that section.

001

 

4. In General Settings, change the setting to Grid and disable the Categories

002

 

5. In Advanced Design Settings, adjust the Hover Overlay Color to rgba(0,0,0,0.5)

007

 

6. Select Save & Exit and Update the page.

 

The Magic of CSS

Now lets start to dazzle things up a bit with some CSS.

If you are working with a child theme you can go to Appearance>Editor and open your stylesheet. If not, go to Appearance>Divi Theme Options>ePanel>Custom CSS (which is located at the bottom of the ePanel)

Add this CSS.


/*------------------------------------------------*/
/*---------[GQ - CUSTOM PORTFOLIO GRID]-----------*/
/*------------------------------------------------*/

/* Change columns from 4-3 */

	@media (min-width: 981px){ 
		.gq-portfolio-section .et_pb_gutters2.et_pb_row .et_pb_column_4_4 .et_pb_grid_item  {width: 31.33% !important;}
		.gq-portfolio-section .et_pb_column_4_4 .et_pb_grid_item:nth-child(4n+1) {clear: inherit;}
		.gq-portfolio-section .et_pb_column_4_4 .et_pb_grid_item:nth-child(4n) {margin-right: 3%!important;}
		.gq-portfolio-section .et_pb_column_4_4 .et_pb_grid_item:nth-child(3n) {margin-right: 0%!important;}}

/* special hover effect for desktop only */

	@media (min-width: 981px){ 
	.gq-portfolio-section .et_portfolio_image {
   		min-height: 200px;}

	.gq-portfolio-section .et_pb_portfolio_item {
    		position: relative;
    		overflow: hidden;
    		max-height: 320px;}

	.gq-portfolio-section .et_pb_portfolio_item img {
    		webkit-transition: -webkit-transform 0.35s;
    		transition: transform 0.35s;
    		-webkit-transform: scale(1.15);
    		transform: scale(1.15);}

	.gq-portfolio-section .et_pb_portfolio_item:hover img {
    		-webkit-transform: scale(1);
    		transform: scale(1);}

	.gq-portfolio-section .et_pb_portfolio_item h2 {
		background-color: #a2c046;
		color: #fff;
		font-size: 16px;
		position:absolute;
		text-align:center;
		width:100%;
		top:100%;
		transition:.5s;
		webkit-transition:.5s;}

	.gq-portfolio-section .et_pb_portfolio_item:hover h2 {
    		top: 78%;
    		padding: 15px 0;}

	.gq-portfolio-section .et_overlay {z-index: 0;}


	.gq-portfolio-section .et_overlay:before {
		opacity:0!important;
    		top: -10%!important;
    		font-family: sans-serif!important;
    		content: 'Read More'!important;
    		font-size: 13px;
    		padding: 10px 20px;
    		background-color: rgba(0, 0, 0, 0.59);
             color: #fff;
	   	   width:100%	
    		left: 50%;
    		margin-right: -50%;
    		transform: translate(-40%)}

	.gq-portfolio-section .et_overlay:hover:before {
		opacity:1!important;
    		top: 6%!important;}

	}

		@media only screen and (min-width : 1061px) and (max-width : 1200px) {
			.gq-portfolio-section  .et_pb_portfolio_item h2 {font-size: 15px!important;}
			.gq-portfolio-section  .et_pb_portfolio_item:hover h2 {top: 73%!important;}}

		@media only screen and (min-width : 981px) and (max-width : 1060px) {
			.gq-portfolio-section  .et_pb_portfolio_item h2 {font-size: 14px!important;}
			.gq-portfolio-section  .et_pb_portfolio_item:hover h2 {top: 72%!important;}}

		@media only screen and (max-width : 980px) {
			.gq-portfolio-section .et_pb_portfolio_item h2 {font-size: 14px!important;}
			.gq-portfolio-section .et_overlay {display:none;}}



		

 

The first set of code changes the grid from 4 column to three column making the images a little larger.

The next batch of code handles all the hover effects. It has also been designed to work on screens larger that 981px so that it does not ruin the mobile or tablet experience. Since mobile users dont have the option to hover and they can only touch, it pretty much renders the effect useless anyways. But you can always change this code if you want it to work on smaller devices.

004

 

You may also adjust the font sizes on a few different screens by adjusting these mobile queries at the end of the custom CSS

005

 

And to change the colors looks for these.

006

 

This code replaces the icon with the Read More Tab. If you want the icon back just remove this code all together.

008

And that’s it! Have fun!


Well that’s all for now. I hope you find this article useful.


DISCLOSURE: I may be an affiliate for some of the products that I recommend. If you purchase those items through my links I will earn a commission which helps cover the cost of the free resources we provide. If you ever have any questions about my affiliations, please do not hesitate to ask..

Pin It on Pinterest

STAY RELEVANT | BE INFORMED | SIGN UP NOW

IT DOES NOT TAKE LONG TO GET LEFT BEHIND!

You have Successfully Subscribed!