Got a new Clownfish template or are you looking to spruce yours up and make some changes to your current website? Check out the below details on setting up everything on your Clownfish template from the branding to adding in your plugins!


Menu

Web Branding

Web Content Management

Plugins


Web Branding

Click through Website > Web Settings > Web Branding to access the branding section - this will allow you to update any logos used throughout the site, makes changes to your colour scheme and add contact details and social links.

Images

On the Page, we can update our main Logo, Advert Image, Social Sharing Image and Favicon. Drag and Drop, or click into each section to upload an image.

Logo

The Logo is the image that will be used on all pages throughout the site as the main website Logo.

  • Sized at 190 x 110 px

  • It should have a transparent background

  • The colour of the logo should not match the colour of banner image

Favicon

The Favicon is the icon used on the tabs of web pages -

  • 16 x 16 in size

  • Will have a .ico, .png, or .jpg file type

  • This should be a smaller icon- perhaps a letter or image and not your full logo (like our fish!

Social Sharing Image

The Social Sharing Image is the image used when your recruiters share Web Pages and Adverts out to social media sites and Google For Jobs.

  • Sized at 1200 x 630 px

  • Have a logo centred in the image atop of a block colour

Using this size ensures the image should pull through correctly across all platforms and means the image shouldn't be stretched.

Advert Logo

The Clownfish template by design does not utilise an advert logo, therefore this option is not required.

Editing Colour Scheme

The Menu, Body, Button and Footer sections on the Web Branding allow you to select the colour scheme used throughout the website.

For the best look and feel on Clownfish, we would recommend using 3/4 different colours within the branding. As above, we have picked 4, with one only being used for the main content text - it's recommended to use three/four different colours that still complement each other.

For example, firstly, select a general background colour - this would usually be white or black.

Then your two branding colours - these would be best coming from your Logo or other branding used by your business! Make sure these are colours that don't clash such as bright pink and green - use colours that are known to match such as red & blue, or two shades of the same colour, such as sky blue and navy.

Header

The Header section on Clownfish updates the colours above the menu section:

The Header Colour will amend the background colour of this section, whereas the Text will edit the colour of the social/contact links. The Banner Text is not utilised by this template.

Menu

The Main menu banner colour is actually controlled by the Primary Button colour, so don't worry about updating this section! This is in order to ensure the colours are consistent throughout the template.

However, you can update the text colour within the Menu by using the Menu Text Option:

This will update the colours used on the menu text:

Body

The bulk of the colour used throughout the template are updated from the Primary Body section - this will update your call to actions, content page and plugin branding:

You can then see how these are utilised throughout the site:

Buttons

The Clownfish template utilises both the primary and secondary button colour options to edit branding throughout the site.

The Primary Button Colour and Text will control the look of your website menu, and buttons on your CTA's & Advert Pages:

However, the Secondary Button Colour and Text will control the background colour of your Search bar and secondary buttons on your jobs pages:

Footer


The footer settings will update the colour of the background and text colour for the website Footer throughout the site:

Colour Matching

For the best results on Clownfish, we would recommend having three colours as above, and setting three colours to each option as below (based on our example):

Colour 1 (White)

Colour 2 (Green)

Colour 3 (Black)

Colour 4 (Grey)

Header Colour

Header Text

Primary Body Text

Secondary Button Colour

Primary Menu Text

Primary Body Title Text

Footer Background

Primary Body Background

Primary Body Hyperlinks

Primary Button Text

Primary Button Colour

Secondary Button Text

Footer Text

Footer Hyperlinks

Contact Details & Social

At the bottom of the Web Branding section, we have our Contact Details and Social Media Links.

These sections allow you to add your business information to display on the website - this information displays selectively on the header and footer sections on the website.

Your Email, Phone Number, and Social Links will appear in the header above the menu:

The Address data populated will also appear in the footer on the site:


Website Content Management

Adding Your Banner Image

Your banner image is the image that displays across the main front of your website:

As the Clownfish Template allows for 3 sliding banner images on the homepage, you can upload multiple banner images for the homepage.

To add your banner image to your Homepage, click through Website > Web Content, select the homepage then hit Images.

This will allow you to upload to the Banner Image section by hitting select Image

You can then upload and select the banner images you wish to use - These should be added to the first 3 Other Image slots. The banner image for the Clownfish template should be 1903 x 539 px in size.



Once completed, hit Save and this will add the banner images to your Homepage!

This process can be completed for all content pages, however bear in mind that the size of the image is smaller on content pages and responds to show the middle of your banner - so for these pages have something that focuses to the centre of the banner! Each content page will also only have one banner area, rather than the slider.

Banner Image best practice:

  • The banner image should be sized 1903 x 539 px

  • The colour is important - ensure your website is eyecatching and pops on the screen with vibrant colours

  • However, make sure the colours and content of our banner image match your brand colours and values

Adding your Call To Action Buttons

You can set up your CTA’s within Web Content - Click through to the Images tab of the Homepage

Under Other Images, you can use the last 3 Image slots to set these up - firstly, select the images you wish to use. Click Select Image and upload an image from the image browser.

Now, click Save

For each image, you can now add the CTA Header and Text. To do this, click the Image Text Snippet tab.

Both the header and text need to be added as HTML which can be done in the format below:

HTML Format:

<h3>Header</h3>

<p>Text here</p>

If you would like your CTA’s to link to pages on your site, enter the URL for the page in the Link section below.

Once you are happy with your CTA’s, click save on each of the Side Image sections and at the bottom right of your screen for the page. Your CTA's will now be created!

Adding Content

To add content to your Firefish Site, click through Website > Web Content. This will show you the content editor.

You can check out our full guide on utilising the Web Content Editor here! This guide will chat you through everything from typing up some content to embedding videos on your pages!

Content Recommendations

  • Make sure you have enough content on the site before going live - we'd recommend having pages such as About Us, Candidates, Employers, Jobs, Contact us and any plugins you have available.

  • Let someone read through the content before publishing - its always great to get a second opinion, ensuring the content matches your brand voice.

  • Make sure to add in banner images for each page using the method stated above for the homepage!

  • Think about the structure of the site- you don't want to have 100 menu items - can any pages be grouped together under a main heading?

Adding SEO

All web pages in Firefish will have an SEO tab, and this allows you to add in a Page Title, Description and keywords to be picked up by search engines such as Google.

Adding this information is vital to ensuring your website is optimised for searching and improving your websites ranking against other similar sites.

Navigate to the SEO tab on a web content page where you can then update the information fields:

You can find our full guide on Website SEO and how to manage this here!

SEO Character Recommendations

  • Page Title should be 55-60 characters

  • Keywords should be no longer than 100 characters in each

  • The Description should be around 150-160 characters


Plugins

Firefish Website Plugins allow you to create additional extra page types that allow you to create specialised pages within your website designed for a function rather than a standard content page.

Clownfish websites have the following Plugins:

Team Plugin

The Team Plugin allows you to create a Meet the Team page for your website, displaying an initial page with all team members, which users can then click on to find more details about the team member.

You can find our full guide on creating team profiles here!

For the images for your team plugin, we would recommend using high quality .png files that are 172 x 179 px in size.

Blog Plugin

Its well known that blogs are a great way to drive traffic to your site - but they also add great value to users and boost your SEO.

You can find full details on how to create and editing blogs here!

For the featured images for your blog plugin, we would recommend using high quality .png files that are 187 x 195 px in size.

Testimonial Plugin

Have loads of candidates and clients been telling you how great you, your consultants and your company are? As well as giving yourself a pat on the back, why not tell the world how fantastic you are!

You can find full details on how to add your testimonials here!

For the featured images for your Testimonial Plugin, we would recommend using high quality .png files that are XXXX px in size.

IMAGE

Campaign Plugin

Working across different sectors/locations and want to split out the vacancies and provide more information on the location/sector? Utilise our campaign plugin to create Jobs pages which only display jobs within certain preferences, allowing you to create custom pages with only X type of job that candidates within this market can be sent to.

You can find full details on how to add your Campaigns here!

For the featured images for your Testimonial Plugin, we would recommend using high quality .png files that are 120 x 125 px in size.

Did this answer your question?