The Header Configurator for Header H9

Create alternative headers for customised pages

• Customer area
• System settings
• System settings
• System configuration
• Configure headers

The alternative header is the standard configurator with limited functionality. It is possible to customise individual pages on your website. For example, you can set up regular customer or employee areas or give each page on your website or category in your shop a characteristic touch with a new background image.

1. Add a new header configuration by clicking on the "Add alternative header" button.
2. Expand the menu. You can give your configuration a name. This will then appear on the configuration button. The number of currently defined pages to which this configuration applies is also displayed on the button.
3. Specify the page or pages to which this configuration should apply. to do this, open the relevant page in a new tab and copy the path part of your URL as shown in the following example highlighted in colour
   https://www.deineSeite.de/denTeilDenDuKopierenMusst
   If you would like to define an alternative header on your start page, simply enter a /.
4. As soon as you have specified the path, the rest of the configurator becomes visible and you can customise your header.

Back to the overview

Display different logos depending on the screen size

The logo from your system configuration is used by default. The logo may be difficult to see on smaller devices due to its colour scheme or complexity. It is therefore possible to store different logos for large screens (e.g. monitors), medium-sized screens (e.g. tablets and small laptops) and small screens (e.g. smartphones).

As a rule of thumb, the smaller the screen, the less complex the logo should be. If available, the logo should be displayed symbolically on small devices.

1. Open the "Your logo" button
2. open your media library by clicking on "Media Library"
3. Navigate to your logo and select it
4. Confirm your selection with "Ok"

Repeat this process for all three logo fields if required You can easily see how well your logo looks and works on the different end devices if you reduce the size of your browser window until it is approximately the size of a mobile phone or tablet. So make sure that your logo is clearly visible, also depending on the background colour of your navigation bar.

Back to the overview

Removing the logo from the navigation bar

You can remove the logo from the navigation bar on tablet and desktop. Depending on how the navigation bar is set, it will then be aligned either to the left above or below the navigation bar.

1. Unfold the "Styling" button
2. In the fourth box of the navigation bar alignment options, there is a checkbox for "Detach logo from navigation bar"
3. Click on it

Back to the overview

Alternative display of the shopping basket symbol

For all those for whom a shopping trolley does not reflect the character and shopping experience of their shop, we have added a shopping bag and shopping basket as an additional option.

1. Expand the "Styling" button
2. Directly below the font selection you will find three buttons with the icons that are available to you
3. Make a selection by clicking on one of these buttons

Back to the overview

Detach the search bar from the toolbar and colour it

1. Open the "Styling" button
2. Under "Set search bar", you can change the colour of the search bar
3. If you want the search bar to always be displayed, tick the box "Remove search from toolbar"

Back to the overview

Separate colours for the navigation bar and toolbar

1. Unfold the "Styling" button
2. Under "Background colour of the navigation bar" you can change the colour of the navigation bar
3. Under "Toolbar background colour" you can change the colour of the toolbar

Back to overview

Alignment of links within the navigation bar

By default, the navigation bar is "filled" with links. This means that the first link is aligned to the left and the last link to the right edge of the navigation bar. All other links are evenly distributed in between. This setting has no effect on small devices.

1. Open the "Styling" button
2. Under "Alignment of links" you can change the alignment of links within the navigation bar

• Links option: The navigation bar fills up from left to right
• Right option: The navigation bar fills up from right to left
• Centre option: Links in the navigation bar are placed in the centre

Back to the overview

Positioning the navigation bar

By default, the navigation bar is positioned at the top of the screen. You can change this if, for example, you have selected a background image, remove the logo from the navigation bar or display an announcement. In such cases, the header takes up more space. You can then place the navigation bar at the bottom edge of the container or floating.

1. Expand the "Styling" button
2. Under "Navigation bar position" you can change the position of the navigation bar

Back to the overview

Personalisation of the "To top of page" button

A "To top of page" button is available to your website visitors. Especially on pages with a lot of content and on mobile devices, it makes it easier for visitors to navigate your website and saves a lot of time when scrolling.

1. Unfold the "Styling" button
2. Under "Colour for the 'To top of page' button" you can change the background colour of the button. The system automatically defines the colour of the icon using a contrast calculation.
3. Under "Symbol for 'To top of page' button" you can change the symbol to be displayed

Back to the overview

Distance to page content

1. Expand the "Styling" button
2. Under "Distance to page content", you can set how much space should be allowed between the header and the subsequent content

The unit is the height of the "m" letter.

Back to the overview

Adding a background image

You can add a background image to your header. As soon as an image is added, it is automatically applied to all screen sizes. However, you can add different images for different screen sizes. To ensure that the content-relevant part of the image always remains in the visible area, you can align the image within the container for the individual screen sizes (mobile phone, tablet and desktop).

1. Expand the "Media" button
2. Select "Image" as the background type
3. Select an image from your media library and confirm your selection with "OK"
4. If your image is not just decorative, but contains relevant information that a person with a visual impairment would not be able to perceive at all or only poorly, then also enter an Alt. Text. This should describe the main content of the image.
5. By default, images in the header are centred within the container. However, only you know where the relevant content of the image you want to display is located. Align your image by clicking on the buttons reserved for this purpose.
6. Optionally, you can add an effect to your header image. You can overlay it with a colour from your colour palette and display it as a black and white image if you wish.
7. Optional: select an image size for the individual screen sizes. This defines what percentage of the screen height should be filled with the image
   • Small: approx. 25% of the screen height
   • Medium: approx. 40% of the screen height
   • Large: approx. 50% of the screen height
   • Nothing selected approx. 50% of the screen height

A brief digression on image alignment

Images are placed in the container in such a way that they fully utilise both the height and width of the container. The container is in landscape format on the desktop and tablet. On the mobile phone in portrait format.

Suppose you have a picture of a landscape; the sky is at the top, a meadow at the bottom, mountains stretch along the horizon, a large tree on the left and a house on the right.

If you wanted to give priority to the tree (left) and the mountains (horizontal centre), you would have to centre the image on the desktop and tablet and align it to the left on the mobile phone. The buttons also indicate where the crop occurs during alignment.

Back to the overview

Displaying an announcement as an image or text block with a coloured background

You can add an announcement to your header and link it to a page. There are two options available to you: You can upload an image or add a container with a headline and descriptive text on a coloured background. If you want to link your announcement, you can also define a mouse interaction effect.

A preview is available in the setting. It is approximately half the size of the actual announcement container.

1. Expand the "Announcement" button
2. Select an announcement type
3. Select an image from your media library and confirm your selection with "OK"

Manual

4. Enter a headline (it can be a maximum of 35 characters long)
5. Optional: enter a short description (it can be a maximum of 100 characters long)
6. Select a font for your headline
7. Select a font for your short description
8. Specify a shape. By default, the container is rectangular.
9. Specify a background colour

Image

4. Select an image from your media library
5. Enter an alt. text for accessibility. Text. This should describe the content, purpose or labelling in the image so that visitors with a visual impairment can also be informed about your announcement
6. Optional: choose an image effect
7. Optional: force your image to remain within the container (tick "Prevent image cropping")

Optional: link the announcement

1. Under "Container settings", you can link the entire container to a page on your website. To do this, tick the box next to "The announcement container should link to a page"
2. Enter the path to your page in the "URL" field (see coloured text in the following example)
   https://wwww.deineSeite.de/pfadZuDeinerSeite/
3. Optional: enter a "Mouse interaction effect"
4. Move the mouse over the preview to see how your image or manually created container will behave

Back to the overview