Otto

Premium HTML5 Template - User Guide


Page 1 Otto - Premium template by Designova

A premium product from Designova. Other company and product names mentioned
herein are trademarks of their respective
companies. Mention of third-party products is for
Copyright © 2015 ArrowsMedia Holdings IN. informational purposes only and constitutes neither
All rights reserved. Designova is a featured venture an endorsement nor a recommendation.
of ArrowsMedia Holdings IN. ArrowsMedia Holdings assumes no responsibility
with regard to the performance or use of these
Under the copyright laws, this manual may not be products.
copied, in whole or in part, without the written
consent of ArrowsMedia Holdings. Your rights to the
software are governed by the accompanying
software license agreement.

The Designova brand and logo is a trademark of

ArrowsMedia Holdings IN., registered in Kerala.

Use of the Designova logo for commercial

purposes without the prior written consent of
ArrowsMedia Holdings may constitute trademark
infringement and unfair competition in violation of
international and state laws.

Every effort has been made to ensure that the

information in this manual is accurate. ArrowsMedia
is not responsible for printing or clerical errors.

Designova
ArrowsMedia.
Thrissur 22
Kerala, IN

[email protected]
www.designova.net

Page 2 Otto - Premium template by Designova

TABLE OF CONTENTS

1. Welcome 4
2. IMPORTANT: (Read this before you edit anything) 5
3. Files & Directory Structure 8
4. Basic Steps for Building Your Website 10
5. Bootstrap 3 Framework 12
6. Editing Colors & Fonts (via LESS) 16
7. Replacing Placeholder Images 20
8. Setting Up Navigations 22
9. Setting Up Featured Modules 24
10. Setting Up Parallax Images (Optional Only) 31
11. Free Support 34
12. Future Updates 35
13. Rating & Reviews 36
14. Vote of Thanks 37

Page 3 Otto - Premium template by Designova

1. Welcome
Greetings from Designova.
Thank you for purchasing our product.
We hope you have enjoyed the template’s live preview and you want to create such a
beautiful website. Now, this guide is everything needed for you to setup your perfect
website. Please follow each instruction carefully, even single a line of code can do
wonders (in all senses) so please don’t miss anything on this user guide.

If you love our work please rate it on themeforest.

It will NOT take even a couple of minutes for you to rate our template, but it will be a
great motivation for our developers. If you don’t know how to rate items on themeforest,
please click here to see a demonstration: http://goo.gl/iWbKi3

Please be aware of the legal validity of license type you have

purchased.
We appreciate your purchase and we expect you have understood the different types of
license and usage permissions.

FYI, a Regular License should be used only for a single application (single website /
single client project) on which your end-users are not charged for.

If your end-users are being charged for the usage of your website (built with this
template), then you have to buy Extended License from themeforest.

For complete & precise information about licenses, please see: http://themeforest.net/
licenses

Page 4 Otto - Premium template by Designova

2. IMPORTANT: (Read this before
you edit anything)
This template is an advanced HTML5 template powered by some
modern features such as CSS3, LESS and AJAX to render the styles,
colors, fonts and some additional visual enhancements. LESS and AJAX
will work only from server side, means you have to upload all files
to a real web hosting server (or a LocalHost system) in
order to view proper colours and fonts rendering of this
template. If you just test them from your local computer you will not be
able to see proper colours or fonts, but this is not at all any errors.
Please upload the template to a web server and edit it there.

1. Why should I read this user guide?

Having 40+ pages, our developers have spent some great time on preparing this user
guide. We are sure that we have covered all the essential instructions needed to setup a
nice website as you see in our template’s live preview. We expect you to read this user
guide before you open any support request (if you ask about things already present
in this guide, you will be gently asked to read this again).

2. If I need help, will you provide free support?

Yes, we have a dedicated support system http://designova.net/support.html where we
offer free support even though providing support is not mandatory for themeforest
authors.

Our support is applicable only for issues and bugs within our product live previews (non-
edited version of the template). We do NOT provide free customisation services in the
scope of free support. If you request any free customisation via support system, such
tickets will not be answered.

3. What kind of support are you providing?

