How to Use Crio’s Advanced WordPress Design Controls

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 below your footer and can even be negative to overlap elements.

• In the Dashboard, navigate to Appearance → Customize
• In the Customizer menu, navigate to Design → Header/Footer → Advanced → Margin
• Use the sliders to control the size of the top and bottom margins

You can use the Undo Changes option to remove current changes or Delete Saved Settings to reset to the default options. The responsive device tools to use various margins on different screen sizes.

How to Add Header or Footer Padding

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.

• In the Dashboard, navigate to Appearance → Customize
• In the Customizer menu, navigate to Design → Header/Footer → Advanced → Padding
• Use the sliders to change the padding for your header
• Click on Publish to save your changes

Note: 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.

You can use the Undo Changes option to remove current changes or Delete Saved Settings to reset to the default options. The responsive device tools to use various padding on different screen sizes.

How to Add a Header or Footer Border

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.

• In the Dashboard, navigate to Appearance → Customize
• In the Customizer menu, navigate to Design → Header/Footer → Advanced → Border
• Select a Border Type option
• Use the sliders to control the widths of the border sides
• Select a border color using the palette
• Click Publish to save your changes

You can use the Undo Changes option to remove current changes or Delete Saved Settings to reset to the default options. You can use the responsive tools to customize border options at different screen sizes.

How to Add Header or Footer Border Radius

The Border Radius controls the roundness of your element’s corners. A higher border radius value creates more rounded corners.

• In the Dashboard, navigate to Appearance → Customize
• In the Customizer menu, navigate to Design → Header/Footer → Advanced → Border Radius
• Use the sliders to adjust the roundness of the four corners
• Click Publish to save your changes

You can use the Undo Changes option to remove current changes or Delete Saved Settings to reset to the default options. The responsive device tools to use a different radius on different screen sizes.

How to Add a Header or Footer Box Shadow

Box shadows allow you to create shadow effects for your header and footer.

• In the Dashboard, navigate to Appearance → Customize
• In the Customizer menu, navigate to Design → Header/Footer → Advanced → Box Shadow
• Use the sliders to control these settings:
  • Horizontal Position
  • Vertical Position
  • Blur Radius
  • Spread Radius
• Use the toggle Outset/Inset to choose if the shadow is internal or external
• Use the color picker to select the shadow color

You can use the Undo Changes option to remove current changes or Delete Saved Settings to reset to the default options. The responsive device tools to use various box shadows on different screen sizes.