{"id":18162,"date":"2021-05-17T08:21:49","date_gmt":"2021-05-17T08:21:49","guid":{"rendered":"https:\/\/ampforwp.com\/tutorials\/?post_type=ht_kb&#038;p=18162"},"modified":"2021-05-17T10:32:24","modified_gmt":"2021-05-17T10:32:24","slug":"how-to-enable-muffin-builder-on-amp-one-click-solution","status":"publish","type":"ht_kb","link":"https:\/\/ampforwp.com\/tutorials\/article\/how-to-enable-muffin-builder-on-amp-one-click-solution\/","title":{"rendered":"How to enable Muffin Builder on AMP (One Click Solution)"},"content":{"rendered":"\n<p><strong>Muffin<\/strong> <strong>Builder<\/strong> 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.<\/p>\n\n\n\n<p>The&nbsp;Muffin 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&nbsp;<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 id=\"how-to-setup-amp-page-builder\"><strong>How to Setup AMP Page builder.<\/strong><\/h3>\n\n\n\n<ol><li>You can purchase the Extension from this URL&nbsp;<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&nbsp;extension.&nbsp;Which type of package you&nbsp;want&nbsp;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=\"how-to-install-upload-zip-file\">How To Install \/ Upload Zip File<\/h4>\n\n\n\n<ul><li>It requires the <a href=\"https:\/\/themeforest.net\/item\/betheme-responsive-multipurpose-wordpress-theme\/7758048\">BeTheme<\/a> to be installed.<\/li><\/ul>\n\n\n\n<ul><li>Login to WordPress&nbsp;<strong>Admin Option&nbsp;Panel<\/strong>&nbsp;\u2013&gt;&nbsp;<strong><strong>Appearance&nbsp;<\/strong><\/strong>\u2013&gt;&nbsp; <strong>Themes<\/strong>&nbsp;page and click on the Add New button&nbsp;\u2013&gt;<strong>&nbsp;<strong>Upload Theme<\/strong><\/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 size-large\"><img decoding=\"async\" loading=\"lazy\" width=\"1024\" height=\"308\" src=\"https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2021\/05\/37-1024x308.png\" alt=\"\" class=\"wp-image-18168\" srcset=\"https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2021\/05\/37-1024x308.png 1024w, https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2021\/05\/37-300x90.png 300w, https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2021\/05\/37-768x231.png 768w, https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2021\/05\/37-50x15.png 50w, https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2021\/05\/37-60x18.png 60w, https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2021\/05\/37-100x30.png 100w, https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2021\/05\/37.png 1117w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<ul><li>From the dashboard, we go to the left-hand side in the Menu bar go to&nbsp;the <strong>AMP<\/strong>&nbsp;<strong>option panel<\/strong>&nbsp;<strong>-&gt; Settings -&gt; <strong>Muffin<\/strong><\/strong> <strong>Builder<\/strong> <strong>Support<\/strong>-&gt; Enable <strong>AMP Muffin Compatibility <\/strong>option.<\/li><\/ul>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter size-large\"><img decoding=\"async\" loading=\"lazy\" width=\"385\" height=\"499\" src=\"https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2021\/05\/35.png\" alt=\"\" class=\"wp-image-18164\" srcset=\"https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2021\/05\/35.png 385w, https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2021\/05\/35-231x300.png 231w, https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2021\/05\/35-39x50.png 39w, https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2021\/05\/35-46x60.png 46w, https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2021\/05\/35-77x100.png 77w\" sizes=\"(max-width: 385px) 100vw, 385px\" \/><\/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 size-large\"><img decoding=\"async\" loading=\"lazy\" width=\"850\" height=\"552\" src=\"https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2021\/05\/36.png\" alt=\"\" class=\"wp-image-18165\" srcset=\"https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2021\/05\/36.png 850w, https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2021\/05\/36-300x195.png 300w, https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2021\/05\/36-768x499.png 768w, https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2021\/05\/36-50x32.png 50w, https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2021\/05\/36-60x39.png 60w, https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2021\/05\/36-100x65.png 100w\" sizes=\"(max-width: 850px) 100vw, 850px\" \/><\/figure>\n\n\n\n<ul><li><strong>AMP Muffin Compatibility:<\/strong>&nbsp;Once you enable this option AMP Muffin Compatibility 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>Done! The Page Builder will be visible on the AMP version of your site.<\/li><\/ul>\n\n\n\n<h3 id=\"demo-of-non-amp\">Demo Of Non-AMP<\/h3>\n\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" loading=\"lazy\" width=\"1024\" height=\"535\" src=\"https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2021\/05\/photo_2021-05-17_13-47-20-1024x535.jpg\" alt=\"\" class=\"wp-image-18178\" srcset=\"https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2021\/05\/photo_2021-05-17_13-47-20-1024x535.jpg 1024w, https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2021\/05\/photo_2021-05-17_13-47-20-300x157.jpg 300w, https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2021\/05\/photo_2021-05-17_13-47-20-768x401.jpg 768w, https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2021\/05\/photo_2021-05-17_13-47-20-50x26.jpg 50w, https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2021\/05\/photo_2021-05-17_13-47-20-60x31.jpg 60w, https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2021\/05\/photo_2021-05-17_13-47-20-100x52.jpg 100w, https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2021\/05\/photo_2021-05-17_13-47-20.jpg 1280w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<h3 id=\"mce_64\"><br>Demo Of AMP<\/h3>\n\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" loading=\"lazy\" width=\"1024\" height=\"522\" src=\"https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2021\/05\/1-1024x522.png\" alt=\"\" class=\"wp-image-18183\" srcset=\"https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2021\/05\/1-1024x522.png 1024w, https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2021\/05\/1-300x153.png 300w, https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2021\/05\/1-768x391.png 768w, https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2021\/05\/1-50x25.png 50w, https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2021\/05\/1-60x31.png 60w, https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2021\/05\/1-100x51.png 100w, https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2021\/05\/1.png 1280w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/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<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>Muffin Builder 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&nbsp;Muffin page builder will work perfectly on Non-AMP website (Normal website)&#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\/18162"}],"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=18162"}],"version-history":[{"count":7,"href":"https:\/\/ampforwp.com\/tutorials\/wp-json\/wp\/v2\/ht-kb\/18162\/revisions"}],"predecessor-version":[{"id":18184,"href":"https:\/\/ampforwp.com\/tutorials\/wp-json\/wp\/v2\/ht-kb\/18162\/revisions\/18184"}],"wp:attachment":[{"href":"https:\/\/ampforwp.com\/tutorials\/wp-json\/wp\/v2\/media?parent=18162"}],"wp:term":[{"taxonomy":"ht_kb_category","embeddable":true,"href":"https:\/\/ampforwp.com\/tutorials\/wp-json\/wp\/v2\/ht-kb-category?post=18162"},{"taxonomy":"ht_kb_tag","embeddable":true,"href":"https:\/\/ampforwp.com\/tutorials\/wp-json\/wp\/v2\/ht-kb-tag?post=18162"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}