Architectuur - Interior Design, Decor, Architecture Business Template
Firstly, a huge thanks for purchasing this theme, your support is truly appreciated!
Template Features:
- Multi Page Demos
- 31+ HTML Files
- 3 Index Multipage demos
- Easy to customize
- HTML5 & CSS3
- Clean & Simple Design
- Fully Responsive Layout
- Crossbrowser Compatible with Edge, IE9+, Firefox, Safari, Opera, Chrome
- Retina ready
- Font Awesome 400+ icons
- 7 Stroke 200+ icons
- Elegant Icon Font 360+ icons
- Powered with Bootstrap
- Smooth animation
- Parallax sections
- Working Ajax contact form with validation
- Google Maps easy to setup via data attributes
- Powerful shortcodes
- Responsive video
- Well documented
- Created: October 20, 2016
- Last Update: Octobr 30, 2016
- Version 2.1
- By: Wpthemeshaper
- Email: [email protected]
Getting Started
Unzip the archive and find out the folder wpthemeshaper-client-html. There are all the template files in this folder.
The file and folder structure is something like this:
- /css — folder with css files.
- /fonts — folder with icon fonts.
- /images — folder with image files.
- /includes — folder with twitter, phpmailer and different appointment, contact form php handler.
- /js — folder with Javascript files.
- /video — folder containing HTML5 background video files.
- blog-*.html, ... — Blog page demos.
- features-*.html, ... — Different features page demos.
- form-*.html, ... — Different form demos.
- home-*.html, ... — Different Home Variations.
- page-*.html, ... — Different inner page demos.
Upload the template files to server with the help of one of the FTP-clients like FileZilla.
HEAD CSS Structure
These are the css files which are loaded into the template in Head Section.
<!-- Stylesheets -->
<link href="css/bootstrap.css" rel="stylesheet">
<link href="css/revolution-slider.css" rel="stylesheet">
<!-- Animation -->
<link rel="stylesheet" type="text/css" href="css/animations.css">
<link href="css/style.css" rel="stylesheet">
<!-- Responsive -->
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
<link href="css/responsive.css" rel="stylesheet">
<!--[if lt IE 9]><script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script><![endif]-->
<!--[if lt IE 9]><script src="js/respond.js"></script><![endif]-->
Javascript Structure
These are the JS files which are loaded into the template before the end of the HEAD and BODY Section.
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="js/jquery.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/revolution.min.js"></script>
<script src="js/jquery.fancybox.pack.js"></script>
<script src="js/jquery.fancybox-media.js"></script>
<script src="js/jquery.mixitup.min.js"></script>
<script src="js/featherlight.min.js"></script>
<script src="js/featherlight.gallery.min.js"></script>
<script src="js/css3-animate-it.js"></script>
<script src="js/validate.js"></script>
<script src="js/custom.js"></script>
HTML Structure
The general template structure is the same throughout the template. Here is the general structure:
<section class="Your_Section_Name">
<div class="container">
<div class="row">
<div class="col-md-12">
</div>
</div>
</div>
</section>
Owl Carousel
There are 7 different classes for owl carosel to make different column carousels. Those are:
- carousel-1col
- carousel-2col
- carousel-3col
- carousel-4col
- carousel-5col
- carousel-6col
- carousel-col
- data-nav="true"
- data-dots="true"
- data-duration="4000"
| Number of Col: | Modification class |
|---|---|
| 1 Column |
Use carousel-1col class to make carousel with 1 Column.
|
| 2 Columns |
Use carousel-2col class to make carousel with 2 Columns.
|
| 3 Columns |
Use carousel-3col class to make carousel with 3 Columns.
|
Preloader
There are one type of preloader we used
1. gif animated images
and
Gif Image preloader example:
<!-- Preloader -->
<div class="preloader"></div>
Contact Form
The Contact form html code example is as follows :
<!-- Contact Form -->
<form id="contact_form" name="contact_form" class="" action="includes/sendmail.php" method="post">
<div class="row">
<div class="col-sm-6">
<div class="form-group">
<input name="form_name" class="form-control" type="text" placeholder="Name *" required="">
</div>
</div>
<div class="col-sm-6">
<div class="form-group">
<input name="form_phone" class="form-control" type="text" placeholder="Phone *">
</div>
</div>
</div>
<div class="row">
<div class="col-sm-12">
<div class="form-group">
<input name="form_email" class="form-control required" type="email" placeholder="Email *">
</div>
</div>
</div>
<div class="form-group">
<textarea name="form_message" class="form-control required" rows="7" placeholder="Details Here *"></textarea>
</div>
<div class="form-group cs-mar-0">
<input name="form_botcheck" class="form-control" type="hidden" value="">
<button class="btn btn-default cs-my-btn" type="submit" data-loading-text="Please wait...">Send Us</button>
</div>
</form>
<!-- Contact Form Validation-->
<script type="text/javascript">
$("#contact_form").validate({
submitHandler: function(form) {
var form_btn = $(form).find('button[type="submit"]');
var form_result_div = '#form-result';
$(form_result_div).remove();
form_btn.before('<div id="form-result" class="alert alert-success" role="alert" style="display: none;"></div>');
var form_btn_old_msg = form_btn.html();
form_btn.html(form_btn.prop('disabled', true).data("loading-text"));
$(form).ajaxSubmit({
dataType: 'json',
success: function(data) {
if( data.status == 'true' ) {
$(form).find('.form-control').val('');
}
form_btn.prop('disabled', false).html(form_btn_old_msg);
$(form_result_div).html(data.message).fadeIn('slow');
setTimeout(function(){ $(form_result_div).fadeOut('slow') }, 6000);
}
});
}
});
</script>
For placing your email address, just go to form action location action="includes/sendmail.php" and open the sendmail.php file in includes folder. In that php file at line 32, you will see $toemail = '[email protected]'; Now just replace that email address by your own email address. Now your contact form is ready!
Mailchimp Subscribe Form
The Mailchimp subscribe form html code example is as follows :
<!-- Mailchimp Subscription Form-->
<form id="mailchimp-subscription-form1" class="newsletter-form mt-40">
<label for="mce-EMAIL"></label>
<div class="input-group">
<input type="email" id="mce-EMAIL" data-height="45px" class="form-control input-lg" placeholder="Your Email" name="EMAIL" value="">
<span class="input-group-btn">
<button type="submit" class="btn btn-colored btn-dark btn-lg m-0" data-height="45px">Subscribe</button>
</span>
</div>
</form>
<!-- Mailchimp Subscription Form Validation-->
<script type="text/javascript">
$('#mailchimp-subscription-form1').ajaxChimp({
callback: mailChimpCallBack,
url: '//wpthemeshaper.us9.list-manage.com/subscribe/post?u=a01f440178e35febc8cf4e51f&id=49d6d30e1e'
});
function mailChimpCallBack(resp) {
// Hide any previous response text
var $mailchimpform = $('#mailchimp-subscription-form1'),
$response = '';
$mailchimpform.children(".alert").remove();
console.log(resp);
if (resp.result === 'success') {
$response = '<div class="alert alert-success"><button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">×</span></button>' + resp.msg + '</div>';
} else if (resp.result === 'error') {
$response = '<div class="alert alert-danger"><button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">×</span></button>' + resp.msg + '</div>';
}
$mailchimpform.prepend($response);
}
</script>
Now you just have to replace the existing Mailchimp List URL by your own Mailchimp List URL which is shown in line 16 . Now your mailchimp subscribe form is ready!
Google Map
The Map Default code looks like this:
<!-- Google Map HTML Codes -->
<section class="map-section">
<!--Map Container-->
<div class="map-outer">
<!--Map Canvas-->
<div class="map-canvas"
data-zoom="12"
data-lat="-37.817085"
data-lng="144.955631"
data-type="roadmap"
data-hue="#ffc400"
data-title="Envato"
data-content="Melbourne VIC 3000, Australia<br><a href='mailto:[email protected]'>[email protected]</a>"
style="height: 310px;">
</div>
</div>
</section>
There are 13 pre-made map styles. You can use any of them.
All the map styles are:
- data-mapstyle="default"
- data-mapstyle="style1"
Flickr Feed
To add Flickr feed, just place the following code:
<div id="flickr-feed" class="clearfix">
<!-- Flickr Link -->
<script type="text/javascript" src="http://www.flickr.com/badge_code_v2.gne?count=8&display=latest&size=s&layout=x&source=user&user=52617155@N08"></script>
</div>
Replace the value of attribute count=8, user=52617155@N08
Javascript Links
These are the scripts used in the template with their related links for documentation.
Fonts used
By default, the template loads Roboto, Open Sans, Titillium Web and Raleway font from Google Web Font Services, you can change the font with the one that suits you best.
You will find the font code in the "style-main.css" file in the "css" folder:
@import url('https://fonts.googleapis.com/css?family=Montserrat:400,700');
@import url('https://fonts.googleapis.com/css?family=Open+Sans');
Credits
Note: All images are used for preview purpose only and not included in the final purchase files.
Images from:
https://www.flickr.com/
http://pixabay.com/
http://www.pixeden.com/free-graphics
http://dribbble.com/
https://wallpaperscraft.com/
http://behance.net/
http://pinterest.com/
Video from:
http://youtube.com/
https://vimeo.com/
Google Fonts:
Open Sans
Roboto
Playfair Display
Raleway
Droid Sans
Icon Fonts:
Font Awesome Icon Font
Pe-icon-7-stroke
Elegant Icon Font
Support
Again, thank you for purchasing this Template!
If you have any questions, please use our profile contact form on Envato ( http://themeforest.net/user/wpthemeshaper ).
We aim to answer all questions within 24 hours . In some cases the waiting time can be extended to 48 hours.
Email: [email protected]