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.
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.
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 ($37/month or $399 one-time).
Already a member? Log in below or here.
Enter your email address to subscribe to this blog and receive notifications of new tutorials by email.
Join 323 other subscribers
Please log in again.
The login page will open in a new tab. After logging in you can close it and return to this page.