Familiar with worrying if your job ads stand out from the crowd? Uncertain how to ensure a professional appearance while keeping the effort to a minimum? The Prescreen Job Ad Designer gives you the freedom and flexibility to create customized job templates for your company! Helpful templates and the intuitive editor offer a wealth of knowledge on your path to professional job ads. Learn all the basics to make the most of this feature in this article.

Table of contents

1. What is the Job Ad Designer?

2. Where to find the Job Ad Designer

3. Overview page: Managing job templates

4. How to create a new template

5. How to design templates

5.1 Design: Colors

5.2 Design: Fonts

5.3 Components: General

5.4 Basic components

5.4.1 Heading

5.4.2 Paragraph

5.4.3 Columns

5.4.4 The apply button

5.5 Advanced components

5.5.1 Image

5.5.2 Banner

5.5.3 Section with title

5.6 Smart components

5.6.1 Introduction 

5.6.2 Your tasks

5.6.3 Your profile

5.6.4 What we offer

5.6.5 Contact

5.7 Placeholders: How to import data automatically

5.7.1 Standard placeholders

5.7.2 Custom data fields

5.7.3 Date formats

6. The optimal workflow: How to adjust the view of your templates effectively

6.1 Desktop template

6.2 Multi-language templates

6.3 Mobile template

6.4 Structured template

7. Publishing

7.1 Candidate Center and Widget

7.2 XING

7.3 Job feeds

7.3.1 XML & XML-CDATA

7.3.2 JSON

7.4 Karriere.at

7.5 Jobs.at

7.6 Bundesagentur für Arbeit

7.7 Multi-poster and customer-specific job markets

7.8 Public REST API

8. Recommended articles

1. What is the Job Ad Designer?

Our new feature, the "Job Ad Designer", allows you to design customized and professional job templates for your company. The templates will help you or others in your company to create and publish your job ads smoothly and without effort.

2. Where to find the Job Ad Designer

You can create and edit your personal templates in the settings. For this purpose, go to "Settings" (1) > "Jobs" (2) > "Job templates" (3).

Do you have a Prescreen 2022 account? We provide you with the following two templates by default: "Job Design Creative" (4) and "Job Design Modern" (5).

Do you have a Prescreen Classic Account? Your templates, which were not created with the Job Ad Designer, can be found under "Old templates".

3. Overview page: Managing job templates

The following functions are available on the job templates dashboard:

• "Add Job ad template" (1): You create your new job templates with this function (Job Ad Designer).
• "Edit" (2): You can edit your existing templates any time. In case you edit a template, which is currently used by an active job, the respective job will automatically adjusted. 
• "Set as default" (3): You are able to set a template as your default one. This one will be preselected when you are creating a new job. You are allowed to set one template per type (old and new templates) as default. In case you have selected two standard templates, then the one, which you have created with the Job Ad Designer, will be preselected automatically when you create a new job.  
• "Duplicate" (4): You can duplicate templates and edit them accordingly.
• "Remove" (5): You can delete templates, which you do not need anymore. Please note, that this is a non-reversible process, so you have to confirm it.

4. How to create a new template

To create a new template, click on "Add job ad template". To edit a template, click on "Edit". The editor consists of three main areas:

• Design settings (1): You find the colors and fonts at "Design". Structural elements like columns, headings, introductions and more are listed at "Components".
• Title, view, language (2): In addition to the title you can also edit the view and the language.
• The template (3): You design your template in this area.

You can build up the structure of your template with the help of our general components or you can use the smart components, which give you a predefined structure. Additionally you are also able to define your colors and fonts.

You can adjust the colors of the template to your corporate design. 

To define the colors for the following sections just click on the appropriate button:

• Background: The color of the whole template.
• Paragraph: The color of the text in the paragraph. 
• Buttons: Background color of the apply button.
• Buttons text: The color of the apply button text.
• Headings: The color of the headings.

Define your colors in the following ways:

• Color picker
  
• HEX value
  
• RGB value
  
• HSL value
  

5.2 Design: Fonts

You define the font, its size and its weight for headings level 1 (H1), paragraphs and the apply button in this section. In addition to the standard fonts (see the list below), you can also choose from the wide range of Google Fonts..

• Arial
• Arial Black
• Courier New
• Georgia
• Impact
• Tahoma
• Times New Roman
• Trebuchet MS
• Verdana

5.3 Components: General

You can easily add components to your template using drag and drop.

5.4 Basic components

5.4.1 Heading

With this component you add a paragraph to your template that is already defined as a heading. The heading level 1 and 2 are directly available at the "Basic components". You can change the header level (H1 - H5) with the "Paragraph"-button in the edit bar.

You can edit the text 

• by double clicking on the column OR 
• by selecting the column with a left-click and choosing the gear icon.

Besides the standardized design options, like text color, alignment, lists, you can also make use of place holders. For more details see the section "Standard place holders". 

You can access the source code with the <> button. 

Pro tip: The heading matches the HTML tag <h1>. The size of the header will be calculated automatically based on the heading 1. Every header level is 1,2 smaller than the first level (e.g. H1 = 24 px > H2 = 20 px).

