Seozie - User Documentation

General Information

  1. Theme Version: 1.0.0
  2. Created: 25 Jun 2020
  3. Latest update: 25 Jun 2020

Thank you for choosing our theme. We hope you enjoy building your project with us. It is a powerhouse of great features and powerful functionalities that would take months to develop. The theme is fully responsive and be rest assured your project looks absolutely stunning on any types of screens.

Theme Installation

Follow the steps below to get started with your Site Template:
  1. Open ... /Template/html/frontend/ Folder to find all the Templates Files
  2. You'll have to upload these file using a FTP on your server
  3. Make sure you maintain the structure while uploading the required files/folders:
    • HTML/css - Stylesheets Folder
    • HTML/fonts - Fonts Folder
    • HTML/images - Images Folder
    • HTML/js - Javacripts Folder
    • HTML/index.html - Index File/Homepage
    Other files can be used according to your convenience.
  4. Now that you have followed these steps your basic installation is complete and ready to flaunt your site to the world.

Basic template Structure

The template has a responsive layout and is based on the Bootstrap V4 Framework . Bootstrap is the most popular HTML, CSS, and JS framework for developing responsive, mobile first projects on the web. Click Here to know more about Bootstrap.


HTML Structure

The general HTML structure is the same throughout the template. Here is the general HTML structure of the template:


<!DOCTYPE html>
<html lang="en">
<head>
</head>
<body>

<!-- pt-loader -->
<div  id="pt-loading"> 
     [LOADER CONTENT] 
</div>
<!-- pt-loader-->

<!--header -->
<header id="pt-header">
     [HEADER CONTENT] 
<header>
<!--header -->

<!--Banner--->
<section id="home" class="pt-main-home p-0">
     [BANNER CONTENT]
</section>
<!--Banner-->

<!--pt-content--->
<div class="main-content">
   [MAIN CONTENT]
</div>
<!--pt-content -->

<!--Section 1 -->
<section class="pt-section1">
     [SECTION  CONTENT]
</section>
<!--Section 1 -->

<!--Section 2 -->
<section class="pt-section2">
  [SECTION  CONTENT]
</section>
<!--Section 2 -->
</div>

<!--pt-content -->
<!--footer -->
<footer class="pt-footer">
    [FOOTER_CONTENT]
</footer>
<!--footer -->

<!--back-to-top -->
<div id="back-to-top">
    [BACK TO TOP CONTENT]
</div>
<!--back-to-top -->

<!--footer -->
<!--java-scripts-->
[PAGE JAVASCRIPTS HERE]
<!--java-scripts -->

</body>
</html>


CSS Structure

The general CSS structure is the same throughout the template. Here is the general CSS structure of the template:

<!-- CSS bootstrap-->
<link rel="stylesheet" href="css/bootstrap/bootstrap.min.css" />
<!-- REVOLUTION STYLE SHEETS -->
<link rel="stylesheet" type="text/css" href="rev-slider/css/rs6.css">
<!--  Style -->
<link rel="stylesheet" href="css/style.css" />
<!--  Responsive -->
<link rel="stylesheet" href="css/responsive.css" />

Javascript Structure

The general CSS structure is the same throughout the template. Here is the general Javascript structure of the template:

<!-- JS jquery-3.4.1.min -->
<script src="js/jquery-3.4.1.min.js"></script>

<!-- JS popper -->
<script src="js/popper/popper.min.js"></script>

<!-- JS bootstrap -->
<script src="js/bootstrap/bootstrap.min.js"></script>

<!--  JS owl-carousel-->
<script src="js/owl-carousel/owl.carousel.min.js"></script>

<!--  JS anime.min-->
<script src="js/anime.min.js"></script>

<!--  JS circle-progress.min-->
<script src="js/circle-progress.min.js"></script>

<!--  JS imagesloaded.pkgd.min-->
<script src="js/imagesloaded.pkgd.min.js"></script>

<!--  JS isotope.pkgd.min-->
<script src="js/isotope.pkgd.min.js"></script>

<!--  JS jquery.countTo-->
<script src="js/jquery.countTo.js"></script>

<!--  JS jquery.magnific-popup.min-->
<script src="js/jquery.magnific-popup.min.js"></script>

<!--  JS tox-progress-->
<script src="js/tox-progress.js"></script>

<!-- WOW JS FILES -->
<script src="js/wow.min.js"></script>

<!-- REVOLUTION JS FILES -->
<script src="rev-slider/js/rbtools.min.js"></script>
<script src="rev-slider/js/rs6.min.js"></script>
<script src="js/rev-custom.js"></script>

<!-- js custom-->
<script src="js/custom.js"></script>

Favicon icon

Favicon is an icon associated with the URL that is displayed at various places, such as in a browser’s address bar or next to the site name in a bookmark list.

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

<!-- Favicon -->
<link rel="shortcut icon" href="images/favicon.ico" />

Page Loading Transitions

Page Loading Transitions are enabled by default. If you wish to disable the page loading transitions you can simply delete the below section.

<!--=============== Loader ==================-->
<div id="pt-loading">
    <div id="pt-loading-center">
    <img src="images/loder.gif" alt="loading">
</div>
</div>
<!--=============== Loader ==================-->

Logo Settings

Page Loading Transitions are enabled by default. If you wish to disable the page loading transitions you can simply delete the below section.

 <!--=============== Navbar-brand ==================-->
<a class="navbar-brand" href="#">
    <img class="img-fluid logo" src="images/logo-white.png" alt="architeck"> 
</a>
<!--=============== Navbar-brand  ==================-->

Changing Fonts style

You can add/change the site font, from all fonts used from Google Web Font Services, with the one that suits you the best. You can find the font link in top of the HTML in all HTML file. See example below:

<link href='https://fonts.googleapis.com/css2?family=Jost:wght@300;400;500;600;700;800;900&display=swap'/>

In order to change the fonts, you will need to edit the above links with your custom font, You can easily use Google Web Font Services if you plan to use a Google Font or remove it completely. If you plan to use a self hosted font, here is an Example of using Self Hosted Fonts

Helper Classes

We have created some really useful helper classes for you. These classes help you to quick position elements without writing new CSS rules. These classes are generic helper classes predefined in the CSS pages, here is quick view what they can do


Section title

You can use this code for your page section title to maintain title style.

   
<!--=============== section-title ==================-->
<div class="pt-section-title-1 text-center"> 
      <h2 class="pt-section-title">Provide Best <span class="imp-word">Services.</span></h2> 
      <p class="pt-section-description">Lorem Ipsum is simply dummy It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout.    
    </p>
</div>

<!--=============== section-title ==================-->

Text color

You can use color in the Text. simply add .pt-text-white ( or any color you want) class where you want to use. See example below:

<!--=============== text-white ==================-->
<div class="pt-text-white"> 
<span class="pt-section-sub-title"> Services </span> 
<!--=============== text-white ==================-->
</div>

Background color

You can use color in the background. simply add .pt-bg-primary (or any color you want) class where you want to use. See example below:

<!--=============== bg-primary ==================-->
<div class="pt-bg-primary"> 
   <h2 class="pt-section-title"> Provide Best </h2> 
</div>
<!--=============== bg-primary ==================-->

Note We include 5 background color helper class in our template pt-bg-primary, pt-bg-primary-2, pt-bg-white, pt-bg-dark and pt-bg-light You can add unlimited background color class according to your needs


Background Image

You can use an image in the background simply add InlineStyle in div tag and by use of this you can create your own bg. See example below:

<!--=============== bg-overley ==================-->
<div class="pt-bg-overley pt-opacity1"
style="background-image:url(Path);">
</div>
<!--=============== bg-overley ==================-->

Parallax

You can use an image in the background simply add InlineStyle in div tag and by use of this you can create your own bg. See example below:

<!--=============== parallax ==================-->
<div class="parallax"
   style="background-image:url(Path);">
</div>
<!--=============== parallax ==================-->

Text align

You can use an image in the background simply add InlineStyle in div tag and by use of this you can create your own bg. See example below:

Class Description
.text-left which means text-align: left;
.text-center which means text-align: center;
.text-right which means text-align: right;

Shortcode

You can use an image in the background simply add InlineStyle in div tag and by use of this you can create your own bg. See example below:

  • Buttons
  • Counter
  • Fancy Box
  • Price Table
  • Progress Bar
  • Team
  • Testimonials

Button

You can use an image in the background simply add InlineStyle in div tag and by use of this you can create your own bg. See example below:

Class Code Description Result
.pt-button
<a class="pt-button" href="#"><span>pt-button</span></a>
pt button
Read More
.pt-button .pt-btn-link
<a class="pt-btn-link" href="#"><span>pt-btn-link</span></a>

pt btn link

Counter

You can use an image in the background simply add InlineStyle in div tag and by use of this you can create your own bg. See example below:

<!--=============== counter ==================-->
<div class="counter d-none d-sm-block">
   <h5 class="timer" data-to="25" data-speed="5000">25</h5>
   <label>Cool Number</label>
</div>
<!--=============== counter ==================-->

Note You Want Other Style Of Counter, Please Go In HTML Folder And Check shortcode-counter.html Page


Fancy-box

Use the below code to display Fancy Box style:

<!--=============== fancybox-box ==================-->
<div class="pt-fancybox-box-info">
    <h3 class="pt-service-title">SEO Optimization</h3>
    <div class="pt-fancy-media"><i class="flaticon-005-stationary-bike"></i></div>
    <div class="pt-fancybox-description">
    <p>It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout.</p>
