Oxygen Builder Layouts Tutorial Using Sections, Columns, Divs

In this tutorial, we will focus on using sections, columns, and divs to create our Oxygen Builder layouts.

If you’re learning more about Oxygen Builder and it’s capabilities for WordPress, you’re going to love this tutorial. Oxygen Builder is my go-to website building tool for WordPress. I’ve been using it in my business for the best part of two years, and both my clients and I love using the platform.

Oxygen uses the box model elements to create simple layouts using sections and columns (divs).

These are essential for creating attractive, non-linear webpages. With the box model, you have unlimited options for customizing whatever kind of layout you want, whether for a blog post template or a sales landing page.

Padding, margins, and borders can be added to these layout elements, a widely used method in modern responsive web design.

OK, enough ranting, here’s the video –

Tools used in this video

1. WordPress (Open-source software).
2. Oxygen Builder.
3. Local WP (For creating a local server environment.)

Check out this post if you want to learn how to create a WordPress website from complete scratch!

Step-By-Step Process

I won’t dive too deep into detail here as the video covers many parts that this post doesn’t, so be sure to watch it to the end.

Step One

After creating a template in Oxygen, begin by dropping a page section. If you click on the page section itself, you have several customization options. If you’re new to Oxygen, take some time to explore the options you have to arrange child elements inside the page section.

Parent and child elements: Child elements are any elements that are placed inside of the page section. So the page section itself acts as the parent element, and anything inside it is child elements.

Step Two

Inside your section, you can either drop in elements such as a heading, text, and button element. Or you can drop in a single div or column with a layout option of your choice.

You can arrange elements using the child element layout options in both sections and divs.

Adjusting Paddings And Margins

As I mentioned, you can apply paddings, margins, and borders to any div inside the section to style your layouts.

The columns essentially contain divs. So if you drop in a two-column layout, it’s a column with two divs.

But what is strange is that you cannot apply margins to each div and constrain them without stacking. The only way around is to nest another div inside each column divs itself and then apply padding to that div.

OK, that’s it. It takes some time to get used to the layouts and column options. Create your own even and practice with padding, margins, and borders. Afterwhich, you have the challenge of ensuring each section is optimized for mobile screens. Don’t worry too much about this as I’ll be creating a separate tutorial shortly, so stay tuned!

Right, I hope you found this video tutorial useful. If you have any questions, feel free to send me a quick email here.

Tools you need to start your own website

1. SiteGround Hosting (Affiliate link)
2. WordPress: https://wordpress.org
3. Thrive Themes Membership (Affiliate link)

More Oxygen Builder tutorials?

If you’re interested in checking out more WordPress and Oxygen Builder tutorials, here are some links to the most popular videos and tuts on my channel –

1. How To Create A Custom Search For Page In Oxygen Using HTML and CSS
2. How To Create A Beautiful Custom Blog Archives Page Template In Oxygen

Don’t forget to head over to my YouTube channel and subscribe for future updates.

Need help with your Oxygen and WordPress website?

I provide WordPress website design and development services. I have over ten years of experience working with WordPress and two years working with Oxygen Builder. Click here to learn more.