We offer free support for our products where we can help you fix issues within our
code (if any) and assist you on template setup (in some cases if the task is minimal).

Page 5 Otto - Premium template by Designova

Please note support is not applicable for third party jQuery plugins and GPL code
components (because they are not created or maintained by us). Also support is not
applicable to issues or bugs happening on your edited version of the template. We are
not offering any debugging service on your edited websites.

4. When can I expect a response from you guys?

Our team will be online during 09.30 to 18.30 on Monday – Friday (GMT + 5.30, Kerala).
For support request we usually make a response within 24 to 48 hours. Due to the
complex nature of some queries, responses can’t be guaranteed a specific turn-around
time, but we value each user and we will surely get back to you. In case if we experience
heavy load of support tickets we will announce the status on Twitter.

5. If I need to customise this template will you offer it?

To be frank, we are unable to provide free customisation services on our products. If you
have great passion and considerable budget please open the request as a premium
project, please email to: [email protected] If our developers are free we will get
back to you via email.

6. How can I know about future updates and bug fixes?

We release updates regularly and we notify our users via Tweets as well as Email
Newsletters (we do hate spam). We recommend you to subscribe to our update
channels:

Get updates via Email: http://eepurl.com/xDO_v


Get updates via Twitter: https://twitter.com/designovastudio

7. Do you offer refund / exchange for my purchased item?

We are not permitted to handle sales or marketing of our products as Envato solely
handles it through themeforest websites (we are exclusive author having active contract
with them). If you are looking for a refund or exchange on any of your purchased items
from themeforest, please contact Envato support. Their decision will be final on all
cases.

8. I am not sure about the License type I am having, what should I do?

Page 6 Otto - Premium template by Designova

We appreciate your purchase and we expect you have understood the different types of
license and usage permissions.

FYI, a Regular License should be used only for a single application (single website /
single client project) on which your end-users are not charged for.

If your end-users are being charged for the usage of your website (built with this
template), then you have to buy Extended License from themeforest.

For complete & precise information about licenses, please see: http://themeforest.net/
licenses

Page 7 Otto - Premium template by Designova

3. Files & Directory Structure
Once you download the ZIP file from themeforest and you extract them to a folder, you
will find a directory with a name such as ‘site’. This will be the root directory containing
your web template and associated files & resources. The contents of this directory may
look like this:

Organising the resources

The template consists of various directories which can contain media and elements used
in the website.

Page 8 Otto - Premium template by Designova

Directory Purpose Note
bootstrap Contains framework used Do not rename or move.
to power this template Modify the contents only if
which is Bootstrap 3 you are updating Bootstrap
to new version

fonts You can keep your custom Do not rename or move.

fonts / external font files Modify the contents only if
(uses Font- Face) you need to add external
fonts via font-face

images Contains all the images and Do not rename or move.

graphical elements used in Feel free to modify the files
this site as needed.
javascripts Contains executable scripts Do not rename or move.
(JS) used in this site Modify the contents only if
you are familiar of JS

mail Contains PHP libraries Do not rename or move.

used for contact form email
sending feature
stylesheets Contains CSS files used to Do not rename or move.
define visual appearance of Modify the contents as you
this site are familiar with CSS rule
editing.
twitter Contains PHP libraries Do not rename, move or
used to activate dynamic edit the contents without
Twitter feed. proper understanding.
less Contains LESS files to Do not rename or move this
make easy customisation folder.
and color management

Page 9 Otto - Premium template by Designova

4. Basic Steps for Building Your
Website
In order to make your website functional with this template you have to edit the web
pages, add your own content and media, upload all these files to a web server

Step 1: Basic System Setup (IMPORTANT)

FOR BEGINNERS / DUMMIES: If you are not familiar with AJAX oriented web
development, please do not get panic. Simply use FireFox web browser for all your
development + testing purpose. You can download it free from https://www.mozilla.org/
en-US/ FireFox can run AJAX & LESS even without a localhost, that is it can perfectly
run the template from your hard disk. Problem solved.