</div>
</div> 
<!--=============== fancybox-box ==================-->

Note You Want Other Style Of Feature Box, Please Go In HTML Folder And Check shortcode-feature.html Page


Pricing plan

You can use an image in the background simply add InlineStyle in div tag and by use of this you can create your own bg. See example below:

<!--=============== price-table ==================-->
<div class="pt-price-block text-center"> 
<div class="pt-price-detail"> 
    <span class="pt-price-title">BASIC </span> 
    <h2 class="price"> $ 29.00</h2> 
    <p class="pt-price-duration">Per Month</p> 
<div class="pt-bg-effect"> 
    <img class="img-fluid" src="images/about/demo-7.png" alt="Gymster-image"> 
</div> 
</div> 
<ul class="pt-list-info"> 
    <li>Five brand monitors</li> 
    <li><del>12-month fixed price</del></li> 
    <li><del>Transmission charge</del></li> 
    <li><del>Marketing strategy</del></li> 
    <li><del>Free Server Domain</del></li>
    <li>Web Optimized</li>
</ul> 
<a class="pt-button pt-btn-flat" href="#">
<div class="pt-button-block">
    <span class="pt-button-line-left"></span>
    <span class="pt-button-text">Read More</span>
    <span class="pt-button-line-right"></span>
    <i class="ion ion-android-arrow-dropright pt-btn-icon"></i>
</div>
</a>
</div>
<!--===============  price-table ==================-->

Note You Want Other Style Of Counter, Please Go In HTML Folder And Check shortcode-counter.html Page


Progress Bar

Use the below code to display Progress bar style:

<!--=============== progress-bar ==================-->
<div class="progress-outer">
<div class="progress">
    <div class="progress-bar progress-bar-info active" style="width:90%;"</div>
    <div class="progress-value"Masonry Works and Plaster</div
</div
<div class="progress">
    <div class="progress-bar progress-bar-info active" style="width:67%;"</div>
    <div class="progress-value"Pre Cast Work</div>
</div
<div class="progress">
    <div class="progress-bar progress-bar-info active" style="width:97%;"</div>
    <div class="progress-value"Pre Engineered Structures</div>
</div>
<div class="progress">
    <div class="progress-bar progress-bar-info active" style="width:85%;"</div>
    <div class="progress-value"Engineered Structures</div>
</div>
</div>
<!--=============== progress-bar ==================-->

Note You Want Other Style Of Progress bar, Please Go In HTML Folder And Check shortcode-progress-bar.html Page


Team

Use the below code to display Team:

<!--=============== team ==================-->
<div class="item">
   <div class="pt-team-box">
   <div class="pt-team-img">
   <img src="images/team/5.jpg" alt="team-image"> <span class="pt-team-designation">Marketing Manager</span>
   <div class="pt-team-social">
      <ul>
      <li>
      <a href="#"><i class="fab fa-facebook-f"></i></a>
      </li>
      <li>
      <a href="#"><i class="fab fa-twitter"></i></a>
      </li>
      <li>
      <a href="#"><i class="fab fa-google-plus-g"></i></a>
      </li>
      <li>
      <a href="#"><i class="fab fa-instagram"></i></a>
      </li>
      </ul>
      </div>
      </div>
      <div class="pt-team-info">
      <h5><a class="pt-member-name text-center">Danial Frankie</a></h5>
      </div>
      </div>
      </div>
<!--=============== team ==================-->

Note You Want Other Style Of Team, Please Go In HTML Folder And Check shortcode-progress-bar.html Page


Testimonials

Use the below code to display Testimonials:

  <!--=============== testimonial ==================-->
      <div class="item">
      <div class="pt-testimonial-box pt-testimonial-box-1">
      <div class="pt-testimonial-img">
      <img src="images/testimonial/1.jpg" alt="testimonial-image">            
      <div class="pt-testimonial-meta">
      <h5>Cristian Torres</h5>
      <p>Developer</p>
      </div>
      </div>
      <div class="pt-quote">
      <img src="images/testimonial/quote.png" alt="quote-img">
      </div>
      <div class="pt-testimonial-content">
      <p>Contrary to popular belief, Lorem Ipsum is not simply Random text. It has roots in iterature from 45 BC, making it over 2000 years old. 
      </p>
      </div>
      <div class="pt-testimonial-star">
      <i class="fa fa-star"></i>
      <i class="fa fa-star"></i>
      <i class="fa fa-star"></i>
      <i class="fa fa-star"></i>
      </div>
      </div>
      </div>
      <!--=============== testimonial ==================-->

Note You Want Other Style Of Testimonial, Please Go In HTML Folder And Check shortcode-progress-bar.html Page


Browser Support

ITsolve supports all major Browsers like Google Chrome, Mozilla Firefox, Mac Safari, Opera, Internet Explorer 10 and above.