Instructions

How to use and adapt this Template.
Introduction

I've tried to make this Template easy to use and easily scalable for both beginners and Webflow experts alike. To achieve this the Template uses a version of Finsweet's Client First, which is compatible with Relume's Component Library, should you wish to add more components.

A good place to start is the Template Style Guide. This is where you will find all the building blocks necessary for almost any layout or component. Please refrain from deleting elements in the Style Guide as you may need them in the future.

Naming Convention

The following text is taken from the Client First Documentation which I can reccomend reading to understand the principles of this system:

Client-First has a focus on clear class naming throughout the project.

A Webflow developer, client, or any person should be able to understand what a class is doing based on a class name, even if that person has no experience with Client-First.

Goals of Client-First naming convention:

  • Empower a non-technical person to manage our website.
  • Be clear, informative, and descriptive in our class naming.
  • Give the reader as much context into the purpose of the class.
  • Read a class name and know what its purpose is.
  • No abbreviations, no shorthand, no confusion.
  • Give as much context into the relationship of that class with the website.
  • Create names based on prefix and keyword organization techniques.
  • Visualize the purpose of a class based on its name.

Live Filtering

The live filtering system used on the home page only works on the live website. It will not work in preview mode. It uses Finsweet Attributes. Specifically it uses the CMS Filter.

Customising

To customise this Template to your brand, I suggest starting with the Style Guide. Go through the guide, selecting the classes you wish to change and changing them will have an effect across the whole website.

The same will work for colors. If you change the primary color swatches to your brand's primary color, the changes will take effect across the whole website. You can also add new color palettes to the Style Guide if you wish and implement these across the website.

Processing Payments

This Template is not setup to use Webflow Eccomerce. It is setup to redirect to a payment link when a user fills out the 'Post a Job' form. You will need to configure this yourself with your payment provider. If yours does not allow you to create payment links, I can reccomend Stripe.

Webflow Logic

This Template uses Webflow Logic to create a new 'job' in the CMS if the 'Post a Job' form is filled out. Unfortunately Webflow does not support all of the field types we need for this to be perfect. But it will help speed up adding jobs.

Support