Published on February 26, 2019

Staggered Posts Layout in Oxygen

Sridhar Katakam

This members-only tutorial provides the steps to display Posts on the Posts page (blog) in a step or staggered layout in Oxygen using CSS Grid.

We will set the Posts to appear one below the other from 600px and below.

The idea for this layout is from this Facebook post.

Step 1

If you have not already, create a Page titled say, "Blog".

Go to Settings > Reading and set it as Posts page.

Ensure that your blog posts have featured images.

Step 2

Go to Oxygen > Templates.

Add a new Template titled say, "Blog".

Set it to inherit from your Main Catch All Template having the sitewide elements like header, Inner Content and footer.

Apply the Template to Blog Posts Index.

Set a Template Priority of 1 or higher to override any other existing Template that might apply to this view.

Edit the Template with Oxygen.

a) [Optional] Add a Section having a Heading text that reads "Our Blog" or similar.

b) Add a Section having an Easy Posts.

With the Easy Posts element selected, go to Primary > Templates > Template PHP.

Replace all the default code with:

This is a premium members-only content.

To view the rest of the content, please sign up for membership ($47/month or $499 one-time).

Already a member? Log in below or here.

tagschevron-leftchevron-rightchainangle-rightangle-upangle-downfolder-omagnifiercrossmenuchevron-downarrow-right