1. Package Download

Package from Bootstrapbay

With your purchase of this theme, the first step is to download the package from Bootstrapbay.. Move your mouse over your Bootstrapbay Login name in the right top corner and click Download. You will see the number of items purchased, along with the package’s content, as shown in the following diagrams.

Next, click Download > Main File(s) next to Amora and save the package on your computer.

The download includes documentation, license, and the Amora files folder.. Unpack the entire package after downloading.

2. Installation

2.1 Installation

Unzip the downloaded package and open the /HTML folder to find all the template files. You will need to upload these files to your hosting web server using FTP in order to use it on your website.

Below is the folder structure and needs to be uploaded to your website root directory or your localhost server:

  • HTML/assets - All JS and CSS folder
  • HTML/css - Stylesheets folder
  • HTML/fonts – Icon fonts folder
  • HTML/images - Images folder
  • HTML/js - Javacripts folder
  • HTML/email_apis – All Email Apis
  • HTML/video – Video

Unzip the downloaded package and open the /HTML folder to find all the template files. You will need to upload these files to your hosting web server using FTP in order to use it on your website.

3. Google Fonts Settings

3.1 Logo

Amora uses 2 fonts: Open Sans and Montserrat from the Google Fonts Library. You can change the fonts from /css/style.css file in below lines. If you want to use self hosted fonts other than Google fonts then here is an example of self hosted fonts. In this case you need to remove below lines and change font names in /css/style.css file as per your fonts used.



4. Logo & Favicon Settings

4.1 Logo

Logo container can be found in the nav container (.navbar).



4.2 Favicon

A favicon is a small icon that identifies a website in a web browser. Most browsers display a website's favicon in the left side of the address bar, next to the URL. Some browsers may also display the favicon in the browser tab, next to the page title.



5. Header

Header is an important theme feature, and is what users see first. There are 6 different header styles with sticky header, top bar header, center logo header, center navigation, transparent header, header left and etc.

5.1 Header layout

6. Slider

We are using OWL Slider, Bx Slider, Kwicks Slider and Boostrap Slider for Kento templates creations.

6.1 Slider

We are using OWL Slider to create of Main Slider or Blog Slider or Testimonials and other element creation which we use slider.

For Owl Slider Documentations

If you want to change slider config as per requirement, you need to change js/main.js file.

6.2 Slider

We are using Bx Slider to create of Project Details Page Slider.

For Bx Slider Documentations

If you want to change slider config as per requirement, you need to change js/main.js file.

6.3 Slider

We are using Boostrap Slider to create of Main Slider and other element creation which we use slider.

7. Tab

You can add as many tabs as you need. Just changing or add the Title and Content for each tab. You can activate a tab navigation without writing any JavaScript by simply specifying data-toggle="tab" on an element. Adding the nav and nav-tabs classes to the tab ul will apply the Bootstrap tab styling.

7.1 Tab



Tab Demo :- Creative Business

8. Counter And CountDown Timer

You can change number animation without change javascript. You just need to change in html for counter and countdown timer.

8.1 Counter

Counter is a jQuery plugin that animates a number from zero



CountDown Demo :- Creative Business

8.2 CountDown Timer

You just need to change data-enddate attribute value to set your launch date in yyyy/mm/dd format and time in 24 hours format like hh:mm:ss



CountDown Demo :- Coming Soon

9. Animation

Animation is a bunch of cool, fun, and cross-browser animations for you to use in your projects.

9.1 Animation

Animation is uses for display to element different ways when page scroll.You can also set duration of animate element.Below mention classes for animate elements.

  • bounce
  • flash
  • pulse
  • rubberBand
  • shake
  • swing
  • tada
  • wobble
  • bounceIn
  • bounceInDown
  • bounceInLeft
  • bounceInRight
  • bounceInUp
  • bounceOut
  • bounceOutDown
  • bounceOutLeft
  • bounceOutRight
  • bounceOutUp
  • fadeIn
  • fadeInDown
  • fadeInDownBig
  • fadeInLeft
  • fadeInLeftBig
  • fadeInRight
  • fadeInRightBig
  • fadeInUp
  • fadeInUpBig
  • fadeOut
  • fadeOutDown
  • fadeOutDownBig
  • fadeOutLeft
  • fadeOutLeftBig
  • fadeOutRight
  • fadeOutRightBig
  • fadeOutUp
  • fadeOutUpBig
  • flip
  • flipInX
  • flipInY
  • flipOutX
  • flipOutY
  • lightSpeedIn
  • lightSpeedOut
  • rotateIn
  • rotateInDownLeft
  • rotateInDownRight
  • rotateInUpLeft
  • rotateInUpRight
  • rotateOut
  • rotateOutDownLeft
  • rotateOutDownRight
  • rotateOutUpLeft
  • rotateOutUpRight
  • hinge
  • rollIn
  • rollOut
  • zoomIn
  • zoomInDown
  • zoomInLeft
  • zoomInRight
  • zoomInUp
  • zoomOut
  • zoomOutDown
  • zoomOutLeft
  • zoomOutRight
  • zoomOutUp