5.4.2 Paragraph

With this component you add a text block to the template. Customize it with the same tools like you use for the heading.  Pro tip: The paragraph matches the HTML tag <p>.

In case you want to add columns to your template, use this component. You can choose between a range of 2 and 5 columns by default. To adjust the column settings, please click on the gear icon (1).

• Gutters (2): Adjust the margins with the value "gutters". Unit of measurement: pixels (px).
• Width (3): To edit the length of the columns, adapt the value in this section to your needs. The length of the columns make up 100 %. This means, in case you have two columns, the length will be 50 % for each column.
• You insert additional columns with the "+Add column"-button (4).
• Please note: When you delete a column, then the content will be removed, too.

The candidates are sending their application via the apply button, therefore you have to add at least one apply button to every template. You can add as many apply buttons as you like. To change the text of the apply button, click on the grid icon.

In addition, we have added a hover effect (90% transparency) to the button, which adds a nice touch to your job ads.

5.4.5 Apply via WhatsApp

Add the "Apply via WhatsApp" button (1) to your ads to allow your candidates to apply via WhatsApp.

5.5.1 Image

With images you are able to adapt your templates to your needs. In order to upload your image, click on the grid icon or on the "Upload" (1) button and select one of the following options:

1. Upload your files from your computer with the "Upload File" (2) button OR 
2. Drag and drop your pictures in the "Drop file here" (3) area.

Supported formats: GIF, JPG, JPEG, PNG, SVG, WebP

You want do redirect the applicants to your homepage when they click on your image? Just add the full link including "http(s)://" into the field "Link to" (4). You can also create and add a placeholder as a link or part of your link.

Describe the image for people with impaired vision under "Alternative text for images" (5). We recommend you to leave the field empty if the image is used only as a design element.

5.5.2 Banner

The banner is one of the central elements of your template. Not only because this image will be used for your desktop version, but also because the various job markets like XING will use this one on their homepage. This is also the reason why you are allowed to use the banner only once in a template.

Gallery: The structure view also provides you the possibility to create a gallery with max. three images.

To upload your pictures go to the structure view (1), click on the gear symbol (2) and select "+Add additional image" (3). Your images will be shown in the order in which you have uploaded them.

Please note, that the images have to meet the following requirements:

• Image size: 1140 x 456 pixels
  Hint: Please make sure that the images have the same pixel size, otherwise they will be scaled to the aspect ratio of the first image.
• Format: jpg, jpeg, png
• Size: max. 2 MB 

As with the images, you have the following two additional options for the banner:

• You want do redirect the applicants to your homepage when they click on your image? Just add the full link including "http(s)://" into the field "Link to" (1). You can also create and add a placeholder as a link or part of your link.
• Describe the image for people with impaired vision under "Alternative text for images" (2). We recommend you to leave the field empty if the image is used only as a design element.

5.5.3 Section with title

With smart components you define areas instead of text or image blocks, which makes your work more easier. Additionally, on the one hand, the smart components will be automatically assigned to the appropriate section in the structured template, on the other hand, they will be used also for the job feed and API. You can customize the title of each component by clicking on it.

5.6.1 Introduction 

How do candidates get in touch with you? In case you have a specific contact person for the job, you can add their contact data in this section.  Pro tip: The content of this component matches job_content_5 at the job feed. The corresponding itemprop is contact.

Place holders allow you to create templates whose contents automatically adapt themselves to the respective jobs. You can add them easily via the editor menu:

Please find all the standardized placeholders in the following spreadsheet:

5.7.2 Custom data fields

You can also insert your additional questions into your template, which you have defined previously in "Settings" (1) > "Jobs" (2) > "Custom Data Fields" (3) > "Display in job ads" (4).

It is possible to customize the date formats with extra codes. Please find the appropriate formula in the following spreadsheet: 

The format of the days and month depends on the language of the template. The standard format of the certain language is set by default.  Pro tip: Please find the entire list of all possible formats here: https://unicode-org.github.io/icu/userguide/format_parse/datetime/#date-field-symbol-table.

6. The optimal workflow: How to adjust the view of your templates effectively

It is possible to optimize your templates not only for the desktop view but also for mobile devices. Additionally, we also offer you a structured template.

We recommend you create and design your templates in the following order:

1. Desktop template
2. Multi-language template
3. Mobile template
4. Structured template

6.1 Desktop template

Firstly, create your desktop template, which is optimized for computers. 

6.2 Multi-language templates

In case you publish your job ads in several languages, create these templates in the second step. Just change the language options (1) in the template to any desired language and add your text afterwards.

Content and design of your template will be automatically adapted to the smartphone view. Please note that, in this view, it is not possible to display more than one column. Therefore, your multi-column templates will be converted to a single-column view. The width of the column will be adjusted to the total size.  

Job templates created with the Job Ad Designer can be optimized for several purposes. Besides the desktop and smartphone view, you can also publish these templates on job markets like Stepstone, which requires a special structure ("liquid design").

To achieve the most perfect job ad, you have to define five different sections:

