Setting up landing pages: Creating bespoke themes

Having set up your landing page(s) at a basic level, it definitely worth exploring the additional tools we provide to make them truly bespoke to your brand.

In this article we'll talk you through how to create and edit landing page themes.  You can create multiple themes, and each theme can be used on as many different landing pages as you wish. 

Creating custom themes

1. Access the Landing Page settings area of your account as normal, and either click 'edit' on an existing page, or create a new one.

2. The area we will be initially working with inside your landing page is in the panel on the right, as shown below.

3. As a side point, you will notice that a new landing page will always revert to the 'Default theme' in the first instance. This is the most basic landing page theme you can use and as it sounds, is simply the default one we apply to any new page when created. Having created your own custom theme(s) you will be able to select your custom theme from the drop down list whenever you create or edit a page.

3. To create you new theme, type the name you wish to use in the 'Theme name...' field, and then click 'create'.

4. You will be taken into a new area which looks a little different.  In the main page you will see a preview of the landing page theme you are working with, while on the left you will see a panel with a lot of different options listed. Don't be intimidated though! We'll walk you through each option from the top down in the next section. 

Working with your landing page theme editor

The first thing to mention is that you may notice the URL on your browser tab has changed. 

This is because are now working with a different software tool called 'applr' which is separate from your idibu account. 

However, this is a product designed and built by us, specifically to facilitate the easy creation and customisation of your landing page themes. 

When we set up your idibu account, we created an applr account and linked them together for you. You'll never need to log into this separately, as you will always be able to access this area following the steps outlined above.

To return to the idibu landing page settings area, simply click 'Exit' at the top of the left hand panel. However, don't forget to click the 'Save' button to save your work first!

The editor fields and options

These are all listed in the bar on the left, and you can use your mouse to scroll up and down this area, while the preview page remains static.  Working from the top down, we'll talk you through each section.

Preview options - Below the Exit and Save buttons at the top, you will see a 'Preview options' area. This allows you to change the preview of your page in the main screen between PC, tablet and phone.

Questionnaire mode - Right now you can ignore this option. This does not relate to landing page themes, and is just something we have added to enable us to expand the tool kit for this system in the future.

Page layout - This provides two different layout options:

1. 'Split' is where promotional videos, role description, company background and your company logo are displayed in a separate panel on the right.

2. 'Single' is an alternative option that brings these areas to the top of the page (with the 'Upload CV' and application questions below). It's a look you might want to consider if you want to ensure the candidate reviews the vacancy details again before applying, and if you are not using a promotional video.

Show full description - by default this option is switched off, so we show some of the description above your company info and/or logo. (The candidate can still click 'read more' to see the full description). Click the button so it turns blue in order to display the full description at all times.

The next three options allow you to change the text within specific areas of the landing page:

Job title prefix - in this text field you can change the text that appears at the very top of the page before your advert title:

Application for header - Any text you input or amend here will appear above the application area:

Apply button - Text inserted into this field appears on the apply button at the bottom of your landing page.

Logo image - click the pencil icon to upload your logo file.

Promo video - Copy and paste the URL of your youtube or vimeo video into this field.

Video title - as an additional option, you can add in a title for your video here which will be displayed on the landing page.

Company background - Use this field to write a short and permanent company description for either your business, or your client (depending on the intended use of this theme). This text will be in addition to any information posted inside the body of your advert, which in turn will display inside the 'Role description' area.

THEME OPTIONS - this area is where you can really start to customise the look and feel of your landing page. You can change the colours of the buttons, text and backgrounds. 

This means you can adapt the landing page to dovetail with your own branding (or that of a client).

Seek apply - If you are working with Seek you can activate an option for your candidate to use 'Apply with Seek' to upload their CV and populate some of the core fields. You can also add your Seek Advertiser ID.

Header 1 colour... etc - In this section you can input the colour codes to update and change the colours for different areas of the landing pages. Even if you have never worked with colour codes before, as long as you know the codes themselves this very easy - and actually fun to play around with! If you are unsure of the colour codes for your branding, speak to the person who handles your marketing. 

If your branding was done some time ago, and you don't have ready access or contact with anyone involved then you can use a browser extension like ColorZilla to take colour samples from your website which will give you the colour code.  This is also a quick and easy way to demonstrate a mock up page theme for a prospect client.

Here is an example using the default landing page colours...

...and here is an example using our own idibu branding:

If you are a little bit more advanced in your knowledge, you can use our advanced HTML tools, or even add in your own Custom CSS code:

Google Tracking ID -  If you are working with Google Analytics, you can insert your Google Tracking ID here.

Custom JavaScript - Last but by no means least, if you are using data gathering tools for traffic analysis or candidate experience understanding, or to interact with candidates using third party systems - you may input the provided JS code here.

...and Save.

Just a reminder to make sure you save your page before exiting back into the idibu system.

Editing custom themes

You can access and edit your custom themes at any time. 

1. Open a landing page that uses the theme you wish to edit.

2. Click 'edit this theme' and the applr editor page will open. 

Still need help? Create a ticket Create a ticket