Installation

Follow the steps below to get started with your site template:

1. Open the Package/HTML folder to find all the templates files.
2. You will need to Upload these files to your Web Server using FTP in order to use it on your Website.
3. Make sure you upload the required files/folders listed below:

• HTML/css – Extra Stylesheets Folder
• HTML/images – Images Folder
• HTML/js – Javascripts Folder
• HTML/webfonts – Fonts Folder
• HTML/style.css – Main Stylesheet File
• HTML/index.html – Index File/Homepage

---

---

---

Page Options

The main features you need to set up before start editing your Site Template:

---

Google Analytics

On each page inside head tag is located the google analytics syntax. You need to replace code_here with your tracking code.

Code Example:

If you don't intend to use it, do not delete the syntax because the Google Analytics code is integrated with our Core Plugin. Removing it will result an error into javascript.

---

---

Changing Fonts

You can start using the Google Fonts API by adding a stylesheet link to request the desired web font(s) inside each page head tag.

Code Example:

Style an element with the requested web font, either in a stylesheet:

Code Example:

If you plan to use a Self-Hosted font, use the following code possibly at the top of the style.css file:

You need to place your fonts files inside fonts folder located int the template ROOT folder.

---

---

Ajax Page Load

This is the Core Plugin of the template. It can allows you to have flawless page transitions with spectacular effects. The structure of a link which call the ajax page load plugin should have this structure:

Code Example:

If you want to disable this feature and load page normally, add on each page disable-ajaxload class to body.

Code Example:

---

---

Magic Mouse Cursor

A circle that follows the mouse cursor and have different animations hovering links or elements inside the template. You can set the color of it by changing the color code data-primary-color="#ff0000" at this data attribute.

It can be disable it by adding on each page disable-cursor class to body.

Code Example:

The HTML structure should remain on each page because it is part of Core Plugin otherwise you'll get a JS error.

---

---

Smooth Scroll

Smooth Scrollbar is a JavaScript Plugin that allows you have high perfermance scrollbars cross browsers. To enable it you need to add on each page smooth-scroll class to body.

Code Example:

---

---

Page Color Scheme

All the options need to be edited to the div below:

Code Example:

You can set individual background color on each page.

Options	Description
data-bgcolor="#fff"	Set your page color at this attribute
dark-content	Add this class if your background color is lighter. This class will make your logo, text and page elements darker
light-content	Add this class if your background color is darker. This class will make your logo, text and page elements lighter

---

---

Google Map API

To enable map on your website you need to create a Google Maps API key. Once you have created it, you need to enable the Javascript Maps API and Geocoding API Paste the key in all your HTML files

Code Example:

In the above example, replace YOUR_API_KEY with your API key.

---

---

Custom JS Code

We have include a CustomFunction() in the js/scripts.js file if you need to add new javascript code. This will be initialized on page load and also on Ajax Page Load.

Code Example:

Check your browser console for code validation.