Follow

Header Styling Options

You may customize both the look and feel as well as the controls included in the Header of your Zapp page. This article provides an overview of each of the available options.

 

Header Properties

Various style properties can be adjusted via the header's Properties tab, which can be accessed via the In-Line Editor (ILE) or Style Mode. Available options are:

  • Presets: Color presets enable you to quickly change the look of your Zapp page header. Three themes are currently available: Dark Theme, Light Theme, and Alternate Theme. These are based on your chosen brand colors.

Dark Theme

Light Theme

Alternate Theme

  • Display: Choose between Full Page or Container display and change the header's background color.

 

  • Container: If container display is specified for your header, you can adjust the container's width and background color.

 

  • Content: Specify tooltip text for Zapps that will be used on desktop or on mobile devices with accessibility features enabled.

  • Outer Border: Add a top and/or bottom border to the header. Width and color can be specified for both sides.

  • Box Shadow: Create a three-dimensional effect around your header. X and Y axis values, blur, spread, and shadow color can all be configured.

  • Padding: Adjust header size by adding padding around any or all of its sides.

 

Header Templates

 

Header templates can be selected via the Items tab in the ILE or Style mode. You can toggle between the different options using the next and previous arrows at the top of the Items tab.

 

 

Two versions are currently available: Title with 2 Buttons and Title with 4 Buttons.

 

Adding Buttons to a Header

 

To add buttons to your header templates, click "Add Control to Group."

 

 

Select the desired control from the dropdown.

 

 

The control will now appear in the list of Header Items.

 

 

Select the control from the list and drag it to the desired location in the header template to add it to your header.

 

 

You may adjust the button's label, icon, etc. in order to better fit into the header. Please see Button Styling Options for more information.

 

You may also add a Back Button via the Header Items tab. Please see Adding a Back Button for more information.

 

 

 

Was this article helpful?
0 out of 0 found this helpful
Have more questions? Submit a request

0 Comments

Please sign in to leave a comment.