Installation

Follow the steps below to get started with your Site Template:

  1. Open the Induzy 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:
    • Induzy/css - Main and Extra Stylesheets Folder
    • Induzy/fonts - Fonts Folder
    • Induzy/images - Images Folder
    • Induzy/inc - Required PHP Functions Folder
    • Induzy/js - Javacripts Folder
    • Induzy/index.html - Index File/Homepage
    The other files can be used according to your preferences.
  4. You're now good to go..! Start adding your Content and show off your Brand New Beautiful Website in style.

HTML Structure

Induzy follows a simple coding structure. here is the sample:

<!DOCTYPE html>
<html class="no-js" lang="zxx">
<head>

	<!-- CSS & Title
	============================================= -->
	...

</head>
<body>

	<!-- The Page Wrapper
	============================================= -->
	<div class="page-wrapper">

		<!-- Header
		============================================= -->
		<header>

			...

		</header>

		<!-- Page Content
		============================================= -->
		<div class="content-wrapper">
			<section>

				<div class="content-wrap">

					<div class="container clearfix">

						...

					</div>

				</div>

			</section>
		</div>

		<!-- Footer
		============================================= -->
		<footer id="footer" class="bg-dark">

			<div class="container">

				...

			</div>

			<!-- Copyrights
			============================================= -->
			<div id="copyrights" class="footer-copyright">

				<div class="container clearfix">

					...

				</div>

			</div>

		</footer>

	</div>

</body>
</html>

Favicon

You can add a Favicon to your Website using the following code:

<link href="images/favicon.png" rel="icon">

Page Scrolling Transitions

You can show Interactive loaders to your Visitors while the Pages of you Website loads in the background & then Reveal your Pages with CSS3 Transitions. Page Loading Transitions are enabled by default. To disable the Transition, you can simply add .no-transition Class to the <body> Tag.

You can customize the Transitions of your Pages Load using the following attributes:

  • data-scrolldistance - The Animation style on Page Scroll. Eg. 400
  • data-scrolltime - The Animation style on Page Scroll time. Eg. 1200
  • data-scrollanimation - The Animation style on Page Scroll Animation. Eg. easeInOutCubic
<body data-scrolldistance="400" data-scrolltime="1200" data-scrollanimation="easeInOutCubic">

Color Schemes

You can change your Website's Color Scheme in an instant. You simply need to change the HEX Color Code in the css/colors.css file & you are good to go. Follow these quick steps to get going:

  1. Make sure you add the css/colors.css stylesheet in your head above main stylesheet.

    <head>

	<!-- Here goes your colors.css
	============================================= -->
	<link rel="stylesheet" href="css/colors.css" type="text/css" />
	<link rel="stylesheet" href="css/style.css" class="main-style" />

	...

</head>
  2. Now simply change the HEX Codes according to your requirements.

Dark Scheme

You can also completely change the Contrast of the Website to Dark, simply by adding the .bg-dark Class to the body Tag. You can also add the .bg-dark Class to certain elements like header, section, div, Slides, footer & many other elements. This will help you experimenting with different color schemes. The .bg-dark Class will also be very helpful for turning the Texts of a container to light color.

Changing Fonts

Change your Fonts on the Fly as we have included a css/fonts.css file to manage the custom fonts you include with ease. By default, Induzy uses 3 Fonts namely: Hind from the Google Fonts Library. You can find the Linking to the Font Files in the head tag of all the .html files.

<link href="https://fonts.googleapis.com/css?family=Hind:300,400,500,600,700" rel="stylesheet" />

In order to change the Fonts, you will need to Edit the Above Links with your Custom Font if you plan to use a Google Font or Remove it complete if you plan to use a Self Hosted font. Here is an Example for using Self Hosted Fonts.

You can now be able to change the Font Names in the css/fonts.css File.

Website Optimization Tips

