Ionize

Responsive Multipurpose HTML Template


Ionize is a creative Responsive Multipurpose HTML Template built with Bootstrap version 3.3.7 and SASS. This template can be used for any small to medium sized corporate company/agency or individulas to build and publish their online profiles, services and branding. This template comes with developer/non developer friendly coding styles as well as it has rich customization capabilities that is suitable for any kind of small business or creative farms. Creative design, stunning animations, eye catching google map and functional contact form are the main features of this template.

We hope, you will be pleased with this mobile friendly template and for any clarification please visit the demo and carefully read this documentation. This document will assist you to have a better idea about this tamplate's structure and functionalities. Though we tried to cover every single details regarding this template, however, for any issue, that is not coverd here, please feel free to communicate us via email.

Click here to visit the online documentation for this template

After downloading the file from themeforest, you will find your template inside the "ionize" folder

This folder has below structure

Copy all of theses files and upload those in your domain's root directory and the site is live!

**Note: Images used on the demo is not included in the template you downloaded, rather you will see preview images with the image dimension mentioned in the template. You can always replace those images. For somooth layout, use images with specified dimension and also please compare with the demo to have a better idea

Fonts used:

Colors used:

Javascripts used: You will find all necessary JS files at the bottom of every page's source code. Please note that, as this template contains multiple pages, some of the pages have JS files that is specific for that page only (for example Contact Us pages use google map js), which you will find on the source code (at the very bottom) of those pages. Here is combined list of all JS files that has been used throughout all pages of this template:

Open the page template you want to edit with any text editor like notepad++ or sublime text and you will have the access to the codes immediately. Now please follow below sections or choose from the left side menu to edit specific sections.

You will find all SASS files (have an extension of .scss) inside assets/_scss folder

Please note that, you should have some knowledge regarding SASS to modify these sass files. If you are not familiar with SASS files, please skip these section. Theses files are only for developers

You will be needed a SASS proprocessor applications (for example Prepros, Codekit etc.) to complie the SCSS files and generatong the CSS files dynamically.

As you can See there are 5 folders and one "style.scss" file. Each folder have different SASS files.
- All SASS variables are present inside "abstract/_variable.scss" file
- All color scheme/skins are present inside "themes" folder. Each file on 'themes' folder have some variables that are overriding the default variables present on "abstract/_variable.scss" file, thus generating different skins/themes/schemes.
- All HTML components stylings are present inside "components" folder
- All HTML layouts stylings are present inside "layouts" folder
- Files under "themes" directory will be compiled to the "assets/css/style-{respective-file-name}.css" file.
- "style.scss" file will be compiled to "assets/css/style.css" file

If you are not familiar with SASS, and want to modify the styles using CSS only, please follow below procedure: (It is strongly recommended not to modify any existing css files as those are generated dynamically using SASS)

Important/helper CSS classes:


NB: {section-height} refres to the height of section spacing, for example 90px for Default Skin

This section introduces an intelligent and smart header which detects mouse scrolling to show header contents. Also this section contains the Top Bar, Logo and Main Navigation Menu when user first visit the site. Note that header top bar is not included in Homepage version 2,3 and 4.



How to change header top bar?

You need to search inside <header> tag and find the code block that is wrapped with a <div> like this: <div class="header-top">. Top bar contains social and contact information. You can change/alter the these texts and links there.


How to change the Logo?

You need to search inside <header> tag and find the code block that is wrapped with a <div> like this: <div class="logo"> and inside that you will find an <img> tag with a source. You need to change the source by your own logo source demonstrated below:

<a href="index.html"><img src="your-logo.png" alt="Logo"></a>


How to change the Main Navigation Menu Text?

You need to search inside <header> tag and find the code block that is wrapped with an <ul> like this: <ul class="sf-menu">. You can change/alter the menu text and links there.


How to change the Mobile Navigation Menu Text?

Mobile navigation menu is not inside <header> tag. You can find it just after the start of <body> tag and it is wrapped with an <div> like this: <div class="mobile-menu">. You can change/alter the menu text and links under <ul class="c-menu__items">.

This template uses the following sliders/showcase section to showcase your products/company information.


Owl Slider (Homepage 01)

You can find the code block contains Owl Slider in index.html just after the end tag of <header> wrapped around like this: <div class="primary-slider owl-carousel">.



How to change the Owl Slider images and texts?

In the code block you can will see three <div> wrapper with class slide-single and inside each <div> there is an <img> tag. You can change the <img> src with your own images. Note that your images should have 1920x1080 dimension to match with the template.

Also there is a code block wrapped with <div class="slider-content"> in each slide-single wrapper. You can replace the heading and the texts with your own texts.


Where to customize the JS for Owl Slider?

To customize the Owl Slider JS, you need to go to assets/js/main.js find the js code block starting with comment s02 - Primary Slider Settings which contains the javascript for Owl Slider, demonstrated below. You can edit the javascript as per your need.



Video Showcase (Homepage 02)

You can find the code block contains Video Showcase in index-02.html inside <header> tag wrapped around like this: <div class="showcase-text">.



How to change the Video?

To change the video, you need to go to assets/js/main.js and find the js code block starting with comment s05 - Header Background Video which contains the javascript for video source, demonstrated below:

Replace all three source such as webm, mp4, ogg with your own relevant video URL and change the poster with the relevant video image. Before changing the Video URL please check the video format to match with the Javascript.


Hero Showcase (Homepage 03)

You can find the code block contains Hero Showcase in index-03.html inside <header> tag wrapped around like this: <div class="showcase-text">.



How to change the Image Background?

Go to assets/img/slider/home-3 folder in the template and there you will find "slide-1.jpg" image (image dimension 1920X1080). Replace this image but keep the image name and dimension same and you are done!


