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.


STAY RELEVANT | BE INFORMED | SIGN UP NOW

IT DOES NOT TAKE LONG TO GET LEFT BEHIND!

You have Successfully Subscribed!

Pin It on Pinterest