A Fast & Optimized Website has several factors which needs to be implemented in order to achieve the desired results. There are several Optimization Techniques available which will definitely affect your Website's Performance in a Positive Way & we want to share a few of them with you:

  • gZip Compression & Browser Caching

    This is probably one of the Most Important Techniques you should definitely implement in order to bump up your Website's Loading Speed. gZip Compression is used to compress the Files that are delivered when loading a Website. It covers HTML, CSS, Javascript & Font Files along with other miscellaneous text files. Where as Browser Caching also covers Images & Videos apart from including the above files. This is used to saves the Static Data in your Browser itself so that when you open the Next Pages on the Same Website, the content does not gets Downloaded again, loading the Website fast.

    gZip Compression & Browser Caching can be enabled using the .htaccess File on an Apache Web Server. You can use the Codes from here: https://github.com/h5bp/html5-boilerplate/blob/master/dist/.htaccess to enable these modules on your server.

  • Image Compression & Optimization

    We tend to use Lots of Images on our Websites but we often do not make efforts to Compress & Optimize them. Remember, the Larger the Image, the more time it takes to download and therefore this slows your website loading times affecting User Experience. Your customer will leave your website if it does not load within 3-5 Seconds which adversely affects your Sales. Therefore, it is important to Resize, Optimize & Compress your Images before using it on your Website. Here are some Tips which might come handy in optimizing images:

    • Resize your Images: Resize your Images before using it on your Website. Do not just Download an Image & place it as it is in your Website's <img> Tag without resizing it. The size/resolution of the Image matters since it is not recommended to use an Image size of 1200px x 800px in a Content Size of 300px x 200px as this is unnecessary. Resize it to 300px x 200px
    • Image Formats: There are three common file types that are used for web images which are JPEG, GIF, & PNG. For images with a Flat Background use JPEG images, for images with a Transparent background use PNG images and for images with Animations use GIF images.
    • Compressing Images: Images Compression is important as it considerably reduces the size without losing the quality. There are several FREE Image Optimization Tools available to Download.
      For MAC use ImageOptim
      For Windows use Riot for compressing JPEG Images & PNG Gauntlet for PNG Images.

  • CSS & jQuery Minifications

    It is also recommended that you Combine & Minify all your CSS Files to a single CSS File & all Javascript Files to a single JS File since Minification reduces the size of the File and Combining the files helps in reducing the number of HTTP requests made to the server. This is also an Important Factor in increasing the speed of your website. There are several tools available online to Minify your CSS & JS Files. Our recommendations are:
    For CSS use CSS Minifier and For Javascript use Javascript Minifier.

  • Content Delivery Network

    You can use a CDN to further speed up your website. You can use the CDN to deliver static files of your website like CSS, JS, Images & Font Files. There are several CDN Hosting Providers available on the Internet but we would recommend MaxCDN or CloudFlare. Note: CDN setup requires Extra monthly Fees to setup, so it is completely optional & according to your needs.

  • Fast Web Hosting Servers

    A lot depends on your Web Hosting Servers, so it is recommended that you choose a Hosting Company/Server that provides a Reliable & a Fast Hosting Service. You can check out some recommended Hosting Services here: http://themeforest.net/get_hosting.

Header Types

You can choose between 2 Types of headers while creating your Pages. Simply adding the Header Type CSS class to the Header Element will activate the Header Type. The list of Header Type Classes & its descriptions are provided below for your reference:

Type Class Features Code Example
Default Default Header with a White Background & Dark text. 
<header class="bg-light">
...
</header>
.bg-dark Header with a Dark Background & Light text. 
<header class="bg-dark">
...
</header>

Introduction

Induzy Shortcodes which are quite powerful, flexible, functional & easy to use. Setting up shortcodes is very easy & Self Explanatory. Here is the List of Shortcodes included with Induzy:

  • Animations
  • Sections & Parallax
  • Tabs & Accordion
  • Responsive Slider
  • Owl Carousel
  • Magnific Popup
  • Modal Box
  • Counters
  • Charts
  • Clients
  • Google Maps
  • Icons

Each of the above mentioned Shortcodes are easily extendable, flexible & easy to use. You can find the sample codes in their respective files. We are explaining a few of them for your Reference.

Animations

Scroll to reveal Animations are latest in the Trends. You can do them too with Induzy. You can use animations on any element you want. Here is the Sample Code:

<div data-animate="fadeInLeft"></div>

You can also use delays for your Animations:

<div data-animate="fadeInLeft" data-delay="500"></div>

Note: Delay Duration is in milliseconds.

Here is the list of the Animation Types you can use:

  • 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

Sections & Parallax

Setup content you want to stand out. You can use Light & Dark Sections, Parallax Images or HTML5 Videos as Sections.

Setting up Sections:

Setup your Sections outside the .container element.

Light Section:

<section class="section-bg-img paroller-bg" data-bg="images/news-img.jpg" data-paroller-factor="0.3">
	<span class="white-overlay"></span>
	<div class="container clearfix">

		...

	</div>
</section>

Dark Section:

<div class="section-bg-img paroller-bg" data-bg="images/news-img.jpg" data-paroller-factor="0.3">
	<span class="black-overlay"></span>
	<div class="container clearfix">

		...

	</div>
</div>

Tabs & Accordions

You can use Tabs, Toggles & Accordions in Various Styles and with Different Options to display Below the Fold content.

Tabs

Use the below code to display Tabs:

<div class="tab-body tab-style-4">

	<ul class="tab-nav clearfix">
		<li><a href="#tab-1">Tab 1</a></li>
		<li><a href="#tab-2">Tab 2</a></li>
		<li><a href="#tab-3">Tab 3</a></li>
	</ul>

	<div class="tab-container">

		<div class="tab-pane" id="tab-pane1">
			This is Tab 1 Content
		</div>
		<div class="tab-pane" id="tab-pane2">
			This is Tab 2 Content
		</div>
		<div class="tab-pane" id="tab-pane3">
			This is Tab 3 Content
		</div>

	</div>

</div>

Note: Make sure you add unique IDs for each Tab Container and Tab Items.

Options:

  • data-speed - The Fade Effect speed for switching between Tabs. Eg. 400 for 0.4 Seconds
  • data-active - The Order Number of the Tab which you want to activate on initialization. Eg. 2 to activate the Second Tab on Initialization
Example:
	<section class="tab-section">
		<div class="tab-body">

			<ul class="nav-tabs clearfix">
				<li><a href="#tab-1">Tab 1</a></li>
				<li><a href="#tab-2">Tab 2</a></li>
				<li><a href="#tab-3">Tab 3</a></li>
			</ul>

			<div class="tab-content">

				<div class="tab-content clearfix" id="tab-1">
					This is Tab 1 Content
				</div>
				<div class="tab-content clearfix" id="tab-2">
					This is Tab 2 Content
				</div>
				<div class="tab-content clearfix" id="tab-3">
					This is Tab 3 Content
				</div>

			</div>

	</div>
</section>
</div>

Accordions

You can add a Accordion using the Code below:

<div class="accordion clearfix">

	<div class="acctitle"><i class="acc-closed icon-ok-circle"></i><i class="acc-open icon-remove-circle"></i>This is Accordion Title</div>
	<div class="acc_content clearfix">This is Accordion Content</div>

	<div class="acctitle"><i class="acc-closed icon-ok-circle"></i><i class="acc-open icon-remove-circle"></i>This is Accordion Title</div>
	<div class="acc_content clearfix">This is Accordion Content</div>

	<div class="acctitle"><i class="acc-closed icon-ok-circle"></i><i class="acc-open icon-remove-circle"></i>This is Accordion Title</div>
	<div class="acc_content clearfix">This is Accordion Content</div>

</div>

Options:

  • data-state - The State of the Accordions. Eg. closed to keep all the Accordions closed by default
  • data-active - The Order Number of the Accordion which you want to activate on initialization. Eg. 2 to activate the Second Accordion on Initialization

Styles:

You can use 2 other styles for the Accordions. Eg. .accordion-bg or .accordion-border

Example:
<div class="accordion accordion-border clearfix" data-active="2">

	<div class="acctitle"><i class="acc-closed icon-ok-circle"></i><i class="acc-open icon-remove-circle"></i>This is Accordion Title</div>
	<div class="acc_content clearfix">This is Accordion Content</div>

	<div class="acctitle"><i class="acc-closed icon-ok-circle"></i><i class="acc-open icon-remove-circle"></i>This is Accordion Title</div>
	<div class="acc_content clearfix">This is Accordion Content</div>

	<div class="acctitle"><i class="acc-closed icon-ok-circle"></i><i class="acc-open icon-remove-circle"></i>This is Accordion Title</div>
	<div class="acc_content clearfix">This is Accordion Content</div>

</div>

Owl Carousel

You can add an Owl Carousel on any Page using the Code below:

<div class="owl-carousel team-main-wrapper team-style-1" data-margin="20" data-nav="true" data-items-tab="2" data-items-mob="1" data-smartspeed="250" data-autoplaytime="5000">

	<div class="item">
		<a href="#"><img src="images.jpg" alt="Image 1"></a>
	</div>
	<div class="item">
		<a href="#"><img src="images.jpg" alt="Image 2"></a>
	</div>
	<div class="item">
		<a href="#"><img src="images.jpg" alt="Image 3"></a>
	</div>
	<div class="item">
		<a href="#"><img src="images.jpg" alt="Image 4"></a>
	</div>
	<div class="item">
		<a href="#"><img src="images.jpg" alt="Image 5"></a>
	</div>
	<div class="item">
		<a href="#"><img src="images.jpg" alt="Image 6"></a>
	</div>
	<div class="item">
		<a href="#"><img src="images1.jpg" alt="Image 7"></a>
	</div>

</div>
Settings:
  • data-items - No. of Items to display in the Carousel. Eg. 5
  • data-items-mob - No. of Items to display in the Carousel on iPads/Tablets. Eg. 4
  • data-items-tab - No. of Items to display in the Carousel on Mobile Landscape. Eg. 3
  • data-loop - Enable/Disable Loop. Eg. true/false
  • data-autoplay - Autoplay timer in milliseconds. Eg. 5000
  • data-smartspeed - Speed of the Carousel Animation in millisconds. Eg. 700
  • data-nav - Enable/Disable Navigation Arrows. Eg. true/false
  • data-pagi - Enable/Disable Pagination Dots. Eg. true/false
  • data-margin - Margin between Carousel Items in pixels. Eg. 15
  • data-stage-padding Padding on the Edges of the Carousel Container in pixels. - Eg. 20
  • data-center - Enable/Disable Centering. Eg. true/false
  • data-autoplay - Enable/Disable Autoplay. Eg. true/false

You can find more Owl Carousel related Settings for Custom JS Initialization here.

Owl Carousel Documentation

Isotope Grid With Magnific Popup

Setting up Magnific Popup:

If you wish to open the popup only after image is fully loaded, you may preload image via JS. Or use scaled down image instead of thumbnail. Zoom effect works only with images, for now.