Backstretch Slider (Homepage 04)

You can find the code block contains Backstretch Slider in index-04.html inside <header> tag wrapped around like this: <div class="showcase-text">.



How to change the Backstretch Slider Background Image?

To change the Backstretch Slider Background Image, you need to go to assets/js/main.js and find the js code block starting with comment s06 - Header Background Slider which contains the javascript for Backstretch Slider, there you will see the image sources which is demonstrated below:

Then replace the image sources with your own image URL.

The portfolio section is built using ISOTOPE jquery library and ImagesLoaded jquery library

The HTML part should be like below screenshot

You will find the jquery responsible for filtering the portfolio on main.js file (inside assets/js folder)

The "popup" functionality is provided using photoswipe javascript library.

The Photoswipe HTML markup is present at the very bottom of each page where Portfolio image POP UP is used

Both Contact Us page uses an eye catching google map to display map location. To change the map location, you need to go to assets/js/custom-map.js which contains the javascript for Google Map. Here find two pair of lat, lng and provide your own latitude and longitude there. lat=latitude and lng=longitude. The first lat/lng pair is for centering map location and the other lat/lng pair is for the map marker. If you need to change the URL for the map marker, please check the variable named image and change the image URL.

**Note: To use the map, as per google you need to use your own API Key and you can get this from here https://console.developers.google.com/. Also here is the supporting doc how to obatin the API key API Key

A sample API key looks like AIzaSyA6CKatrt34QhZKT5TyHqwerxM3hEiMpQ.


After getting your own the API key:

Go to either contact-us-01.html or contact-us-02.html (depending on your choice) and find the <script> tag containing comment google map api and gmaps JS and just copy and paste that API key at the last of this line like below screen shot:

Before:

After:

Most of the pages of this template uses a header top bar to show contact and social information. If you need to disable the "Top bar" for header, you need to open all the files containing the top bar HTML markup (except for index-02.html, index-03.html and index-04.html because these pages do not contain header top bar),
find the wrapper <div> tag <div class="header-top"> and the end tag </div> <!-- end of header-top --> and delete the entire block.

The code block is located under <div id="o-wrapper" class="o-wrapper"> wrapper. A sample screenshot of the code block is given below:

The template uses a nice page loader animation that runs while the elements and the scripts of the page is being loaded.

If you need to change/disable the page loader, you need to go to the start of every file and find the code block that starts with a comment of <!-- Site Loader started--> followed by a wrapper <div> <div class="cx-pageloader">. The code block can be found after the start tag of <body>. A sample screenshot of the code block is given below:



  1. Disabling Page Loader: If you need to disable the page loader, you need to delete the entire code block to disable the page loader.
  2. Changing Page Loader: Or if you need to change the page loader, you need to replace the HTML markup inside the wrapper tag contains the class cx-pageloader, keeping the wrapper tag/class intact as this wrapper class uses javascript for a fade out transition animation.

The template uses a Scroll to top button located at bottom right corner of every page.

If you need to disable the scroll to top button, you need to go to the end of every file and find the code block inside of <div class="copyright-section"> before the ending tag of <footer>. The code block contains an ID of "toTop". A sample screenshot of the code block is given below:


Deleting the code block will disable the scroll to top button.

How to copy element from one page to another?

This template is designed and coded in such a way that you can copy/paste any of your desired section from one page to another without any kind of CSS modification/import.

If you need to copy any sections from one page to another, you just need to copy the whole HTML markup from that file and paste it in the desired file. Just copying HTML will work immediately, but one exception is google map. If you want to copy google map section to any page rather than "Contact Us 01" or "Contact Us 02", you need to copy the javascript dependancies resides at the bottom of the contact us pages with script tags. Just copy the <script> tags containing the google map javascript and you are done!

How to get the messages to your own email address when user submit the Contact Form:

Open the "sendmail.php" file provided with the template and replace the email address within the quotation mark there as per below screenshot:



How to get the messages to your own email address when user submit the Quote Form:

Open the "sendquote.php" file provided with the template and replace the email address within the quotation mark there as per below screenshot:

We have used FontAwesome and Flaticons in diffrent section of this HTML templates

You can find Fontawesome documentation/icon details from their official website. For Flaticons that we used in this template, please open the folder /assets/fonts/flaticon.html and open the file in a browser, and you will get all the flaticons html markup there. You can use any icon as you want
The HTML markup will be like this

<i class="fi flaticon-pie-chart" aria-hidden="true"></i>

where 'flaticon-pie-chart' is the icon name

If you want to use the icons as a CSS before/after element, please open the file "assets/fonts/flaticon/flaticon.css" file in a file editor like notepad++ or sublime text and you will get all the CSS entity for the required icons.

An example:

                .faq-wrapper .panel-default .panel-heading a::before {
                    content: "\f117";
                    font-family: Flaticon;
                    position: absolute;
                    left: 10px;
                    font-size: 15px;
                    top: auto;
                }

            

where "\f117" is the css entity of flaticon-price-tag icon

Q: Why I am not getting the color switcher options (bar) that is present on demo>

A: The color Switcher is included on demo for demonstration purpose only. So it is not available on the downloaded package. But you can always use any color scheme by using the appropriate CSS file that we described at "Template Structure" Section at the very top.

Javascript

All vendor javascripts are kept inside plugins.js (except jquery, bootstrap, modernizr and gmap js). All the credits are given below:

Icons


Images and Videos Credit


Finally, thank you very much for purchasing this HTML template. Please keep that in mind that we are working very hard to providing better quality in coming days. If you love our work then appreciate us by writing a good review with 5 star.