Hero sections

Mainly used for the hero section of your landing page, paragraphs that include a job search banner are: 

• Hero - search banner full
• Hero - same centred
• Search banner
• Simple search bar (not necessarily a hero paragraph)

However, you do not necessarily need to start your landing page with a job search banner. For example, if you wish to create a landing page for employers, the job search banner is probably not important. In that case, we recommend the following elements

• Hero - split with screen
• Other elements of the call to action sections.

 

Hero - search banner full

This is a full-width hero section that includes a search banner. This is the most common main header row for a start page as it will include some hero content, a banner and a job search for candidates.

It also has the option to include up to two call to action buttons, as well as configuring the colour for those buttons (choose between the primary or secondary colour).

Extra Tip: the search box will overlap with the next section, so make sure the next section has enough space for the overlap from the search box as well as the actual content you want to display in the next section.

 

Hero - simple centred

The “Hero - simple centred” row is a Hero section that does not use the full width of the page and is centred on the page. It also includes up to two call to action buttons and is, therefore, a good element to use as the top section of less relevant landing pages.

The colour of the buttons can be configured (choose between the primary and secondary colours). The background colour of the paragraph will be the background colour that was chosen for the overall page. 

Extra Tip: For the best result, make sure that the background colour for this row is the same as for the next row.

 

Search banner centred

This is a banner very similar to the "Hero - search banner full" banner, only with a different design. The search bar is located in the centre of the hero element. The text and the overlay transparency can be customized.

 

Search banner 

The “Search banner” includes a banner image with a title and a subtitle displayed on top of the image. This row type also includes, as the name indicates, a "job search box" that is automatically placed on the banner.

Simple search bar

Actually, this paragraph is not a hero landing page element per se, and this is mostly used in pages where you will not have a main banner section. However, the simple search bar works well combined with other elements, such as the “Text with image on side” or “Hero - split with screen”. The simple search bar will include only the job search form bar on the page as a row.

It is possible to define the background colour of this row.

 

 

Hero - split with screen

The “Hero - split with screen” row can be used as a hero section, but it includes an image field that can be used to show content within a screen. It displays the screen on the left or right side of the text (this can be configured in the row itself) and there are different elements for the text that is shown on the other side:

• H1 - the main page title; will automatically be converted to an h2 if it is used after the first element.
• Subtext - the subtext shown below the main title
• Text - text displayed right next to the tag text (the colour is configurable in the row - choose between primary or secondary colour)
• Tag text - the text shown inside a tag; the colour depends on the chosen row colour for this element
• Bottom text - the text shown below the subtext element (the colour is configurable in the row - choose between primary or secondary colour)

Extra Tip: For the best result make sure that the background colour of this row is the same as for the next row. Additionally, please add at least 2 sentences of text to ensure that the element is displayed correctly.

 

Call to action sections

We recommend including call to action (CTA) elements on your landing pages which can help boost your conversion rates for events such as registrations, job postings, or applications. They could be included at the top of a landing page, in between multiple sections, or at the bottom of the page.

 

The following landing page row elements are suitable for CTAs:

• Call to action banner
• CTA simple
• CTA simple background

 

CTA - Button

The CTA - Button row can be used to render a horizontally centred clickable button. Color option define if a button is primary or secondary. The spacing and row background can be set as well.

 

 

Call to action banner

The “Call to action banner” is a simple call to action with a banner image behind it. 

This row type includes the option to define the spacing between the text and the borders of the image that will be used to space the item inside the banner (more or less space between text and borders of the image)

Extra Tip: Make sure the amount of text and spacing is well balanced both for desktop and mobile so that the user can see more than just text after going to the page, especially if used as the first element.

 

CTA Simple

The simple call to action row will display text and one or two call to action buttons. This row type is better used towards the middle or end of the page to remind users of clear actions to perform on the page.

It allows choosing a primary or secondary colour for the buttons and text colour as well as setting the background colour.

 

CTA - simple background

