The Search Overlay Page is a dedicated system page in headful. It is located under the System pages and can be individually populated with content.
The Header of a project can reference this page. When a user clicks into the search field or starts typing, the Search Overlay Page opens as an overlay.
The display of the search is device-dependent. If there is limited space in the Header (for example on mobile devices), the search bar is reduced to a magnifying glass icon. The Search Overlay Page can also be opened through this icon.
Due to the additional space, the Search Overlay Page is suitable for more extensive page structures than the Mega Menu.
Step-by-Step Guide
1 | Open the Search Overlay Page
Open the page menu via the burger menu
in the top left.Select the System tab.
Open the Search Overlay page.
2 | Build the Content Structure
Open the editor of the Search Overlay Page.
Use the Plus icon
to add the desired components (e.g. a menu).Build the desired structure.
Add additional content if required.
3 | Activate the Search Overlay Page in the Header
Open the Header in the System Top of the Editor.
In the Type field, select Search Overlay Page.
Publish the Header via the three dot menu.
Role-Specific Versions
The Search Overlay Page can be customized for different user roles.
If user roles are defined in headful, the Overlay Page can exist in multiple versions. These versions are only visible to logged-in users with the corresponding role.
Create a New Page Version
Click the Plus icon
next to Duplicate page.Select the desired user role.
Optionally enable Copy all components from the current page version.
Afterwards, multiple versions of the Search Overlay Page will exist in the page management and will be displayed depending on the user role.
Tips & Tricks
The Search Overlay Page is suitable for more complex page structures.
The title of the search field can be customized, for example to “Menu”.
The display of the search automatically adapts to different devices.