Chilo

Startup and SaaS template

Overview

Chilo - Startup and SaaS template is designed with modern design trends.

Comes with 3 pre-made colors. It allows you to create a new color template simply for yourself except for the prepared colors.

Modifying the template is quite simple.

We continue to add new things to make our template more beautiful and strong every day. You will be free to use all our updates.

Quick Start

  1. Download the latest template source from ThemeForest.
  2. Extract zip file. Extracted zip file will have 3 folders.
    • documentation
    • html
    • scss
  3. Download and install Node.js from nodejs.org/en/download/
  4. Start command prompt window or terminal and change directory to
npm install –global gulp-cli
cd /YourTemplateDirectory
npm install
gulp watch

So you will run Gulp to make SCSS developments. Using Gulp to develop SCSS is not compulsory, you can choose another method. https://sass-lang.com/install

Welcome Area

To change the photo in the Welcome area, you need to add the full path to your photo below, in the home.html file.

<div class="header-bg">
     <img src="assets/images/header-bg.svg" class="img-fluid" alt="">
</div>

Home Parallax

To change the parallax photo on the home page, you need to change the imageSrc line in the assets/js/custom.js file.

// Home Parallax
if($('.parallax').length){
     $('.parallax').parallax({
          imageSrc: 'assets/images/photos/parallax.jpg',
          zIndex: '1'
     });
}

// Home Parallax Counter
if($('.parallax-counter').length){
     $('.parallax-counter').parallax({
          imageSrc: 'assets/images/photos/parallax-counter.jpg',
          zIndex: '1'
     });
}

Pages Cover Photos

Our template uses a cover photo with a parallax effect for each page.

If you want to use different photos for each page cover, you need to change the following code on the related page.

<div class="cover" data-image="assets/images/photos/parallax-counter.jpg">

Contact Google Maps

When designing our template we chose to use Google Maps on the contact page.

There is a simple way to show your own company address on the map.

First you need to know your address's longitude and latitude number. You can go to Google Maps, find your address on the map and right-click to get the information.

Then change the corresponding lines in the contact.html file.

<div class="map-canvas"
     data-zoom="12"
     data-lat="-37.811085"
     data-lng="144.955631"
     data-type="roadmap"
     data-hue="#ffc400"
     data-title="Chilo"
     data-icon-path="assets/images/marker.png"
     data-content="455 West Orchard Street<br>Kings Mountain, NC 28086<br><br><a href='mailto:support@yourbrand.com'>mailto:support@yourbrand.com</a>">
</div>

You need to create an API key via https://console.developers.google.com/apis/ in order for the map to work.

You need to add the API key you created at the bottom of the contact.html file.

<script src="http://maps.google.com/maps/api/js?key=YourApiKey"></script>

Credits