FOR ADVANCED USERS: If you are an experienced user, before you can start editing /
customising this template, we recommend you setup a LocalHost system so that AJAX &
LESS will work properly in your development system. If you are using MacOSX please
install http://www.mamp.info/en/ If you are a Windows user please install http://
www.wampserver.com/en/ More information about these tools can be found in their
websites.

Step 2: Editing template web pages

The template consists of HTML5 files that can form a collection of web pages linked in
between which is called as a Site. The site is initially loaded from a main web page
(index.html) and linked to other pages or sections.

In order to edit a web page you have to use any standard code editor where you should
be familiar of editing general HTML5 markup. We recommend SublimeText http://
www.sublimetext.com/ as the best code editor as it is the first choice among our
developers.

Once you opened the editor, you can view and edit HTML5 files, for example the root
HTML5 file:
[ROOT]/INDEX01.HTML
You can now add / remove contents by modifying the markup inside this HTML5
document (this is completely explained from chapter 4 onwards).

Page 10 Otto - Premium template by Designova

Please note, you have to keep the home page of your site renamed as INDEX.HTML
even if it may be named differently in the template directory structure.

Step 3: Editing template style (look and feel)

The template consists of CSS files along with the associated resources such images
linked within. You can use the same code editor for editing the CSS rules. Don’t worry, if
you are not planning to change the look and feel of this template you don’t have to edit
any CSS. But in other case, you must be familiar of advanced CSS rules in order to
modify this template’s look and feel. Similarly, you have to know JS in order to control
the interactions defined in this template (JS knowledge is not needed for basic users to
edit the site content).

Step 4: Finalising the website

Once everything is edited and content is added you may combine multiple CSS files as
well as multiple JS files to separate files. This will increase overall loading response of
the website. You can get more info about this online.

Step 5: Publishing the website online.

The final step is to upload all files to web server (we mean all files as explained in
previous chapter). The server is actually a web-hosting provider, which can store your
files, and anyone can access the site across the globe.

If you don’t have a web server space, it is time to get one. That means you need a
working web hosting account to be purchased from any of the hosting providers. If you
don’t have it yet, we recommend the professional web hosting from MediaTemple
http://goo.gl/Gl9rm1 as it is the best option from our experience - we use it for
powering our templates live preview (perfectly as you see). We can guarantee the
equivalent performance it if you are using the same kind of server.

An ideal configuration of web server needed for this website will be:

1. Should be able to run PHP. (Most web hosting has it)

2. Should permit PHP email sending functions.

3. Should support AJAX. (All web hosting has it if they are able to run PHP)

Page 11 Otto - Premium template by Designova

5. Bootstrap 3 Framework
This web template is completely built with Bootstrap 3 responsive (Mobile First)
framework, which is the best front-end development framework available at present. It is
very easy to edit the layout as well as for making any advanced customisation. Kindly
note, you have to familiarise Bootstrap’s native arrangements (it is easy) and short
codes before you proceed to advanced editing of markup. The default Bootstrap files are
kept inside:
[ROOT]/BOOTSTRAP/
This directory contains CSS, JS, FONTS etc.

Bootstrap’s grid system

Bootstrap includes a responsive, mobile first fluid grid system that appropriately scales
up to 12 columns as the device or viewport size increases. It includes Grid Options with
predefined classes for easy layout options.

Page 12 Otto - Premium template by Designova



Page 13 Otto - Premium template by Designova

Setting up the Bootstrap 3 grid via HTML

Page 14 Otto - Premium template by Designova

Bootstrap 3 for Offsetting columns



More Info About Bootstrap:

We are having page limitation to explain everything about Bootstrap here. So for more
information we refer to original documentation for Bootstrap, found here:

http://getbootstrap.com/

Upgrading Bootstrap on Future:

As Web is always changing day by day, we would like to keep our themes expandable
and adaptable to innovations. We have kept all assets and files related to Bootstrap
framework on a separate folder called ASSETS found on the following location:
[ROOT FOLDER]/BOOTSTRAP
Please replace the following files contained in this ‘ASSETS’ folder with your new files
coming from Bootstrap’s newly downloaded ZIP pack or the pack generated by
customisation options at Bootstrap website:

http://getbootstrap.com/customize/