The “CTA - simple background” row displays text and one or two call to action buttons. In contrast to the “Simple CTA”, the colours are inverted and it uses a dark background.

It allows choosing between the primary or secondary colour for the buttons and text colour.

Extra Tip: make sure the contrast works well between your primary and secondary colours in this row, otherwise choose to use a “CTA Simple” and set a colour on the row there.

 

Showing the features of your job board

The feature section includes a wide range of design possibilities. In order to choose the most suitable landing page element, consider the goal of the content.

If you wish to present your value propositions, the features that come with the job board, or the products and packages employers can purchase, the following elements may be helpful: 

• Text with multiple buttons
• Feature: centred 2 columns
• Feature: grid on brand
• Feature: grid with offset icons
• Multiple columns with image and text
• Text with Image on side
• Products grid
• Stats with fading background
• Blog teaser

Text with multiple buttons

This paragraph displays a horizontal row with text followed by a row or multiple rows of buttons. The buttons point to links that can either be internal or external. The number of links is not limited. Colors can also be set accordingly.

 

Feature - centred 2 columns

This feature section is useful to display the value proposition and/or features of the website. It displays as many elements as needed for a 2 column layout. Each element can have an icon, a title and additional text.

For this row, it is also possible to define the colour that is used for the icons and the subtitle (choose between primary and secondary colour) as well as the background colour.

Extra Tip: Make sure that the amount of text in all boxes is well balanced.

 

Feature - grid on brand

This feature section is useful to display the value proposition and/or features of the website. In this row, the icons and text will be displayed on top of a background colour (choose between primary or secondary colour). 

Each featured element title will use the primaryLight colour so make sure there is enough contrast on these.

Extra Tip: Make sure the white text and the text displayed in primaryLight works in contrast with the branding colour (example below to illustrate only - the contrast between the primaryLight colour and the Jobiqo green (primary colour) is not really good enough).

 

Feature - grid with offset icons

This feature section will display feature elements wrapped in boxes with an offset icon.

Both the background colour as well as the colour of the icons can be chosen. 

Extra Tip: make sure that the content of all boxes is well balanced. The boxes will adjust to the size of the biggest one automatically, but for the best visual effect it is a good idea to try and balance the amount of text in all boxes.

 

Multiple columns with image and text

This row type allows you to create multiple columns (they will be sized automatically based on the number of columns) and each column can have different content types.

The row has a title and an intro text that are both are optional and also column fields that currently allow adding 

• Text with an image on top
• Facet block (a list of links for the job search by a particular filter like occupational field or region)
• Ad units (if ad banners are enabled for the project)

Extra Tip: make sure that the amount of text on each column is well balanced.

 

Text with Image on side

This row type simply uses a text box, a call to action button (optional - in the primary colour) and an image that can be positioned on the left or right side of the text. It fits particularly well with illustrations or images that sit well on their own. 

The text is an editor based text, so you can also include links and other rich elements. It is also possible to define the background colour for this row type. 

Extra  Tip: Always make sure that the image has a transparent background or the same background colour as the row itself.

 

Stats with fading background

The stats with fading background landing page element allows you to visually highlight various stats (numbers, results, or various key performance indicators).

This landing page element ensures that your stats are prominently displayed and easy to read against an aesthetically pleasing background.

 

When displayed this landing page element shows:
- Fading Effect: You can select an image that will fade from right to left, providing a smooth and visually appealing transition that draws attention to your KPIs.
- Darker Color Element: The landing page element where your stats are displayed will have a darker color to offer a sharp contrast, making the numbers clear and readable.

 

For the element you can customize the following:
- Title and Subtitle: Add a prominent title and a subtitle to give context to the stats you are displaying. This will help your audience immediately understand what the numbers represent.
- Detail Section: Optionally, include additional details to give your audience more insight into the stats presented.
- Multiple Stats: You can display multiple stats within this section, offering a comprehensive overview of performance metrics.
- Predefined Icons: Select from a range of predefined icons to add visual representation to each stat, making them easily identifiable.
- Custom Icons: If you prefer, you can also upload your own icons to better suit the specific stats you're highlighting.
- Titles and Subtitles for Stats: For each stat, you can add a title and subtitle to emphasize the most important aspects of the stat. This helps in quickly conveying the essence of each number to your audience.

