Designing a Side-by-Side Blog Post Layout in Showit

When sharing your work you might find yourself wanting a modern grid-based layout that seems to be popular in web design these days.

So in this quick tutorial I’ll show you how that’s all setup in Showit so the transition to blogging in WordPress doesn’t have any hiccups along the way. 

side by side blog post layout - by stephanie design

For the purposes of this tutorial, I’ll be using my soon-to-be released August Showit Template ideal for Creative Entrepreneurs looking for a classic web theme to market their services. 

side by side blog post layout

 

side by side blog post layout in showit - by stephanie

STEPS

On Desktop View

  • Create a new Canvas below your featured Posts section or under your website header canvas

  • Insert 2-3 images on this new Canvas – I’m using placeholders at the moment in a 2:3 ratio.

  • Choose”In Post Loop” from the WordPress dropdown in Canvas Settings and check the small box for “combine views as posts.” (see screenshot below)

  • The above setting will automatically repeat the canvas vertically, so no additional photos or placeholders need created.

side by side blog post layout - by stephanie

Choose”In Post Loop” from the WordPress dropdown in Canvas Settings. This ensures every time you hit publish on a new post it publishes live on your Showit website as well.

 


 

On Mobile View

  • Stack your posts vertically in the same order they appear horizontally on your desktop view.


HOW TO SET NUMBER OF BLOG POSTS DISPLAYED

  • If you wish to show, for example, 12 posts on your blog at a time, you’d set this inside WordPress.

  • Log-in to your WordPress website.

  • Go to Settings -> Readings

  • Choose the number of blog posts you want to show by adjusting the number next to Blog Pages Shown at Most.

  • Hit Save!


 I hope this tutorial helps you understand how Showit and WordPress work in tandem for a more powerful blogging experience. 

With each website purchase from my Showit Website Template shop you’ll find one 11 minute, step-by-step video training that will familiarize yourself with the WordPress back-end. I think we can agree not needing to know CSS or other coding language is appealing to photographers many other businesses that want to make updates to their website on their own time, so I want you to feel confident managing that aspect on your own!

If you have any questions about this tutorial please reach out to me at: Stephanie@bystephaniedesign.com

P.S. Interested in signing up with Showit? Enjoy your first month FREE – on me!

February 12th, 2023

Behind 

the blog

owner & creative director of
by stephanie design 

Let's work together 

By Stephanie Hamilton