Create A Full-Width Oxygen Block Or Section

The video tutorial shows you how to build a full-width Oxygen block that goes edge to edge, and can be used directly from within Gutenberg. This means you can add full-width, edge to edge blocks at any time, easily, directly from with Gutenberg and without having to install any third party block libraries.

Although I provide written instructions below, please watch the video as it shows you everything you need to create a full width block in Oxygen Builder, or a full width section in Oxygen Builder.

Step By Step Instructions

In the video tutorial above, I created an Oxygen Block using Oxygen Builder. Oxygen Blocks allows you to create your own Gutenberg blocks that can then be used directly within the Gutenberg editor. This particular example is a full-width Oxygen block.

Create The Oxygen Block

Go into Oxygen → Oxygen Blocks and create a new block. Give it a name and publish it straight away without doing any further work to define it. For example, I named mine Block Full Width CTA.

Design Your Oxygen Block

Give your block section a background color and add any elements you want to add, then apply the styles and colours you want. Then of course save it. For example in my demo I gave the Oxygen Block a heading, text and a button and I changed their colors.

Test Your Work

It’s never a good idea to do too much before checking that everything is OK. So with this in mind, create a post or page and make sure you are able to add the Oxygen Block to your post directly from Gutenberg. At this stage the block will not be edge-to-edge nor full-width, but should be editable from within Gutenberg.

Add The CSS

To make the block full width, define a CSS class called alignfull. I did this by adding the CSS shown below to my site. I highly recommend the use of MicroThemer for adding CSS. If you do not have it and need a CSS editor, do get it as it will used in a number of my tutorials.

The code I pasted into MicroThemer is shown here.

Style The Oxygen Block Section

Go back to your Oxygen Block and click on the section. Then switch to Advanced → Size and Spacing and change the Width value to 100vw. Then, make sure the Section Container Width to page-width.

Add The Extra Class

We defined the class alignfull when we added the CSS above to MicroThemer. Now add this class to the Oxygen Block section. To do this click on the id selector and then add the class alignfull. Then save your work.

Re-Test The Post

Go back to the post you tested earlier and refresh the page. The Oxygen Block should now be full-width. You can also edit the post to change text displayed in the Oxygen Block for that post.