Start Here

Thanks for purchasing the Collabify Template. In this short manual, we’ll cover all essential information, fundamental elements like colors, fonts, CMS content and how to put them into use.

If you’re not super familiar with Webflow, we recommend you to take the Webflow 101 course on Webflow University because it’ll provide everything you need to start working on your project. If you’ll need additional assistance or a partner to work with on your project, you can also contact us to assign a specialized team to tackle the job.

‍

Fonts

Collabify template uses “Unbounded” for Titles and buttons, and “Poppins” for texts. The texts are set with the help of Body (All Pages) selector, meaning that you can easily fix the font for the whole website with one click.

You should click on the orange selector option on the upper right of the style tab and after then, you can select Body (All Pages) and go to Typography section to change the font you’d like.

For the headings; related Heading is chosen from the Typography field on Style Guide page. Again you’ll need to click on the orange selector on the upper right of Style tab. Later on you can go to the Typography section after selecting All H Headings and change the font.

‍

Alternative Elements

There are various elements used in some elements on Collabify template for a more esthetic layout. Please keep in mind to make sure all changes are applied when making an alteration.

Some of these elements:

‍Footer Social Media Icon(Desktop)

(Mobile)

‍

In desktop view, when you assign a URL to one of the icons here, you will need to provide the URL again for mobile.

‍

Navbar Component

There are two Navbar components available in the template.

For pages with light themes:

For pages with dark themes:

When you make a change in the Navbar, you need to apply it to both components. You can easily do this from the Style Guide page.

‍

Footer Component

There are two instances of the Footer component in the template.

For pages with light themes:

For pages with dark themes:

When you make a change in the Footer, you need to apply it to both components. You can easily do this from the Style Guide page.

‍

Product (Pricing Detail) Page

The current Pricing detail page contains two buttons. Since the payment system is not integrated, the button above is automatically hidden on the live site by Webflow. When you connect your own payment method, you should delete the second button (the one leading to Log-in) in the Webflow Designer. Once you integrate your payment system with Webflow, the button above will automatically become active on the live site and redirect users to the payment page.

‍

Career Detail Page

There is a hidden element in the career form. The purpose of this element is to print the current CMS Job Title data in the form output. This element should remain as "Display None."

‍

Breakpoints

Whenever you make any changes on the website, make sure you are at the main breakpoint.

‍

The logic of breakpoints works as follows:

The main breakpoint is marked with an asterisk (*). General changes should be made there.

For example, when we modify the starred breakpoint, all other breakpoints are affected (unless changes were previously made specifically to those breakpoints; in that case, the priority is given to the changes made within their respective areas).

Next, let's say we make a change in the tablet breakpoint: we add padding to a box. This change will be applied to the right-side breakpoints as well as to the horizontal and vertical mobile breakpoints, but it won't affect the breakpoint to the left of the tablet breakpoint.

Changes made in the left-side breakpoints of the main breakpoint will affect them in the opposite direction. For example, if I add padding to the largest breakpoint, it will only affect that breakpoint and won't impact the ones to the right.

In summary, any changes made should first be applied at the main breakpoint (the one marked with an asterisk) and then propagated to the other breakpoints.

‍

Editing Meta Title, Description, and Featured Image

If you want to customize the elements that will be displayed, such as the title, description, and image, when sharing your website on platforms like Facebook or Twitter, follow these steps:

1. Go to the "Pages" section on the left-hand side of the screen.
2. Click on the small settings icon next to the desired page.
3. When you click on this icon, a menu will appear, allowing you to edit all these settings.

From there, you can customize the meta title, description, and featured image for the specific page you are editing. This will ensure that when you share your website on platforms like Facebook or Twitter, the desired elements will be displayed as you have customized them.

‍

Backups

If you encounter any issues, for example, if you accidentally delete some important classes while editing the template or if you want to revert to a previous version for any reason, you can always go to the "Backups" tab located in the Settings section on the left side.

In the "Backups" tab, you can view all the backups made, whether they were automatic or manual. Reverting to an older backup is as easy as a single click.

‍

‍

Collabify Webflow Template Support

Collabify has made it extremely easy to edit and customize the template on Webflow, using best practices.

However, if you ever encounter any issues, need help, or just want to say hello, please don't hesitate to send us an email at: template@earthr.co We are more than happy to assist you.

‍

Custom Design and Development

Additionally, if you need a custom and personalized version of Collabify or need help to build the perfect website on Webflow, do not hesitate to get in touch with our Webflow Design and Development Agency. The fantastic team behind the Collabify Webflow Template will be more than happy to help you out.