{"id":8527,"date":"2019-04-30T13:06:54","date_gmt":"2019-04-30T13:06:54","guid":{"rendered":"https:\/\/ampforwp.com\/tutorials\/?post_type=ht_kb&#038;p=8527"},"modified":"2019-07-10T11:58:45","modified_gmt":"2019-07-10T11:58:45","slug":"how-to-add-the-themes-in-ampforwp-with-amp-layoutscreative-layout","status":"publish","type":"ht_kb","link":"https:\/\/ampforwp.com\/tutorials\/article\/how-to-add-the-themes-in-ampforwp-with-amp-layoutscreative-layout\/","title":{"rendered":"How to add Creative layout  themes in AMPforWP (with AMP Layouts)"},"content":{"rendered":"\n<p><strong><a href=\"https:\/\/ampforwp.com\/amp-layouts\/\">AMP Layouts<\/a><\/strong>&nbsp;is a revolutionary modular layout system built for AMP that makes easy to create your own AMP design.<\/p>\n\n\n\n<p>It\u2019s got a pre-built design for every use case with customizability options and requires no coding.<\/p>\n\n\n\n<p><strong>Follow the simple steps to Install AMP Layouts plugin.<\/strong><\/p>\n\n\n\n<ul><li>Download and Install from the account area.<\/li><li>Upload and Activate<\/li><li>Done! The&nbsp;<strong>AMP Layouts<\/strong>&nbsp;will be visible on the AMP version of your site.<\/li><\/ul>\n\n\n\n<p><strong><mark style=\"background-color: yellow;\">\nStep 1:<\/mark><\/strong>&nbsp;First go to&nbsp;<strong>WordPress Admin Area<\/strong>&nbsp;-&gt;&nbsp;<strong>AMP option panel<\/strong>&nbsp;-&gt;&nbsp;<strong>Design<\/strong>&nbsp;-&gt;&nbsp;<strong>Theme<\/strong>&nbsp;-&gt;&nbsp;<strong>Make sure to select Swfit theme.<\/strong><\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" loading=\"lazy\" width=\"1024\" height=\"492\" src=\"https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2019\/04\/1-10-1024x492.png\" alt=\"\" class=\"wp-image-8532\" srcset=\"https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2019\/04\/1-10-1024x492.png 1024w, https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2019\/04\/1-10-300x144.png 300w, https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2019\/04\/1-10-768x369.png 768w, https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2019\/04\/1-10-50x24.png 50w, https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2019\/04\/1-10-60x29.png 60w, https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2019\/04\/1-10-100x48.png 100w, https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2019\/04\/1-10.png 1316w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p>Scroll down a little to see AMP Layouts.<\/p>\n\n\n\n<p><strong><mark style=\"background-color: yellow;\">\nStep 2:&nbsp;<\/mark><\/strong>Now you can see the AMP Layouts you need to select the creative layout and click on the import button. <\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" loading=\"lazy\" width=\"1024\" height=\"397\" src=\"https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2019\/04\/1-12-1024x397.png\" alt=\"\" class=\"wp-image-8536\" srcset=\"https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2019\/04\/1-12-1024x397.png 1024w, https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2019\/04\/1-12-300x116.png 300w, https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2019\/04\/1-12-768x298.png 768w, https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2019\/04\/1-12-50x19.png 50w, https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2019\/04\/1-12-60x23.png 60w, https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2019\/04\/1-12-100x39.png 100w, https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2019\/04\/1-12.png 1303w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p>Once you import the AMP layout complete design will be changed like header, footer, the single design you can check the below screenshot. <\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" loading=\"lazy\" width=\"907\" height=\"1024\" src=\"https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2019\/04\/screencapture-localhost-wordpress-amp-2019-04-30-18_42_53-907x1024.png\" alt=\"\" class=\"wp-image-8539\" srcset=\"https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2019\/04\/screencapture-localhost-wordpress-amp-2019-04-30-18_42_53-907x1024.png 907w, https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2019\/04\/screencapture-localhost-wordpress-amp-2019-04-30-18_42_53-266x300.png 266w, https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2019\/04\/screencapture-localhost-wordpress-amp-2019-04-30-18_42_53-768x868.png 768w, https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2019\/04\/screencapture-localhost-wordpress-amp-2019-04-30-18_42_53-44x50.png 44w, https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2019\/04\/screencapture-localhost-wordpress-amp-2019-04-30-18_42_53-53x60.png 53w, https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2019\/04\/screencapture-localhost-wordpress-amp-2019-04-30-18_42_53-89x100.png 89w, https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2019\/04\/screencapture-localhost-wordpress-amp-2019-04-30-18_42_53.png 1366w\" sizes=\"(max-width: 907px) 100vw, 907px\" \/><\/figure>\n\n\n\n<h4 id=\"to-get-the-amp-page-builder-pre-built-layout\"><strong>To Get the AMP Page Builder Pre-built AMP layout.<\/strong><\/h4>\n\n\n\n<p><strong><mark style=\"background-color: yellow;\">\nStep 3:<\/mark><\/strong> Create a new page in the WordPress dashboard. Scroll down a little to see AMP Page builder click on Pre-built AMP Layout button. <\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" loading=\"lazy\" width=\"1024\" height=\"196\" src=\"https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2019\/06\/layout-1-2-1024x196.png\" alt=\"\" class=\"wp-image-11817\" srcset=\"https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2019\/06\/layout-1-2-1024x196.png 1024w, https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2019\/06\/layout-1-2-300x57.png 300w, https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2019\/06\/layout-1-2-768x147.png 768w, https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2019\/06\/layout-1-2-50x10.png 50w, https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2019\/06\/layout-1-2-60x11.png 60w, https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2019\/06\/layout-1-2-100x19.png 100w, https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2019\/06\/layout-1-2.png 1042w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p><strong><mark style=\"background-color: yellow;\">\nStep 4:&nbsp;<\/mark><\/strong>Once you click on the Pre-built AMP Layout button Layout directory will be displayed you need to select the Creative layout and click on View layout button.&nbsp; <\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" loading=\"lazy\" width=\"1024\" height=\"475\" src=\"https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2019\/04\/c-1-1024x475.png\" alt=\"\" class=\"wp-image-8548\" srcset=\"https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2019\/04\/c-1-1024x475.png 1024w, https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2019\/04\/c-1-300x139.png 300w, https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2019\/04\/c-1-768x356.png 768w, https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2019\/04\/c-1-50x23.png 50w, https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2019\/04\/c-1-60x28.png 60w, https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2019\/04\/c-1-100x46.png 100w, https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2019\/04\/c-1.png 1293w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\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\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" loading=\"lazy\" width=\"1024\" height=\"474\" src=\"https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2019\/04\/c-2-1024x474.png\" alt=\"\" class=\"wp-image-8545\" srcset=\"https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2019\/04\/c-2-1024x474.png 1024w, https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2019\/04\/c-2-300x139.png 300w, https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2019\/04\/c-2-768x355.png 768w, https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2019\/04\/c-2-50x23.png 50w, https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2019\/04\/c-2-60x28.png 60w, https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2019\/04\/c-2-100x46.png 100w, https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2019\/04\/c-2.png 1295w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p><strong><mark style=\"background-color: yellow;\">\nStep 6:<\/mark><\/strong> Once you click on the import button alert 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=\"462\" src=\"https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2019\/05\/111-1024x462.png\" alt=\"\" class=\"wp-image-8690\" srcset=\"https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2019\/05\/111-1024x462.png 1024w, https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2019\/05\/111-300x135.png 300w, https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2019\/05\/111-768x346.png 768w, https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2019\/05\/111-50x23.png 50w, https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2019\/05\/111-60x27.png 60w, https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2019\/05\/111-100x45.png 100w, https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2019\/05\/111.png 1291w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p><strong><mark style=\"background-color: yellow;\">Step 7:<\/mark><\/strong> Once you import the Creative layout these modules will be inserted on AMP Page builder and click on the update button. <br><\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" loading=\"lazy\" width=\"1024\" height=\"609\" src=\"https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2019\/07\/c-1-1024x609.png\" alt=\"\" class=\"wp-image-12189\" srcset=\"https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2019\/07\/c-1-1024x609.png 1024w, https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2019\/07\/c-1-300x178.png 300w, https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2019\/07\/c-1-768x456.png 768w, https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2019\/07\/c-1-50x30.png 50w, https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2019\/07\/c-1-60x36.png 60w, https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2019\/07\/c-1-100x59.png 100w, https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2019\/07\/c-1.png 1045w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p>If you want to show this page on your homepage of AMP site then you need to turn on static front page from general settings and select that page, which you have built with Elegance layout 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>&nbsp;option<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" loading=\"lazy\" width=\"1024\" height=\"443\" src=\"https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2019\/06\/000-1024x443.png\" alt=\"\" class=\"wp-image-11001\" srcset=\"https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2019\/06\/000-1024x443.png 1024w, https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2019\/06\/000-300x130.png 300w, https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2019\/06\/000-768x332.png 768w, https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2019\/06\/000-50x22.png 50w, https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2019\/06\/000-60x26.png 60w, https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2019\/06\/000-100x43.png 100w, https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2019\/06\/000.png 1284w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<h4 id=\"the-output-of-amp-page-builder\"><strong>The Output of <\/strong>Creative layout themes in AMPforWP<strong>:<\/strong><\/h4>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" loading=\"lazy\" width=\"1024\" height=\"494\" src=\"https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2019\/04\/c-o-1024x494.png\" alt=\"\" class=\"wp-image-8553\" srcset=\"https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2019\/04\/c-o-1024x494.png 1024w, https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2019\/04\/c-o-300x145.png 300w, https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2019\/04\/c-o-768x370.png 768w, https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2019\/04\/c-o-50x24.png 50w, https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2019\/04\/c-o-60x29.png 60w, https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2019\/04\/c-o-100x48.png 100w, https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2019\/04\/c-o.png 1365w\" 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>AMP Layouts&nbsp;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 account&#8230;<\/p>\n","protected":false},"author":18,"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\/8527"}],"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=8527"}],"version-history":[{"count":32,"href":"https:\/\/ampforwp.com\/tutorials\/wp-json\/wp\/v2\/ht-kb\/8527\/revisions"}],"predecessor-version":[{"id":12190,"href":"https:\/\/ampforwp.com\/tutorials\/wp-json\/wp\/v2\/ht-kb\/8527\/revisions\/12190"}],"wp:attachment":[{"href":"https:\/\/ampforwp.com\/tutorials\/wp-json\/wp\/v2\/media?parent=8527"}],"wp:term":[{"taxonomy":"ht_kb_category","embeddable":true,"href":"https:\/\/ampforwp.com\/tutorials\/wp-json\/wp\/v2\/ht-kb-category?post=8527"},{"taxonomy":"ht_kb_tag","embeddable":true,"href":"https:\/\/ampforwp.com\/tutorials\/wp-json\/wp\/v2\/ht-kb-tag?post=8527"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}