Welcome!
EasyLoan documentation. Everything you need is here.
EasyLoan documentation. Everything you need is here.
Hello there! Thanks for buying EasyLoan. This is a Landing page template with solid design especially crafted to help you built Loan Agency websites with huge variety of options.
The concept of this template is Lead Generation for loan giving companies. This template built using Twiiter's Bootstrap Framework, Simple Line Icons , Font Awesome 4.7.0, jQuery v1.12.4, jquery.counterup.js 2.0.0, jQuery Easing v1.3, Waypoints - 4.0.0. It is highly recomended that you are familiar in a way with at least HTML5 / CSS3 / Basic JQuery.
So let's jump directly to it, and start everything from scratch.
Once you download the zip file, unzip it. You should have a folder with the following folder & files by now.
| Folder | Contents |
|---|---|
| Documentation | Documentation and help instructions. |
| Themes | car, home, education, with_menubar, slider_version, without_amount_slider folders. |
All three zip files contain same folder structure.
Theme-Car/
|--- assets/
-- bootstrap/
-- font-awesome/
-- jquery/
-- simple-line-icons/
|--- css/
|--- img/
-- agents/
-- blog/
-- brand-logo/
|--- js/
Install the template via ftp :
To use google fonts, head over to Google's Fonts and add whichever font you want to your collection. Once you finished, follow the instructions and place the generated link in your HTML's file <head> tag.
The link should look like this :
<link href="https://fonts.googleapis.com/css?family=Poppins:300,400,500,600,700" rel="stylesheet" type='text/css'> body {
font-family: 'Poppins', sans-serif;
font-weight: 400;
}
Every page is built with the latest standards of HTML5, validated with the W3C HTML Validation tool and it is compatible with the latest Twitter's Bootstrap.
All pages have 3 main parts:
The template's has 3 types of Navbar:
<nav id="mainNav" class="navbar navbar-default navbar-fixed-top">
<div class="container">
<!-- Brand Logo -->
<div class="navbar-header">
<a class="navbar-brand page-scroll" href="#page-top">
<img src="img/logo.png" alt="LOGO">
</a>
</div>
<!-- Social Link -->
<div class="social_link">
<ul class="nav navbar-nav navbar-right">
<li>
<a class="" href="#"><i class="icon-social-facebook"></i></a>
</li>
<li>
<a class="" href="#"><i class="icon-social-twitter"></i></a>
</li>
<li>
<a class="" href="#"><i class="icon-social-skype"></i></a>
</li>
</ul>
</div>
</div>
</nav>
<nav id="mainNav" class="navbar navbar-default navbar-fixed-top">
<div class="container">
<!-- Brand Logo -->
<div class="navbar-header">
<a class="navbar-brand page-scroll" href="#page-top">
<img src="img/logo_home.png" alt="LOGO">
</a>
</div>
<!-- Contact Number -->
<div class="social_link">
<ul class="nav navbar-nav navbar-right call_to">
<li>
<a class="#" href="tel:+0000000000"><i class="icon-phone"></i> 202-123-4567</a>
</li>
</ul>
</div>
</div>
</nav>
The template's has 2 types of Header:
<header id="page_top" class="car_loan">
<div class="container">
<div class="row">
<div class="col-sm-7">
<div class="header-content">
<div class="header-content-inner">
<h1>Instant Approval For Car Loan</h1>
<p>Lowest Interest Rates - Calculate EMI - Check Eligibility - Instant e-Approval - Special Offers</p>
<h2>7.25% <span>For New Car</span></h2>
<h2>8.30% <span>For Old Car</span></h2>
<a href="#features" class="btn btn-outline btn-xl page-scroll">Why Choose Us ?</a>
</div>
</div>
</div>
<div class="col-sm-5">
<div class="form-container">
<div class="form-mockup">
<h2>Request Quote Now</h2>
<h4>Easy to apply for a loan with us,Once you have complete this form. </h4>
<form action="lead.php" method="post">
<div class="form-group">
<input type="text" name="name" class="form-control" placeholder="Name">
</div>
<div class="form-group">
<input type="email" name="email" class="form-control" placeholder="E-mail">
</div>
<div class="form-group">
<input type="text" name="phone" class="form-control" placeholder="Phone">
</div>
<div class="form-group">
<input type="text" id="autocomplete" name="city" class="form-control" placeholder="Type Your City Name"/>
</div>
<div class="form-group">
<input type="text" class="form-control" name="zip_code" placeholder="Zip Code">
</div>
<div class="form-group">
<div class="button-slider">
<div class="btn-group btn_group">
<div class="btn btn-default btn_amount">Amount </div>
<div class="btn btn-default btn_slider">
<input id="bootstrap-slider" type="text" name="amount" data-slider-min="1" data-slider-max="50000" data-slider-step="1" data-slider-value="25000"/>
<div class="valueLabel"><span class="text_span">Amount </span> $<span id="sliderValue">25000</span></div>
</div>
</div>
</div>
</div>
<button type="submit" class="btn btn-default quote_btn">Send Request</button>
</form>
</div>
</div>
</div>
</div>
</div>
</header>
header.car_loan{
background-image: linear-gradient(rgba(21, 84, 154, 0.85), rgba(21, 84, 154, 0.85)), url("../img/header.jpg");
background-image: -webkit-linear-gradient(rgba(21, 84, 154, 0.85), rgba(21, 84, 154, 0.85)), url("../img/header.jpg");
background-image: -moz-linear-gradient(rgba(21, 84, 154, 0.85), rgba(21, 84, 154, 0.85)), url("../img/header.jpg");
background-image: -ms-linear-gradient(rgba(21, 84, 154, 0.85), rgba(21, 84, 154, 0.85)), url("../img/header.jpg");
background-image: -o-linear-gradient(rgba(21, 84, 154, 0.85), rgba(21, 84, 154, 0.85)), url("../img/header.jpg");
}
<header id="page_top" class="top-slider">
<div id="top-slider" class="carousel bs-slider fade control-round indicators-line" data-ride="carousel" data-pause="hover" data-interval="5000" >
<!-- Indicators -->
<ol class="carousel-indicators">
<li data-target="#top-slider" data-slide-to="0" class="active"></li>
<li data-target="#top-slider" data-slide-to="1"></li>
<li data-target="#top-slider" data-slide-to="2"></li>
</ol>
<!-- Wrapper For Slides -->
<div class="carousel-inner" role="listbox">
<!-- Third Slide -->
<div class="item active">
<!-- Slide Background -->
<img src="img/slider/header_car.jpg" alt="Slider Image" class="slide-image"/>
<div class="bs-slider-overlay"></div>
<div class="container">
<div class="row">
<!-- Slide Text Layer -->
<div class="slide-text slide_style_left">
<h1 data-animation="animated zoomInRight">Get Your Car Loan</h1>
<p data-animation="animated fadeInLeft">Instant Approval For Car Loan</p>
<a href="#" class="btn btn-default" data-animation="animated fadeInLeft" data-toggle="modal" data-target="#Quote-form">Get Quote</a>
<a href="#features" class="btn btn-primary" data-animation="animated fadeInRight">Learn More</a>
</div>
</div>
</div>
</div>
<!-- End of Slide -->
<!-- Second Slide -->
<div class="item">
<!-- Slide Background -->
<img src="img/slider/header_home.jpg" alt="Slider Image" class="slide-image"/>
<div class="bs-slider-overlay"></div>
<!-- Slide Text Layer -->
<div class="slide-text slide_style_center">
<h1 data-animation="animated flipInX">Get Your Home Loan</h1>
<p data-animation="animated lightSpeedIn">Instant Approval For Home Loan</p>
<a href="#" class="btn btn-default" data-animation="animated fadeInLeft" data-toggle="modal" data-target="#Quote-form">Get Quote</a>
<a href="#features" class="btn btn-primary" data-animation="animated fadeInRight">Learn More</a>
</div>
</div>
<!-- End of Slide -->
<!-- Third Slide -->
<div class="item">
<!-- Slide Background -->
<img src="img/slider/header_edu.jpg" alt="Slider Image" class="slide-image"/>
<div class="bs-slider-overlay"></div>
<!-- Slide Text Layer -->
<div class="slide-text slide_style_right">
<h1 data-animation="animated zoomInLeft">Get Your Education Loan</h1>
<p data-animation="animated fadeInRight">Instant Approval For Education Loan</p>
<a href="#" class="btn btn-default" data-animation="animated fadeInLeft" data-toggle="modal" data-target="#Quote-form">Get Quote</a>
<a href="#features" class="btn btn-primary" data-animation="animated fadeInRight">Learn More</a>
</div>
</div>
<!-- End of Slide -->
</div>
<!-- End of Wrapper For Slides -->
<!-- Left and Right Control. If You Like to use it, just remove comment tag -->
<!-- Left Control -->
<a class="left carousel-control" href="#top-slider" role="button" data-slide="prev">
<span class="fa fa-angle-left" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<!-- Right Control -->
<a class="right carousel-control" href="#top-slider" role="button" data-slide="next">
<span class="fa fa-angle-right" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div> <!-- End Top Slider -->
</header><!-- End Of Header -->
To setup a section use:
<section id="your-section-id" class="your-section-class">
<div class="container">
<div class="row">
.....
</div>
</div>
</section>
To setup a Counter use:
<div class="col-md-3 col-sm-6">
<div class="single_counter">
<p class="counter_icon"><i class="icon-people"></i></p>
<span class="counter">500</span>K
<p>Satisfied Clients</p>
</div>
</div>
To setup a Customer Reviews use:
<div class="single-testimonial">
<div class="testimonial-holder">
<div class="testimonial-content">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Adipisci animi consequatur cupiditate delectus dicta dolore dolorem ex harum ipsum laborum nobis nulla odit officia. Adipisci animi consequatur cupiditate delectus dicta dolore dolorem ex harum ipsum laborum nobis nulla odit officia
<div class="testimonial-caret"><i class="fa fa-caret-down"></i></div>
</div>
<div class="row">
<div class="testimonial-user clearfix">
<div class="testimonial-user-image"><img src="img/t3.jpg" alt=""></div>
<div class="testimonial-user-name">Dev Krishna <br><a href="#">Roswell, GA</a></div>
</div>
</div>
</div>
</div>
To setup a Blog Post use:
<div class="col-md-4 col-sm-12 mar-20t">
<div class="blog_worp">
<div class="blog_img">
<a class="imghover" href="#"><img class="img-responsive" alt="Blog Img 01" src="img/blog/blog.jpg"></a>
</div>
<div class="blog_content">
<h2><a class="title" href="#">Home Loan For You</a></h2>
<h4>By Admin on Jan 19, 2017</h4>
<p>Lorem ipsum dolor sitamet secteture adipiscing eilit mauris diem lorem ipsum anibus atdsim eipit.</p>
<a class="btn-link" href="#">Learn More</a>
</div>
</div>
</div>
To set up a Brand Logo use:
<li class="">
<a href="#"><img src="img/brand-logo/b_logo.png" alt="Brand Logo"></a>
</li>
Favicons are located in img/favicon/ folders. You can simply change them by replacing it with your own favicon icon, and include this code to the HTML Documents:
<link rel="shortcut icon" href="img/favicon.ico" type="image/x-icon">
<link rel="icon" href="img/favicon.ico" type="image/x-icon">
Recommended service to use - Generated by RealFaviconGenerator
To change logo, simply replace the logo.png at img/logo.png.
Request Quote Form contains a price range slider named 'Amount'. You can reset default value or range of slider.
<div class="btn btn-default btn_slider">
<input id="bootstrap-slider" type="text" data-slider-min="1" data-slider-max="5000" data-slider-step="1" data-slider-value="2500"/>
<div class="valueLabel"><span class="text_span">Amount </span> $<span id="sliderValue">2500</span></div>
</div>
To set maximum value of slider, just put value at data-slider-max="put maximun value here".data-slider-value="put deafult value here".
You can set your social links, at the page's navigation and Section Social And NewsLetter. Following a simple markup, you just add the links to your desired social network:
<li>
<a class="" href="#"><i class="icon-social-facebook"></i></a>
</li>
There are 3 sets of icon included in this template :
<div class="icon-block icon-block-dark">
<i class="icon ion-ios-crop"></i>
<h3 class="icon-block-title">
EasyLoan
</h3>
<p>
We are a creative agency and this here I present to you our icon blocks.
</p>
</div>
Recommended Link for use:
To make any button go to top when clicked, use this class : .page_top
In order to set the font size, we can use the big class (30px),bigger class (68px), the super class (72px), or the hyper (96px) class. E.g
<h1 class="text-center normal">This is a normal sized title</h1>
Assigning different weights through these classes: black, bold, regular, light, hairline.
Assigning the following classes to a text will make them uppercase, lowercase and italic: text-caps, text-lowercase, and text-italic.
To create contact information block such as Opening Info, Location or Address info simply use the following markup
<div class="col-lg-4 col-md-5 col-sm-6 col-md-offset-1">
<address>
<p class="address_icon"><i class="icon-home"></i></p>
<h3>Office Location</h3>
<p class="lead"><i class="icon-location-pin"></i> EasyLoan LLC.<br> Washington, DC 20301.</p>
<p class="lead"><i class="icon-screen-smartphone"></i> Phone: 121-000-1234</p>
<p class="lead"><i class="icon-paper-plane"></i> Fax: 121-000-9876</p>
<p class="lead"><i class="icon-envelope-open"></i> Email: info@yourdomain.com</p>
</address>
</div>
To change the subjects that someone can contact you, simply replace the names / icons.
To setup your contact form you will need to edit the mailer.php file. Open mailer.php file you will get instruction there with comment.