How to enable Oxygen Page builder on AMP (One Click Solution)

Oxygen is a page builder plugin that replaces the basic WordPress editor with a live frontend editor, so you can create complex layouts visually, and design your website live, without having to switch between the editor and the preview mode.

The Oxygen page builder will work perfectly on Non-AMP website (Normal website) BUT not on AMP pages and if you want the same design in the AMP pages also then you need to download our extension called Page Builder Compatibility for AMP, which will work out of the box which means all your AMP and NON-AMP pages will be same.

It’s pretty easy for you to set up because it works out of the box.

How to Setup AMP Page builder.

  1. You can purchase the Extension from this URL Page Builder Compatibility for AMP
  2. Click on Buy Now button this page redirects to download this extension. Which type of package you want just select that package.
  3. Once you Purchase the plugin goto Account area and download the zip file.

How To Install / Upload Zip File

  • Login to WordPress Admin Option Panel –> Plugins –> Add New –> Upload Plugin –> Choose file (Navigate to your Downloads folder then Select Downloaded zip file) –> Install Now –> Activate.
  • From the dashboard, we go to the left-hand side in the Menu bar go to AMP option panel -> Settings -> Page Builder -> Enable AMP Oxygen Compatibility option.
  • AMP Oxygen Compatibility: Once you enable this option AMP Oxygen Compatibility looks similar in Non-AMP(normal website) and AMP website.
  • Enter CSS URL: In this textarea, Add your custom plugin CSS links(URL) to get similar output like non-AMP and you can separate CSS URL by a comma.
  • Enter Custom CSS: In this textarea, you can enter your custom CSS code. If you want some CSS specific changes on your side, so add your CSS code here.
  • Done! The Page Builder will be visible on the AMP version of your site.

Demo Of Non-AMP

To view of Non-AMP on Oxygen click here


Demo Of AMP

To view of AMP on Oxygen click here

That’s it for this tutorial!

We hope it helped you. If you have any feedback or questions, then please share them in the comments section below.

Share
Published by
Sonali R

How to add Adobe Analytics in AMP

Follow these steps to add Adobe Analytics in AMP Step 1: Go to WordPress Admin Area -> AMP…

3 months ago

What is the CWV plugin all about

Core Web Vitals are the subset of Web Vitals that apply to all web pages,…

6 months ago

How to fix “Alternate page with proper canonical tag” Page Index issue in Google Search Console

The following reasons can be shown for non-indexing. Server error (5xx) Your server returned a 500-level…

7 months ago

Google Analytics ( GA4 ) integration in AMPforWP

We have added the Google Analytics 4 ( GA 4 ) integration in AMPforWP v1.0.80.…

12 months ago

How to add Marfell Analytics in AMP

In this article, I will show you how to add Dotmetrics Analytics to your AMP…

1 year ago

How to modify the H1-H6 size for mobile devices

In this option, we will show you how to modify the H1-H6 size for mobile…

1 year ago