Page 15 Otto - Premium template by Designova

6. Editing Colors & Fonts (via
LESS)
We use LESS technology to implement and modify the colors used in this template,
LESS gives possibility to add Unlimited Colors to this template along with in-depth colour
scheme setup option.

PLEASE READ THIS FIRST:

In order to work with LESS, it requires you to upload your edited site to a web server
(or) you have to upload the site to a local host (for example, MAMP or WAMP) setup
in your system order to work properly. Instead if you check it by just opening static
HTML files in local browser you may not be able to see colors and background colors.
This is not a bug of template. It is your testing method which is wrong, not the template.

This template features LESS for changing colors and fonts schemes with a single line of
css. For example, please see the following file:
[ROOT]/LESS/COLOR.LESS

In this file you can see the following 4 Color

controllers along with 3 Grey- scale controllers
(shown here). These values will hold color schemes
for entire layout. If you like to create a new color
scheme simply change to your preferred color value
or font name (we mean HEX values for colors and
font family names in standard CSS rules) to any
Controller variable. After editing it you have to save the file. Please make sure that you
have active LESS files and JS engine by loading it via markup for initialisation on HEAD
tag of HTML5 page, example as shown below:

For more info about LESS technology, please see original documentation: http://
lesscss.org/

Page 16 Otto - Premium template by Designova

Instructions for setting colors with LESS stylesheets:
Open the following file:
[ROOT]/LESS/COLOR.LESS
And set your color value inside Color
Controller variable, for example:

Instructions for setting font styles with LESS

stylesheets:
Open the following file:
[ROOT]/LESS/FONTS.LESS
And set your font preference inside
Fonts Controller variable, for example:

FOR BETTER PERFORMANCE, ALWAYS COMPILE LESS

TO CSS:
Most modern browsers and servers can handle LESS rendering perfectly. But there may
be some exceptions. So we recommend you to use LESS on development environment
only. This means, you can use LESS to edit colors or fonts in this website and once all
editing is finished you have to compile LESS rules to CSS rules and add it to website
stylesheet. The procedure is explained as below:

Step 1:

Page 17 Otto - Premium template by Designova

Once your LESS file is all set with your preferred modifications or additions, you should
save the file on your system. Now Go to any online LESS compiler tools such as http://
winless.org/online-less-compiler

Step 2:

You can copy all rules from your LESS files (such as COLOR.LESS and FONT.LESS)
and paste these LESS rules in the compiler window. Then generate the CSS equivalent
rules using the compiler. Copy the CSS rules and paste it inside the following CSS file:

[ROOT]/STYLESHEETS/MAIN.CSS
(you MUST paste them at the end of file, that is after all rules present inside this file.
Please do not remove any existing rules.)

Step 3:

Now you can deactivate all LESS related files in your web pages simply by commenting
those lines in HTML markup. The site will load from CSS instead of LESS.

In short, we can summarise the whole procedure as below:

1. Locate your LESS files (in LESS directory).

2. Edit all colors and fonts as you like.

3. After all editing, copy entire LESS rules from the files.

4. Paste these rules inside http://winless.org/online-less-compiler LHS area for LESS

insertion

5. Compile winless and you get CSS equivalent of LESS rules.

6. Copy the generated CSS rules

7. Now paste them within MAIN.CSS file (you MUST paste them at the end of file, that
is after all rules present inside this file. Please do not remove any existing rules.)

8. Now you can deactivate LESS functionality, by simply removing the codes related to
LESS. You can either remove the code manually or just comment the code.

9. Now your site will be quickly loading CSS instead of generating LESS on your server.

Instructions for setting Google Web Fonts:

This template is powered by Google Web Fonts library to execute fonts rendering. So,
in order to setup font families you have to choose it from Google Web Fonts. You can
learn more about this from online tutorial:

https://developers.google.com/fonts/docs/getting_started

Page 18 Otto - Premium template by Designova

Page 19 Otto - Premium template by Designova
7. Replacing Placeholder Images
Once you download the template from themeforest you may notice placeholder images
are included in the pack. This is because live preview images are properties of their
owners and photographers, we are unable to redistribute them. We have provided
placeholder images instead of such stock images.

