Getting Started with Templates

Introduction

Hello, welcome to Koala UI's help center regarding templates. First of all, from Koala, we want to thank you for purchasing one of our templates.

You can join our Discord channel if you want to receive more personalized assistance. From there, you'll be able to open a ticket and get in touch with a Koala team member for more specific questions. It's important to note that to properly use the Webflow template, certain knowledge of how Webflow works is necessary.

If you don't have much experience or knowledge of Webflow, we recommend that you read this document paying special attention. First of all, let's review the contents of the templates and the important aspects to consider.

What's inside

This is a generic guide; we are not focusing on any specific template. Once you've read all the documentation, if you have more specific questions, you can always contact us, and a member of the Koala team will reach out to resolve them in a more personalized manner. Within each template, you may find:

• Pages
• Legal Pages
• Admin Pages
• Utility
• CMS Collection Pages

Pages

The pages are simply the pages that may exist within the template, the pages that users will most frequently use. Depending on each template, there will be different ones, but in general, we will find:

• Home
• About
• Blog
• Careers
• Work
• Pricing
• Features
• Etc

Legal Pages

As you can imagine, these are all pages related to legal matters, such as privacy policy, terms and conditions, license, cookies policy, and anything else related to rights, privacy (in general, all legal matters). These pages will and should be located in this folder.

• Privacy Policy
• Terms & Conditions
• License
• Cookies Policy
• Etc

Admin Pages

We have classified the admin pages as those pages to which an ordinary user should not have access, such as:

• Getting Started
• Style Guide

Utility Pages

The utility pages are those where the user might land accidentally, such as when prompted for passwords, etc. In other words, they are pages that appear due to errors or unexpected situations, or those that require user actions:

• 404
• Passoword Page
• Recovery Password

CMS Collection Pages

These are a bit more special; here we will find the specific content of each CMS collection. In short, CMS stands for Content Management System, and these are the pages where we want the content from our database to be displayed (more information about CMS can be found on the official Webflow website).

For example, if we have a blog, each specific blog post will be displayed on this page. If we have job offers, then the specific job offer will be displayed there. CMS collections have a panel where you can customize and fill in all the information to manage all your content.

Class Naming Conventions

To make the templates as accessible as possible for all users, we have used the Client First naming conventions from Finsweet. You can read the detailed documentation here.

Symbols/Components

Components allow you to maintain a consistent, efficient, and scalable design workflow by creating customizable blocks from elements and child elements. Reuse those blocks across your site, and modify them in a single place to avoid individually revising each recurring layout. At Koala, we use them to constantly reuse content. We create one footer, turn it into a component, and then reuse it throughout the interface. This allows us to have the same component synchronized with the rest of the project.

You can identify components by this visualization. Every time you see an element with this visualization, it's because it's a component, meaning it's an element that's being used elsewhere. From the components panel, you can identify the component you want to modify to see how many times it's repeated or on which pages it's being applied.

That said, it's important to mention that any change to an element with this visualization, in other words, to any component, will be applied in multiple places at once.

Custom Code

For now, the templates don't have any custom code configured beyond what Webflow allows. Webflow only permits code related to text readability. You'll find the code in the "Global CSS" elements, where you'll find code with this appearance.

It's not necessary to understand anything about this code; all it's doing is rendering the text better in the browser.

If you wanted to add custom code on your own to the website, such as smooth scroll, Google Analytics, or more advanced features, you can always open a ticket on our Discord, and we'll help you carry it out.