{"id":2067,"date":"2017-10-27T21:15:13","date_gmt":"2017-10-27T16:15:13","guid":{"rendered":"https:\/\/thedevcouple.com\/?p=2067"},"modified":"2017-10-27T21:25:43","modified_gmt":"2017-10-27T16:25:43","slug":"oxygen-wordpress-pagebuilder","status":"publish","type":"post","link":"https:\/\/thedevcouple.com\/oxygen-wordpress-pagebuilder\/","title":{"rendered":"Oxygen \u2014 an All in One Visual Site Builder for WordPress"},"content":{"rendered":"

While WordPress is famous for its five-minute installation, it still takes a lot of time in setting up a full-fledged website. That is where a page builder comes into the picture.<\/p>\n

A page builder lets you customize the layout of your website without writing any code. Beginners who don’t know how to code and users transitioning from other page builder platforms to WordPress wish to have a page builder to help create their website.<\/p>\n

Most page builders in WordPress allow you to make changes to the styles and scripts of your website. As a result, they add a whole lot of bloated code in all the pages of the site. But there are some page builders which are carefully built to avoid just that.<\/p>\n

Today, I am going to review a page builder \u2014 Oxygen<\/a> \u2014 which helped me in getting over my fear of bloated code as far as page builders are concerned.<\/p>\n

\ud83c\udfaf Oxygen<\/a> \u2014 Visual Design in WordPress<\/h2>\n
\n

\"\"<\/a><\/p>\n<\/div>\n

Oxygen is a WordPress Page Builder which helps you design beautiful WordPress websites. Its Design Set<\/a>\u00a0<\/strong>has a lot of components and pre-built example websites to get you started.<\/p>\n

Louis Reingold<\/a><\/strong>\u00a0launched this product just over a year ago. His motivation behind this plugin was straightforward. He wanted a page builder with the power to make tweaks to CSS and PHP files without ever opening an FTP software.<\/p>\n

In his Letter from the “CEO,”<\/a> he talks about his vision which led to the birth of Oxygen.<\/p>\n

I wanted to be able to control everything visually, right from inside WordPress. And I wanted to be able to see what I was doing, live.<\/p> \u2014 Oxygen, by Soflyy<\/cite><\/a><\/blockquote>\n

\n

\"\"<\/a><\/p>\n<\/div>\n

\ud83c\udf52\u00a0Plugin Features<\/h2>\n

Like every other good page builder, Oxygen comes with a feature-rich palette. Fortunately, Oxygen provides many of these features which other page builders do not offer.<\/p>\n

Let’s discuss a few highlighted features, shall we?<\/p>\n

\u2714\ufe0e Visual Designer<\/h3>\n
\n

\"\"<\/a><\/p>\n<\/div>\n

Oxygen has one of most impressive visual design interfaces<\/strong>\u00a0I have ever seen. You can get the hang of it within a matter of minutes. It adds a main menu bar at the top of your page.<\/p>\n

You can perform all kinds of operations from the visual editor like adding new components<\/strong>, styling<\/strong>, adjusting their position<\/strong>, etc. Their team has put a lot of effort in making tutorials for their customers.<\/p>\n

To learn about how you can get started with the building blocks of Oxygen, check out their course\u00a0\u2192\u00a0Essential Building<\/a> Blocks<\/a> of Modern Websites<\/a>.<\/p>\n

\u2714\ufe0e Dynamic WordPress Content<\/h3>\n
\n

\"\"<\/a><\/p>\n<\/div>\n

With Oxygen, you can have different designs for different types of pages. For example, you can make a template which only applies to a page template with\u00a0News<\/strong> category.<\/p>\n

Just go to WordPress Dashboard > Oxygen > Templates and click on the Add New<\/em> button. A new page will open. From\u00a0Template Options<\/strong>, select\u00a0Page<\/strong> and check the box saying, “Only apply to post in certain taxonomies.<\/em>” That’s it; you’re good to go.<\/p>\n

\u2714\ufe0e Ready to Use with Any Plugin<\/h3>\n
\n

\"\"<\/a><\/p>\n<\/div>\n

Gone are the days, when you needed to customize some content from the plugin and your choices were to\u00a0either add custom CSS style rules in the customizer or override the template files provided by the plugin like in the case of WooCommerce.<\/p>\n

Oxygen lets you customize such contents as well. You just need to open the page builder. Contents of the page will be present inside the designer. After that select the element you want to edit and apply desired customizations.<\/p>\n

\u2714\ufe0e Live Code Editor<\/h3>\n
\n

\"\"<\/a><\/p>\n<\/div>\n

Yes, you read it right! There is a live code editor present inside the visual designer of Oxygen. It lets you use WordPress functions so that you can perform code changes to your content and watch the changes right away.<\/p>\n

To access the code editor, click on\u00a0Code Editor<\/strong> button sitting in the toolbar of Oxygen at the top. A customization block will open. It lets you customize three types of codes.<\/p>\n

    \n
  1. PHP & HTML<\/li>\n
  2. CSS<\/li>\n
  3. JavaScript<\/li>\n<\/ol>\n

    \u2699\ufe0f How Does Oxygen Works?<\/h2>\n

    It comes with two add-ons.<\/p>\n

      \n
    1. Oxygen Selector Detector<\/li>\n
    2. Oxygen Typekit<\/li>\n<\/ol>\n

      The first one allows you to detect the selectors present in the web page\u00a0while the second one integrates Adobe Typekit tool<\/strong> with Oxygen. Oxygen itself adds a single menu to the WordPress Dashboard menu.<\/p>\n