You can simply replace any placholder image with your own images having similar
dimensions and file format. Also keep them in the same directory structure as specified
in the markup or CSS rules for such images.

PLEASE NOTE:
Images are usually supplied via HTML markup itself, for example <IMG> tag. So please
locate such images in source markup of HTML files. BG Images are usually supplied via
CSS file, in this template we have arranged the BG images in the following CSS file:
[ROOT]/STYLESHEETS/MAIN-BG.CSS

But in some cases the images will be supplied by JS files, for example in Fullscreen BG
Slideshows. So please read the documentation information related to each module to
locate the actual images supplied via their code.

Retina Ready (High Resolution) Images:

The template is High Resolution Ready means it features a script known as Retina.JS
which makes it easy to serve high-resolution images to devices with retina displays.
When your users load a page, retina.js checks each image on the page to see if there is
a high-resolution version of that image on your server. If a high-resolution variant exists,
the script will swap in that image in-place. The script assumes you use Apple's
prescribed high-resolution modifier (@2x) to denote high-resolution image variants on
your server. For example, if you have an image on your page that looks like this:

<img src="/images/my_image.png" />

The script will check your server to see if an alternative image exists at this path:

"/images/[email protected]"

Page 20 Otto - Premium template by Designova

You have to supply high definition (@2x variation) images which should have Double
Width and Double Height of your original image dimensions. Once such @2x images are
located, the plugin will render it.

Important, please note:

If the markup has “data-no-retina” attribute associated with any IMG tag found in this
template, you should remove this “data-no-retina” to enable Retina rendering for that
element.


Page 21 Otto - Premium template by Designova

8. Setting Up Navigations
IMPORTANT NOTE ABOUT AJAX PAGE LOADING:

This template is powered by AJAX which means, each page is loaded seamlessly to the layout
regardless of browser loading of each page manually. There is a special CLASS name that
controls this seamless page loading. It is ‘.AJAX-LINK’ as shown below in highlighted code:

This class should be attached to any link in order to load that particular page seamlessly via
AJAX. If you don’t need to activate this kind of seamless AJAX page loading, simply
remove this ‘AJAX-LINK’ class from that particular link and it will open the target web page in
traditional way of web browsing.

This web template is completely editable and configurable according to your needs. Let’s
start by the navigation first. This template features 2 types of navigations.

Setting Up The Mobile Navigation (Only for Mobile and

Tablets)

Page 22 Otto - Premium template by Designova

You can read more info about setting up this mobile menu via original documentation of
plugin, found here: http://adnantopal.github.io/slimmenu/

Setting Up Standard Navigation (Only for Non-mobiles)

This template features also a standard navigation menu which consists MAIN menu as
well as SUB MENU.

Page 23 Otto - Premium template by Designova

Setting Up the MAIN MENU:

Here the DATA-SUB-NAV-TARGET holds the index value of NAME OF MENU ITEM. For
example if this value is “ABOUT”, when user clicks on it a SUB MENU ITEM with
associated class ‘sub-nav-about’ (please see screenshot below) will be opened which is
targeting ABOUT SUB MENU section to be revealed as sub navigation. Similarly, if the
value is ’WORKS’ the sub menu with class ‘sub-nav-works’ will be opened which means
for WORKS SUB MENU section will be displayed.

Setting Up the SUB MENU:

9. Setting Up Featured Modules

This template features some interactive components powered by jQuery and CSS3. If
you have fair understanding of these technologies (advanced users) you can modify the
modules to any levels as you like.

Page 24 Otto - Premium template by Designova

1. Touch Carousel
This template features full screen carousels on home page which is powered by JS
Plugin: http://owlgraphic.com/owlcarousel/

The BG images are actually set via CSS. In order to change the BG images please
check relevant sections defined via CSS inside:

[ROOT]/STYLESHEETS/MAIN-BG.CSS

Page 25 Otto - Premium template by Designova

For advanced editing of this section we recommend you to follow the instructions found
in original plugin user guide here: http://www.owlcarousel.owlgraphic.com/

