Header (Text Overlay)

Image of the header-text module online

The header is a slightly more complex module. It allows for the displaying of two images, one for mobile, one for desktop resolutions (as this may work better than trying to make just one image fit such different screen sizes), though this is not mandatory.

Additionally, text can be displayed on top of the background images, such as a company tag-line. The overlay-text's position can be customised deeply.

The mobile version of the header allows for three different image heights, depending on the best content fit.

The header is traditionally the first module on a page with a header, but could be placed anywhere on a site also.

Enabling / Disabling

Like all modules, this module can be enabled / disabled. Please see the corresponding section of the documentation to find out more about this functionality.

Desktop Image

Image of the header desktop image

The header module's background image on desktop. This image will be shown at screen resolutions of 900px and above, typically laptops and desktop computers. Read up on changing images here.

Double Desktop Image

Image of the header desktop double image

There is a double-image variation of this header, where two images can be used as the background to a header, sitting side by side. Read up on changing images here.

Mobile Image

Image of the header mobile image

The header module's background image on mobile. This option allows you to specify an image that is shown below 900px screen width (mobile / tablet devices). It is not necessary to define a different image here. In our example, we have decided to use the same background twice. In some cases, however, it can be beneficial to provide content for mobile devices that fits the space better. This is often a question of experimentation, to arrive at the best solution for your website. Read up on changing images here.

Overlay Element

The overlay element sits on top of the header's background image:

Image of the header text overlay, online

Enabling the Overlay

Image of the header option to enable overlay

Here, the overlay can be switched on or off.

on

Image of the header-text module online

off

Image of the header-image module with overlay off online

Overlay Text

Image of the header overlay text option

The header module's overlay text. Please note that this is a rich text field. More info on that here.

Warning

The character limit for this rich text field is 100 (most rich text fields are not this limited), due to the amount of space in the header being quite limited.

Desktop Font Colour

Image of the header overlay desktop font colour option

You may customise the font colour of the overlay text.

Overlay Position

Image of the header overlay position option

The overlay can be placed in any 9 sectors of the header. Please note that on mobile, left / right placements are replaced with a central placement. Thus, only top / middle / bottom placements are taken into account on mobile. This is due to the narrow screen widths of mobile devices.

Left Middle Placement Example

Image of the header overlay position option, left middle

Left Middle Placement Online

Image of the header overlay position option, left middle

Tint Area

Image of the header overlay tint area option

In order to increase the legibility of your text overlay, you can add a tint immediately behind the text, or covering the entire background image.

Sits behind overlay example

Image of the header overlay tint area behind text

Overlay Width - Desktop

Image of the header overlay width option

This determines the maximum width of the text overlaid on top of the header's background image (as percentage of the total screen width). The height of the overlay is determined by the amount of text.

20% Example

Image of the header overlay width option at 20 percent

60% Example

Image of the header overlay width option at 60 percent

Overlay Width - Mobile

Image of the header overlay width mobile option

The overlay text can have a different width on mobile, as we have found that the smaller screen-sizes of mobile devices need special consideration.

Overlay Side Margin

Image of the header overlay side margin option

This determines how far the overlay text will be from the edge of the screen (as percentage of the total screen width) when you have chosen one of the left or right squares in the overlay position section.

0% Example

Image of the header overlay side margin option at 0 percent

10% Example

Image of the header overlay side margin option at 10 percent

Tip

This option takes into account the width of the overlay tint, so long as the tint is just behind the text (with the ‘overlay padding’ option set to something greater than 0)

Overlay Top Margin

Image of the header overlay top margin option

This determines how far the overlay text will be from the top / bottom of the screen when you have chosen one of the top / bottom squares in the overlay position section. Note: This value is in pixels, not percent, due to the way websites position elements. (The side margin / width values are percentages of the screen width.)

60px Example

Image of the header overlay top margin option - 15px

100px Example

Image of the header overlay top margin option - 50px

Overlay Padding

Image of the header overlay padding option

The overlay's tint can have its padding customised, so long as the ‘sits behind overlay' option has been selected. This is a percentage of the total screen width.

0% Example

Image of the header overlay padding option - 0_percent

2% Example

Image of the header overlay padding option - 2_percent

Tint Colour

Image of the header overlay tint colour option

If your tint opacity is higher than 0, you may choose the colour of the tint to apply to the background image. This feature exists, as some text colours need additional contrast to the background they sit on top of. Here, you can define a tint colour to ‘knock back' the background image, giving more emphasis to the overlay.

Green Tint Example:

Image of the header overlay tint colour option in green

Tint Opacity

Image of the header overlay tint opacity option

This determines whether you would like to apply a tint to the background image. In our example, we have chosen a black tint at 0.4 opacity (maximum is 1, minimum is 0, i.e. no tint), to ‘fade' the background somewhat, giving more contrast to the overlaid logo.

0.4 Example

Image of the header overlay tint opacity at 0.4

0.8 Example

Image of the header overlay tint opacity at 0.8

Mobile Image Shape

Image of the header mobile image shape option

Because mobile devices have such a wide range of screen sizes, and there is such a variety of imagery that could be used with the header, we allow for three different aspect ratios of header background images below 900px screen width (which is a typical phone / tablet resolution).

Portrait Example

Image of the header mobile image shape Portrait option

Square Example

Image of the header mobile image shape Square option

Landscape Example

Image of the header mobile image shape Landscape option

Tip

The Square and Landscape options take into account the module gap value (between the header background image and the text part below), as defined in Essentials.

Mobile Background

Image of the header mobile background option

If the mobile image shape option is set to either Landscape or Square, the "Mobile Background" option appears. With Landscape or Square mobile image shapes, the text overlay moves below the (mobile) header background image, into its own area with a customisable background colour.

Mobile Font Colour

Image of the header mobile font colour option

If the mobile image shape option is set to either Landscape or Square, the "Mobile Font Colour" option appears. With Landscape or Square mobile image shapes, the text overlay moves below the (mobile) header background image, into its own area with a customisable font colour.

Chevron Options

Image of the header chevron options

The header chevron is a clickable item, which automatically moves the page down to the module below the header. The chevron is displayed for the following configurations:

  • Mobile image shape: Portrait on desktop and mobile
  • Mobile image shape: Square on desktop only
  • Mobile image shape: Landscape on desktop only

This is the chevron:

Image of the header chevron online

The chevron colour and rollover (when a visitor hovers over the chevron, this is the colour it will be) colour can be customised as well.

Tip

Please do not forget to hit one of the save buttons, to make sure the changes you have made are actually saved. Why not keep a window with your preview open, to see the changes in realtime?