![\"\"](\"https:\/\/www.boldgrid.com\/support\/wp-content\/uploads\/2018\/09\/boldgrid-crio-horizontal-image.png\")
<\/p>\n<\/p>\n
Widgets allow you to add additional content to your header and footer and require no coding experience. First you need to set up the Widget Areas<\/b> where the widgets will appear, which are enabled from the Customizer. <\/b><\/p>\nAdding Widgets to the Header and Footer<\/h2>\n
First add a widget area to your Header<\/a> or Footer<\/a> design.<\/p>\n Once you’ve added Widgets to your header or footer, you can customize their appearance. Navigate to Customize → Widgets → [Widget Area]<\/strong> and you’ll find controls to modify the color for Backgrounds, Headings, and Links in your widget area. Note the Eraser<\/strong> icon in the background, which will give your widgets a “Transparent” background, so it matches the already existing color. Congratulations, you now know how to work with widgets and widget areas using BoldGrid Crio! You can also add Widgets to your Blog Page<\/a> or Blog Posts<\/a> too.<\/p>\n While a dedicated Contact Us page can be valuable and might include things such as detailed information, forms, or maps, some smaller sites or a one-page site might prefer a lighter alternative. This example will show you how to create a Contact Us section in your site footer and link it to the menu in your header.<\/p>\n<\/div>\n Widgets allow you to add additional content to your header and footer and require no coding experience. First you need to set up the Widget Areas where the widgets will appear, which are enabled from the Customizer. Adding Widgets to the Header and Footer First add a widget area to your Header or Footer design. […]<\/p>\n","protected":false},"author":529,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"_bbp_topic_count":0,"_bbp_reply_count":0,"_bbp_total_topic_count":0,"_bbp_total_reply_count":0,"_bbp_voice_count":0,"_bbp_anonymous_reply_count":0,"_bbp_topic_count_hidden":0,"_bbp_reply_count_hidden":0,"_bbp_forum_subforum_count":0,"bgseo_title":"Working with Header and Footer Widgets in Crio | BoldGrid Crio","bgseo_description":"Widgets allow you to add additional content to your header and footer and require no coding experience. First you need to set up the Widget Areaswhere the widgets will appear, which are enabled from the Customizer.","bgseo_robots_index":"index","bgseo_robots_follow":"follow","footnotes":""},"categories":[573],"tags":[],"class_list":["post-15672","post","type-post","status-publish","format-standard","hentry","category-boldgrid-crio-supertheme-product-guide"],"acf":[],"_links":{"self":[{"href":"https:\/\/www.boldgrid.com\/support\/wp-json\/wp\/v2\/posts\/15672","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.boldgrid.com\/support\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.boldgrid.com\/support\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.boldgrid.com\/support\/wp-json\/wp\/v2\/users\/529"}],"replies":[{"embeddable":true,"href":"https:\/\/www.boldgrid.com\/support\/wp-json\/wp\/v2\/comments?post=15672"}],"version-history":[{"count":9,"href":"https:\/\/www.boldgrid.com\/support\/wp-json\/wp\/v2\/posts\/15672\/revisions"}],"predecessor-version":[{"id":123920,"href":"https:\/\/www.boldgrid.com\/support\/wp-json\/wp\/v2\/posts\/15672\/revisions\/123920"}],"wp:attachment":[{"href":"https:\/\/www.boldgrid.com\/support\/wp-json\/wp\/v2\/media?parent=15672"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.boldgrid.com\/support\/wp-json\/wp\/v2\/categories?post=15672"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.boldgrid.com\/support\/wp-json\/wp\/v2\/tags?post=15672"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}\n
Customizing Widgets in the Header and Footer<\/h2>\n
Change Widget Background, Heading, and Link Colors<\/h3>\n
\n![\"\"](\"https:\/\/www.boldgrid.com\/support\/wp-content\/uploads\/2018\/09\/widget-area-colors-195x300.png\")
<\/a><\/p>\n\nExample: How to add a Contact Us widget to your footer<\/h2>\n<\/div>\n
\n\n\n
\n<<\/span>h3 class<\/span>=<\/span>\"<\/span>widget-title\"<\/span><\/span> id<\/span>=<\/span>\"<\/span>contact-us\"<\/span><\/span>><\/span><\/span>Contact Info<\/<\/span>h3><\/span><\/span>\r\n<<\/span>p><\/span><\/span>1234 Street Name<\/<\/span>p><\/span><\/span>\r\n<<\/span>p><\/span><\/span>City Name, State 000000<\/<\/span>p><\/span><\/span>\r\n<<\/span>p><\/span><\/span>Email:<<\/span>br><\/span><\/span><<\/span>a href<\/span>=<\/span>\"<\/span>mailto:support@example.com\"<\/span><\/span>><\/span><\/span>support@example.com<\/<\/span>a><\/span><\/span><\/<\/span>p><\/span><\/span>\r\n<<\/span>p><\/span><\/span>Phone:<<\/span>br><\/span><\/span>+1 123 456 7890<\/<\/span>p><\/span><\/span>\r\n<\/code><\/pre>\n<\/div>\n\n\n
\n
Update the email address<\/strong> in both places with your actual email address.<\/div>\n<\/li>\nThe heading element has an ID of “contact-us”.<\/strong> This is important for linking to the section later.<\/div>\n<\/li>\n<\/ul>\n<\/li>\n
\nThis will create a link that jumps to the contact information section in your footer when clicked.
\n1. Navigate to Appearance > Menus<\/strong>.
\n2. Edit the menu where you would like your “Contact Us” link listed.
\n3. If it exists, remove the “Contact Us” page from the menu.
\n4. Add a new menu item with the same label as your contact information heading (e.g., “Contact Us”).
\n5. In the link URL field, enter the following:
\n#contact-us<\/code><\/li>\n<\/ol>\n<\/div>\n<\/body><\/html>\n","protected":false},"excerpt":{"rendered":"