Grid post on non Divi pages

[et_pb_section admin_label=”section” transparent_background=”off” background_color=”#ffffff” allow_player_pause=”off” inner_shadow=”off” parallax=”off” parallax_method=”off” custom_padding=”0px|||” padding_mobile=”on” make_fullwidth=”off” use_custom_width=”off” width_unit=”on” make_equal=”off” use_custom_gutter=”off”][et_pb_row admin_label=”Row” make_fullwidth=”on” use_custom_width=”off” width_unit=”on” use_custom_gutter=”on” gutter_width=”1″ padding_mobile=”on” allow_player_pause=”off” parallax=”off” parallax_method=”off” make_equal=”off” parallax_1=”off” parallax_method_1=”off” column_padding_mobile=”on” custom_padding=”0px||0px|”][et_pb_column type=”4_4″][et_pb_image admin_label=”Image” src=”http://legacy.divistride.com/wp-content/uploads/2016/02/post-1.png” show_in_lightbox=”off” url_new_window=”off” use_overlay=”off” animation=”left” sticky=”off” align=”left” force_fullwidth=”on” always_center_on_mobile=”on” use_border_color=”off” border_color=”#ffffff” border_style=”solid”] [/et_pb_image][/et_pb_column][/et_pb_row][et_pb_row admin_label=”row” make_fullwidth=”off” use_custom_width=”off” width_unit=”on” use_custom_gutter=”off” padding_mobile=”off” allow_player_pause=”off” parallax=”off” parallax_method=”off” make_equal=”off” parallax_1=”off” parallax_method_1=”off” column_padding_mobile=”on”][et_pb_column type=”4_4″][et_pb_blurb admin_label=”Blurb” title=”Grid Post on non Divi pages” url_new_window=”off” use_icon=”off” icon_color=”#d76000″ use_circle=”off” circle_color=”#d76000″ use_circle_border=”off” circle_border_color=”#d76000″ icon_placement=”top” animation=”top” background_layout=”light” text_orientation=”left” use_icon_font_size=”off” header_font=”|on|||” header_font_size=”25″ use_border_color=”off” border_color=”#ffffff” border_style=”solid”] [/et_pb_blurb][et_pb_text admin_label=”Text” background_layout=”light” text_orientation=”left” use_border_color=”off” border_color=”#ffffff” border_style=”solid”]

Divi allows us to create truly unique website and pretty decent blog pages but some stuff you can’t use the page builder on like category pages and the archive, the reason that this is a problem is because it leaves your website looking inconsistent, which is not very professional so today I’m going to show you how to makes these pages have the grid blog style.

First you thing you will need to decide is if you want these pages to be fullwidth or if you would like a sidebar on these pages, if you want a sidebar you can scroll down to column section.

Removing sidebar:

next we are going to remove the sidebar line from our pages.

Making content area full width:

Now that we’ve removed the sidebar there is a massive space where the sidebar used to be, we will need to extend our content area into that space.

3 Column layout (fullwidth):

2 Column layout (sidebar):

If you chose to keep your sidebar you will only need the following code make your post display as a grid on those pages.

Responsive time

Next we will need to make sure our grid stay responsive on mobile devices, I’m going to make both 3 and 2 columns become 2 columns on tablets and 1 one column on mobile phones.

[/et_pb_text][et_pb_dmb_code_snippet admin_label=”Code Snippet” title=”CSS Snippet” style=”androidstudio” linenums=”on” usetabwidth=”off” use_border_color=”off” border_color=”#ffffff” border_style=”solid” custom_css_codesnippet_heading=”background:#d76000;||padding-right:3%;||padding-left:3%;||padding-top:1%;||padding-bottom:1%;||border-top-left-radius: 5px;||border-top-right-radius: 5px;||” header_font=”|on||on|” header_font_size=”18px” header_text_color=”#fcfcfc” custom_css_codesnippet_codearea=”border-bottom-right-radius:5px;||border-bottom-left-radius:5px;”]LyogbGFuZHNjYXBlIFRhYmxldHMgKi8KQG1lZGlhICggbWluLXdpZHRoOiA5ODFweCApIGFuZCAoIG1heC13aWR0aDogMTA5OXB4ICkgewouYXJjaGl2ZSAuZXRfcGJfcG9zdCwgLmNhdGVnb3J5IC5ldF9wYl9wb3N0LCAuYmxvZyAuZXRfcGJfcG9zdHt3aWR0aDo0NSUhaW1wb3J0YW50OyBtYXJnaW4tcmlnaHQ6Mi41JTttYXJnaW4tbGVmdDoyLjUlO30KfQogCi8qIFBvcnRyYWl0IFRhYmxldHMqLwpAbWVkaWEgKCBtaW4td2lkdGg6IDc2OHB4ICkgYW5kICggbWF4LXdpZHRoOiA5ODBweCApIHsKLmFyY2hpdmUgLmV0X3BiX3Bvc3QsIC5jYXRlZ29yeSAuZXRfcGJfcG9zdCwgLmJsb2cgLmV0X3BiX3Bvc3R7d2lkdGg6NDUlIWltcG9ydGFudDsgbWFyZ2luLXJpZ2h0OjIuNSU7bWFyZ2luLWxlZnQ6Mi41JTt9Cn0KLyogTGFuZHNjYXBlIFBob25lcyAqLwpAbWVkaWEgKCBtaW4td2lkdGg6IDQ4MHB4ICkgYW5kICggbWF4LXdpZHRoOiA3NjdweCApIHsKLmFyY2hpdmUgLmV0X3BiX3Bvc3QsIC5jYXRlZ29yeSAuZXRfcGJfcG9zdCwgLmJsb2cgLmV0X3BiX3Bvc3R7d2lkdGg6OTUlIWltcG9ydGFudDsgbWFyZ2luLXJpZ2h0OjIuNSU7bWFyZ2luLWxlZnQ6Mi41JTt9Cn0KLyogUG9ydHJhaXQgUGhvbmVzICovQG1lZGlhICggbWF4LXdpZHRoOiA0NzlweCApIHsKLmFyY2hpdmUgLmV0X3BiX3Bvc3QsIC5jYXRlZ29yeSAuZXRfcGJfcG9zdCwgLmJsb2cgLmV0X3BiX3Bvc3R7d2lkdGg6OTUlIWltcG9ydGFudDsgbWFyZ2luLXJpZ2h0OjIuNSU7bWFyZ2luLWxlZnQ6Mi41JTt9Cn0=[/et_pb_dmb_code_snippet][et_pb_text admin_label=”Text” background_layout=”light” text_orientation=”left” use_border_color=”off” border_color=”#ffffff” border_style=”solid”]

If you want it on just a category or archive page, you will just need to remove either .archive, .category or .blog to every CSS item we have added, personally, I think it best to apply the style to all blog pages.

For demo purposes, I’ve made my archive page have a sidebar and my blog page to not have a sidebar so that you can see what the two layouts will look like.

[/et_pb_text][/et_pb_column][/et_pb_row][et_pb_row admin_label=”Row” make_fullwidth=”off” use_custom_width=”off” width_unit=”on” use_custom_gutter=”on” gutter_width=”2″ padding_mobile=”off” allow_player_pause=”off” parallax=”off” parallax_method=”off” make_equal=”off” parallax_1=”off” parallax_method_1=”off” parallax_2=”off” parallax_method_2=”off” column_padding_mobile=”on” custom_padding=”||0px|”][et_pb_column type=”1_2″][et_pb_button admin_label=”Button” button_url=”http://playground.boltthemes.com/blog/” url_new_window=”off” button_text=”3 Columns” button_alignment=”center” background_layout=”light” custom_button=”on” button_border_width=”0″ button_letter_spacing=”0″ button_use_icon=”default” button_icon_placement=”right” button_on_hover=”on” button_letter_spacing_hover=”0″ custom_css_main_element=”width:100%;” button_text_color=”#ffffff”] [/et_pb_button][/et_pb_column][et_pb_column type=”1_2″][et_pb_button admin_label=”Button” button_url=”http://playground.boltthemes.com/2016/02/” url_new_window=”off” button_text=”2 Columns” button_alignment=”center” background_layout=”light” custom_button=”on” button_border_width=”0″ button_letter_spacing=”0″ button_use_icon=”default” button_icon_placement=”right” button_on_hover=”on” button_letter_spacing_hover=”0″ custom_css_main_element=”width:100%;” button_text_color=”#ffffff”] [/et_pb_button][/et_pb_column][/et_pb_row][et_pb_row admin_label=”Row”][et_pb_column type=”4_4″][et_pb_text admin_label=”Text” background_layout=”light” text_orientation=”left” use_border_color=”off” border_color=”#ffffff” border_style=”solid”]

Hope you find this tutorial useful 🙂

[/et_pb_text][/et_pb_column][/et_pb_row][/et_pb_section]

Comments

One response to “Grid post on non Divi pages”

lelebart

September 23, 2016

Thanks, it’s a very useful trick: may I suggest a different approach for the 2 columns grid?

[...] .archive .et_pb_post:nth-child(odd), .category .et_pb_post:nth-child(odd), .blog .et_pb_post:nth-child(odd) { margin-right: 10%; } .archive .et_pb_post:nth-child(even), .category .et_pb_post:nth-child(even), .blog .et_pb_post:nth-child(even) { margin-right: 0; }