{"id":14166,"date":"2019-09-12T10:51:57","date_gmt":"2019-09-12T10:51:57","guid":{"rendered":"https:\/\/ampforwp.com\/tutorials\/?post_type=ht_kb&#038;p=14166"},"modified":"2019-09-12T11:14:19","modified_gmt":"2019-09-12T11:14:19","slug":"how-to-design-footer-in-amp-and-use-of-amp-footer-option","status":"publish","type":"ht_kb","link":"https:\/\/ampforwp.com\/tutorials\/article\/how-to-design-footer-in-amp-and-use-of-amp-footer-option\/","title":{"rendered":"How to design footer in amp and use of amp footer option"},"content":{"rendered":"\n<p>If you want to design your own custom footer in AMP  then you need to follow below steps.<\/p>\n\n\n\n<p><strong>Step 1 &#8211;<\/strong> Navigate to the <strong>Appearance<\/strong>  -> <strong>Widgets<\/strong> -> <strong>AMP Footer<\/strong> Here you can see the AMP footer widgets.<\/p>\n\n\n\n<p><strong>Step 2 &#8211;<\/strong>  Simply drag and drop the widgets which you want from the left side into the &#8220;<strong>AMP Footer<\/strong>&#8221; area like below the screenshot.<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" loading=\"lazy\" width=\"1024\" height=\"473\" src=\"https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2019\/09\/amp-footer-2-1024x473.png\" alt=\"\" class=\"wp-image-14173\" srcset=\"https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2019\/09\/amp-footer-2-1024x473.png 1024w, https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2019\/09\/amp-footer-2-300x139.png 300w, https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2019\/09\/amp-footer-2-768x355.png 768w, https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2019\/09\/amp-footer-2-50x23.png 50w, https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2019\/09\/amp-footer-2-60x28.png 60w, https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2019\/09\/amp-footer-2-100x46.png 100w, https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2019\/09\/amp-footer-2.png 1357w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<h4> The Output of the AMP Footer in AMP<\/h4>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter\"><img decoding=\"async\" loading=\"lazy\" width=\"355\" height=\"623\" src=\"https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2019\/09\/amp-footer-1.png\" alt=\"\" class=\"wp-image-14171\" srcset=\"https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2019\/09\/amp-footer-1.png 355w, https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2019\/09\/amp-footer-1-171x300.png 171w, https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2019\/09\/amp-footer-1-28x50.png 28w, https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2019\/09\/amp-footer-1-34x60.png 34w, https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2019\/09\/amp-footer-1-57x100.png 57w\" sizes=\"(max-width: 355px) 100vw, 355px\" \/><\/figure><\/div>\n\n\n\n<p>If you want to customize the Footer background color, width, height, padding, margin, etc then follow this <a href=\"https:\/\/ampforwp.com\/tutorials\/article\/how-to-add-color-and-fonts-in-header-and-footer\/\">tutorial<\/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\n\n\n<p><br><\/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>If you want to design your own custom footer in AMP then you need to follow below steps. Step 1 &#8211; Navigate to the Appearance -> Widgets -> AMP Footer Here you can see the AMP footer widgets. Step 2 &#8211; Simply drag and drop the widgets which you want&#8230;<\/p>\n","protected":false},"author":18,"comment_status":"open","ping_status":"closed","template":"","format":"standard","meta":[],"ht-kb-category":[34],"ht-kb-tag":[],"_links":{"self":[{"href":"https:\/\/ampforwp.com\/tutorials\/wp-json\/wp\/v2\/ht-kb\/14166"}],"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=14166"}],"version-history":[{"count":15,"href":"https:\/\/ampforwp.com\/tutorials\/wp-json\/wp\/v2\/ht-kb\/14166\/revisions"}],"predecessor-version":[{"id":14184,"href":"https:\/\/ampforwp.com\/tutorials\/wp-json\/wp\/v2\/ht-kb\/14166\/revisions\/14184"}],"wp:attachment":[{"href":"https:\/\/ampforwp.com\/tutorials\/wp-json\/wp\/v2\/media?parent=14166"}],"wp:term":[{"taxonomy":"ht_kb_category","embeddable":true,"href":"https:\/\/ampforwp.com\/tutorials\/wp-json\/wp\/v2\/ht-kb-category?post=14166"},{"taxonomy":"ht_kb_tag","embeddable":true,"href":"https:\/\/ampforwp.com\/tutorials\/wp-json\/wp\/v2\/ht-kb-tag?post=14166"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}