Page Header

<< Click to Display Table of Contents >>

Navigation:  Bizagi Studio > Sites > Sites Editor > Building a site > Sites Designer > Site Controls >

Page Header

The Header control appears at the top of each page. In it you can configure navigation to different pages, display the logo of your site and show information about the user who is currently logged in.

 

Header01

 

Notes

The Header control is static. You can edit it, but you cannot delete or move it.

The image loaded as your logo will be resized to fit the Header. You can adjust the height of the Header, which may affect the size of the logo.

 

Site Navigation

The display shows the pages created in your current Bizagi Site, sorted hierarchically. This option lets you create pages or change the order of the existing pages. For more information refer to Page Settings.

 

Header02

 

Manage Content

This option shows a menu where you can set up log-in options, log-out options and the page logo.

 

SitesControls08a

 

Add log-in to header

Knowing that your site has the possibility of having public pages, you can add a login option to your site.

 

note_pin

If you'd rather not have a login option in your menu, you can add buttons or links to your private pages. The final users will be automatically redirected to the login form.

 

To do so click the navigation bar and select Manage Content. Next, activate the Add Login to header option.

 

PageSettings05

 

After this, you can choose the landing page after the user has logged on, this setting is optional.

 

PageSettings06

 

 

Configure log-out

You can set up a public page where users are redirected once they log out of your site. You can customize the page depending on where the user logged out from either a public or a private page.

To do so click the navigation bar and select Manage Content. Next, activate the Configure log out option.

 

PageSettings08

 

After this, you can choose the page the user is redirected to after they have logged out, these settings are optional.

 

PageSettings09

 

When no option is selected the user is redirected to the page they were on. When the page is private, the user is redirected to the login page.

 

Show logo

Set the logo displayed in the header. The following formats are supported: .png, .jpg and .jpeg. To use a URL to an online image enable the option.

 

SitesControls08

 

Settings

These properties let you customize the Header control. You can return to the default values when you click the Reset button.

 

SitesControls08b

 

Style

Height: Set the height in pixels of the header.

 

Fonts

Font family: Set the font family.

Font size (px): Set the size of the text.

Font color: Set the color of the text displayed in the navigation pane. The default color depends on the theme selected.

Sub-navigation font color: Set the color of the text displayed for menu sub-items in the navigation pane. The default color depends on the selected theme.

Avatar font color: Set the font color of user's avatar circle, when the user has no profile picture set. The default color depends on the theme selected.

Bold: Set whether the text on the header is in bold letters.

 

Logo

Logo size: Define the width in pixels of the logo. The height of the logo will adjust to maintain the correct proportions of the logo.

 

Login

Login color: Set the font color for the login item. The default color depends on the theme selected.

Login Bold: Set whether the text on the login item is in bold letters.

 

Background

Background color: Set the background color for the control. The default color depends on the selected theme.

Sub-navigation font color: Set the background color for menu sub-items in the navigation pane. The default color depends on the selected theme.

Avatar background color: Set the background color of user's avatar circle, when the user has no profile picture set. The default color depends on the selected theme.