Block Extended 3 Columns and Sidebar

Divi blog extras masonry layout
Earth Laughs in Flowers

Earth Laughs in Flowers

At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi,...

How to Achieve

Add Divi Blog Extras Module to a Page and Select Block Extended Layout

Go to Divi Builder Page Setting

Paste the code given below in the Custom CSS area

@media screen and (min-width: 981px) { .et_pb_column_3_4 .et_pb_post_extra.el_dbe_block_extended { width: 30.667%; margin-right: 4%; } .et_pb_column_3_4 .et_pb_post_extra.el_dbe_block_extended:nth-child(2n+2) { margin-right: 4%; } .et_pb_column_3_4 .et_pb_post_extra.el_dbe_block_extended:nth-child(3n+3) { margin-right: 0; } }
If using 2/3 layout and want to display 3 columns using Block Extended layout, use the following snippet @media screen and (min-width: 981px) { .et_pb_column_2_3 .et_pb_post_extra.el_dbe_block_extended { width: 30.667%; margin-right: 4%; } .et_pb_column_2_3 .et_pb_post_extra.el_dbe_block_extended:nth-child(2n+2) { margin-right: 4%; } .et_pb_column_2_3 .et_pb_post_extra.el_dbe_block_extended:nth-child(3n+3) { margin-right: 0; } }
If using Speciality section with 3/4 column layout, use the following snippet. @media screen and (min-width: 981px){ .et_section_specialty .et_pb_column .et_pb_column_4_4 .et_pb_post_extra.el_dbe_block_extended:nth-child(2n+2) { margin-right: 4%; } .et_section_specialty .et_pb_column .et_pb_column_4_4 .et_pb_post_extra.el_dbe_block_extended:nth-child(3n+3) { margin-right: 0; } }