In the past David wrote about Gutenberg Wide Alignments for Post Templates in Oxygen.

This members-only tutorial provides the steps to do something similar but using CSS Grid based on this article.

This tutorial applies to the post (of any type) content that is written in the WordPress Gutenberg editor rendered via the Inner Content component in Oxygen.

Note: The CSS has been tested in and written for a default Oxygen install that uses the Atomic design set with one exception that will be detailed below. If you are not using the Atomic design set, you can examine how its Templates are set up by spinning a site in the sandbox.

Step 1

Edit the Template that applies to single blog posts.

The default Atomic template renders the post content via the shortcode, i.e., by inserting Post / Content in the Insert Dynamic Data dialog. This outputs the content inside a span - not an ideal candidate for a container.

A better way is to instead add the Inner Content component.

Step 2

Add the following CSS in a Stylesheet at Manage > Stylesheets:

This is a premium members-only content.

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

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

You need to be logged in to view and post comments.
Not a member yet? Join here.
magnifiercross
>
linkedin facebook pinterest youtube rss twitter instagram facebook-blank rss-blank linkedin-blank pinterest youtube twitter instagram
%d bloggers like this: