Published on Feb 3, 2021

Wide and Full Gutenberg Elements in Oxygen

Sridhar Katakam

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 $599 one-time).

Already a member? Log in below or here.

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