{"id":6134,"date":"2019-04-09T06:57:15","date_gmt":"2019-04-09T06:57:15","guid":{"rendered":"https:\/\/ampforwp.com\/tutorials\/?post_type=ht_kb&#038;p=6134"},"modified":"2019-11-27T12:38:00","modified_gmt":"2019-11-27T12:38:00","slug":"how-to-enable-amp-on-elementor-one-click-solution","status":"publish","type":"ht_kb","link":"https:\/\/ampforwp.com\/tutorials\/article\/how-to-enable-amp-on-elementor-one-click-solution\/","title":{"rendered":"How to Enable AMP on Elementor (One Click Solution)"},"content":{"rendered":"\n<p><strong>Elementor<\/strong>&nbsp;is a&nbsp;<strong>page builder<\/strong>&nbsp;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.\n\n<\/p>\n\n\n\n<p>The <g class=\"gr_ gr_9 gr-alert gr_spell gr_inline_cards gr_disable_anim_appear ContextualSpelling ins-del multiReplace\" id=\"9\" data-gr-id=\"9\">elementor<\/g> page builder will  work perfecting 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 <a href=\"https:\/\/ampforwp.com\/amp-pagebuilder-compatibility\/\">Page Builder Compatibility for AMP<\/a>, which will work out of the box which means all your AMP and NON-AMP pages will be same. <\/p>\n\n\n\n<p>It\u2019s pretty easy for you to set up because it works out of the box.<\/p>\n\n\n\n<h3><strong>How to Setup AMP Page builder. <\/strong><\/h3>\n\n\n\n<ol><li> You can purchase the Extension from this URL  <a href=\"https:\/\/ampforwp.com\/amp-pagebuilder-compatibility\/\">Page Builder Compatibility for AMP  <\/a> <\/li><li>Click on Buy Now button this page redirects to download this <g class=\"gr_ gr_721 gr-alert gr_gramm gr_inline_cards gr_run_anim Style multiReplace\" id=\"721\" data-gr-id=\"721\">extension.<\/g> Which type of package you <g class=\"gr_ gr_720 gr-alert gr_gramm gr_inline_cards gr_run_anim Grammar multiReplace\" id=\"720\" data-gr-id=\"720\">want<\/g> just select that package. <br><\/li><li>Once you Purchase the plugin goto Account area and download the zip file.<\/li><\/ol>\n\n\n\n<h4>How To Install \/ Upload Zip File<\/h4>\n\n\n\n<ul><li>Login to WordPress&nbsp;<strong>Admin O<g class=\"gr_ gr_1086 gr-alert gr_gramm gr_inline_cards gr_run_anim Grammar multiReplace\" id=\"1086\" data-gr-id=\"1086\">ption<\/g> Panel<\/strong>&nbsp;\u2013&gt;&nbsp;<strong>Plugins<\/strong>&nbsp;\u2013&gt;&nbsp;<strong>Add New<\/strong>&nbsp;\u2013&gt;<strong>&nbsp;Upload Plugin<\/strong>&nbsp;\u2013&gt;&nbsp;<strong>Choose file<\/strong>&nbsp;(Navigate to your Downloads folder then Select Downloaded zip file) \u2013&gt;&nbsp;<strong>Install Now<\/strong>&nbsp;\u2013&gt;&nbsp;<strong>Activate.<\/strong><\/li><\/ul>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" loading=\"lazy\" width=\"1024\" height=\"392\" src=\"https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2019\/04\/upload-file-1024x392.png\" alt=\"\" class=\"wp-image-6148\" srcset=\"https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2019\/04\/upload-file-1024x392.png 1024w, https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2019\/04\/upload-file-300x115.png 300w, https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2019\/04\/upload-file-768x294.png 768w, https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2019\/04\/upload-file-50x19.png 50w, https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2019\/04\/upload-file-60x23.png 60w, https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2019\/04\/upload-file-100x38.png 100w, https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2019\/04\/upload-file.png 1211w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<ul><li>From the dashboard we go to the left-hand side in Menu bar go to <strong>AMP<\/strong>\u00a0<strong>option panel<\/strong>\u00a0<strong>-> Settings -> Page Builder.<\/strong><\/li><\/ul>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter\"><img decoding=\"async\" loading=\"lazy\" width=\"388\" height=\"498\" src=\"https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2019\/11\/Accelerated-Mobile-Pages-Options-\u2039-magazine3-\u2014-WordPress-2019-11-27-11-08-51.png\" alt=\"\" class=\"wp-image-15059\" srcset=\"https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2019\/11\/Accelerated-Mobile-Pages-Options-\u2039-magazine3-\u2014-WordPress-2019-11-27-11-08-51.png 388w, https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2019\/11\/Accelerated-Mobile-Pages-Options-\u2039-magazine3-\u2014-WordPress-2019-11-27-11-08-51-234x300.png 234w, https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2019\/11\/Accelerated-Mobile-Pages-Options-\u2039-magazine3-\u2014-WordPress-2019-11-27-11-08-51-39x50.png 39w, https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2019\/11\/Accelerated-Mobile-Pages-Options-\u2039-magazine3-\u2014-WordPress-2019-11-27-11-08-51-47x60.png 47w, https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2019\/11\/Accelerated-Mobile-Pages-Options-\u2039-magazine3-\u2014-WordPress-2019-11-27-11-08-51-78x100.png 78w\" sizes=\"(max-width: 388px) 100vw, 388px\" \/><\/figure><\/div>\n\n\n\n<p>Scroll down a little to see this option<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" loading=\"lazy\" width=\"841\" height=\"697\" src=\"https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2019\/11\/screencapture-localhost-wordpress-wp-admin-admin-php-2019-11-27-11_20_43.png\" alt=\"\" class=\"wp-image-15061\" srcset=\"https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2019\/11\/screencapture-localhost-wordpress-wp-admin-admin-php-2019-11-27-11_20_43.png 841w, https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2019\/11\/screencapture-localhost-wordpress-wp-admin-admin-php-2019-11-27-11_20_43-300x249.png 300w, https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2019\/11\/screencapture-localhost-wordpress-wp-admin-admin-php-2019-11-27-11_20_43-768x636.png 768w, https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2019\/11\/screencapture-localhost-wordpress-wp-admin-admin-php-2019-11-27-11_20_43-50x41.png 50w, https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2019\/11\/screencapture-localhost-wordpress-wp-admin-admin-php-2019-11-27-11_20_43-60x50.png 60w, https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2019\/11\/screencapture-localhost-wordpress-wp-admin-admin-php-2019-11-27-11_20_43-100x83.png 100w\" sizes=\"(max-width: 841px) 100vw, 841px\" \/><\/figure>\n\n\n\n<ul><li><strong>AMP Elementor Compatibility:<\/strong>&nbsp;Once you enable this option AMP Elementor Compatibility it looks similar in Non-AMP(normal website) and AMP website. <\/li><li><strong>Enter CSS URL:&nbsp;<\/strong>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.<\/li><li><strong>Enter Custom CSS:<\/strong>&nbsp;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.<\/li><li><strong>Enter reCAPTCHA (v3) site key:<\/strong> In this field enter the Recaptcha site key.<\/li><li><strong>Enter reCAPTCHA (v3) secret key:<\/strong> In this field enter the Recaptcha secret key. <\/li><li><strong>Remove Header Footer:<\/strong>  Tick if you want to remove the default header &amp; footer. <\/li><li> Done! The Page Builder will be visible on the AMP version of your site. <\/li><\/ul>\n\n\n\n<h3>Demo Of Non-AMP<\/h3>\n\n\n\n<p>To view of Non-AMP on Elementor  <a href=\"https:\/\/ampforwp.com\/demo\/elementor\/two\/\">click here<\/a><\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" loading=\"lazy\" width=\"1024\" height=\"493\" src=\"https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2019\/04\/non-amp-1024x493.png\" alt=\"\" class=\"wp-image-6165\" srcset=\"https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2019\/04\/non-amp-1024x493.png 1024w, https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2019\/04\/non-amp-300x145.png 300w, https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2019\/04\/non-amp-768x370.png 768w, https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2019\/04\/non-amp-50x24.png 50w, https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2019\/04\/non-amp-60x29.png 60w, https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2019\/04\/non-amp-100x48.png 100w, https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2019\/04\/non-amp.png 1366w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<h3 id=\"mce_64\"> <br>Demo Of AMP <\/h3>\n\n\n\n<p>  To view of AMP on Elementor <a href=\"https:\/\/ampforwp.com\/demo\/elementor\/two\/amp\/\">click here<\/a><\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" loading=\"lazy\" width=\"1024\" height=\"493\" src=\"https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2019\/04\/amp-1-1024x493.png\" alt=\"\" class=\"wp-image-6166\" srcset=\"https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2019\/04\/amp-1-1024x493.png 1024w, https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2019\/04\/amp-1-300x145.png 300w, https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2019\/04\/amp-1-768x370.png 768w, https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2019\/04\/amp-1-50x24.png 50w, https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2019\/04\/amp-1-60x29.png 60w, https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2019\/04\/amp-1-100x48.png 100w, https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2019\/04\/amp-1.png 1366w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p>To watch more demo of Elementor <a href=\"https:\/\/ampforwp.com\/amp-pagebuilder-compatibility\/#elementor\">click here<\/a><\/p>\n\n\n\n<h4 id=\"to-make-it-easy-we-have-created-a-video-tutorial-on-amp-story-that-you-can-watch-below\">To make it easy, we have created a video tutorial also<\/h4>\n\n\n\n<figure class=\"wp-block-video\"><video controls src=\"https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2019\/08\/Elementorcompatibility-video-.mp4\"><\/video><\/figure>\n\n\n\n<p><strong>That\u2019s it for this tutorial!<\/strong><\/p>\n\n\n\n<p>We hope it helped you. If you have any feedback or questions, then please share them in the comments section below.<\/p>\n\n\n\n<p><\/p>\n<div id=\"div-1\" class=\"hkb-feedback\">\n\t\t\t<strong class=\"ht-mobile-exit__title\">Ask your Questions Directly!<\/strong><br>\n\t\t\t<div class=\"hkb_widget_exit__content\" style=\"font-size: 14px;\">If you can't find the solutions in this article, then just ask us in the comments and we will answer it for you!<\/div>\n\t\t\t<a href=\"https:\/\/ampforwp.com\/support\/#contact\" id=\"button\" target=\"_blank\" rel=\"noopener noreferrer\"><button>Yes, I have a Question<\/button><\/a>\n\t\t<\/div>","protected":false},"excerpt":{"rendered":"<p>Elementor&nbsp;is a&nbsp;page builder&nbsp;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 elementor page builder will work perfecting on Non-AMP website (Normal website) BUT&#8230;<\/p>\n","protected":false},"author":18,"comment_status":"open","ping_status":"closed","template":"","format":"standard","meta":[],"ht-kb-category":[163],"ht-kb-tag":[],"_links":{"self":[{"href":"https:\/\/ampforwp.com\/tutorials\/wp-json\/wp\/v2\/ht-kb\/6134"}],"collection":[{"href":"https:\/\/ampforwp.com\/tutorials\/wp-json\/wp\/v2\/ht-kb"}],"about":[{"href":"https:\/\/ampforwp.com\/tutorials\/wp-json\/wp\/v2\/types\/ht_kb"}],"author":[{"embeddable":true,"href":"https:\/\/ampforwp.com\/tutorials\/wp-json\/wp\/v2\/users\/18"}],"replies":[{"embeddable":true,"href":"https:\/\/ampforwp.com\/tutorials\/wp-json\/wp\/v2\/comments?post=6134"}],"version-history":[{"count":63,"href":"https:\/\/ampforwp.com\/tutorials\/wp-json\/wp\/v2\/ht-kb\/6134\/revisions"}],"predecessor-version":[{"id":15122,"href":"https:\/\/ampforwp.com\/tutorials\/wp-json\/wp\/v2\/ht-kb\/6134\/revisions\/15122"}],"wp:attachment":[{"href":"https:\/\/ampforwp.com\/tutorials\/wp-json\/wp\/v2\/media?parent=6134"}],"wp:term":[{"taxonomy":"ht_kb_category","embeddable":true,"href":"https:\/\/ampforwp.com\/tutorials\/wp-json\/wp\/v2\/ht-kb-category?post=6134"},{"taxonomy":"ht_kb_tag","embeddable":true,"href":"https:\/\/ampforwp.com\/tutorials\/wp-json\/wp\/v2\/ht-kb-tag?post=6134"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}