Animation Demo :- All

9.2 Parallax

Parallax scrolling is a scrolling technique used computer graphics in which background images move more slowly than images in the foreground, creating the illusion of depth and immersion.



Parallax Demo :- Business Classic
!important:- You can add different classes like parallax1, parallax2, parallax3, parallax4, parallax5, parallax6, parallax7, parallax8, parallax9, parallax10, parallax11 and parallax12 as per requirements.
For Parallax effect change,you need to change in js/main.js file.

10. Portfolio

Kento includes different types of portfolio layout as mentioned below to setup your own portfolio as per your requirement.

10.1 Portfolio Grid



Portfolio Grid Demo :- Portfolio Grid

10.2 Portfolio Grid With Filter Navigation



Portfolio Grid With Filter Navigation Demo :- Portfolio Grid With Filter Navigation

10.3 Portfolio With Masonary



Portfolio With Masonary Demo :- Portfolio With Masonary

11. API Integration & Forms Settings

Amora include 7 various type of api integration.It's likes as Active Campaign, Campaign Monitor, Freshmail,Get Response, Mailchimp, Mailerlite, Sendloop and Custom Email.

Amora also gives you information how to add new field in forms and also API.

11.1 API Integration information

1. Active Campaign

Integrate Active Campaign API service in signup or newsletter form, please following information.

  • Get your API URL – Login to http://www.activecampaign.com/ and Go to My Settings > Developers.
  • Get your API Key - Login to http://www.activecampaign.com/ and Go to My Settings > Developers.
  • Enter List ID of your created list in Active Campaign.
Custom Email Integrate Custom Email in signup or newsletter form, please following information. Email - The email which will receive the leads. Subject - The subject of the email. 2. Campagin Monitor

Integrate Campagin Monitor API service in signup or newsletter form, please following information.

  • Get your API Key - YOUR-USERNAME.createsend.com/admin/account/
  • Get your List ID - www.campaignmonitor.com/api/getting-started/#listid
3.Get Response

Integrate GetResponse API service in signup or newsletter form, please following information.

  • Get your API Key - app.getresponse.com/my_api_key.html
  • Get your Campaign name - app.getresponse.com/campaign_list.html
4. Mailchimp

Integrate Mailchimp API service in signup or newsletter form, please following information.

  • Get your API Key - http://admin.mailchimp.com/account/api
  • Get your List Unique ID - http://admin.mailchimp.com/lists/
!Important: Mailchimp list default fields are EMAIL, COMMENT and PHONE NUMBER but If you have any other fields in the form you are using then you will need to do some code changes in this file: /email_apis/api_mailchimp/Mailchimp.php and this function: krish_mailchimp_add_subscriber in your package to have your additional form fields data transferred properly to your Mailchimp list.

5. MailerLite

Integrate MailerLite API service in signup or newsletter form, please following information.

  • Get your API Key - https://app.mailerlite.com/integrations/api/
  • Get your Group ID - https://app.mailerlite.com/integrations/api/
6. FreshMail

Integrate FreshMail API service in signup or newsletter form, please following information.

  • Get your API Key - https://app.freshmail.com/en/settings/integration/
  • Get your API Secret - https://app.freshmail.com/en/settings/integration/
  • Get your List ID - list -> Parameters
7. Sendloop

Integrate Sendloop API service in signup or newsletter form, please following information.

  • Get your API Key - http://your-code.sendloop.com/engage/api
  • Get your Sub Domain -http://your-code.sendloop.com/
  • Get your List ID - http://your-code.sendloop.com/lists (Click On List which one you want to integrate and take last number of url.)
8. Custom Email

Integrate Custom Email in signup or newsletter form, please following information.

  • Email - The email which will receive the leads.
  • From Email - The email which is use for server email(noreply@your-domain.com).
  • Subject - The subject of the email.

11.1 API Integration in Predefined Demo

If you are want to integrate the Form API in predefined demo then please follow below steps.

  • Open the folder email_apis.
  • Open the file all-api-config.php.
  • In line number (5) input the email api provider that you want to use as following:
  • api_active for Active Campaign.
  • api_custom for Custom Email.
  • api_campain for Campaign Monitor.
  • api_response for GetResponse.
  • api_mailchimp for Mailchimp.
  • api_mailerlite for MailerLite.
  • api_freshmail for FreshMail.
  • api_sendloop for Sendloop.

Fill API Details On file all-api-config.php as per which API Service you want to integrate.

!Important: Your signup or newslette form will not work unless you have your files running on a hosting server with PHP / JS. When you have your files ready on your hosting server, you need to edit the settings to make the email function work.


12.1 Footer



Footer Demo :- Classic Corporate