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 is the second in a series on adding some cool customizations and hover effects to the Divi Blog Grid layout.

In this tutorial I am going to show you how you can create a horizontal blog grid layout with the post-content/excerpt offset to the right of the image. The post-content/excerpt will also have a subtle shadow and animation on hover.

View The Live Demo

Let’s Get Started Making The Divi Blog Grid Offset Content with Hover Animation

 

Adding The Blog Modules

1. Create a row and give it 4 columns.

001 blog offset

 

2. Open up the row settings, go to the Custom CSS Tab and assign each Column a CSS Class. Please use these classes

  • Column 1 CSS Class: mp_blog_grid_offset_row_c1
  • Column 2 CSS Class: mp_blog_grid_offset_row_c2
  • Column 3 CSS Class: mp_blog_grid_offset_row_c3
  • Column 4 CSS Class: mp_blog_grid_offset_row_c4

 002 blog offset

 

 

3. Add a Blog Module to the first column.

blog grid slide down 2

 

4. Next you will adjust the blog module settings as follows.

  • Layout: Grid
  • Posts Number: 1
  • Show Featured Image: Yes
  • Content: n/a
  • Read More Button: n/a
  • Show Author: Yes (optional)
  • Show Date: Yes (optional)
  • Show Categories: Yes (optional)
  • Show Comment Count: No
  • Show Pagination: No
  • Offset Number: 0

blog grid slide down 3

 

5. In that same module, go to the Custom CSS tab and assign the module the following CSS Class: mp_blog_module_a

blog offset 3

 

6. Now duplicate the blog module and move it into the second column.

 

7. Next you will adjust the second blog module settings as follows.

  • Layout: Grid
  • Posts Number: 1
  • Show Featured Image: n/a
  • Content: Show Excerpt
  • Read More Button: Yes
  • Show Author: n/a
  • Show Date: n/a
  • Show Categories: n/a
  • Show Comment Count: No
  • Show Pagination: No
  • Offset Number: 0

blog grid slide down 3

 

8. In that same module, go to the Custom CSS tab and assign the module the following CSS Class: mp_blog_module_b

blog offset 5

 

9. Clone the module in Column 1 and drag it to column 3. Clone the module in Column 2 and drag it to Column 4

blog offset 6

 

10. In both of the new modules in columns 3 & 4, you are going to change the offset number from 0 to 1.

blog offset 7

 

11. If you want to add a second row, just duplicate the entire row and then:

  • In both of the modules in columns 1 & 2, you are going to change the offset number from 0 to 2.
  • In both of the modules in columns 3 & 4, you are going to change the offset number from 1 to 3.

blog offset 8

 

12. Save your page and move on to the magic of adding a little CSS.

 

 

Adding The Custom 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>Custom CSS (which is located at the bottom of the first tab in Theme Options)

Add this CSS.

/*------------------------------------------------*/
/*------[GQ - BLOG GRID OFFSET CONTENT]-----------*/
/*------------------------------------------------*/

	@media only screen and (min-width : 981px) {
		.mp_blog_grid_offset_row_c1,
		.mp_blog_grid_offset_row_c2,
		.mp_blog_grid_offset_row_c3,
		.mp_blog_grid_offset_row_c4 {
			width: 25% !important;
			margin-right: 0!important;}

		.mp_blog_module_a .et_pb_post {
			padding: 0px;}

		.mp_blog_module_a .et_pb_image_container {
			margin: 0px;}

		.mp_blog_module_a h2  {
			margin-top: 0px;
			padding: 10px 10px 5px;
			background: #3173b5;
			color: #fff!important;}

		.mp_blog_module_a .post-meta {
			margin-bottom: 0px;
			padding: 0px 10px 10px;
			background: #3173b5;
			color: #fff!important;}

		.mp_blog_module_a .post-meta a {
			color: #fff!important;}

		.mp_blog_module_a .post-content {
			display: none;}

		.mp_blog_module_b .et_pb_image_container {
			display: none;}

		.mp_blog_module_b h2, 
		.mp_blog_module_b .et_pb_post .post-meta{
			display: none;}

		.mp_blog_module_b .et_pb_post {
			margin: 32px 15px 0px -20px!important;
			box-shadow: 0px 0px 90px 15px rgba(109, 109, 109, 0.2);
			-webkit-transition: all 0.3s ease-in-out;
			-moz-transition: all 0.3s ease-in-out;
			-ms-transition: all 0.3s ease-in-out;
			-o-transition: all 0.3s ease-in-out;
			transition: all 0.3s ease-in-out;}

		.mp_blog_module_b .et_pb_post:hover {
			box-shadow: 0px 0px 100px 20px rgba(109, 109, 109, 0.4);
			margin-top: 20px!important;
			margin-bottom: 12px!important;}
	}

	@media only screen and (max-width : 980px) {
		.mp_blog_module_b {
			display: none;}

		.mp_blog_module_a .et_pb_post,
		.mp_blog_module_b .et_pb_post {
			margin-bottom: 0px!important;}

		.mp_blog_grid_offset_row_c2,
		.mp_blog_grid_offset_row_c4 {
			display:none;}

		.mp_blog_grid_offset_row_c3 {
			margin-right: 0px!important;}}

 

 

Making Adjustments

I wrapped this in a couple of media queries so that it only applies the CSS on typical desktop screen sizes and returns things to normal on desktop.

blog offset 9

 

To adjust the margin, padding, background color, and font color for the post title, you can do so here:

blog effect 10

 

If you want to adjust the post-content/excerpt box shadow & animation on hover, for the you can do so here:

blog offset 11

 

And that’s it.

If you used this on one of your projects, please share a link below so we can see how you used it.

Have fun!


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