How To Create A Full-Width Oxygen Block

The video tutorial shows you how to create a full-width Oxygen block that can then be used directly from within Gutenberg. The block with appear edge to edge in your page.

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 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.

Leave a Reply

Your email address will not be published. Required fields are marked *

linkedin facebook pinterest youtube rss twitter instagram facebook-blank rss-blank linkedin-blank pinterest youtube twitter instagram