Divi Tutorials + Layout Kits | WordPress Tips | Business Growth

Home of the Original Divi Tutorials & Divi Layout Kits.

Divi Tutorials + Layout Kits | WordPress Tips | Business Growth

Home of the Original Divi Tutorials & Divi Layout Kits.

*This tutorial is now outdated but please take a look at the updated tutorial hewre: https://quiroz.co/divi-portfolio-grid-hover-animations-larger-images/

The remainder of this tutorial is for educational/archive purposes only.

One of the great features in Divi is the portfolio grid options. By default it has a great look and feel.

The Divi portfolio grid highlights your projects in a four column-wide display with a great hover effect. Out of the box it looks something like this.

 

001

 

But I felt the four columns made things a little cramped as i really wanted to highlight the featured image of each project a little more.

So I decided to give it a darker background and make the grid 3 columns instead of 4. That way I can make the images a little larger.

I also wanted to change the hover effect a little to match the color scheme of my site which was dark grey and orange.

Basically I wanted it to look something like this…

 

009

Or see the live demo here  https://quiroz.co/2014-Demo/portfolio/

 

So lets do this.

Create the Portfolio Page in Divi

 

1. Go to your Dashboard and add a new page

 

003

 

2. Then as you can see I start off with a basic layout using Page Builder. For this tut I simply used a fullwidth header and then a section with a single column below it.

 

004

 

 

3. Now lets open up those “Section Module Settings” and give it a nice dark background so that our portfolio images will pop off the page a little better. I used #303030 but you can use whatever color works best for your website.

 

007

 

 

4. Now this next step is important if you don’t want your changes to mess with anything else on your site. I am going to give this section a unique  CSS Class.

5. So open up your “Section Module Settings” and give it the CSS Class – portfolio-section

 

005

 

 

6. Next I add a standard portfolio module.

 

006

 

 

7. These are the settings I am going to use. Keep in mind my objective was to highlight the image so I am turning off some of the extra meta data.

  • Layout: Grid
  • Posts Number: 16 (or whatever you want)
  • Include Categories: Check them all (or whatever you want)
  • Title: Show
  • Categories: Don’t show
  • Pagination: Don’t show
  • Text Color: Light
  • Admin Label: Portfolio
  • CSS ID: Blank
  • CSS Class: Blank

 

Great. Now it should look something like this

 

008

 

 

The Magic of CSS

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

Changing it from 4 to 3 columns

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)

 


/* Change columns from 4-3 */

.et_pb_column_4_4 .et_pb_portfolio_grid .project {
  clear: none !important;
  margin: 0 60px 42px 0 !important;
  width: 27% !important;}

 

 

Modifying the Images and Meta

This snippet of CSS will do the following…

Stretch out the images a bit, adjust the text color and font size, give the image a slight shadow and give the image slightly rounded corners and a thin dark grey border.

 


/* Gallery Items */

	.portfolio-section img {max-width: 110%;}
	.portfolio-section h2 a {font-size:14px; color: #b2b2b2;}
	.portfolio-section .post-meta {font-size:12px; margin-top:-13px; color:#cecece!important;}
	.portfolio-section .et_portfolio_image {
		border: 1px solid #28323a;
		-moz-box-shadow: 0 5px 10px rgba(0,0,0,.3);
		-webkit-box-shadow: 0 5px 10px rgba(0,0,0,.3);
		box-shadow: 0 5px 10px rgba(0,0,0,.3);}
	.portfolio-section .et_portfolio_image, .et_portfolio_image img {border-radius: 1px 1px #fc5a20;}

 

 

Now About That Cool Hover Effect called the Overlay

This snippet of CSS will do the following…

Stretch out the overlay to fit the image, change the transparent color from white to dark grey, give it an orange border to match my sites colors, and give it a cool slow transition.

 


/* Overlay */
        .portfolio-section .et_overlay {width: 110%; background: rgba(30, 32, 36, 0.8); border-radius: 1px 1px; BORDER-COLOR: #fc5a20; }

	.portfolio-section .et_overlay:before {	
		margin: -14px 0 0 -18px; 
		-moz-transition: all 0.6s; 
		-webkit-transition: all 0.6s; 
		transition: all 0.6s; 
		color:#fc5a20!important;}

 

 

Keeping It Mobile Friendly

This last bit will help it play nicely with your mobile devices.

 

/* --------- iPads (Portrait) ---------- */
	@media only screen and (max-width: 980px) {
	.laptops {margin-top: -190px;}
	.et_pb_column_4_4 .et_pb_portfolio_grid .project {clear: none !important; margin: 0 40px 42px 0 !important;width: 27% !important;}}

/* ------- iPhone5 (landscape) --------- */
	@media only screen and (max-width: 767px) {
	.laptops {margin-top: -150px;}
	.et_pb_column_4_4 .et_pb_portfolio_grid .project { margin: 0 40px 42px 0 !important; width: 100% !important;}
	.portfolio-section .et_overlay {width: 101%;}}

/* ------- iPhone5 (portrait) ---------- */
	@media only screen and (max-width: 479px){
		.laptops {margin-top: -120px;}
		.portfolio-section img {max-width: 100%;}}

 

And now you should have something like this.

009

 

You can check it out live in action on the demo page here https://quiroz.co/2014-Demo/portfolio/

 

Or if you want more inspiration, you can see how I used it on my portfolio page at Monterey Premier.

 


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


The following two tabs change content below.
Geno is an entrepreneur who has been designing websites since 1996. He also enjoys all things design, traveling, hanging out with friends, encouraging other believers, and experimenting with new technologies. When not doing any of the above, you can find Geno blogging or writing Divi customization tutorials here on Quiroz.co.

©2012-2019 Geno Quiroz | Teach Learn Build Love | Divi Expert Services | John 3:16

Divi is a registered trademark of Elegant Themes, Inc. This website is not affiliated with nor endorsed by Elegant Themes.

STAY RELEVANT | BE INFORMED | SIGN UP NOW

IT DOES NOT TAKE LONG TO GET LEFT BEHIND!

You have Successfully Subscribed!

Pin It on Pinterest