By effectively using the Stats with Fading Background feature, you can create an engaging and informative section on your landing page that clearly communicates important performance metrics to your audience.

Products grid

Use the "products grid" for the following two use cases:

• Products that can be purchased upfront (e.g. 1 job credit, 5 job credits, 10 job credits)
• Call-to-action products that can be used to display a custom text and URL

The landing page element consists of a title, description text, and subtitle. Furthermore, you can alter the design by changing the colour of the button, subtitle and the row background. You can decide which products are showcased, so make sure to select the products. The description of the product is taken from the initial product setup. If you wish to change the product description, please contact us via Teamwork. 

 

Extra tip: It is recommended to create multiple "product grid" rows for the different kinds of products, such as job credits and upgrade credits. This will help employers to orientate on the product landing page.

 

Blog Teasers

If the blog feature is enabled on a site, this landing page element can be used to display blog posts on landing pages and thus increase the visibility of the blog.

For blog teasers, Jobiqo supports two different landing page row elements:

• The element "Blog teasers" displays the most recently published blog articles.
• The element "Featured blog" shows all articles that are marked as featured.

 

Presenting featured jobs and organisations

If your product portfolio includes featuring organisations or jobs on the front page (or other landing pages), you may be interested in the following landing page elements:

• Job teaser
• Top jobs
• Featured video jobs
• Featured jobs
• Featured organisations
• Organisation profile
• Large company teaser
• Logo cloud simple
• Training organisation

 

Job Teasers

Using this element, you can filter for and display 6 job teasers on landing pages. Filtering is possible based on a particular occupation and/or organization. In addition, a link to the job search page with all matching jobs is included.

 

Top Jobs

The top jobs row will allow adding the top jobs to the landing page. Top jobs are automatically fetched from the jobs that have the top job upgrade and displayed in the row

This row type also allows adding a title and a subtitle to this section as well as a background color and a spacing value.

 

Featured video jobs

We can show the latest jobs that include a video by displaying a card list with video thumbnails that are clickable and users can immediately see the video or navigate to the job or organization with that video.

 

Featured organisations

The “Featured organisations” row will allow adding the latest organisations (most recently added organisations that have a public profile) to the landing page. If the “Featured organisation Feature” exists on the site, this row can be adjusted to show those featured organisations and not the latest.

This row type also allows adding a title and a subtitle to this section as well as setting a background colour and a spacing value.

 

Organisation profile

The "organisation profile" element is a great employer branding tool and particularly suits any sponsored articles. This feature allows you prominently present an employer profile. You can flexibly choose a title and subtitle, and the organisation details and image origin from the organisation profile.

This landing page element is also available for our blog feature.

Large company teaser

The large company teaser row allows for adding a prominent company teaser that displays information about the company. This can be used, for example, to emphasize the employer of the month.

 

 

Logo cloud simple

The “Logo cloud simple” row is a simple logo cloud that will display images next to each other or a slider element. Images can optionally be a link referencing another page (e.g. the company profiles). The spacing and background can be configured for this row and it is also possible to add a title on top of the logos.

Extra Tip: make sure images have the same height when uploaded for a better display. The width of the images can be different but it is recommended that images have a similar height for the best result.

 

Cobranded Gateway

The "Cobranded Gateway" was designed to allow job board operators to present client logos in a simple way.

The row type allows adding a logo and description text. Within the description field, site admins can use multiple formatting options.

 

Featured jobs

The “Featured jobs” row will allow adding featured jobs to the landing page. If there are no featured jobs available, this will always default back to the latest jobs that were added in the site.

This row type also allows adding a title and a subtitle to this section as well as setting a background colour and a spacing value.

