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 ($27/month).

Already a member? Log in below or here.

Need help implementing a tutorial in your site or want to hire me for custom work?

HIRE ME

Find the article helpful and wish to donate?

DONATE

Comments

For adding code blocks wrap the code in three backticks. Markdown should work.
Provide a URL of your site/webpage if something is not working.
magnifiercross
>
linkedin facebook pinterest youtube rss twitter instagram facebook-blank rss-blank linkedin-blank pinterest youtube twitter instagram
%d bloggers like this: