A Guide & Review to Oxygen: Prices, Usage and Features

Let us guide you to Oxygen mastery

This guide to Oxygen will take you through the best Oxygen has to offer for your business, as well as help you to make an informed decision on whether Oxygen is or isn’t a good investment for your business.

But let’s not get ahead of ourselves and begin with a proper introduction!

Oxygen comes in the shape of a plugin and it’s a visual front-end website builder that was designed to be 100% compatible not only with WordPress but any third-party plugins that you might prefer.

More specifically, when you install Oxygen, you don’t need to worry if it will work against the plugins that you installed before – it won’t. Instead, they’ll work as a team.

Moreover, not only is it a reliable plugin to add but easy to use too because of the drag-and-drop visual editing feature.

So how exactly will Oxygen help you with the general workflow?

The answer is: by creating amazing opportunities for you to build high-quality and stunning websites that include comfortable functions and exclusive features.

Naturally, Oxygen will give you all the essentials that the other website builders have to offer: website templates, reusable elements, highly responsive designs, and many other amazing elements that you will certainly enjoy.

Also, if you work for an agency or as a freelancer, we have great news for you – Oxygen can be used on multiple websites. An unlimited number of websites, to be more precise. Yup, you read that right!

Are you excited about this guide? Because we are and we can’t wait to share. So, without further ado, we present to you the guide to Oxygen!

 

[toc]

 

Registration and Packages

In case you happen to be wondering if Oxygen offers a free trial, sadly, the answer is no. Instead, you will be given 3 different types of packages to choose from and all 3 of them fit different needs.

Therefore we recommend you paint a clear picture of what goals you will want to achieve with Oxygen in your pocket.

Are you new to website building and have only basic needs? Then, as the word suggests, the Basic plan will suit you.

On the other hand, if you do want to be able to sell your products and services, it takes little explanation as to why the WooCommerce is the plan for you.

Finally, as mentioned earlier, freelancers and agency workers will benefit the most from the Agency plan.

Different payment plans for Oxygen Website Builder
Source: oxygen.com

 

Although you don’t have the option to try out the packages for free, you still have the option to change your mind in case your chosen plan doesn’t really fulfill your expectations.

What does that mean?

It means that Oxygen confidently assures its customers that they can get a full refund in 60 days, which allows you to switch plans and get the perfect one instead.

At any rate, everything starts with a registration process or logging in if for any reason you have an account at Oxygen.

The logging-in process requires no explanation and the registration is a standard procedure that you most likely tried multiples times in your life: Oxygen will ask for your name and surname, as well as a payment method and personal payment details.

In addition, you will need a password and a username. As soon as it’s done, you’re good to go! Now all you need to do is download a zip file that you will receive from Oxygen.

Now, what could be the next step in the guide to Oxygen?

Yes, you guessed it right – get ready to install it!

 

How to Install Oxygen

Great, now you officially have one of the Oxygen packages! Now, let’s install it!

Let’s start from the beginning and log into your WordPress admin account. When you’re there, follow the instructions below:

 

Plugins –> Add new –> Upload plugin –> Choose file –> Pick the zip Oxygen’s zip –> Install now –> When it’s done installing, activate the plugin.

 

When you’re done, you’ll need to choose either Premade Website or Blank Install option.

What’s the difference?

With the Premade Website, the Atomic design will be installed for your website, unless you pick a different design. Don’t hesitate to browse the many different and stunning designs in the library if the Atomic one is not your style.

When it comes to Blank Install, the term describes itself: if you pick this option, you will start your website’s building from scratch and get a chance to let your creative side go crazy by creating a design on a blank page.

Okay, now Oxygen is installed, so why don’t we activate your license?

 

Go to the WordPress admin menu and pick Oxygen -–> Pick Settings –-> License -–> Type in your license key –> Click Submit.

 

That’s it! Oxygen is ready for you. But… Where do we start?

Find out how to build a homepage, re-usable header, and footer in the next step.

 

1. Create a Homepage, Re-usable Header and Footer

So! We want to create a great first impression for the visitors, correct?

What can create a positive better than a stunning homepage on your website? Oxygen will be your right hand with this task and it will only take a minute!

Let’s login into your WordPress admin page and start from there:

 

Click on Pages –> Add New –> Give it a title (Homepage) –> Publish –> Now Create Custom View.

 

There you go, now you have a homepage! But let’s not forget about the re-usable header and footer!

Remember our “talk” about first impressions? The header will be the first impression from your homepage, therefore it is crucial to make it stand out and make sure that it represents your company’s mission in a blink of an eye. In other words: your website visitors should understand your business without a thorough explanation.

Let’s go ahead and add and customize your header using Oxygen:

 

Go to Custom View –> Choose Add and Components -> Pick Standard Header.

 

Next, go to Components again and pick Heroes, then choose Hero Alternative and finish it by clicking on Add Component on Page.

Great, now your hero will be displayed on your website. If you want to customize the content, you can once again go to Components, choose the Content Section that you need and click on Add Component to Page.

It’s time to set up the right Position & Size, as well as the Margin & Padding for the header. You will find them through Fundamentals and it’s completely up to you how you want to customize them.

Also, don’t forget to save your progress when you’re done customizing.

You’re ready to add your footer now!

The difference between a footer and a header is that a footer will be shown everywhere, unlike the header, which is mainly displayed on the homepage or, in some cases, on a few other fundamental pages.

In addition, a footer displays important features and information, such as cookie and privacy policies, social media channels, contact options, and many more.

When you start designing your footer, remember the importance of making it informative, but it shouldn’t scare the visitors away with loads of information.

Now let’s make a footer for you:

Fundamentals –> Text Block –> Place a Copyright on the bottom part of your site –> Save –> Click on the sidebar –> Standard Header Bar –> Menu icon -> Give it a title and make sure that it’s made to be re-usable –> Repeat with the footer –> Save.
You’ve got a great start and starting now it will be easier to design, as you have the foundation of your website.
Let’s improve with the next step, shall we?

 

2. Get a Contact Us Page

So we have a website. Now let’s make it easy for anyone interested to contact your business with a Contact form on a Contact page. Yup, it’s all about the contacts!

Thankfully, you can do it really fast thanks to Oxygen. Not to mention the aesthetic design features! Let’s make your business available.

Follow these steps:

WordPress admin page –> Pages –> Add New -> Give it a title (Contact or Contact Us) –> Create Custom View –> Now click Add –> Re-usable –> My Header –> Single.

Feel free to customize it however you need to after this step and when the results please you, go ahead and a contact form. To do that, you will need to go back to the WordPress admin page, then Contact Forms, and just copy the code that you’ll find right under Shortcode.

Continue with the following steps:

Go to Pages –> Choose Contact –> Open in Visual Editor –> Now Add –> Click on WordPress –> Click Shortcode –> Paste the copied code under Full Shortcode –> Click Add –> Choose Fundamentals –> Heading –> Click on Side Bar –> Place the Heading above Shortcode by dragging it –> Rename it.

P.S. Always save your progress.

 

 

3. Create a Blog Page

It’s likely that when you were looking for answers on Google’s search engine, you came across a blog that offered you answers.

It’s no surprise really, as blogging is a quality indicator for customer service and care expressed by businesses. After all, they are working hard to keep the current and potential customers updated and well-informed.

But knowledge isn’t everything if it’s not presented well. Therefore, Oxygen will make it easy for you to quickly build a stunning blog page that your website visitors will certainly enjoy reading.

Before we start designing specific blog post design, we’ll start with a blog archive to have the bigger picture.

However, we advise you to create multiple blog posts before getting started – it will make the building process efficient.

Start from the WordPress admin page and follow the steps below:

Click on Oxygen –> Then Add New –> Click Archive –> Give it a title  (Blog) –> Feel free to tag whatever you need in this part (for example All Categories) –> Publish it –> Edit in Visual Editor –> Now Add –> Click on Re-usable –> My Header–> Single –> Click Fundamentals –> Section –> Now Add –> Click Re-usable –> My Footer –> Single –> Choose Components –> WordPress Content –> Choose Archive Loop –> Finally, Add Component to Page.

Well done! Now activate the creative part of your brain because we’re about to customize!

We leave it to your judgment whether customization is needed or not, but whatever you decide here’s a small piece of information: coding will be involved. If you don’t need customization, let’s meet in the next step!

Now, let’s customize from where we finished the last steps:

Click on Side Bar –> Stylesheets –> Choose Code Editor –> Pick what you’ll want to be customized in the coding –> Put in stylesheet name –> Click Add –> Begin coding –> Now Apply –> Save it.
You are officially ready to design specific blog posts now!

 

4. Design your Blog Posts

After building the blog archive, this part will be easy like Sunday morning, as you have the foundations and all that’s left is details and polishing.

Start from… Yes, you got that right – WordPress admin page:

Click Oxygen –> Add New –> Choose Single –> Apply to posts –> Assign a name –> Publish it –> Edit in Visual Editor –> Now Add –> Choose Re-usable –> Choose My Header –> Single –> Fundamentals –> Section –> Re-usable -> My Footer –> Single –> More –> Adjust Position & Size –> Adjust Margin & Padding –> Click Apply –> Now Add –> Components –> Choose WordPress Content –> Choose what you need –> Add Component to Page –> Save progress.
Congratulations, your blog is done and ready to go!

 

5. Create your Online Store with WooCommerce

Are you enjoying the website building so far?

You probably realized now that website building with Oxygen is both easy and fun, so stick around to learn even more.

If your business wants to sell online, it will need an online store page. Luckily, Oxygen is 100% compatible with WooCommerce, allowing you to have functional control over it, as well as a beautiful design that will highlight the attractiveness of your products and services.

In case you are not interested in selling online, you can jump ahead to the next part of the Oxygen guide. If that isn’t the case, let’s get started by creating the online store and display of the products!

Oxygen via WordPress –> Add New –> Name it –> Choose Archive –> Now type “Products” right under Post Types Archives –> Type your choice under View Order Type –> Now Publish –> Pick Edit in Visual Editor –> Add –> Re-usable –> My Header –> Single –> Pick Components –> WordPress Content –> Then WooCommerce –> Shop Bar –> Let’s Add Component to Page –> Add –> Choose Fundamentals –> Section –> Add –> Re-usable –> My Footer –> Single.
In the next part we will put your products into WooCommerce using coding:
Choose Add –> Then Fundamentals –> Followed by Code Block –> Click on Code Editor –> Type in the following code and remember to click apply and save your progress right away: <?php woocommerce_content (); ?>

All that’s left now is placing a header and a footer:

Oxygen via WordPress –> Choose Views –> Then Add New –> Choose Single –> Choose Products –> Name it –> Choose Edit in Visual Editor –> Add –> Re-usable –> My Header –> Single –> Choose Components –> Then WordPress Content –> WooCommerce –> Shop Bar –> Let’s Add Component to Page –> Choose WooCommerce Content –> Let’s Add Component to Page –> Now Add –> Re-usable –> Choose My Footer –> Single –> And finally Save.

 

6. Set up the Checkout and My Account Pages

So, let’s make sure that our work will pay off by setting up a user-friendly and beautiful checkout page. We do want your customers to have a fun experience when they buy from you!

In addition to that, we’ll also walk you through the process of setting up the My Account page, where your customers can update their personal information and see their buying history.

Ready… Set… Go!

Oxygen via WordPress account –> Choose Views –> Add New –> Name it –> Click on Single –> Choose Pages –> And Publish –> Let’s Edit in the Visual Editor –> Now Add –> Re-usable –> Find My Header –> Single–> Components –> Click on WordPress Content –> WooCommerce –> Now Shop Bar –> Fundamentals –> Choose Section –> Let’s Add –> Re-usable –> Choose My Footer –> Single –> Let’s Add –> Fundamentals –> Choose Code Block –> Click on Code Editor –> Begin the coding –> Remember to Apply –> Choose section –> Click on Position & Size –> Then Margin & Padding –> Remember to apply and save.

7. Let’s add some Widgets

Widgets are the little things that make a big difference. In other words, they make your site even more functional and professional, which makes it easier to use for your website visitors. You might know some of them: calendar, search bar, and categories, just to name a few.

The previously mentioned WooCommerce is definitely not left out in this case and you can choose various options that were designed just for WooCommerce to improve the online shopping experience even more.

With Oxygen, you can add these widgets with just a few clicks. Just follow the instructions below:

Click on Side Bar –> Chose the “+” on Section –> Now click Add –> Fundamentals –> Choose Div Block –> Then Duplicate –> Adjust the measurements by clicking on it Click on it –> Repeat with the others (div) –> Finally, drag the Code Block under the divs.

And here are the final instructions:

Pick whichever div you want –> Click Add –> Choose WordPress –> Then Widgets –> Choose whichever widgets you need.

 

 

8. The Last Adjustments

Alright, you’re doing great and now we’ll just walk you through the very last steps to make your website complete and with a perfect structure.

Let’s adjust the header and connect the pages to the relevant buttons:

Oxygen via WordPress–> Choose Views –> Header –> Edit in the Visual Editor –> Home –> Then Search Homepage –> Put in a link –> Repeat with the others and remember to save.

 

The Oxygen Features That You’ll Want

You officially have your website built. But why stop there? Oxygen has more than that to offer, so why not use it? Find out about the most attractive features Oxygen designed for you.

 

1. Build a Pop-up

Do you want the popping up on your website to be fun and nice to look at? Your website will stand out and demonstrate professionalism through these popups and all you need to do is spare a few clicks on Oxygen.

What can you use it for?

Basically for everything that pops up! Some of the examples would be the contact form, the menu, and some others.

 

 

2. Style Multiple Elements at the Same Time

Time is money, especially in business, right? Good thing we have Oxygen – it will save us time AND money.

So what does it do?

It automatically and instantly makes changes in all similar elements as soon as you make changes in one of them. You longer have to change one by one!

 

 

3. Make your Design Responsive

More and more people rely on their phones every day for various functions, therefore Google holds mobile-friendly websites in high regard and it shows.

Luckily, with Oxygen’s Responsive Design Controls we can adjust the designs for different devices – computers, tablets, phones – in just a few clicks and improve our website’s SEO at the same time.

 

 

4. Make your Website Load Faster

Let’s be honest: slow websites are irritating and unless we have something important to do on one, we leave it if it doesn’t load fast.

How do 6 seconds for a loading speed sound for you? You can have it with Oxygen.

You might wonder how Oxygen can fulfill this goal. Simply put, Oxygen doesn’t overwhelm your website with baggage that is useless to your website. In addition, the coding from Oxygen is high-quality without additional plugins.

In other words, the only consequence is improved SEO rating.

 

 

5. Equip the Website with Interactive Hover Effects

Interactive design is one of the main factors that get your website’s visitors to stay there because it makes browsing fun. Go ahead and check out how you can style states like hover today!

 

 

6. Use the Animations on Scroll

Oxygen presents many options of animation and possibilities to animate different components of your website. With no extra plugins, no less!

Animations are certainly a perfect addition to your website, especially if you enjoyed the previously mentioned hover effects that react to the movement of a visitor’s mouse.

Why?

Because animations will show up when users scroll – perfect teamwork!

 

 

7. Oxygen’s Conditions Feature

When you finally built your perfect website, it’s only natural to want to have full control over it, right? If you answered yes, you will love this feature.

Oxygen grants you the power to easily organize which content your site visitors will be able to see, as well as when.

There are no limits: the feature can be used in every WordPress component that you want with a lot of freedom for experimenting!

 

 

8. Full Pre-made Sites

Okay, so what if you don’t have the time or inspiration to build a website from nothing? Don’t worry, Oxygen has options for you too if that’s your situation.

Oxygen’s library is open 24/7 for you with many great and finished designs that you can choose from. The process is simple: find a design that suits your business’ style and values, install and… Yeah, that’s about it!

Naturally, you have the freedom to make changes in the details and leave it the way it is if that’s what you prefer. Isn’t that great?

 

 

Conclusion

Now you know how to get started with Oxygen, build a website from scratch, and apply the many different features to make your website outstanding and stunning.

As soon as you get started with Oxygen, it won’t take long for you to master it thanks to Oxygen’s great functionality, easy-to-use features, flexible structure, high-quality designs, and of course the freedom and control your business gets.

In addition to that, Oxygen has solutions and offers for people of all work rhythms and preferences, so you won’t need to change your habits.

Enjoy the work!

Comments are closed.