{"id":16425,"date":"2018-12-27T13:36:06","date_gmt":"2018-12-27T18:36:06","guid":{"rendered":"https:\/\/www.boldgrid.com\/support\/?p=16425"},"modified":"2020-04-01T12:03:55","modified_gmt":"2020-04-01T16:03:55","slug":"how-to-use-advanced-design-controls","status":"publish","type":"post","link":"https:\/\/www.boldgrid.com\/support\/boldgrid-crio-supertheme-product-guide\/how-to-use-advanced-design-controls\/","title":{"rendered":"How to Use Crio’s Advanced WordPress Design Controls"},"content":{"rendered":"\n

$\"\"$ <\/p>\n

BoldGrid Crio provides advanced controls so you can fine tune your WordPress theme design<\/a> as needed. These settings are found in the Advanced<\/b> panel in Header or Footer Design and include Margin<\/b>, Padding<\/b>, Border<\/b>, Box Shadow<\/b>, and Border Radius<\/b>.<\/p>\n

How to Add Header or Footer Margins<\/h2>\n
Margins are used to create a space above or below your footer and can even be negative to overlap elements.<\/p>\n
\n
In the Dashboard, navigate to Appearance<\/b> → Customize<\/b><\/li>\n
In the Customizer menu, navigate to Design → Header\/Footer → Advanced → Margin<\/b><\/li>\n
Use the sliders to control the size of the top and bottom margins<\/li>\n<\/ul>\n
You can use the Undo Changes<\/b> option to remove current changes or Delete Saved Settings<\/b> to reset to the default options. The responsive device tools to use various margins on different screen sizes.<\/p>\n
How to Add Header or Footer Padding<\/h2>\n
Padding is used to add space between the edge of the Header or Footer and your content. More padding pushes content further from the side that you’re adding the padding to. Padding can be added to the top, bottom, right, or left sides of your header and footer.<\/p>\n
\n
In the Dashboard, navigate to Appearance<\/b> → Customize<\/b><\/li>\n
In the Customizer menu, navigate to Design →<\/b> Header\/Footer → Advanced → Padding<\/b><\/li>\n
Use the sliders to change the padding for your header<\/li>\n
Click on Publish<\/b> to save your changes<\/li>\n<\/ul>\n
Note<\/b>: You will not see the effect of padding unless you have content in the center of the footer area. The more padding you add, the less the available space within the footer.<\/p>\n
You can use the Undo Changes<\/b> option to remove current changes or Delete Saved Settings<\/b> to reset to the default options. The responsive device tools to use various padding on different screen sizes.<\/p>\n
How to Add a Header or Footer Border<\/h2>\n
BoldGrid Crio allows you to add a border to the header and footer of your WordPress site. This can help provide a bit of style and separation for the elements on the page.<\/p>\n
\n
In the Dashboard, navigate to Appearance<\/b> → Customize<\/b><\/li>\n
In the Customizer menu, navigate to Design → Header\/Footer → Advanced → Border<\/b><\/li>\n
Select a Border Type<\/b> option<\/li>\n
Use the sliders to control the widths of the border sides<\/li>\n
Select a border color using the palette<\/li>\n
Click Publish<\/b> to save your changes<\/li>\n<\/ul>\n
You can use the Undo Changes<\/b> option to remove current changes or Delete Saved Settings<\/b> to reset to the default options. You can use the responsive tools to customize border options at different screen sizes.<\/p>\n
How to Add Header or Footer Border Radius<\/h2>\n
The Border Radius controls the roundness of your element’s corners. A higher border radius value creates more rounded corners.<\/p>\n
\n
In the Dashboard, navigate to Appearance<\/b> → Customize<\/b><\/li>\n
In the Customizer menu, navigate to Design → Header\/Footer → Advanced → Border Radius<\/b><\/li>\n
Use the sliders to adjust the roundness of the four corners<\/li>\n
Click Publish<\/b> to save your changes<\/li>\n<\/ul>\n
You can use the Undo Changes<\/b> option to remove current changes or Delete Saved Settings<\/b> to reset to the default options. The responsive device tools to use a different radius on different screen sizes.<\/p>\n
How to Add a Header or Footer Box Shadow<\/h2>\n
Box shadows allow you to create shadow effects for your header and footer.<\/p>\n
\n
In the Dashboard, navigate to Appearance<\/b> → Customize<\/b><\/li>\n
In the Customizer menu, navigate to Design →<\/b> Header\/Footer → Advanced → Box Shadow<\/b><\/li>\n
Use the sliders to control these settings:\n
\n
Horizontal Position<\/li>\n
Vertical Position<\/li>\n
Blur Radius<\/li>\n
Spread Radius<\/li>\n<\/ul>\n<\/li>\n
Use the toggle Outset\/Inset<\/b> to choose if the shadow is internal or external<\/li>\n
Use the color picker to select the shadow color<\/li>\n<\/ul>\n
You can use the Undo Changes<\/b> option to remove current changes or Delete Saved Settings<\/b> to reset to the default options. The responsive device tools to use various box shadows on different screen sizes.<\/p>\n
<\/p>\n<\/body><\/html>\n","protected":false},"excerpt":{"rendered":"
BoldGrid Crio provides advanced controls so you can fine tune your WordPress theme design as needed. These settings are found in the Advanced panel in Header or Footer Design and include Margin, Padding, Border, Box Shadow, and Border Radius. How to Add Header or Footer Margins Margins are used to create a space above or […]<\/p>\n","protected":false},"author":215,"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":"How to Use Crio's Advanced WordPress Design Controls | BoldGrid Crio","bgseo_description":"BoldGrid Crio provides advanced WordPress design controls so you can fine tune your design as needed. These settings are found in the Advanced panel in Header or Footer Design and include Margin, Padding, Border, Box Shadow, and Border Radius.","bgseo_robots_index":"index","bgseo_robots_follow":"follow","footnotes":""},"categories":[573],"tags":[29,680],"class_list":["post-16425","post","type-post","status-publish","format-standard","hentry","category-boldgrid-crio-supertheme-product-guide","tag-customizer","tag-web-design","feature-type-free","experience-level-intermediate"],"acf":[],"_links":{"self":[{"href":"https:\/\/www.boldgrid.com\/support\/wp-json\/wp\/v2\/posts\/16425","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\/215"}],"replies":[{"embeddable":true,"href":"https:\/\/www.boldgrid.com\/support\/wp-json\/wp\/v2\/comments?post=16425"}],"version-history":[{"count":7,"href":"https:\/\/www.boldgrid.com\/support\/wp-json\/wp\/v2\/posts\/16425\/revisions"}],"predecessor-version":[{"id":19107,"href":"https:\/\/www.boldgrid.com\/support\/wp-json\/wp\/v2\/posts\/16425\/revisions\/19107"}],"wp:attachment":[{"href":"https:\/\/www.boldgrid.com\/support\/wp-json\/wp\/v2\/media?parent=16425"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.boldgrid.com\/support\/wp-json\/wp\/v2\/categories?post=16425"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.boldgrid.com\/support\/wp-json\/wp\/v2\/tags?post=16425"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}