Skip to main content

Components -> Key Visuals

Updated over 3 weeks ago

Key Visuals

The key visual is a full-format banner that is usually used in the first viewport. You have five variants available:

  1. Standard key visual

  2. Key visual with gallery

  3. Key visual with jobs

  4. Key visual with filters

  5. Key visual with search

All variants are explained in detail below.


Standard Key Visual

The standard key visual is essentially a image/headline combination.

In general, we recommend starting your career page with a key visual and featuring it with a strong image or video. This allows your applicants to immediately build an emotional connection with your company.

Ideally, avoid texts integrated into the image and instead use the headline.


General Key Visual Settings

These settings apply to all key visuals.

Headline

A good key visual needs a concise headline. Try to keep it short so that it can be captured in a few seconds.

Determine the text alignment and vertical position of the headline that fits your motif.

Call-to-Action

You can also enable a button below the headline. The following button functions are available:

  1. Link

  2. Email

  3. Auto-scroll to job offers

  4. Scroll to component
    Scroll to any component with a click on the button


Key Visual Image Effects

These settings apply to all key visuals.

You have the option to enable additional effects for the key visual:

Gradient
A diagonal gradient to give the key visual a visual boost. It is best to use two corporate colors here. You can adjust the transparency of the gradient with a slider.

Here you can create a new gradient that matches your corporate design.

Dark overlay
To ensure the headline is easily readable, it is often necessary to slightly dim the image brightness. You can also adjust the color temperature of the overlay (cold ↔ warm) and its transparency.


Standard Key Visual: Options

The standard key visual can be filled with the following media types:

  • Image or gallery

  • Video in MP4 format (no cookie consent required)

  • YouTube/Vimeo video via link (cookie consent required)

If your image or video is in 16:9 format and you want to maintain this aspect ratio on all devices regardless of screen resolution, enable the switch: 16:9 aspect ratio on all displays.

If you add multiple images, a gallery is automatically created. You can display the gallery images in a loop or have them automatically switch (autoplay).


Key Visual with Gallery

The key visual with gallery differs from the standard key visual as it offers the possibility to independently fill slides with content. This allows you to assign a unique headline and button to each slide. Additionally, you can combine different media within a key visual, for example, a video in the first slide and an image in the second.

If the headlines in the individual slides are roughly the same length, we recommend enabling the option “Same font size for all slides”.


Key Visual with Jobs

The key visual with jobs typically displays five recent job offers, which float horizontally from right to left (on mobile devices from bottom to top) through the background image or video as you scroll the page.

After clicking on one of the job teasers, the page automatically jumps to this job in the job list.

The images for the job teasers are globally defined in the dashboard (Settings → Job Categories Image Manager).


Key Visual with Jobs: Preview

This is how the behavior of the key visual with jobs looks on a desktop device.


Key Visual with Jobs: Options

In the options, you can also select a specific category. Then only jobs from this category will be displayed. The number of jobs can also be defined here (minimum: 3, maximum: 20).

Alternatively, you can also fill the teasers with your own content and link them to any components on your career page.


Key Visual with Filters

The key visual with filters is best suited if you have many job offers and want applicants to quickly make a selection from predefined categories.


Key Visual with Filters: Options

In the options, you can specify which of the categories are available for selection in this component and also predefine categories with values.


Key Visual with Search

A typical career page often prominently displays the job search in the first viewport. You can implement this concept with the key visual with search. After entering the search term, the applicant is automatically redirected to the search results.


Key Visual with Search: Options

You can also predefine the search field with a term, e.g., with a position that is currently important for your company. The applicant then only needs to click the “Find now” button and is directly redirected to the appropriate job offers.

Did this answer your question?