{"id":4363,"date":"2018-03-06T07:41:51","date_gmt":"2018-03-06T07:41:51","guid":{"rendered":"https:\/\/ampforwp.com\/tutorials\/?post_type=ht_kb&#038;p=4363"},"modified":"2019-08-01T13:00:26","modified_gmt":"2019-08-01T13:00:26","slug":"setup-use-amp-layouts","status":"publish","type":"ht_kb","link":"https:\/\/ampforwp.com\/tutorials\/article\/setup-use-amp-layouts\/","title":{"rendered":"How to Setup &#038; Use AMP Layouts"},"content":{"rendered":"<p><strong><a href=\"https:\/\/ampforwp.com\/amp-layouts\/\">AMP Layouts<\/a><\/strong> is a revolutionary modular layout system built for AMP that makes easy to create your own AMP design.<\/p>\n<p>It\u2019s got a pre-built design for every use case with customizability options and requires no coding.<\/p>\n<p><strong>Follow the simple steps to Install AMP Layouts plugin.<\/strong><\/p>\n<ul>\n<li>Download and Install from the account area.<\/li>\n<li>Upload and Activate<\/li>\n<li>Done! The <strong>AMP Layouts<\/strong> will be visible on the AMP version of your site.<\/li>\n<\/ul>\n<p><strong><mark style=\"background-color: yellow;\">\nStep 1:<\/mark><\/strong> First go to <strong>WordPress Admin Area<\/strong> -&gt; <strong>AMP option panel<\/strong> -&gt; <strong>Design<\/strong> -&gt; <strong>Theme<\/strong> -&gt; <strong>Make sure to select Swfit theme.<\/strong><\/p>\n<p><a href=\"https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2018\/03\/1.png\"><img decoding=\"async\" loading=\"lazy\" class=\"alignnone size-full wp-image-8447\" src=\"https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2018\/03\/1.png\" alt=\"\" width=\"1316\" height=\"632\" srcset=\"https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2018\/03\/1.png 1316w, https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2018\/03\/1-300x144.png 300w, https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2018\/03\/1-768x369.png 768w, https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2018\/03\/1-1024x492.png 1024w, https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2018\/03\/1-50x24.png 50w, https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2018\/03\/1-60x29.png 60w, https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2018\/03\/1-100x48.png 100w\" sizes=\"(max-width: 1316px) 100vw, 1316px\" \/><\/a><\/p>\n<p>Scroll down a little to see AMP Layouts.<\/p>\n<p><strong><mark style=\"background-color: yellow;\">\nStep 2:<\/mark> <\/strong>Now you can see the AMP Layouts which layout you want just need to import.<\/p>\n<p><a href=\"https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2018\/03\/2.png\"><img decoding=\"async\" loading=\"lazy\" class=\"alignnone  wp-image-8454\" src=\"https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2018\/03\/2.png\" alt=\"\" width=\"1275\" height=\"610\" srcset=\"https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2018\/03\/2.png 1275w, https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2018\/03\/2-300x144.png 300w, https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2018\/03\/2-768x367.png 768w, https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2018\/03\/2-1024x490.png 1024w, https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2018\/03\/2-50x24.png 50w, https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2018\/03\/2-60x29.png 60w, https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2018\/03\/2-100x48.png 100w\" sizes=\"(max-width: 1275px) 100vw, 1275px\" \/><\/a><\/p>\n<p>Once you import the AMP layout complete design will be change like header, footer, single design like the below screenshot.<\/p>\n<p><a href=\"https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2018\/03\/screencapture-localhost-wordpress-amp-2019-04-30-13_57_12.png\"><img decoding=\"async\" loading=\"lazy\" class=\"alignnone size-full wp-image-8482\" src=\"https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2018\/03\/screencapture-localhost-wordpress-amp-2019-04-30-13_57_12.png\" alt=\"\" width=\"1366\" height=\"1966\" srcset=\"https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2018\/03\/screencapture-localhost-wordpress-amp-2019-04-30-13_57_12.png 1366w, https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2018\/03\/screencapture-localhost-wordpress-amp-2019-04-30-13_57_12-208x300.png 208w, https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2018\/03\/screencapture-localhost-wordpress-amp-2019-04-30-13_57_12-768x1105.png 768w, https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2018\/03\/screencapture-localhost-wordpress-amp-2019-04-30-13_57_12-711x1024.png 711w, https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2018\/03\/screencapture-localhost-wordpress-amp-2019-04-30-13_57_12-35x50.png 35w, https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2018\/03\/screencapture-localhost-wordpress-amp-2019-04-30-13_57_12-42x60.png 42w, https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2018\/03\/screencapture-localhost-wordpress-amp-2019-04-30-13_57_12-69x100.png 69w\" sizes=\"(max-width: 1366px) 100vw, 1366px\" \/><\/a><\/p>\n<h4><strong>To Get the AMP Page Builder Pre-built layout.<\/strong><\/h4>\n<p><strong><mark style=\"background-color: yellow;\">\nStep 3: <\/mark><\/strong>Now click on Posts or Pages in WordPress dashboard. Scroll down a little to see AMP Page builder click on Pre-built AMP Layout button.<\/p>\n<p><a href=\"https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2018\/03\/8.png\"><img decoding=\"async\" loading=\"lazy\" class=\"alignnone size-full wp-image-8490\" src=\"https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2018\/03\/8.png\" alt=\"\" width=\"1012\" height=\"246\" srcset=\"https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2018\/03\/8.png 1012w, https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2018\/03\/8-300x73.png 300w, https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2018\/03\/8-768x187.png 768w, https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2018\/03\/8-50x12.png 50w, https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2018\/03\/8-60x15.png 60w, https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2018\/03\/8-100x24.png 100w\" sizes=\"(max-width: 1012px) 100vw, 1012px\" \/><\/a><\/p>\n<p><strong><mark style=\"background-color: yellow;\">\nStep 4: <\/mark><\/strong>Once you click on the Pre-built AMP Layout button Layout directory will be displayed which layout you want just need to select click on View layout button.<\/p>\n<p><a href=\"https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2018\/03\/5.png\"><img decoding=\"async\" loading=\"lazy\" class=\"alignnone size-full wp-image-8468\" src=\"https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2018\/03\/5.png\" alt=\"\" width=\"1339\" height=\"608\" srcset=\"https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2018\/03\/5.png 1339w, https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2018\/03\/5-300x136.png 300w, https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2018\/03\/5-768x349.png 768w, https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2018\/03\/5-1024x465.png 1024w, https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2018\/03\/5-50x23.png 50w, https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2018\/03\/5-60x27.png 60w, https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2018\/03\/5-100x45.png 100w\" sizes=\"(max-width: 1339px) 100vw, 1339px\" \/><\/a><\/p>\n<p><strong><mark style=\"background-color: yellow;\">\nStep 5: <\/mark><\/strong>First click on the preview button for checking the layout (design) if you like that layout then click on the import button.<\/p>\n<p><a href=\"https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2018\/03\/6.png\"><img decoding=\"async\" loading=\"lazy\" class=\"alignnone size-full wp-image-8473\" src=\"https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2018\/03\/6.png\" alt=\"\" width=\"1320\" height=\"592\" srcset=\"https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2018\/03\/6.png 1320w, https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2018\/03\/6-300x135.png 300w, https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2018\/03\/6-768x344.png 768w, https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2018\/03\/6-1024x459.png 1024w, https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2018\/03\/6-50x22.png 50w, https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2018\/03\/6-60x27.png 60w, https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2018\/03\/6-100x45.png 100w\" sizes=\"(max-width: 1320px) 100vw, 1320px\" \/><\/a><\/p>\n\n\n<p><strong><mark style=\"background-color: yellow;\">\nStep 6:<\/mark> <\/strong>Once you click on the import button alter message will appear. If you want to import new layout then click on ok button.<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" loading=\"lazy\" width=\"1024\" height=\"463\" class=\"wp-image-8683\" src=\"https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2019\/05\/n-4-1024x463.png\" alt=\"\" srcset=\"https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2019\/05\/n-4-1024x463.png 1024w, https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2019\/05\/n-4-300x136.png 300w, https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2019\/05\/n-4-768x347.png 768w, https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2019\/05\/n-4-50x23.png 50w, https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2019\/05\/n-4-60x27.png 60w, https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2019\/05\/n-4-100x45.png 100w, https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2019\/05\/n-4.png 1290w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n<p><strong><mark style=\"background-color: yellow;\">\nStep 7:<\/mark><\/strong> Once you import the layout this option will display on AMP Page builder and click on update the post<\/p>\n\n<p><a href=\"https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2018\/03\/10.png\"><img decoding=\"async\" loading=\"lazy\" class=\"alignnone size-full wp-image-8495\" src=\"https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2018\/03\/10.png\" alt=\"\" width=\"1344\" height=\"621\" srcset=\"https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2018\/03\/10.png 1344w, https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2018\/03\/10-300x139.png 300w, https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2018\/03\/10-768x355.png 768w, https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2018\/03\/10-1024x473.png 1024w, https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2018\/03\/10-50x23.png 50w, https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2018\/03\/10-60x28.png 60w, https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2018\/03\/10-100x46.png 100w\" sizes=\"(max-width: 1344px) 100vw, 1344px\" \/><\/a>\n<h4><strong>The Output of AMP Page builder:<\/strong><\/h4>\n<a href=\"https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2018\/03\/7.png\"><img decoding=\"async\" loading=\"lazy\" class=\"alignnone size-full wp-image-8476\" src=\"https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2018\/03\/7.png\" alt=\"\" width=\"1364\" height=\"655\" srcset=\"https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2018\/03\/7.png 1364w, https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2018\/03\/7-300x144.png 300w, https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2018\/03\/7-768x369.png 768w, https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2018\/03\/7-1024x492.png 1024w, https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2018\/03\/7-50x24.png 50w, https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2018\/03\/7-60x29.png 60w, https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2018\/03\/7-100x48.png 100w\" sizes=\"(max-width: 1364px) 100vw, 1364px\" \/><\/a><\/p>\n\n<p>To make easy, we have created a video tutorial on How to Setup &amp; Use AMP Layouts that you can watch below.<\/p>\n\n<div style=\"width: 643px;\" class=\"wp-video\"><!--[if lt IE 9]><script>document.createElement('video');<\/script><![endif]-->\n<video class=\"wp-video-shortcode\" id=\"video-4363-1\" width=\"643\" height=\"309\" preload=\"metadata\" controls=\"controls\"><source type=\"video\/mp4\" src=\"https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2018\/03\/Recording-17.mp4?_=1\" \/><a href=\"https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2018\/03\/Recording-17.mp4\">https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2018\/03\/Recording-17.mp4<\/a><\/video><\/div><br\/>\n\n\n<p><strong>That\u2019s it for this tutorial!<\/strong><\/p>\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<p>This tutorial requires <a href=\"https:\/\/ampforwp.com\/amp-layouts\/\">AMP Layouts Extension<\/a>.<\/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>AMP Layouts is a revolutionary modular layout system built for AMP that makes easy to create your own AMP design. It\u2019s got a pre-built design for every use case with customizability options and requires no coding. Follow the simple steps to Install AMP Layouts plugin. Download and Install from the&#8230;<\/p>\n","protected":false},"author":1,"comment_status":"open","ping_status":"closed","template":"","format":"standard","meta":[],"ht-kb-category":[123],"ht-kb-tag":[],"_links":{"self":[{"href":"https:\/\/ampforwp.com\/tutorials\/wp-json\/wp\/v2\/ht-kb\/4363"}],"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\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/ampforwp.com\/tutorials\/wp-json\/wp\/v2\/comments?post=4363"}],"version-history":[{"count":88,"href":"https:\/\/ampforwp.com\/tutorials\/wp-json\/wp\/v2\/ht-kb\/4363\/revisions"}],"predecessor-version":[{"id":13348,"href":"https:\/\/ampforwp.com\/tutorials\/wp-json\/wp\/v2\/ht-kb\/4363\/revisions\/13348"}],"wp:attachment":[{"href":"https:\/\/ampforwp.com\/tutorials\/wp-json\/wp\/v2\/media?parent=4363"}],"wp:term":[{"taxonomy":"ht_kb_category","embeddable":true,"href":"https:\/\/ampforwp.com\/tutorials\/wp-json\/wp\/v2\/ht-kb-category?post=4363"},{"taxonomy":"ht_kb_tag","embeddable":true,"href":"https:\/\/ampforwp.com\/tutorials\/wp-json\/wp\/v2\/ht-kb-tag?post=4363"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}