Design Controls
Background
These controls allow you to modify the background of the header for a more customized appearance, enabling you to set a specific color.
- Color – Choose a color for the header’s background to match your site’s theme.
Borders
These settings let you define the border’s appearance at the top and bottom of the header, including its width, fill color, and shadow, to set visual separations or create depth.
- Top – Adjust the top border of the header with the following options:
- Width – Set the thickness of the top border.
- Fill – Choose a color for the top border.
- Bottom – Customize the bottom border with similar settings:
- Width – Define the thickness of the bottom border.
- Fill – Select a color for the bottom border.
- Shadow – Apply a shadow effect to the header’s borders, adding depth to your header design.
Layout
These controls help you manage the layout properties of the header, including how elements stack and the space between them, ensuring optimal visibility and aesthetic on all screen sizes.
- Stack Vertically At – Decide the breakpoint at which elements within the header will stack vertically.
- Gap – Adjust the space between elements in the header.
Size
Control the sizing of the header to suit your design needs, with options for width customization and minimum height settings.
- Width – Select a predefined width or set to ‘custom’ for more specific dimensions.
- Custom Width – Specify an exact width for your header. Note: This control is only available when ‘Width’ is set to ‘custom’.
- Min Height – Set a minimum height for the header to maintain vertical space.
Spacing
These settings allow for detailed adjustment of the padding around the header content, aiding in the creation of a balanced and well-spaced layout.
- Padding – Define the padding around the header elements to alter its overall spacing.
Sticky
Sticky controls enable the header to remain visible and in a fixed position when users scroll down the page. Options include sticky positioning, scroll behavior settings, and style adjustments, among others.
- Enable – Toggle the sticky header functionality on or off.
- Position – Set the sticky header’s position on the page. Note: This control is only available when the sticky functionality is enabled.
- Scroll Behavior – Determine how the sticky header responds to scrolling, such as hiding after certain distances, reveal animations, and more. Note: These controls are available only when the sticky functionality is enabled.
- Hide After – Set a scroll distance after which the header will hide.
- Hide Until Scroll – Choose whether the header reappears upon upward scrolling.
- Scroll Distance – Define the scroll distance for header reappearance. Available only when ‘Hide Until Scroll’ is enabled.
- Reveal Animation – Select an animation for the header’s reappearance.
- Duration – Set how long the reveal animation will last. Note: This control is only available when a ‘Reveal Animation’ is selected.
- Reveal On Scroll Up – Toggle whether the header should reappear when users scroll up.
- Style – Customize the sticky header’s style, including background, borders, and shadow. Note: These controls are available only when the sticky functionality is enabled.
- Background – Choose a background color for the sticky header.
- Min Height – Set a minimum height for the sticky header.
- Borders – Adjust the sticky header’s borders, including width, fill, and shadow.
- Top – Customize the top border’s width and fill color.
- Bottom – Modify the bottom border’s width and fill color.
- Shadow – Apply a shadow effect to the sticky header’s borders.
- Disable At – Choose a breakpoint at which the sticky header disables. Note: This control is available only when sticky functionality is enabled.
- Z-Index – Set the stack order of the sticky header. Note: This control is only available when the sticky functionality is enabled.
Overlay
Overlay controls let you add an overlay to your header, useful for improving text visibility against background images or creating a dimmed backdrop effect.
- Enable – Turn on the overlay feature for your header.
- Keep Style – Maintain the same style settings when the overlay is enabled. Note: This control is only available when the overlay feature is enabled.
- Z-Index – Adjust the stack order for the overlay. Note: This control is only available when the overlay feature is enabled.
Advanced
The advanced settings offer additional features for your header, such as disabling the builder preview mode for a more streamlined editing experience.
- Disable Builder Preview Mode – Toggle to turn off the visual builder preview for a faster, code-focused editing process.