2. Fullscreen Slideshows
This template features the full screen BG image slideshow with 2 modes:

A. With Captions, Controllers and Count (INDEX02.HTML - demo variant)

B. Without Captions or Controllers (INDEX04.HTML - demo variant)

Both of these demo variants are based on a single plugin, a highly extended version of
Backstretch.JS. In order to setup images, please see the HTML markup (line 231
onwards):

Here the highlighted area simply contains your images in each slide. Just supply your
image path there and plugin will handle everything else.

We have largely customised the original plugin to build this slideshow modules, anyway
if you like to learn more about this plugin please see: http://srobbin.com/jquery-plugins/
backstretch/

3. Fullscreen BG Video
This template also features full screen BG video in the intro / home area. You can set
both Youtube or Vimeo video URL.

ADDING VIMEO VIDEO:

Open the file:

[ROOT]/JAVASCRIPTS/CUSTOM/MAIN.JS

Page 26 Otto - Premium template by Designova

And find the following line of code:

There you can simply supply the Video ID (vimeo ID or URL) of video, it will be played
easily, for example:

ADDING YOUTUBE VIDEO:

You can simply supply the URL (youtube URL OR id of the video) of video, it will be
played once you upload the site to a web server:

IMPORTANT NOTE:

Youtube video will be played only from live web server (not from Local Host). So please
upload your site to a web server and test it from online. The video will work.

Page 27 Otto - Premium template by Designova

If you need more options such as audio controls, looping etc. please refer to original

plugin user guide: https://github.com/okfocus/okvideo

4. WORKS: Isotope Masonry Layout, Filterable

Portfolio & Integrated Lightbox
You can display all of your works via this filter portfolio modules that can contain any
number of thumbnails. The filters are shown below:

The DATA-FILTER attribute contains Filter Category Name. You have to specify these
category names as class in related Portfolio Thumbnail Blocks such as shown in the
highlighted area:

You can specify multiple categories in any thumbnail, the filtering will happen according
to that.

Page 28 Otto - Premium template by Designova

In order to learn more about the Filtering and additional options please see original
plugin documentation: http://isotope.metafizzy.co/

LIGHTBOX IMAGES:

The lightbox in the featured thumb carousel is a simple plugin, Venobox. You can easily
supply a big image to any of the thumbnails and the plugin will open this as a Lightbox
(full size image) on click. In order to supply images please edit the following highlighted
code:

The attribute data-gall="portfolio-gallery" should be attached on each instance if you

need to show all images in this lightbox as a slider, say a gallery kind of appearance.

LIGHTBOX VIDEO:

You can also display a Video in this lightbox region. This plugin is same Venobox as we
mentioned in previous sections. In order to set the video please see the markup and
modify the highlighted area:

More options can be found on original plugin site: http://lab.veno.it/venobox/

5. Setting Up Google Map

The template features a Gray Scale toned Google Map. You can embed the map as
follows:

Page 29 Otto - Premium template by Designova

1. Visit https://www.google.com/maps/ and ensure that the map or Street View image
you'd like to embed appears in the current map display.

2. Click the settings gear icon in the bottom right.

3. Click Share and embed map.

4. In the box that appears, make sure the Embed map tab is selected.

5. Choose the embed size you want, then copy the HTML

6. Now paste the code into the highlighted area shown below:

Keep in mind that traffic information and some other Maps features may not be available
in the embedded map.

For more info about Google Map setup: https://support.google.com/maps/answer/

3544418?hl=en

7. CONTACT: Contact Form and Email Sending

You can use this contact form send emails, the Email Sending feature is already
implemented using PHP along with client side Form Validations using jQuery.

The template is featuring a fully working contact form with PHP mail sending ready. We
have kept everything ready, you have to only provide your own email id instead of the
predefined demo email id. This can be done by simply modifying the email id, as shown
in the SENDCONTACT.PHP file, located in root directory.
[ROOT]/SENDCONTACT.PHP

Setting Up Email Credentials

Open this file via a code editor / text editor and now go to the code segment: Line 4 to 6.

Page 30 Otto - Premium template by Designova

Please see the screenshot:

