{"id":14073,"date":"2019-09-09T07:42:56","date_gmt":"2019-09-09T07:42:56","guid":{"rendered":"https:\/\/ampforwp.com\/tutorials\/?post_type=ht_kb&#038;p=14073"},"modified":"2019-09-09T08:12:37","modified_gmt":"2019-09-09T08:12:37","slug":"how-to-add-color-and-fonts-in-header-and-footer","status":"publish","type":"ht_kb","link":"https:\/\/ampforwp.com\/tutorials\/article\/how-to-add-color-and-fonts-in-header-and-footer\/","title":{"rendered":"How to add color and fonts in header and footer."},"content":{"rendered":"\n<p><strong>Advanced Header Design: <\/strong> By enabling this option you can customize the Header background color, Menu background, width, height, padding, margin, Menu color, Menu Border Color, etc..   <\/p>\n\n\n\n<p>You will find this option in the <strong>WordPress Dashboard<\/strong> -> Navigate to <strong>AMP option panel<\/strong> -><strong> Design <\/strong>-> <span style=\"background-color: rgb(232, 234, 235);\"><b>Header<\/b><\/span>-> Enable <strong>Advanced Header Design<\/strong> and then click on the &#8220;<strong>Save Changes<\/strong>&#8221; button. <\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" loading=\"lazy\" width=\"1024\" height=\"877\" src=\"https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2019\/09\/19-1024x877.png\" alt=\"\" class=\"wp-image-14084\" srcset=\"https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2019\/09\/19-1024x877.png 1024w, https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2019\/09\/19-300x257.png 300w, https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2019\/09\/19-768x658.png 768w, https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2019\/09\/19-50x43.png 50w, https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2019\/09\/19-60x51.png 60w, https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2019\/09\/19-100x86.png 100w, https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2019\/09\/19.png 1173w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<h4 id=\"mce_34\">The Output of the <strong>Advanced Header Design<\/strong> <\/h4>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" loading=\"lazy\" width=\"536\" height=\"659\" src=\"https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2019\/09\/20-1.png\" alt=\"\" class=\"wp-image-14091\" srcset=\"https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2019\/09\/20-1.png 536w, https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2019\/09\/20-1-244x300.png 244w, https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2019\/09\/20-1-41x50.png 41w, https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2019\/09\/20-1-49x60.png 49w, https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2019\/09\/20-1-81x100.png 81w\" sizes=\"(max-width: 536px) 100vw, 536px\" \/><\/figure>\n\n\n\n<p><strong>Advanced Footer Design: <\/strong> By enabling this option you can customize the Footer background color, width, height, padding, margin, etc..  <\/p>\n\n\n\n<p>You will find this option in the <strong>WordPress Dashboard<\/strong> -> Navigate to <strong>AMP option panel<\/strong> -><strong> Design <\/strong>-> <strong>Footer<\/strong> -> Enable <strong>Advanced Footer Design<\/strong> and then click on the &#8220;<strong>Save Changes<\/strong>&#8221; button.<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" loading=\"lazy\" width=\"857\" height=\"1024\" src=\"https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2019\/09\/16-1-857x1024.png\" alt=\"\" class=\"wp-image-14075\" srcset=\"https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2019\/09\/16-1-857x1024.png 857w, https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2019\/09\/16-1-251x300.png 251w, https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2019\/09\/16-1-768x917.png 768w, https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2019\/09\/16-1-42x50.png 42w, https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2019\/09\/16-1-50x60.png 50w, https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2019\/09\/16-1-84x100.png 84w, https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2019\/09\/16-1.png 1179w\" sizes=\"(max-width: 857px) 100vw, 857px\" \/><\/figure>\n\n\n\n<h4>The Output of the <strong>Advanced Footer Design<\/strong> <\/h4>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" loading=\"lazy\" width=\"519\" height=\"650\" src=\"https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2019\/09\/21.png\" alt=\"\" class=\"wp-image-14093\" srcset=\"https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2019\/09\/21.png 519w, https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2019\/09\/21-240x300.png 240w, https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2019\/09\/21-40x50.png 40w, https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2019\/09\/21-48x60.png 48w, https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2019\/09\/21-80x100.png 80w\" sizes=\"(max-width: 519px) 100vw, 519px\" \/><\/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>Advanced Header Design: By enabling this option you can customize the Header background color, Menu background, width, height, padding, margin, Menu color, Menu Border Color, etc.. You will find this option in the WordPress Dashboard -> Navigate to AMP option panel -> Design -> Header-> Enable Advanced Header Design and&#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\/14073"}],"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=14073"}],"version-history":[{"count":17,"href":"https:\/\/ampforwp.com\/tutorials\/wp-json\/wp\/v2\/ht-kb\/14073\/revisions"}],"predecessor-version":[{"id":14096,"href":"https:\/\/ampforwp.com\/tutorials\/wp-json\/wp\/v2\/ht-kb\/14073\/revisions\/14096"}],"wp:attachment":[{"href":"https:\/\/ampforwp.com\/tutorials\/wp-json\/wp\/v2\/media?parent=14073"}],"wp:term":[{"taxonomy":"ht_kb_category","embeddable":true,"href":"https:\/\/ampforwp.com\/tutorials\/wp-json\/wp\/v2\/ht-kb-category?post=14073"},{"taxonomy":"ht_kb_tag","embeddable":true,"href":"https:\/\/ampforwp.com\/tutorials\/wp-json\/wp\/v2\/ht-kb-tag?post=14073"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}