Probiz Documentation

Probiz responsive business HTML template

Thank you very much for purchasing our template! If you have any questions that aren't covered in this documentation, please feel free to email us.

Overview

Probiz is the perfect finance, consulting & business HTML template. Probiz is best suited for corporate website like accountant, advisor, consult agency, business,  corporate, investment, pensions, trading, insurance, loan, tax help, investment firm, consulting firms etc.
 
Probiz is based on bootstrap 3 framework so is full responsive and fast loading with many features.
 
Let's take a look at the core features of the Probiz Template.
 
  • Unique and clean Design
  • Complete demo(Multipage and Onepage)
  • Responsive – works great on desktop, iPad, iPhone and other mobile devices
  • Powerful slide design
  • Static Hero Unit
  • 10+ Unique Navigation(Menu) styles
  • Pre built content block
  • Blog page with details page
  • Portfolio page with details page
  • Very easy to customise
  • Well organized and commented code
  • Magnific Popup (Image and Video)
  • Cross Browser Compatible
  • Excellent CSS3 Animations
  • Full Functional Contact Form
  • Working Newsletter Form – no database needed.
  • Top notch customer support

Installation

1. Unzip the file and find out the folder probiz, there are all html template files in this folder.

2. Folder Structure is as follows

assets (all assets/required file of this template)
--/bootstrap (bootstrap core files)
--/css (all css files)
--/fonts (font icon sets )
--/img (all images)
--/js (all javascript files)
--/magnific-popup (image popup script)
--/videos (video background files)
email-templates (a basic email template functional with contact form)
index.html (Home page)
sendemail.php (PHP file for functional contact form)

3.  You will need to Upload these files to your Web Server using FTP or cpanel in order to use it on your Website. And other files can be used according to your preferences.

4. Now enjoy the theme and adding section/feature according to your need.

HTML Structure

Being based on Bootstrap, Probiz inherits its awesome grid system. It's a responsive, mobile first  grid that appropriately scales up to 12 columns as the device or view port size increases.

<!DOCTYPE html>
<html lang="en">
<head>
    <!--  meta tag -->
    <meta charset="utf-8">
    <title>Title goes here</title>
    <!--  favicon -->
    <link rel="shortcut icon" href="assets/img/ico/favicon.png">   
    <!--common style-->
   ...
</head>

<body>
    <!--header start-->
    <header class="header">
       ...
    </header>
    <!--header end-->
    <!-- nav start -->
    <section class="main-navigation">
    ...
    </section>    
    <!-- nav end -->

    <!--body content start--> 
    <section class="section-padding"> 
      <div class="container"> 
        <div class="row"> 
          ... 
        </div><!-- /.row --> 
       </div><!-- /.container --> 
    </section>
   <!--body content end-->
 
  <!--footer start --> 
  <footer class="footer-section"> 
  </footer> <!--footer end-->

  <!-- Preloader --> 
  <div id="preloader"> 
  <div class="status"> 
   ... 
  </div> 
  </div> 
  <!-- End Preloader --> 

  <!-- Placed js at the end of the document so the pages load faster --> 
  .... 
 </body> 
</html>

Font Change

Probiz uses google font. So you can feel free to use any google font what you like best. Probiz used "Montserrat"  google font in full Demo.
 
You can find the Link to the <head>  tag of all the .html files like this
<link href="https://fonts.googleapis.com/css?family=Montserrat:300,400,500,600,700,800,900" rel="stylesheet">
 
And you have to add the font name into css file like 
font-family: 'Montserrat', sans-serif;

Icons

There are two kinds of font icons used in this template.

  1. FontAwesome
  2. Flat Icon

Font Awesome is a @font-face iconset that allows you to change size and color of the icons just using CSS.

To add an icon, simply create an empty element with class 'fa fa-[icon name]', for example: 

<i class="fa fa-file"></i>
<i class="fa fa-home"></i>
<i class="fa fa-envelope"></i>

 

Flat Icons
====================

Flat Icon is also a @font-face iconset that allows you to change size and color of the icons just using CSS.

To add an icon, simply create an empty element with class 'flaticon-[icon name]', for example: 

<i class="flaticon-bed"></i>
<i class="flaticon-bathtub"></i>
<i class="flaticon-transport"></i>

 

Section Extra Classes

We have created some useful helper classes for you. Here are a few of them:

For Margin Classes:

/*margin top*/
.mt-10 {
    margin-top: 10px;
}
.mt-15 {
    margin-top: 15px;
}
.mt-20 {
    margin-top: 20px;
}
.mr-30{
margin-right: 30px;
}
/*margin Left*/
.ml-10{
margin-left: 10px;
}
.ml-30{
margin-left: 30px;
}
 

For Padding Classes:

/*padding classes
-----------------------*/
.pd-10{
padding: 10px 0px;
}
.pd-20{
padding: 20px 0px;
}
/*padding top*/
.pdt-10{
padding-top: 10px;
}
.pdt-20{
padding-top: 20px;
}
/*padding bottom*/
.pdb-10{
padding-bottom: 10px;
}
.pdb-20{
padding-bottom: 20px;
}
 

Google Map

We used a dynamic google map in this template. You can easily change your nearby locations, address, map marker, map color and almost everything.
 
You will get google map customization javascript under  <!-- Google Map Customization  -->  wrapper in relavent pages.
 
Put your latitude longitude, put your map marker at icon.
You can also change map color form "stylers"  zoom options form "mapProp"
 
If you unable to find latitude and longitude of your address. Please visit http://www.latlong.net/ you can easily generate.
 
 In html put the map "id" in any section and give it a min-height(your desired height)
 
 
HTML Markup:
===================
<!-- map-section -->
<div id="map_canvas" class="contact-map"></div>
<!-- /.map-section -->
 
 
JS Markup: 
================
//set your google maps location
$("#link1").click(function(){
    changeMarkerPos(40.718101, -74.004462);
});

$("#link2").click(function(){
    changeMarkerPos(3.165559, 101.612416);
});

$("#link3").click(function(){
    changeMarkerPos(40.718229, -74.003745);
});
... ... ... 

// map configuration
var mapProp = {
    center: new google.maps.LatLng(3.165659, 101.611416),
    zoom: 17,
    panControl: false,
    zoomControl: false,
    mapTypeControl: false,
    scaleControl: true,
    streetViewControl: false,
    overviewMapControl: false,
    rotateControl: true,
    scrollwheel: false,
    mapTypeId: google.maps.MapTypeId.ROADMAP
};

//google map custom marker icon
marker = new google.maps.Marker({
    position: new google.maps.LatLng(3.167244, 101.612950),
    animation: google.maps.Animation.DROP,
    icon: 'assets/img/pin.png',
});

... ... ...

 

 

Mailchimp Subscription

We used a dynamic full functional Mailchimp  Newsletter Subscription form  in this template. You can easily change your Mailchimp form post url.

Open "ajaxchimp-config.js" from assets/js/ folder.  
Replace exsisting url with your own mailchimp form post url inside the url: "---".
/* === Mail Chimp subscription form settings === */
$( document ).ready(function() {
    $('.mailchimp').ajaxChimp({
        callback: mailchimpCallback,
        //replace bellow url with your own mailchimp form post url inside the url: "---".
        url: "http://trendytheme.us9.list-manage.com/subscribe/post?u=85ba3666ffb519396fbe64dc5&amp;id=c335e5ec53" 
    }); 
    function mailchimpCallback(resp) {
         if (resp.result === 'success') {
            $('.subscription-success').html('<i class="fa fa-check"></i>' + resp.msg).fadeIn(1000);
            $('.subscription-error').fadeOut(500);
        } else if(resp.result === 'error') {
            $('.subscription-error').html('<i class="fa fa-times"></i>' + resp.msg).fadeIn(1000);
        }
    }
});

 

Contact Form

In this template there is full functional working contact form. We have also added a simple email template with this contact form.

To customize/change the email address please open  "sendemail.php" file from root folder in any code editor .  

Go to the line number 9.  There is a line: 

$to         = 'youremail@gmail.com'; //put your email here

Replace the existing email address with your own mailing address.

Thats it! your template is ready now for receive message from others via email.

 

You can add new input box for getting more information from your user by adding more parameters at sendmail.php

$subject    = strip_tags($_POST['subject']);
$email       = strip_tags($_POST['email']);
$phone       = strip_tags($_POST['phone']);
$name       = strip_tags($_POST['name']);
$message    = nl2br( htmlspecialchars($_POST['message'], ENT_QUOTES) );

$result     = array();

and populate all arrey here

$templateTags =  array(
    '{{subject}}' => $subject,
    '{{email}}'=>$email,
    '{{phone}}'=>$phone,
    '{{message}}'=>$message,
    '{{name}}'=>$name
);

Sources & Credits

HTML/CSS
==============

Twitter Bootstrap: http://getbootstrap.com/

Bootsnav Menu: http://bootsnav.danurstrap.com/

 

Fonts
=============

Google Font: https://fonts.google.com/specimen/Montserrat

Font Awesome: http://fontawesome.io/

Flat icons: http://www.flaticon.com/

 

JavaScripts
============

jQuery: https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js

Inview JS: https://github.com/protonet/jquery.inview

Steller JS: http://markdalgleish.com/projects/stellar.js/

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

 

Image Credits:
================

Graphic Stock: https://www.graphicstock.com/

Freepik: http://www.freepik.com/

 

 

Photos and Videos:
===================

Important! 

The images used on the demo site are for demonstration purposes only and are not included in the download file. We have included placeholder/dummy images for each instance.
 
 
 
End:
==============
Once again, thank you very much for purchasing this template;  we'll be glad to help you if you have any questions.
If you have a more general question relating to the templates on ThemeForest, please consider visiting the forums and asking your question in the "Item Discussion" section.
 
Thanks,
Trendy Theme Team :)