Didi Theme (Premium): Blog Page into Grid design

• 

  hmsellors · Member · Mar 20, 2018 at 11:15 am

  • Copy link
  • Add topic to favorites

  I would like my blog page to only show excerpts of each post in a grid style layout. It is currently showing the all the content and visitors will have to scroll through every post.

  The blog I need help with is: (visible only to logged in users)

• 

  shubhamgmath · Member · Mar 20, 2018 at 11:32 am

  • Copy link

  Hi hmsellors

  I would like my blog page to only show excerpts of each post in a grid style layout. It is currently showing the all the content and visitors will have to scroll through every post.

  To make your blog page as grid layout page follow the following steps:
  1. Go to My sites
  2. Go to pages
  3. Edit the following blog page.
  4. In the right-hand side, you will get the page template option and choose the grid template under that option.

  You can also find the different templates under your theme setup document here is the link for theme overview page:
  https://wordpress.com/theme/didi

  Hope this helps, feel free to ask if you have any doubts.

• 

  hmsellors · Member · Mar 20, 2018 at 1:53 pm

  • Copy link

  Thank you for your help, however my home page is set to ‘ front page’ (which I would like to keep) but when I edit the Blog page, I do not have the option to edit the template to a grid layout.

• 

  thesacredpath · Member · Mar 20, 2018 at 9:30 pm

  • Copy link

  Hi @hmsellors, You can add the Read More link to your posts to shorten the amount of text that shows.

  Didi does not have a grid layout for the blog page, but it is possible to use some advanced custom CSS to get a grid layout, but given the amount of room there is in the content area when a sidebar is present, the posts would end up being quite narrow, so if you wanted to pursue this, I would recommend not having a sidebar on the blog page.

  This is quite a bit of work and requires the use of Media Queries to adjust things for various screen widths, so I’d like to hear your thoughts on what I said above before I work out the CSS to do this.

  Also, one last thing, this is advanced CSS, and although most modern browsers support this, in the case of Internet Explorer, only IE 11 and later support it, so if someone visits your site on IE 10 or earlier, they will not see this change.

• 

  hmsellors · Member · Mar 21, 2018 at 9:48 am

  • Copy link

  Thank you so much @thesacredpath, I tested the simpler ‘read more’ advice and its great, just what I was after thank you very much!

• 

  thesacredpath · Member · Mar 21, 2018 at 6:45 pm

  • Copy link

  Awesome, and you are welcome!