• Introduction: Description of your company
• Your tasks: Description of the tasks
• Your profile: Description of the skills, degrees, experiences
• What we offer: Description of the benefits of the company
• Contact: Contact person for the candidates

You can customize each component via drag & drop or you can delete them, too. The headings are also editable.

Activate the structured view by moving the slider next to "Prepare structured template" (1) to the right. Now you will see the structured view (2) next to "Desktop" and "Mobile".

Hint: Currently, only the job market StepStone with its liquid design is supporting the structured templates.

Please note: Contents, which cannot be allocated to a section, will be listed at the end of the side in the area "UNASSIGNED COMPONENTS". You can move these elements to the above areas. In case you are not dispatching them, the content will not be published. 

In the structured template, you can adjust the following design settings under "Design" (1) > "Colors" (2):

• Background color for mobile devices (3)
• Color for headings and links (4)

7. Publishing

The job ads and the content will be used by different platforms.

7.1 Candidate Center and Widget

The desktop and the mobile view of a job ad will be shown at the Candidate Center and the Widget. The multi-language templates are available, too. The ad will be shown in the browser language of the candidate – in case the language does not exist, the standard language of your Prescreen account will be used. 

7.2 XING

When you publish on XING, the title and the content of your job ad will be delivered to their homepage.

7.3.2 JSON

The JSON format is – except for the listed job contents – identical to the feed. The chronology matters for the content of the field "description".

„description": {         "job_content_1": "", // Inhalt von „Einleitung“         "job_content_2": "", // Inhalt von „Ihre Aufgaben“         "job_content_3": "", // Inhalt von „Ihr Profil“         "job_content_4": "", // Inhalt von „Wir bieten“         "job_content_5": "" // Inhalt von „Kontakt“ }

7.4 Karriere.at

Karriere.at is a special feed, which is used only for jobs in Austria. In order to use it, you need a contract with karriere.at. The content of the job ad will be assigned to the field simple_html_content. The content of the ad will be provided without images and CSS styles. Only the standard HTML tags will be (h1, h2, h3, h4, h5, h6, hr, a, br, li, ol, ul, p, b, em, i, strong).  

<simple_html_content><h1>Raketen Techniker</h1><p><strong>Position: </strong>Vollzeit<strong><br></strong><strong>Standort: </strong>Wien<strong><br></strong><strong>Bereich: </strong>Vertrieb und Handel<strong><br></strong><strong>Eintrittsdatum: </strong>2021-07-14</p><p><strong>Einleitung</strong></p><p>Die Prescreen International GmbH entwickelt eine cloud-basierte E-Recruiting Lösung für Unternehmen aller Größen. Das machen wir im Herzen Europas - genauer gesagt, in Wien. Gegründet im Jahr 2014 arbeitet unser Team seither mit HR-Abteilungen und Arbeitssuchenden zusammen um zu ermöglichen, dass talentierte Menschen im richtigen Job genau das tun können, was sie lieben und was ihnen am besten liegt.</p> <p>Seit Juli 2017 gehören wir zu XING, dem führenden beruflichen Netzwerk im deutschsprachigem Raum. Gemeinsam wollen wir die Zukunft des Recruiting nachhaltig verbessern.</p><p><strong>Deine zukünftige
	

< content><h1>Raketen Techniker</h1><p><strong>Position: </strong>Vollzeit<strong><br></strong><strong>Standort: </strong>Wien<strong><br></strong><strong>Bereich: </strong>Vertrieb und Handel<strong><br></strong><strong>Eintrittsdatum: </strong>2021-07-14</p><p><strong>Einleitung</strong></p><p>Die Prescreen International GmbH entwickelt eine cloud-basierte E-Recruiting Lösung für Unternehmen aller Größen. Das machen wir im Herzen Europas - genauer gesagt, in Wien. Gegründet im Jahr 2014 arbeitet unser Team seither mit HR-Abteilungen und Arbeitssuchenden zusammen um zu ermöglichen, dass talentierte Menschen im richtigen Job genau das tun können, was sie lieben und was ihnen am besten liegt.</p> <p>Seit Juli 2017 gehören wir zu XING, dem führenden beruflichen Netzwerk im deutschsprachigem Raum. Gemeinsam wollen wir die Zukunft des Recruiting nachhaltig verbessern.</p><p><strong>Deine zukünftige
	

Jobs in Germany can be posted also via the Bundesagentur für Arbeit (Federal Employment Agency). The whole content of the ad will be assigned to the field "Stellenbeschreibung" and you can edit it before you book it.

The customer-specific job markets allow you to book your job ads via email. The email covers the job ad as an HTML document and a folder with all the images.

Pro tip: By using the structured template, the HTML also contains the following data: 

The multi-posting provider are connected via the same data structure.

7.8 Public REST API

The public REST API allows access to jobs and also to the content of the job ads. Please find the complete description of the REST API here: https://prescreenapp.io/doc/v1.

8. Recommended articles

• Job Ad Designer: kununu Widget
• Job Ad Designer: Paragraphs with alternative background colors
• Find out first-hand how to best work with the Job Ad Designer