The Divider element adds a simple visual separator between neighbouring Header Elements. It can help organise more complex header layouts into distinct groups while maintaining a clear visual structure.
To use it, open the Customiser → Header, drag the Divider element into the desired header row or the Off Canvas Area, and select it to configure its appearance.
Granular Controls
Size
The Size control determines how much of the available header-row height is occupied by the divider. The value is expressed as a percentage, allowing the separator to be shorter than the surrounding row or extend across more of its height.
Style & Color
Adjust the divider’s thickness and Color to control how prominent the separator appears within the header design.
Margin
Add horizontal spacing around the divider using the available left and right margin controls. This is useful when the neighbouring Header Elements would otherwise sit too close to the separator.
Using the Divider in the Off Canvas Area
The Divider element is not limited to the regular header rows. You can also place it inside the Off Canvas Area to visually separate navigation, account controls, contact details or other elements used in mobile and off-canvas layouts.