Training organizations

The training organizations row shows all of the organizations that have a Training subscription active. In the row organizations are automatically scrolled through, this can be paused by either hovering over the row or using the dedicated pause/play button. The logos are also clickable and lead to the organization profile page when clicked.

 

 

Integrate Media

The elements in the media section allow you to integrate content from third-party sites, such as videos, RSS feeds (eg. for podcasts), or ad banners.

Related landing page rows are:

• Embedded - Youtube
• RSS Feed
• Ad Banners

 

Embedded - Youtube

The “Embedded - Youtube” row allows displaying a Youtube video on a landing page row with text on the side. Always use the Youtube embed link and not the "normal" URL of the video.

You can specify the size of the video (width and height) and also set a background colour.

 

RSS Feed

The “RSS feed” row allows adding an RSS feed to collect the 3 latest items from the feed to display as cards. A colour can be configured which will be used for the action link to click to view the item in more detail.

This row follows the RSS feed standards so make sure that the feed follows the guidelines for RSS feed (especially concerning images).

Example of a supported image tag: 

<media:content url="PLACEHOLDER_LINK.jpg" medium="image" />

 

Ad Banners

Ad banners are an optional feature and might not be enabled. Make sure that the feature is active before using it - you can reach out to your Jobiqo contact to discuss enabling this feature.

The ad banner row allows including an ad banner unit that occupies full width. It does not include any spacing as that depends on the ad and should be done in the ad implementation (developer).

 

Insecure Script

The Insecure Script Row feature allows job board operators to integrate custom script snippets directly onto the landing pages. For example, job board operators can use a script form a lead generation tool to capture leads directly from various pages.

 

‼️ As its name implies, this functionality comes with inherent risks that the job board operators must be aware of.

Note: The job board operator implementing the insecure script is solely responsible for any negative impacts or unintended behaviors that may arise. This feature should only be used by those who are confident in their ability to manage such risks.

Basic content elements

Simple text

The simple text row is an editor box where you can enter any arbitrary text, useful for longer text pages like "imprint" or "Privacy policy". It can also be used in between any landing page rows. Elements like links, bold, tables, headers can be used inside this row.

It is possible to define the background colour of this row.

 

Extra tip: External links, which are links to external sites, automatically open in a new tab, while internal links open in the same tab.

 

GDPR-related content

With GDPR landing pages, we refer to basic text landing pages for your terms and conditions, data privacy policy, or imprint. In this case, we recommend using the “simple text” landing page row element.

 

Category Facet

Use this element to display job categories as a grid of links for the web version and as an accordion for the mobile view. 

By default site operators can add a title, subtitle and a paragraph describing the facets. These are optional elements. Then the site operators can add as many categories as they like. They can choose various categories like Employment type, Occupation fields, Regions, Cities, etc. The list item displays the number of jobs for each category.

For example one of the options in the Employment type can be "Full time (22)"

 

Category Facet Web

 

Category Facet Mobile

 

 

Quote

The Quote paragraph can be used to render quote or testimonial in a slider. In addition to the quote text, it is also possible to add an author and a image (picture). Both fields are optional. 

The whole Cards Slider with Quote paragraph (including image and author)

 

 

The Cards Slider

The Cards Slider feature is designed to render child paragraphs within a smooth, interactive slider. This versatile component ensures each slide is displayed one at a time, providing a consistent viewing experience across all devices, including mobile, tablet, and desktop.

 

For the element you can set the following elements:
- Title and Subtitle: You have the option to add a title and a subtitle to the Cards Slider section. These fields are optional but can help provide context and information about the slider's content.
- Background Color: Customize the visual appearance by selecting a background color for the slider. This helps in aligning the slider’s look with your overall design theme.
- Spacing Value: Adjust the spacing value to control the amount of padding around the slider, ensuring that it fits seamlessly into your layout.

 

Horizontal Card

This paragraph can be used to render horizontal cards with media and text in the cards slider. 

Example: