One thing that’s superior about Oxygen Builder is that it generates clean code as you build a page in the editor. If there’s a page builder that I’m quite confident will not bulk up the code when I create a page, it’s this one. Yes, much more than Elementor, Divi, or Beaver Builder.
With numerous entire page and section templates in their design library, you can create a landing page in 10 minutes or less.
I’m going to start with creating a page from the WordPress dashboard. Once I’ve saved that as a draft, click ‘Edit with Oxygen’.
In the Oxygen Builder interface, click ‘Add’, then open Library. Under the Library, you will have access to the design sets. These are pre-built whole-page templates or sections of a page that you can piece together.
Here are some samples…
There’s a few niche templates, like SaaS, flight school, freelancer, and wedding templates, among other general templates for any kind of website.
Choose an Entire Page Template
To choose a template for the entire page, select one design set from the Library. Atomic is the default of Oxygen, so we’re going to choose that for this example.
Hover over ‘Pages’ and the templates will appear on the right…
Once you’ve selected a whole-page template, it will typically include some important sections of a page. Depending on the template you chose, there are specific sections included like an about section, features section, FAQs, etc.
With the template I chose, it has a section for the main heading, subheading, and call to action...
...a features list…
...and a main call to action section with a button.
Two things that you have to know when editing is the state. When you click on an element, in this case, the button…
You can edit the individual button by choosing ‘id’.
When you go to the ‘Advanced’ panel, choose background then move the knob around to select a custom color. This will change the background color only of the button you’re editing.
If you want to edit all the buttons on the page, select ‘class’.
If I change the button’s background, it will also change the rest of the buttons on the page, as shown here on a different section of the page.
Create Your Landing Page with Different Section Templates
If no page template suits your exact needs, you can always opt to piece together different section templates available in the design library.
Main Heading Template
It’s typical for landing pages to start with a section where the main heading is found. From the panel, choose ‘Atomic , select ‘Sections and Elements’. Select any template that you like where you can edit with your own heading and subheading.
If you want to remove an element from the template, simply select the element. You’ll know which is selected by the name on the top left of the editing panel. Then, click on the delete icon.
Insert your own heading and supporting subheading on the text elements.
Benefits Template
For the benefits, I chose another design set called ‘SAAS 2’ and selected this 3-column template where I can put benefits.
Putting the benefits close to the top of the page will immediately tell website visitors what you can do for them, whether you’re offering a product or a service.
This template also has a button, which can be a link to another page with more information, or a jump link to your contact form.
Media Template
It’s important to make your website as interactive as possible. The aim is to get visitors to click or scroll more. Putting some form of media content on a landing page is a good way to extend people’s attention towards your content.
I went back to the ‘Atomic’ design set and chose this template with a background and a play button.
To put your own link to the play button, select the icon, and click the link icon on the editing panel.
A pop-up will appear where you can paste a link or select from your own media library.
This section of your page doesn’t necessarily have to be a video. It can be a gif, an eye-catching image, an animation, or an animated element. It just has to be interesting enough to keep visitors on your landing page.
Features List Template
The best way to display features is to tie them with benefits. This will hook visitors more because it will show them exactly how your product or service will make their lives easier.
Like I did for the media template, I went back to ‘SAAS 2’ design set and chose the Features List template.
Testimonials or Social Proof Template
People will always have some sort of skepticism, but testimonials from real people almost always gives them enough satisfaction to consider your product or service.
From the library, choose the ‘Proteus’ design set, then social proof. Ideally, you should select a template with the photo of the person the testimonial is from. This ensures your page visitors that the testimonials come from real people.
Contact Form
Lastly, and most importantly, your landing page should have an opt-in form or call to action button. If you want to convert visitors into leads, this is the only way that you will know you converted them, and that your landing page is effective.
From the design library, select the ‘Flight School’ design set, hover over ’Call to Action’ then select the contact form template.
This will need a third party email marketing or contact form integration. Oxygen has integrations with numerous contact form apps and email marketing clients.
🗒 Note: It’s important to consider that when piecing together different section templates from different design sets, editing ‘class’, it may not apply to all the similar elements on the page. It will only apply to similar elements in section templates from the same design set.
