{"id":6177,"date":"2019-04-09T08:31:54","date_gmt":"2019-04-09T08:31:54","guid":{"rendered":"https:\/\/ampforwp.com\/tutorials\/?post_type=ht_kb&#038;p=6177"},"modified":"2020-07-17T10:47:27","modified_gmt":"2020-07-17T10:47:27","slug":"how-to-enable-amp-on-divi-one-click-solution","status":"publish","type":"ht_kb","link":"https:\/\/ampforwp.com\/tutorials\/article\/how-to-enable-amp-on-divi-one-click-solution\/","title":{"rendered":"How to Enable AMP on Divi (One Click Solution)"},"content":{"rendered":"\n<p><strong>Divi Theme<\/strong> is a brand new product from Elegant Themes that could revolutionize the way you build websites<g class=\"gr_ gr_34 gr-alert gr_gramm gr_inline_cards gr_run_anim Style replaceWithoutSep\" id=\"34\" data-gr-id=\"34\">.<\/g> <strong>Divi Theme\u00a0<\/strong>allows you to modify not just your\u00a0<strong>site&#8217;s <\/strong>content, but the\u00a0<strong>site<\/strong>\u00a0design itself, without having to change themes. <\/p>\n\n\n\n<p> The <strong>Divi Theme<\/strong> 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<h4 id=\"mce_44\"><strong>How to Setup AMP Page builder. <\/strong><\/h4>\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 extension. Which type of package you want just select that package. <\/li><li>Once you Purchase the plugin goto Account area and download the zip file.<\/li><\/ol>\n\n\n\n<h4 id=\"mce_37\">How To Install \/ Upload Zip File<\/h4>\n\n\n\n<ul><li>Login to WordPress&nbsp;<strong>Admin&nbsp;&nbsp;option&nbsp;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-1-1024x392.png\" alt=\"\" class=\"wp-image-6182\" srcset=\"https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2019\/04\/upload-file-1-1024x392.png 1024w, https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2019\/04\/upload-file-1-300x115.png 300w, https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2019\/04\/upload-file-1-768x294.png 768w, https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2019\/04\/upload-file-1-50x19.png 50w, https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2019\/04\/upload-file-1-60x23.png 60w, https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2019\/04\/upload-file-1-100x38.png 100w, https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2019\/04\/upload-file-1.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>&nbsp;<strong>option panel<\/strong>&nbsp;<strong>-&gt; Settings -&gt; Divi Builder Support.<\/strong><\/li><\/ul>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter\"><img decoding=\"async\" loading=\"lazy\" width=\"391\" height=\"478\" src=\"https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2019\/11\/Accelerated-Mobile-Pages-Options-\u2039-magazine3-\u2014-WordPress-2019-11-27-12-29-01.png\" alt=\"\" class=\"wp-image-15073\" srcset=\"https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2019\/11\/Accelerated-Mobile-Pages-Options-\u2039-magazine3-\u2014-WordPress-2019-11-27-12-29-01.png 391w, https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2019\/11\/Accelerated-Mobile-Pages-Options-\u2039-magazine3-\u2014-WordPress-2019-11-27-12-29-01-245x300.png 245w, https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2019\/11\/Accelerated-Mobile-Pages-Options-\u2039-magazine3-\u2014-WordPress-2019-11-27-12-29-01-41x50.png 41w, https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2019\/11\/Accelerated-Mobile-Pages-Options-\u2039-magazine3-\u2014-WordPress-2019-11-27-12-29-01-49x60.png 49w, https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2019\/11\/Accelerated-Mobile-Pages-Options-\u2039-magazine3-\u2014-WordPress-2019-11-27-12-29-01-82x100.png 82w\" sizes=\"(max-width: 391px) 100vw, 391px\" \/><\/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=\"824\" height=\"544\" src=\"https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2019\/11\/Accelerated-Mobile-Pages-Options-\u2039-magazine3-\u2014-WordPress-2019-11-27-12-30-12.png\" alt=\"\" class=\"wp-image-15074\" srcset=\"https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2019\/11\/Accelerated-Mobile-Pages-Options-\u2039-magazine3-\u2014-WordPress-2019-11-27-12-30-12.png 824w, https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2019\/11\/Accelerated-Mobile-Pages-Options-\u2039-magazine3-\u2014-WordPress-2019-11-27-12-30-12-300x198.png 300w, https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2019\/11\/Accelerated-Mobile-Pages-Options-\u2039-magazine3-\u2014-WordPress-2019-11-27-12-30-12-768x507.png 768w, https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2019\/11\/Accelerated-Mobile-Pages-Options-\u2039-magazine3-\u2014-WordPress-2019-11-27-12-30-12-50x33.png 50w, https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2019\/11\/Accelerated-Mobile-Pages-Options-\u2039-magazine3-\u2014-WordPress-2019-11-27-12-30-12-60x40.png 60w, https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2019\/11\/Accelerated-Mobile-Pages-Options-\u2039-magazine3-\u2014-WordPress-2019-11-27-12-30-12-100x66.png 100w\" sizes=\"(max-width: 824px) 100vw, 824px\" \/><\/figure>\n\n\n\n<ul><li><strong>AMP Divi Compatibility:<\/strong>  Once you enable this option Divi builder support 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>Load Fontawesome: <\/strong>Once you enable this option all font awesome will be supported in AMP.<\/li><li>Done! The Page Builder will be visible on the AMP version of your site.<\/li><\/ul>\n\n\n\n<h4><strong>How to set custom front page created with Divi builder<\/strong><\/h4>\n\n\n\n<p>If you want to show this page on your homepage of AMP site then you need to turn on the static front page from amp general settings and select that page, which you have built with <strong>Divi Theme<\/strong> and that will be displayed on your AMP homepage.<\/p>\n\n\n\n<p>Go to&nbsp;<strong>AMP option panel<\/strong>&nbsp;-&gt;&nbsp;<strong>Settings&nbsp;<\/strong>-&gt;&nbsp;<strong>General<\/strong>&nbsp;-&gt; Enable&nbsp;<strong>Homepage<\/strong> option -&gt; select custom front page option and then click on the &#8220;<strong>Save change<\/strong>&#8221; button.<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" loading=\"lazy\" width=\"1024\" height=\"485\" src=\"https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2019\/07\/6-4-1024x485.png\" alt=\"\" class=\"wp-image-12404\" srcset=\"https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2019\/07\/6-4-1024x485.png 1024w, https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2019\/07\/6-4-300x142.png 300w, https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2019\/07\/6-4-768x363.png 768w, https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2019\/07\/6-4-50x24.png 50w, https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2019\/07\/6-4-60x28.png 60w, https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2019\/07\/6-4-100x47.png 100w, https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2019\/07\/6-4.png 1310w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<h3 id=\"demo-of-non-amp\">Demo Of Non-AMP<\/h3>\n\n\n\n<p>To view of Non-AMP on Divi <a href=\"https:\/\/ampforwp.com\/demo\/divi\/one\/\">click here<\/a><\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" loading=\"lazy\" width=\"1024\" height=\"501\" src=\"https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2019\/04\/divi-non-amp-1024x501.png\" alt=\"\" class=\"wp-image-6185\" srcset=\"https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2019\/04\/divi-non-amp-1024x501.png 1024w, https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2019\/04\/divi-non-amp-300x147.png 300w, https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2019\/04\/divi-non-amp-768x376.png 768w, https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2019\/04\/divi-non-amp-50x24.png 50w, https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2019\/04\/divi-non-amp-60x29.png 60w, https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2019\/04\/divi-non-amp-100x49.png 100w, https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2019\/04\/divi-non-amp.png 1350w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<h3 id=\"mce_64\">Demo Of AMP<\/h3>\n\n\n\n<p>It is similar to Non-AMP only the header and footer design will be changed to the view of AMP on Divi <a href=\"https:\/\/ampforwp.com\/demo\/divi\/one\/amp\/\">click here.<\/a><\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" loading=\"lazy\" width=\"1024\" height=\"506\" src=\"https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2019\/04\/divi-amp-1024x506.png\" alt=\"\" class=\"wp-image-6186\" srcset=\"https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2019\/04\/divi-amp-1024x506.png 1024w, https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2019\/04\/divi-amp-300x148.png 300w, https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2019\/04\/divi-amp-768x380.png 768w, https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2019\/04\/divi-amp-50x25.png 50w, https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2019\/04\/divi-amp-60x30.png 60w, https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2019\/04\/divi-amp-100x49.png 100w, https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2019\/04\/divi-amp.png 1347w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p>To watch  more demo of Divi <a href=\"https:\/\/ampforwp.com\/amp-pagebuilder-compatibility\/#divi\">click here<\/a><\/p>\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<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>Divi Theme is a brand new product from Elegant Themes that could revolutionize the way you build websites. Divi Theme\u00a0allows you to modify not just your\u00a0site&#8217;s content, but the\u00a0site\u00a0design itself, without having to change themes. The Divi Theme will work perfecting on Non-AMP website (Normal website) BUT not on AMP&#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\/6177"}],"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=6177"}],"version-history":[{"count":34,"href":"https:\/\/ampforwp.com\/tutorials\/wp-json\/wp\/v2\/ht-kb\/6177\/revisions"}],"predecessor-version":[{"id":17574,"href":"https:\/\/ampforwp.com\/tutorials\/wp-json\/wp\/v2\/ht-kb\/6177\/revisions\/17574"}],"wp:attachment":[{"href":"https:\/\/ampforwp.com\/tutorials\/wp-json\/wp\/v2\/media?parent=6177"}],"wp:term":[{"taxonomy":"ht_kb_category","embeddable":true,"href":"https:\/\/ampforwp.com\/tutorials\/wp-json\/wp\/v2\/ht-kb-category?post=6177"},{"taxonomy":"ht_kb_tag","embeddable":true,"href":"https:\/\/ampforwp.com\/tutorials\/wp-json\/wp\/v2\/ht-kb-tag?post=6177"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}