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

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:

  1. /css — folder with css files.
  2. /fonts — folder with icon fonts.
  3. /images — folder with image files.
  4. /includes — folder with twitter, phpmailer and different appointment, contact form php handler.
  5. /js — folder with Javascript files.
  6. /video — folder containing HTML5 background video files.
  7. blog-*.html, ... — Blog page demos.
  8. features-*.html, ... — Different features page demos.
  9. form-*.html, ... — Different form demos.
  10. home-*.html, ... — Different Home Variations.
  11. page-*.html, ... — Different inner page demos.

Upload the template files to server with the help of one of the FTP-clients like FileZilla.

 

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]-->


We have used "Bootstrap - Responsive Menu" for this theme. From here you can get idea of the menu: http://v4-alpha.getbootstrap.com/components/navbar/
This is the basic structure of Top Nav Menu:

      
<!-- Main Menu --> <nav class="main-menu"> <div class="navbar-header"> <!-- Toggle Button --> <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse"> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> </div> <div class="navbar-collapse collapse clearfix"> <ul class="navigation clearfix"> <li class="current dropdown"><a href="index-mp-layout-1.html">Home</a> <ul> <li><a href="index-mp-layout-1.html">Homepage One</a></li> <li><a href="index-mp-layout-2.html">Homepage Two</a></li> <li><a href="index-mp-layout-3.html">Homepage Three</a></li> </ul> </li> <li class="dropdown"><a href="about-1.html">About</a> <ul> <li><a href="about-1.html">About Style One</a></li> <li><a href="about-2.html">About Style Two</a></li> </ul> </li> <li class="dropdown"><a href="service-1.html">Service</a> <ul> <li><a href="service-1.html">Services Style One</a></li> <li><a href="service-2.html">Services Style Two</a></li> <li><a href="service-details.html">Services Details</a></li> </ul> </li> <li class="dropdown"><a href="portfolio-4.html">Portfolio</a> <ul> <li><a href="portfolio-3.html">Portfolio Three Column</a></li> <li><a href="portfolio-4.html">Portfolio Four Column</a></li> <li><a href="portfolio-fullwidth.html">Portfolio Fullwidth</a></li> <li><a href="portfolio-title.html">Portfolio With Title</a></li> <li><a href="portfolio-masonry.html">Portfolio Masonry</a></li> <li><a href="portfolio-popup.html">Portfolio PopUp</a></li> <li><a href="portfolio-details.html">Portfolio Details</a></li> </ul> </li> <li class="dropdown"><a href="shop.html">Shop</a> <ul> <li><a href="shop.html">Shop Page</a></li> <li><a href="shop-single.html">Shop Single</a></li> <li><a href="shop-sidebar.html">Shop With Sidebar</a></li> <li><a href="shop-cart.html">Shop Cart</a></li> <li><a href="shop-checkout.html">Shop check Out</a></li> </ul> </li> <li class="dropdown"><a href="#">Pages</a> <ul> <li><a href="team.html">Our Team</a></li> <li><a href="team-details.html">Team Details</a></li> <li><a href="404.html">404</a></li> <li><a href="pricing-table.html">Pricing Table</a></li> <li><a href="contact-1.html">Contact style One</a></li> <li><a href="contact-2.html">Contact style Two</a></li> </ul> </li> <li class="dropdown"><a href="blog-grid.html">Blog</a> <ul> <li><a href="blog-grid.html">Blog Grid</a></li> <li><a href="blog-single.html">Blog Single</a></li> <li><a href="blog-classic.html">Blog classic</a></li> <li><a href="blog-left-sidebar.html">Blog Left Sidebar</a></li> <li><a href="blog-right-sidebar.html">Blog Right Sidebar</a></li> </ul> </li> </ul> </div> </nav> <!-- Main Menu End-->

Bootstrajp provides 3 color schemes per each menu color. The table below shows the color schemes and correspondent CSS classes:

Color scheme CSS class
default none

 

 

 

 

 

 

 

 

 



To use a color scheme, just use the proper CSS class. Examples:

a) Black Menu


  <nav class="navbar navbar-dark bg-inverse">
    <!-- Navbar content -->
</nav>

b) Blue Menu


  <nav class="navbar navbar-dark bg-primary">
    <!-- Navbar content -->
</nav> 

b) Custom color


  <nav class="navbar navbar-light" style="background-color: #e3f2fd;">
    <!-- Navbar content -->
</nav> 

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>

This template has a responsive layout and is based on the Bootstrap V3 Framework. For more information about this visit Bootstrap CSS.

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> 

 

There are one type of preloader we used
1. gif animated images
and

Gif Image preloader example:


<!-- Preloader -->
<div class="preloader"></div>

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!

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&amp;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">&times;</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">&times;</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!

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"

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&amp;display=latest&amp;size=s&amp;layout=x&amp;source=user&amp;user=52617155@N08"></script>
</div>

Replace the value of attribute count=8, user=52617155@N08

These are the scripts used in the template with their related links for documentation.

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');

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

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]