The value “[email protected]” should be replaced with your own email so that the
emails will be sending to this email id. The value inside ‘subject’ should be changed to
something meaningful since this will be displayed as the subject of the email message
send via the contact form. That’s all for basic setup.

All PHP mail sending library files and server scripts are stored in MAIL folder in the root.
For advanced users who need in-depth customizations, the PHP script can be modified
appropriately. The PHP file is:
[ROOT]/SENDCONTACT.PHP

10. Setting Up Parallax Images

(Optional Only)
This template features some parallax layers across various sections in multiple web
pages. The parallax functionality is implemented via JS but you don’t have to worry
about any of the complex code editing.

In order to set parallax action on any region (for example, DIV) you have to simply do the
following 2 steps:

Step 1: Set a BG image for the region

In this step, you simply set a background image for the layer via CSS. For example,

here the class

“process” is
actually used for
setting a BG
Image via CSS. In

Page 31 Otto - Premium template by Designova

order to set this image just open the following CSS file:
[ROOT]/STYLESHEETS/MAIN-BG.CSS
and

see
the highlighted area which relates to the above mentioned class name.

Step 2: Activate Parallax action for the region

Activating parallax action to the region is very simple, just add a single class name
“parallax” (or) “parallax-layer" to the region, and the parallax action will be activated for
that particular region. For example:

We use NBW Parallax JS plugin for rendering parallax action in this template. Original
plugin website: http://www.ianlunn.co.uk/plugins/jquery-parallax/

If you want to further modify / customise the parallax engine and additional options of
parallax function you have to manually modify the Parallax Initialization JS file:
[ROOT]/JAVASCRIPTS/CUSTOM/MAIN.JS

Page 32 Otto - Premium template by Designova




Page 33 Otto - Premium template by Designova

11. Free Support
This user manual covers everything you need to setup the website. But if you find any
bugs, issues and limitations on this theme please contact our support team via our
official support system for HTML Templates via:

http://designova.net/support.html

IMPORTANT
NOTE:

You must have

the purchase
code for the
product
(received from
Envato) in
order to
access our
system. Any
support
request sent
via other
medium such
as emails or
item comments
(themeforest
message form)
may not be
answered. So
please use
support system instead. We will usually make a response within 24 to 48 hours except
weekends and holidays. Due to complex nature of support requests we are unable to
promise a specific turn around time – but we will surely make a response in all cases.
That is our guaranty.


Page 34 Otto - Premium template by Designova

12. Future Updates
We will regularly release updates and bug fixes on our themes and we will send
notifications via newsletters. You may subscribe to our weekly newsletter by visiting the
following link:
http://eepurl.com/xDO_v

We also use Twitter to announce the latest news and updates to our customers. Please
follow us @designovastudio


Page 35 Otto - Premium template by Designova

13. Rating & Reviews
We expect feedback from our users and we are seriously taking care of their opinion and
suggestions. We would like to know your comments, suggestions and feedback in any
sense.

So kindly consider rating our product on themeforest. It will NOT take even a couple of
minutes for you to rate our template, but it will be a great motivation for our developers.

If you don’t know how to rate items on themeforest, please click here to see a
demonstration:

http://goo.gl/iWbKi3

Kindly consider rating our work.

We thank you in advance.


Page 36 Otto - Premium template by Designova

14. Vote of Thanks
Once again, we thank you for purchasing our product.

We hope you like our product as well as this documentation. We have done our level
best to make things pretty clean and clear. Anyway if you have queries, support requests
or something to know more from us, kindly contact us via support system:

http://designova.net/support.html

About Us:
We are Designova, a small team of young web designers and developers and we are
good people to work with. We are from Kerala – the God’s own country and we work on
UTC +5.30, Monday to Friday.

We have more premium themes exclusively available via Themeforest, please visit our
portfolio: http://themeforest.net/user/designova/portfolio

Designova Official Website:

http://designova.net/

Page 37 Otto - Premium template by Designova

Otto
Premium HTML5 Template

Version: 1.0
Build: March 28, 2015

A premium product from Designova.

Designed with love in Kerala.

www.designova.net

Page 38 Otto - Premium template by Designova