<div class="isotope-grid popup-gallery" data-gutter="30" data-cols="3">
	<!-- .portfolio-item -->
	<div class="isotope-item typo-white oil-gas">
		<div class="portfolio-item portfolio-overlay-wrap">
			<!-- .portfolio-thumb -->
			<div class="portfolio-thumb relative">
				<img src="images/portfolio/1.jpg" class="img-fluid" alt="" />
			</div>
			!-- .portfolio-wrap -->
			<div class="portfolio-wrap">
				<div class="portfolio-details-overlay">
					<div class="portfolio-title">
						<h3 class="mb-3"><a href="single-portfolio.html" target="_blank">Oil & Gas 1
							<a class="popup-img image-gallery-link zoom-icon" href="images/portfolio/1.jpg" title="Oil & Gas 1">
								<i class="icon-magnifier-add"></i>
							</a>
							<a href="single-portfolio.html" class="link-icon" target="_blank">
								<i class="icon-link"></i>
							</a>
						</div>
					</div>
				</div>
			</div>
		<!-- .portfolio-wrap -->
		</div>
		<!-- .portfolio-overlay-wrap -->
	</div>
	<!-- .portfolio-item end-->
</div>

Adding a class="isotope-grid popup-gallery" or class="isotope-grid zoom-gallery" attribute to any Link or Button will turn it into a Lightbox Element. You can use different Types of Lightbox with an Easy Setup:

You can find more Magnific Popup related Settings for Custom JS Initialization here.

http://dimsemenov.com/plugins/magnific-popup/

Modal Box

Use Bootstrap’s JavaScript modal plugin to add dialogs to your site for lightboxes, user notifications, or completely custom content.

<button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#modal-large">>Launch Large Modal</button>

<!-- Modal -->
<div class="modal fade" id="modal-large" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
	<div class="modal-dialog modal-lg" role="document">
		<div  class="modal-content">
			<h3>A Simple Example of a Text Modal</h3>
			<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nostrum delectus, tenetur obcaecati porro! Expedita nostrum tempora quia provident perspiciatis inventore, autem eaque, quod explicabo, ipsum, facilis aliquid! Sapiente, possimus quo!</p>
		</div>
		<div  class="modal-body">
			. . .
		</div>
	</div>
</div>

You can find more Modal Popup related click to here..

Modal Popup

Counters

You can use the following class to show the counter in different styles. You can add a styles like default style, counter with top icon, counter with icon left align, counter with icon right align, etc.

  • Number Counter
  • Counter With Icons

Number Counter

You can show the default counter style with this following code.

<!-- Counter Wrap -->
<div class="row">
    <div class="col-md-12">
        <div class="row text-center pad-top-30">
            <!-- Counter -->
            <div class="col-sm-4 col-md-3">
                <div class="counter-wrapper counter-style-6 text-center">
                    <div class="counter-value">
                        <h4><span class="counter-up theme-color" data-count="6224">0</span></h4>
                    </div>
                    <div class="counter-title">
                        <h5>Clients</h5>
                    </div>
                </div>
            </div>
           <!-- Counter End -->
		<!-- Counter -->
            <div class="col-sm-4 col-md-3">
                <div class="counter-wrapper counter-style-6 text-center">
                    <div class="counter-value">
                        <h4><span class="counter-up theme-color" data-count="1027">0</span></h4>
                    </div>
                    <div class="counter-title">
                        <h5>Awards</h5>
                    </div>
                </div>
            </div>
        
		</div>
	</div>
</div>

Counter With Icon

You can show the counter style with icon styles.

<!-- Counter Wrap -->
<div class="row">
    <div class="col-md-12">
        <div class="row text-center pad-top-30">
            <!-- Counter -->
            <div class="col-sm-4 col-md-3">
                <div class="counter-wrapper counter-style-6 text-center">
                    <div class="counter-icon theme-color mb-3">
                        <span class="icon-trophy"></span>
                    </div>
                    <div class="counter-value">
                        <h4><span class="counter-up theme-color" data-count="6224">0</span></h4>
                    </div>
                    <div class="counter-title">
                        <h5>Clients</h5>
                    </div>
                </div>
            </div>
           <!-- Counter End -->
		<!-- Counter -->
            <div class="col-sm-4 col-md-3">
                <div class="counter-wrapper counter-style-6 text-center">
                    <div class="counter-icon theme-color mb-3">
                        <span class="icon-shield"></span>
                    </div>
                    <div class="counter-value">
                        <h4><span class="counter-up theme-color" data-count="1027">0</span></h4>
                    </div>
                    <div class="counter-title">
                        <h5>Awards</h5>
                    </div>
                </div>
            </div>
        
		</div>
	</div>
</div>

Charts

Use from the List of 50+ Chart Tmplates included with Induzy which uses the ChartJS Plugin.

Full Documentation

Client Slider

The following example shows the client grids. You can use from 2 column to 6 column client grids. Below shows the column client grids.

<div class="owl-carousel image-carousel-wrap" data-loop="1" data-nav="0" data-dots="0" data-autoplay="1" data-autoplaypause="1" data-autoplaytime="5000" data-smartspeed="250" data-margin="30" data-items="6" data-items-tab="3" data-items-mob="2">

<!-- Client Slider-->
<section>
	<div class="container">
		<div class="row">
			<div class="col-md-12">
				<div class="section-title-wrapper clearfix">
					<h4 class="section-title bottom-line">Client Grid <span class="font-weight-light">6 Column</span></h4>
				</div>
				<!--Client Slider-->
				<div class="owl-carousel image-carousel-wrap" data-loop="1" data-nav="0" data-dots="0" data-autoplay="1" data-autoplaypause="1" data-autoplaytime="5000" data-smartspeed="250" data-margin="30" data-items="6" data-items-tab="3" data-items-mob="2">
				<!--Item-->
				<div class="item">
				    <!--Image Inner-->
				    <div class="client">
				        <img src="images/client/client1.png" class="img-fluid" width="226" height="113" alt="client-img" />
				    </div>
				   <!--Image Inner-->
				</div>
				<!--Item End-->
				<!--Item-->
				<div class="item">
				   <!--Image Inner-->
				    <div class="client">
				        <img src="images/client/client2.png" class="img-fluid" width="226" height="113" alt="client-img" />
				    </div>
				   <!--Image Inner-->
				</div>
				<!--Item End-->
				<!--Item-->
				<div class="item">
				   <!--Image Inner-->
				    <div class="client">
				        <img src="images/client/client3.png" class="img-fluid" width="226" height="113" alt="client-img" />
				    </div>
				   <!--Image Inner-->
				</div>
				<!--Item End-->
				<!--Item-->
				<div class="item">
				    <!--Image Inner-->
				    <div class="client">
				        <img src="images/client/client4.png" class="img-fluid" width="226" height="113" alt="client-img" />
				    </div>
				    <!--Image Inner-->
				</div>
				<!--Item End-->
				<!--Item-->
				<div class="item">
				    <!--Image Inner-->
				    <div class="client">
				        <img src="images/client/client5.png" class="img-fluid" width="226" height="113" alt="client-img" />
				    </div>
				    <!--Image Inner-->
				</div>
				<!--Item End-->
				</div>
			</div>
		</div>
	</div>
</section>
<!-- /.GRID SECTION -->

Google Maps

You can add Embedded Google Maps to any Page using the following setup:

  • Step 1:

    Add the Google Maps Specific Scripts at the bottom of the Page just after the js/custom.js script linking:

    <script type="text/javascript" src="https://maps.google.com/maps/api/js?key=YOUR_API_KEY"></script>
<script type="text/javascript" src="js/jquery.gmap.js"></script>

    You can generate your API Key (Browser Key) for Google Maps by Clicking Here and then Click on Get a Key in the Header. Make sure you replace YOUR_API_KEY with you Generated API Key in the above code.

  • Step 2:

    Add a div which will contain your Google Map:

    <div id="site-google-map" style="width:100%;height:400px;" data-map-style="Silver"></div>

  • Step 3:

    Add the Google Maps script with your Specific Options just below your Google Map div to initialize your Google Maps:

    <script type="text/javascript">
	function initniskarGmap() {

		var map_styles = '{ "Aubergine" : [	{"elementType":"geometry","stylers":[{"color":"#1d2c4d"}]},{"elementType":"labels.text.fill","stylers":[{"color":"#8ec3b9"}]},{"elementType":"labels.text.stroke","stylers":[{"color":"#1a3646"}]},{"featureType":"administrative.country","elementType":"geometry.stroke","stylers":[{"color":"#4b6878"}]},{"featureType":"administrative.land_parcel","elementType":"labels.text.fill","stylers":[{"color":"#64779e"}]},{"featureType":"administrative.province","elementType":"geometry.stroke","stylers":[{"color":"#4b6878"}]},{"featureType":"landscape.man_made","elementType":"geometry.stroke","stylers":[{"color":"#334e87"}]},{"featureType":"landscape.natural","elementType":"geometry","stylers":[{"color":"#023e58"}]},{"featureType":"poi","elementType":"geometry","stylers":[{"color":"#283d6a"}]},{"featureType":"poi","elementType":"labels.text.fill","stylers":[{"color":"#6f9ba5"}]},{"featureType":"poi","elementType":"labels.text.stroke","stylers":[{"color":"#1d2c4d"}]},{"featureType":"poi.park","elementType":"geometry.fill","stylers":[{"color":"#023e58"}]},{"featureType":"poi.park","elementType":"labels.text.fill","stylers":[{"color":"#3C7680"}]},{"featureType":"road","elementType":"geometry","stylers":[{"color":"#304a7d"}]},{"featureType":"road","elementType":"labels.text.fill","stylers":[{"color":"#98a5be"}]},{"featureType":"road","elementType":"labels.text.stroke","stylers":[{"color":"#1d2c4d"}]},{"featureType":"road.highway","elementType":"geometry","stylers":[{"color":"#2c6675"}]},{"featureType":"road.highway","elementType":"geometry.stroke","stylers":[{"color":"#255763"}]},{"featureType":"road.highway","elementType":"labels.text.fill","stylers":[{"color":"#b0d5ce"}]},{"featureType":"road.highway","elementType":"labels.text.stroke","stylers":[{"color":"#023e58"}]},{"featureType":"transit","elementType":"labels.text.fill","stylers":[{"color":"#98a5be"}]},{"featureType":"transit","elementType":"labels.text.stroke","stylers":[{"color":"#1d2c4d"}]},{"featureType":"transit.line","elementType":"geometry.fill","stylers":[{"color":"#283d6a"}]},{"featureType":"transit.station","elementType":"geometry","stylers":[{"color":"#3a4762"}]},{"featureType":"water","elementType":"geometry","stylers":[{"color":"#0e1626"}]},{"featureType":"water","elementType":"labels.text.fill","stylers":[{"color":"#4e6d70"}]}], "Silver" : [{"elementType":"geometry","stylers":[{"color":"#f5f5f5"}]},{"elementType":"labels.icon","stylers":[{"visibility":"off"}]},{"elementType":"labels.text.fill","stylers":[{"color":"#616161"}]},{"elementType":"labels.text.stroke","stylers":[{"color":"#f5f5f5"}]},{"featureType":"administrative.land_parcel","elementType":"labels.text.fill","stylers":[{"color":"#bdbdbd"}]},{"featureType":"poi","elementType":"geometry","stylers":[{"color":"#eeeeee"}]},{"featureType":"poi","elementType":"labels.text.fill","stylers":[{"color":"#757575"}]},{"featureType":"poi.park","elementType":"geometry","stylers":[{"color":"#e5e5e5"}]},{"featureType":"poi.park","elementType":"labels.text.fill","stylers":[{"color":"#9e9e9e"}]},{"featureType":"road","elementType":"geometry","stylers":[{"color":"#ffffff"}]},{"featureType":"road.arterial","elementType":"labels.text.fill","stylers":[{"color":"#757575"}]},{"featureType":"road.highway","elementType":"geometry","stylers":[{"color":"#dadada"}]},{"featureType":"road.highway","elementType":"labels.text.fill","stylers":[{"color":"#616161"}]},{"featureType":"road.local","elementType":"labels.text.fill","stylers":[{"color":"#9e9e9e"}]},{"featureType":"transit.line","elementType":"geometry","stylers":[{"color":"#e5e5e5"}]},{"featureType":"transit.station","elementType":"geometry","stylers":[{"color":"#eeeeee"}]},{"featureType":"water","elementType":"geometry","stylers":[{"color":"#c9c9c9"}]},{"featureType":"water","elementType":"labels.text.fill","stylers":[{"color":"#9e9e9e"}]}], "Retro" : [{"elementType":"geometry","stylers":[{"color":"#ebe3cd"}]},{"elementType":"labels.text.fill","stylers":[{"color":"#523735"}]},{"elementType":"labels.text.stroke","stylers":[{"color":"#f5f1e6"}]},{"featureType":"administrative","elementType":"geometry.stroke","stylers":[{"color":"#c9b2a6"}]},{"featureType":"administrative.land_parcel","elementType":"geometry.stroke","stylers":[{"color":"#dcd2be"}]},{"featureType":"administrative.land_parcel","elementType":"labels.text.fill","stylers":[{"color":"#ae9e90"}]},{"featureType":"landscape.natural","elementType":"geometry","stylers":[{"color":"#dfd2ae"}]},{"featureType":"poi","elementType":"geometry","stylers":[{"color":"#dfd2ae"}]},{"featureType":"poi","elementType":"labels.text.fill","stylers":[{"color":"#93817c"}]},{"featureType":"poi.park","elementType":"geometry.fill","stylers":[{"color":"#a5b076"}]},{"featureType":"poi.park","elementType":"labels.text.fill","stylers":[{"color":"#447530"}]},{"featureType":"road","elementType":"geometry","stylers":[{"color":"#f5f1e6"}]},{"featureType":"road.arterial","elementType":"geometry","stylers":[{"color":"#fdfcf8"}]},{"featureType":"road.highway","elementType":"geometry","stylers":[{"color":"#f8c967"}]},{"featureType":"road.highway","elementType":"geometry.stroke","stylers":[{"color":"#e9bc62"}]},{"featureType":"road.highway.controlled_access","elementType":"geometry","stylers":[{"color":"#e98d58"}]},{"featureType":"road.highway.controlled_access","elementType":"geometry.stroke","stylers":[{"color":"#db8555"}]},{"featureType":"road.local","elementType":"labels.text.fill","stylers":[{"color":"#806b63"}]},{"featureType":"transit.line","elementType":"geometry","stylers":[{"color":"#dfd2ae"}]},{"featureType":"transit.line","elementType":"labels.text.fill","stylers":[{"color":"#8f7d77"}]},{"featureType":"transit.line","elementType":"labels.text.stroke","stylers":[{"color":"#ebe3cd"}]},{"featureType":"transit.station","elementType":"geometry","stylers":[{"color":"#dfd2ae"}]},{"featureType":"water","elementType":"geometry.fill","stylers":[{"color":"#b9d3c2"}]},{"featureType":"water","elementType":"labels.text.fill","stylers":[{"color":"#92998d"}]}], "Dark" : [{"elementType":"geometry","stylers":[{"color":"#212121"}]},{"elementType":"labels.icon","stylers":[{"visibility":"off"}]},{"elementType":"labels.text.fill","stylers":[{"color":"#757575"}]},{"elementType":"labels.text.stroke","stylers":[{"color":"#212121"}]},{"featureType":"administrative","elementType":"geometry","stylers":[{"color":"#757575"}]},{"featureType":"administrative.country","elementType":"labels.text.fill","stylers":[{"color":"#9e9e9e"}]},{"featureType":"administrative.land_parcel","stylers":[{"visibility":"off"}]},{"featureType":"administrative.locality","elementType":"labels.text.fill","stylers":[{"color":"#bdbdbd"}]},{"featureType":"poi","elementType":"labels.text.fill","stylers":[{"color":"#757575"}]},{"featureType":"poi.park","elementType":"geometry","stylers":[{"color":"#181818"}]},{"featureType":"poi.park","elementType":"labels.text.fill","stylers":[{"color":"#616161"}]},{"featureType":"poi.park","elementType":"labels.text.stroke","stylers":[{"color":"#1b1b1b"}]},{"featureType":"road","elementType":"geometry.fill","stylers":[{"color":"#2c2c2c"}]},{"featureType":"road","elementType":"labels.text.fill","stylers":[{"color":"#8a8a8a"}]},{"featureType":"road.arterial","elementType":"geometry","stylers":[{"color":"#373737"}]},{"featureType":"road.highway","elementType":"geometry","stylers":[{"color":"#3c3c3c"}]},{"featureType":"road.highway.controlled_access","elementType":"geometry","stylers":[{"color":"#4e4e4e"}]},{"featureType":"road.local","elementType":"labels.text.fill","stylers":[{"color":"#616161"}]},{"featureType":"transit","elementType":"labels.text.fill","stylers":[{"color":"#757575"}]},{"featureType":"water","elementType":"geometry","stylers":[{"color":"#252a37000"}]},{"featureType":"water","elementType":"labels.text.fill","stylers":[{"color":"#3d3d3d"}]}], "Night" : [{"elementType":"geometry","stylers":[{"color":"#242f3e"}]},{"elementType":"labels.text.fill","stylers":[{"color":"#746855"}]},{"elementType":"labels.text.stroke","stylers":[{"color":"#242f3e"}]},{"featureType":"administrative.locality","elementType":"labels.text.fill","stylers":[{"color":"#d59563"}]},{"featureType":"poi","elementType":"labels.text.fill","stylers":[{"color":"#d59563"}]},{"featureType":"poi.park","elementType":"geometry","stylers":[{"color":"#263c3f"}]},{"featureType":"poi.park","elementType":"labels.text.fill","stylers":[{"color":"#6b9a76"}]},{"featureType":"road","elementType":"geometry","stylers":[{"color":"#38414e"}]},{"featureType":"road","elementType":"geometry.stroke","stylers":[{"color":"#212a37"}]},{"featureType":"road","elementType":"labels.text.fill","stylers":[{"color":"#9ca5b3"}]},{"featureType":"road.highway","elementType":"geometry","stylers":[{"color":"#746855"}]},{"featureType":"road.highway","elementType":"geometry.stroke","stylers":[{"color":"#1f2835"}]},{"featureType":"road.highway","elementType":"labels.text.fill","stylers":[{"color":"#f3d19c"}]},{"featureType":"transit","elementType":"geometry","stylers":[{"color":"#2f3948"}]},{"featureType":"transit.station","elementType":"labels.text.fill","stylers":[{"color":"#d59563"}]},{"featureType":"water","elementType":"geometry","stylers":[{"color":"#17263c"}]},{"featureType":"water","elementType":"labels.text.fill","stylers":[{"color":"#515c6d"}]},{"featureType":"water","elementType":"labels.text.stroke","stylers":[{"color":"#17263c"}]}] }';
		var map_style_obj = JSON.parse(map_styles);
		
		var map_style_mode = [];
		var map_mode = '';
			if( $( "#site-google-map" ).attr( "data-map-style" ) ){
				map_mode = $( "#site-google-map" ).attr("data-map-style");
				
				if( map_mode == 'Aubergine' )
					map_style_mode = map_style_obj.Aubergine;
				else if( map_mode == 'Silver' )
					map_style_mode = map_style_obj.Silver;
				else if( map_mode == 'Retro' )
					map_style_mode = map_style_obj.Retro;
				else if( map_mode == 'Dark' )
					map_style_mode = map_style_obj.Dark;
				else if( map_mode == 'Aubergine' )
					map_style_mode = map_style_obj.Night;
			}
			var LatLng = {lat: 51.508742, lng: -0.120850};
			
			var mapProp= {
				center: LatLng,
				scrollwheel: false,
				zoom:9,
				styles: map_style_mode
			};
		
			var map = new google.maps.Map( $( "#site-google-map" )[0], mapProp);
			var marker = new google.maps.Marker({
			  position: LatLng,
			  icon: 'images/marker.png',
			  map: map
			});
		
			google.maps.event.addDomListener(window, 'resize', function() {
				map.setCenter(LatLng);
			});
		}

</script>

Adding Custom Styled Maps:

You can add beautifully designed Custom Styled Google Maps to your Web Projects by simply setting the styles: [] in your Google Maps Script:

Tip: A List of Amazingly Styled Maps can be found at Google Maps.

PHP Scripts

Contact Form

<!-- form inputs -->
<form id="contact-form" class="contact-form" action="inc/function.php" enctype="multipart/form-data">
	<div class="row">
	    <div class="col-md-6">
	        <!-- form group -->
	        <div class="form-group">
	            <input id="name" class="form-control" name="name" placeholder="Your Name" data-bv-field="name" type="text" />
	        </div>
	        <!-- form group -->
	        <div class="form-group">
	            <input id="email" class="form-control" name="email" placeholder="Email Address" data-bv-field="email" type="email">
	        </div>
	    </div>
	    <div class="col-md-6">
			<!-- form group -->
	        <div class="form-group">
				<input id="phone" class="form-control" name="phone" placeholder="Phone" data-bv-field="phone" type="text">
			</div>
			<!-- form group -->
	        <div class="form-group">
				<input id="subject" class="form-control" name="subject" placeholder="Subject" data-bv-field="subject" type="text">
			</div>
	    </div>
		<div class="col-md-12">
			<div class="contact-message">
				<!-- form group -->
				<div class="form-group">
					<textarea id="message" class="form-control textarea" rows="7" name="message" placeholder="Message" data-bv-field="message"></textarea>
				</div>
			</div>
			<!-- form button -->
			<button type="submit" class="btn btn-default mt-0 theme-btn">Send Now</button>
		</div>
	</div>
</form>

Regarding contact form as main part of Contact Us section, only thing you need to do is to setup your email address.
To do this, please open "inc/function.php" file and change this line:

//E-mail Config
$recipient_mail = "support@zozothemes.com";
$recipient_name = "Abile Web";

Mailchimp Subscription

Mailchimp Form
<!-- subscribe form -->
<form id="subscribe-form" class="subscribe-form" action="inc/function.php">
	<div class="input-group add-on">
		<input type="text" class="form-control" name="mcemail" autocomplete="off" id="mcemail" placeholder="Email Address">
		<div class="input-group-btn">
			<button class="btn btn-default subscribe-btn" type="submit">Go</button>
		</div>
	</div>
</form>

Once you have the MailChimp account you have to configure the subscription file with your APIKey and ListID.
To do this, please open "inc/function.php" file and change the variables:

Get Mailchimp API key - http://kb.mailchimp.com/article/where-can-i-find-my-api-key
Get your Mailchimp LIST ID - http://kb.mailchimp.com/article/how-can-i-find-my-list-id

//Mailchimp Config
$mailchimp_api = 'your_api_key';
$mailchimp_list_id = 'your_list_id';

Google reCaptcha

Regarding Google reCaptcha form as main part of Contact Us section with security purpose, only thing you need to do is to setup your email address and this is only working with in http:// or https:// domains.
To do this, please open "inc/function.php" file and change this line:

You can get Google reCaptcha API keys from this site:

Google reCaptcha - https://www.google.com/recaptcha/intro/v3beta.html

Please open "inc/function.php" file and change this line:

// ReCaptch Secret
$recaptchaSecret = 'your_secretkey_id';

Please copy sitekey and paste into "Contact Form" 

<!-- form group -->
<div class="form-group">
	<div class="g-recaptcha" data-sitekey="your_sitekey_id" data-callback="verifyRecaptchaCallback" data-expired-callback="expiredRecaptchaCallback"></div>
    <input class="form-control d-none" data-recaptcha="true" name="g-recaptcha-response" required data-error="Please complete the Captcha">
</div>

<!-- form inputs -->
<form id="contact-form" class="contact-form" action="inc/function.php" enctype="multipart/form-data">
	<div class="row">
	    <div class="col-md-6">
	        <!-- form group -->
	        <div class="form-group">
	            <input id="name" class="form-control" name="name" placeholder="Your Name" data-bv-field="name" type="text" />
	        </div>
	        <!-- form group -->
	        <div class="form-group">
	            <input id="email" class="form-control" name="email" placeholder="Email Address" data-bv-field="email" type="email">
	        </div>
	    </div>
	    <div class="col-md-6">
			<!-- form group -->
	        <div class="form-group">
				<input id="phone" class="form-control" name="phone" placeholder="Phone" data-bv-field="phone" type="text">
			</div>
			<!-- form group -->
	        <div class="form-group">
				<input id="subject" class="form-control" name="subject" placeholder="Subject" data-bv-field="subject" type="text">
			</div>
	    </div>
		<div class="col-md-12">
			<div class="contact-message">
				<!-- form group -->
				<div class="form-group">
					<textarea id="message" class="form-control textarea" rows="7" name="message" placeholder="Message" data-bv-field="message"></textarea>
				</div>
			</div>
			<!-- form group -->
	        <div class="form-group">
				<div class="g-recaptcha" data-sitekey="your_sitekey_id" data-callback="verifyRecaptchaCallback" data-expired-callback="expiredRecaptchaCallback"></div>
	            <input class="form-control d-none" data-recaptcha="true" name="g-recaptcha-response" required data-error="Please complete the Captcha">
	        </div>
			<!-- form button -->
			<button type="submit" class="btn btn-default mt-0 theme-btn">Send Now</button>
		</div>
	</div>
</form>

One notice: this will be functional only on your server, php file can not be executed on your local computer.