Introduction

Thank you for purchasing Wizixo theme! We’re glad that you found what you were looking for. It is our goal that you are always happy with what you bought from us, and We hope that you will be able to create an outstanding website with our theme easily.

Before proceeding with the theme installation, It is recommended that you follow the steps listed below. We have covered all kinds of necessary information, and provide you with all the guidelines and details that you will need to use Wizixo theme. If you can’t find the answer you’re looking for, We encourage you to reach us through our Support portal. We'll be glad to help you out in your queries. Please Generate ticket through our Support portal.

Directory structure

Once you have downloaded the package, after theme extracting, you will see the following files & folder structure:

  • documentation
    Includes theme's documentation files (on theme editing and setup).
    • index.html
      Main documentation file. You are reading it at the moment.
  • template
    Includes all assets and template files, used in theme
      assets
      Includes all assets files, like CSS, Images, JS, SCSS and plugins used in theme
        css
        Includes all .css files, used in theme
      • images
        Includes all images, used in .html files.
      • include
        Contains PHP files for contact form mailing functionality.
      • js
        Includes plugin's initialization file
      • scss
        Includes all of raw source files that are used to create the final CSS that is included in theme
      • vendor
        Includes all plugins files.
    • index.html
      You will find here all .html files used in theme
  • gulpfile.js
    All the build commands
    package.json
    List of dependencies and npm information
    README.MD

Gulp

Gulp is a toolkit for automating painful or time-consuming tasks in your development workflow, so you can stop messing around and build something great in no time!

1. Install node

In order to use Gulp, you will need to download Node JS. If you don't have Node installed in your system, Please download the stable version of Node.js (LTS) NOT the latest.

Download Node JS

2. Install Gulp.js Globally

After installing Node on your system you can proceed to Gulp installation. Simply run the command below in your terminal which will install Gulp globally.

npm install gulp-cli -g

Note: If you are using MacOS please use sudo keyword in the command because they need administrator rights to install Gulp globally. So full command will be sudo npm install gulp-cli -g

Gulp installation Step1

3. Install NPM modules

First, change the command line path into your project where Wizixo folder is located.

Once the path of your command line is changed to Wizixo folder, you may run package.json file by using the following command:

npm install

It might take a couple of minutes depends on your Internet connection. After successful completion of npm install command, you will be able to see node_modules folder that Gulp created (Please refer attached scrrenshot for final folders your project will contain). Everything is now installed and ready to go!

Gulp installation Step2 Gulp installed

4. Running Gulp

Now you're ready to start building new pages. All you have to do is run "gulp" in Terminal. This will track all the sass file changes and start a local webserver.

gulp How to run Gulp from CMD

Customization

Learn how to create your own style without changing the theme's core files so that you can take advantage of future updates.

SCSS Method - user.scss (highly recommended)

We highly recommended to make edits and additions to the template CSS is to use the provided user-variables.scss and user.scss files located in the template/assets/scss folder.

  • user-variables.scss will contain each variable you want to edit. Simply copy the variables you need to edit from the main _variables.scss and paste it in this file. It will automatically override the default values with the new ones.
  • _user.scss will contain styles you want to add or edit.

Compiling changes

In order to see the changes, running Gulp command is required. To learn more about Gulp go the gulp section.

Note:When you update Wizixo, make sure you have backup of your files and not to override the user’s custom file, that may contain styles you have created already.

CSS Method - custom.scss

If you prefer to work with wizixo as a static source without Gulp and Sass, you will need to add custom CSS through a separate CSS file.

You just need to link custom.css at the end of <head> tag of each page. See example below:

<link rel="stylesheet" type="text/css" href="assets/css/custom.css" />

Page Loading (pre-loader)

You can change page pre-loader by changing below img path to your new pre-loader image path.


<div class="preloader">
  <img src="images/preloader.svg" alt="Pre-loader">
</div>


How to change Preloader color?

You can change the preloader color very easily. To do so, Just open preloader.svg file in your preferable text editor and change HEX color code with your value. You will also find Instructions in comment section of SVG file when you open this in text editor.

Note: Page Pre-loader are enabled by default. If you wish to disable the page pre-loader you can simply delete above code from all HTML files.

Logo Settings

Logo can be changed from below code inside the header container.


<!-- Logo -->
        <a class="navbar-brand" href="index.html">
          <!-- SVG Logo Start -->
          <svg class="navbar-brand-item" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" preserveAspectRatio="xMinYMid" width="325.656" height="100" viewBox="0 0 325.656 100">
            <defs>
              <linearGradient id="LogoGradient">
                <stop class="fill-grad-start" offset="0%"/>
                <stop class="fill-grad-end" offset="100%"/>
              </linearGradient>
            </defs>
            <g><path d="M320.187,75.278 C316.545,78.817 312.335,80.585 307.558,80.585 C302.721,80.585 298.497,78.830 294.885,75.322 C291.271,71.813 289.466,67.749 289.466,63.129 L289.466,55.058 C289.466,50.440 291.243,46.404 294.797,42.953 C298.351,39.503 302.605,37.778 307.558,37.778 C312.393,37.778 316.617,39.488 320.231,42.909 C323.843,46.330 325.650,50.381 325.650,55.058 L325.650,63.129 C325.650,67.690 323.828,71.740 320.187,75.278 ZM316.473,55.086 C316.473,52.763 315.583,50.671 313.807,48.813 C312.029,46.954 309.946,46.023 307.558,46.023 C305.111,46.023 303.013,46.954 301.265,48.813 C299.517,50.671 298.643,52.763 298.643,55.086 L298.643,63.103 C298.643,65.485 299.517,67.620 301.265,69.507 C303.013,71.396 305.111,72.339 307.558,72.339 C309.946,72.339 312.029,71.396 313.807,69.507 C315.583,67.620 316.473,65.485 316.473,63.103 L316.473,55.086 ZM285.184,76.023 C285.184,77.018 284.513,78.027 283.173,79.050 C281.832,80.072 280.551,80.585 279.328,80.585 C278.220,80.585 277.434,80.234 276.968,79.532 L267.529,65.058 L258.090,79.532 C257.565,80.234 256.749,80.585 255.642,80.585 C254.535,80.585 253.296,80.087 251.928,79.094 C250.558,78.100 249.874,77.076 249.874,76.023 C249.874,75.440 250.078,74.883 250.486,74.357 L261.323,58.743 L251.010,44.006 C250.602,43.480 250.398,42.953 250.398,42.427 C250.398,41.374 251.083,40.337 252.452,39.313 C253.821,38.290 255.147,37.778 256.429,37.778 C257.478,37.778 258.206,38.129 258.614,38.830 L267.529,52.865 L276.444,38.918 C276.909,38.159 277.667,37.778 278.716,37.778 C279.881,37.778 281.163,38.290 282.562,39.313 C283.960,40.337 284.659,41.374 284.659,42.427 C284.659,42.896 284.454,43.422 284.047,44.006 L273.647,58.830 L284.572,74.357 C284.979,74.883 285.184,75.440 285.184,76.023 ZM238.687,27.865 C237.230,27.865 235.978,27.383 234.929,26.418 C233.880,25.453 233.356,24.328 233.356,23.041 C233.356,21.696 233.880,20.556 234.929,19.620 C235.978,18.685 237.230,18.216 238.687,18.216 C240.143,18.216 241.397,18.685 242.445,19.620 C243.494,20.556 244.019,21.696 244.019,23.041 C244.019,24.328 243.494,25.453 242.445,26.418 C241.397,27.383 240.143,27.865 238.687,27.865 ZM224.617,79.883 L197.435,79.883 C196.387,79.883 195.585,79.560 195.032,78.910 C194.477,78.260 194.202,77.512 194.202,76.665 C194.202,75.659 194.726,74.416 195.775,72.935 L214.478,45.673 L197.872,45.673 C197.115,45.673 196.444,45.307 195.862,44.572 C195.279,43.837 194.988,42.963 194.988,41.946 C194.988,40.930 195.250,40.069 195.775,39.364 C196.299,38.658 196.998,38.304 197.872,38.304 L223.131,38.304 C224.005,38.304 224.748,38.573 225.360,39.109 C225.972,39.646 226.277,40.422 226.277,41.437 C226.277,42.680 225.810,43.954 224.879,45.256 L206.088,72.515 L224.617,72.515 C225.432,72.515 226.131,72.868 226.714,73.574 C227.296,74.280 227.588,75.169 227.588,76.241 C227.588,77.258 227.311,78.119 226.758,78.825 C226.204,79.531 225.491,79.883 224.617,79.883 ZM182.753,27.865 C181.295,27.865 180.043,27.383 178.994,26.418 C177.946,25.453 177.421,24.328 177.421,23.041 C177.421,21.696 177.946,20.556 178.994,19.620 C180.043,18.685 181.295,18.216 182.753,18.216 C184.208,18.216 185.462,18.685 186.511,19.620 C187.560,20.556 188.084,21.696 188.084,23.041 C188.084,24.328 187.560,25.453 186.511,26.418 C185.462,27.383 184.208,27.865 182.753,27.865 ZM158.544,78.918 C158.077,80.146 156.853,80.760 154.873,80.760 C152.891,80.760 151.639,80.175 151.115,79.006 L143.511,56.374 L135.994,78.743 C135.470,80.087 134.159,80.760 132.061,80.760 C130.139,80.760 128.915,80.087 128.391,78.743 L114.844,43.304 C114.610,42.602 114.494,42.106 114.494,41.813 C114.494,40.760 115.134,39.854 116.417,39.094 C117.698,38.334 119.009,37.953 120.350,37.953 C121.806,37.953 122.738,38.510 123.147,39.620 L132.848,66.901 L140.277,42.690 C140.684,41.345 141.763,40.673 143.511,40.673 C145.259,40.673 146.336,41.345 146.745,42.690 L154.086,67.076 L163.875,39.620 C164.225,38.510 165.127,37.953 166.584,37.953 C167.865,37.953 169.163,38.334 170.474,39.094 C171.785,39.854 172.440,40.790 172.440,41.901 C172.440,42.369 172.323,42.837 172.091,43.304 L158.544,78.918 ZM182.753,38.304 C184.092,38.304 185.200,38.582 186.074,39.137 C186.948,39.694 187.385,40.409 187.385,41.287 L187.385,76.813 C187.385,77.574 186.933,78.275 186.030,78.918 C185.126,79.562 184.034,79.883 182.753,79.883 C181.470,79.883 180.393,79.562 179.519,78.918 C178.645,78.275 178.208,77.574 178.208,76.813 L178.208,41.287 C178.208,40.409 178.630,39.694 179.475,39.137 C180.319,38.582 181.412,38.304 182.753,38.304 ZM238.687,38.304 C240.027,38.304 241.134,38.582 242.008,39.137 C242.882,39.694 243.319,40.409 243.319,41.287 L243.319,76.813 C243.319,77.574 242.867,78.275 241.965,78.918 C241.061,79.562 239.968,79.883 238.687,79.883 C237.405,79.883 236.327,79.562 235.453,78.918 C234.579,78.275 234.142,77.574 234.142,76.813 L234.142,41.287 C234.142,40.409 234.564,39.694 235.410,39.137 C236.254,38.582 237.346,38.304 238.687,38.304 Z" class="fill-dark"/>
              <circle cx="50.047" cy="50" r="50.047" fill="url(#LogoGradient)"/>
              <path d="M86.607,38.585 L55.868,69.317 C53.678,71.508 50.126,71.508 47.936,69.317 C45.745,67.127 45.745,63.577 47.936,61.387 L78.674,30.654 C80.865,28.464 84.416,28.464 86.607,30.654 C88.797,32.844 88.797,36.395 86.607,38.585 ZM26.806,69.317 C25.679,70.444 24.193,70.981 22.716,70.948 C22.636,70.953 22.560,70.972 22.478,70.972 L20.552,70.972 C18.108,70.972 16.128,68.992 16.128,66.548 L16.128,33.452 C16.128,31.008 18.108,29.028 20.552,29.028 L22.478,29.028 C24.922,29.028 26.902,31.008 26.902,33.452 L26.902,53.359 L49.612,30.654 C51.802,28.464 55.354,28.464 57.544,30.654 C59.735,32.844 59.735,36.395 57.544,38.585 L26.806,69.317 Z" class="fill-white"/>
            </g>
          </svg>
          <!-- SVG Logo End -->
        </a>

If you want to place image as logo, then simply replace the SVG code with img tag. Like this:

<a class="navbar-brand" href="index.html"> <img src="assets/images/yourlogofile.png" alt="Logo"> </a>
Logo height:

By default logo height is 44px. To change logo height, You should change value in $navbar-brand-height in _variables.scss file as per your need. Please note that if you increase logo height, your header height will increase automatically. You don't need to change your header height manually.

Fonts

By default, Wizixo uses the Google fonts. In case, If you want to change font to any other Google fonts, Please have a look in the head part of the webpage and you will find this tag:


<!-- Google Font -->
<link href="https://fonts.googleapis.com/css?family=Poppins:300,400,500,600,700,800,900%7CPlayfair+Display:400,400i,700,700i%7CRoboto:400,400i,500,700" rel="stylesheet">


To change the font, first go to Google fonts, choose your desired font and use the generated code.

If you have a need to use custom fonts, Remove above section completely and visit Self Hosted Fonts

Header Types

Wizixo comes with many predefined header styles. Simply adding the Header type class name to the Header tag will activate the Header Type. The list of Header type classes and it's descriptions are provided below for the reference:

Header Class name Description Example code
.navbar-light Header with white background & dark text.
<header class="...... navbar-light">
      ...
</header>
.navbar-dark Header with dark background & white text.
<header class="...... bg-dark navbar-dark">
      ...
</header>
.navbar-primary Header with primary background & white text.
<header class="...... bg-primary navbar-primary">
      ...
</header>
.header-transparent Header with transparent background. You can use the .header-dark, .header-light or .header-primary class depending on your site background.
<header class="...... header-transparent">
      ...
</header>
.navbar-sticky Header will stick to the top when scrolling.
<header class="...... header-sticky">
      ...
</header>

Theme color scheme

How to change theme default color scheme

We understand your need of changing theme color scheme at ease so We've got you covered. Whether you want to work with SCSS or CSS, both methods are described below. Please note we highly recommend to go with SCSS method.

#1 Using SCSS

After Completing gulp and sass setup, Copy below code and paste it in _user-variables.scss file located at template/assets/scss and then compile using gulp sass. If you are new to gulp, Please go through Gulp section here. Follow the steps and you will be able to build your site at very ease.

// User Variables $primary: #f5b150; $theme-colors: (); $theme-colors: map-merge( ( "primary": $primary, "secondary": $secondary, "success": $success, "info": $info, "warning": $warning, "danger": $danger, "light": $light, "dark": $dark ), $theme-colors ); //Theme gradient Colors - Starting and ending point $grad-start: #f07a23; $grad-end: #f5b150; $link-color: $primary; $link-hover-color: darken($link-color, 10%); $navbar-light-hover-color: $primary; $navbar-light-active-color: $primary; $dropdown-link-hover-color: $primary !important; $dropdown-link-active-color: $primary;

By using this method, You have to change color codes only at three places and all your website color shades will be set properly.

Gulp must be running in your system to compile this. So when gulp is running, and you put above code into _user-variables.scss file and after saving the file, Gulp will compile the same and You will be automatically redirected to your default browser with site opened and changed orange color scheme.

#2 Using CSS

If you want to change theme default color scheme just using CSS, You can choose one of the 2 methods (We recommend Method 2 – Using color.css)

Method 1: Using style.css

If you don’t want to take advantage of future updates of theme, You can change theme color by replacing your new HEX color code in style.css located in template/assets/css directory. Please note this is not recommended option.

Method 2: Using color.css

Please look out for color.css file in template/assets/css directory for blue color as an example. You should link that CSS at the end in head section after theme CSS like below code:

<!-- Theme CSS --> <link rel="stylesheet" type="text/css" href="assets/css/style.css" /> <!-- Theme Color CSS --> <link rel="stylesheet" type="text/css" href="assets/css/color.css" />

Provided color.css within theme is for blue color scheme as an example. Please replace your color codes in the same and check the output.

Sliders

Wizixo Swiper slider

Swiper - is the free and most modern mobile touch slider. See Wizixo Swiper slider example code below:


<div class="swiper-container swiper-arrow-hover swiper-slider-fade">
  <div class="swiper-wrapper">
    <!-- slide 1-->
    <div class="swiper-slide">
      <div class="slider-content">
        [Slider content goes here]
      </div>
    </div>
    <!-- slide 2-->
    <div class="swiper-slide">
      <div class="slider-content">
        [Slider content goes here]
      </div>
    </div>
  </div>
  <!-- Slider buttons -->
  <div class="swiper-button-next"><i class="ti-angle-right"></i></div>
  <div class="swiper-button-prev"><i class="ti-angle-left"></i></div>
  <div class="swiper-pagination"></div>
</div>


Wizixo swiper slider setting can be found in functions.js file. You can customize as per your need OR you can use any demos from swiper slider demos.

Owl Carousel 2 is touch enabled jQuery plugin that lets you create a beautiful responsive carousel slider. See Owl Carousel example code below:


<div class="owl-carousel">
  <div class="item"><img src="images/clients/01.png" alt=""></div>
  <div class="item"><img src="images/clients/02.png" alt=""></div>
  <div class="item"><img src="images/clients/03.png" alt=""></div>
</div>



We have provided owl Carousel data attributes so you don't need to play with JavaScrips or CSS. The list of owl Carousel data attributes type name and it's descriptions are provided below for the reference:

Data Attributes name Description Available options
data-arrow="true" Enable or disable arrow true or false
data-dots="false" Enable or disable dots true or false
data-items="1" Slider items in all device. numbers (1 2 3 4 5 6 ....)
data-items-xs="2" Slider items in extra small device. start to 575px numbers (1 2 3 4 5 6 ....)
data-items-sm="3" Slider items in small device. 576px to 767px numbers (1 2 3 4 5 6 ....)
data-items-md="4" Slider items in medium device. 768px to 991px numbers (1 2 3 4 5 6 ....)
data-items-lg="5" Slider items in large device. 992px to 1199px numbers (1 2 3 4 5 6 ....)
data-items-xl="6" Slider items in extra large device. 1200 to end numbers (1 2 3 4 5 6 ....)
data-autoplay="500" Data autoplay time in MS number MS
data-speed="1000" Data slide speed in MS number MS
data-margin="30" Margin between 2 slider items in pixel number in px
data-loop="true" Slider loop enable or disable true or false
data-start="2" Number of slide show first numbers (1 2 3 4 5 6 ....)
data-slideby="2" Number of slider slide at a time numbers (1 2 3 4 5 6 ....)
data-pause="true" Slider pause on mouse hover. true or false
data-merge="2" Number of slider merge use in slider items class DIV numbers (1 2 3 4 5 6 ....)
data-drag="true" Slide on mouse drag true or false
data-rewind="true" Go backwards when the boundary has reached. true or false
data-center="true" Start from center of slide item true or false
data-video="true" Enable fetching YouTube/Vimeo/Vzaar videos. View Example true or false
data-lazyload="true" Enable lazy load View Example true or false
data-rtl="true" Enable Right to left language true or false

See example of how to use owl Carousel data attributes:


<div class="owl-carousel" data-arrow="true" data-dots="false" data-items-xl="6" data-items-lg="5" data-items-md="4" data-items-sm="3" data-items-xs="2" >
  <div class="item"><img src="images/clients/01.png" alt=""></div>
  <div class="item"><img src="images/clients/02.png" alt=""></div>
  <div class="item"><img src="images/clients/03.png" alt=""></div>
</div>

There are tons of more options available. Visit owl Carousel documentation for more.

Page Elements

Page Titles

Use below code to display page title.


<div class="title text-center">
  <span class="pre-title">Pre title</span>
  <h2>Title</h2>
  <p>Description</p>
</div>


Note:Use .text-right and .text-center to display title in right align and center align.

Section padding

Use below helper class to maintain whole website section padding:

Tag name or Class Description
<section> padding top 5rem and padding bottom 3.8rem
.section-pt padding top 5rem
.section-pb padding bottom 3.8rem

Sticky sidebar (sticky element)

You can easily transform your existing Sidebar Content into Sticky Content by adding .sticky-element class:


<!-- Sidebar -->
<div class="col-md-4 sidebar">
  <div class="sticky-element">
    <h2>Job details</h2>
    <ul class="list-unstyled p-0">
      <li class="mb-3"><strong>Posted:</strong> 3 July 2018 </li>
      <li class="mb-3"><strong>Location:</strong> London </li>
      <li class="mb-3"><strong>Specialism:</strong> IT </li>
      <li class="mb-3"><strong>Job type:</strong> Permanent </li>
      <li class="mb-3"><strong>Reference number:</strong> CRR0001-18 </li>
      <li class="mb-3"><strong>Contact:</strong> Jessica Mores</li>
      <li class="mb-3"><strong>Phone:</strong> (+251) 854-6308 </li>
    </ul>
    <a class="d-block mt-3" href="#"><i class="fa fa-print mr-2"></i> Print</a>
  </div>
</div>
<!-- Sidebar end-->


Note: Sticky Sidebar currently works best with the Sidebar and Bootstrap Columns. use .sticky-element class inside bootstrap columns as above example.

Sticky sidebar offset top can be set from functions.js file.


var stickyBar = function() {
    if($(".sticky-element").length) {
      var $stickyElement = $(".sticky-element");
      if ($(window).width() <= 1024) {
          $stickyElement.trigger('sticky_kit:detach');
      }
      else {
          $stickyElement.stick_in_parent({
              offset_top: 100
          });
      }
    }
};


Back to top

Use below code to display back to top. Back to top is enabled by default if you want to remove back to top then simple remove below code from all HTML files:


<div> <a href="#" class="back-top btn btn-grad"><i class="ti-angle-up"></i></a> </div>


Buttons

You can place button just about anywhere using the CSS Prefix .btn and the button name. The list of button type classes and it's descriptions are provided below for the reference:

Class name Description Example code
.btn-primary Primary color button
<a class="btn btn-primary" href="#">Button</a>
.btn-grad Gradient color button
<a class="btn btn-grad" href="#">Button</a>
.btn-dark Dark color button
<a class="btn btn-dark" href="#">Button</a>
.btn-light Light color button
<a class="btn btn-light" href="#">Button</a>
.btn-white White color button
<a class="btn btn-white" href="#">Button</a>
.btn-secondary Secondary (dark gray) color button
<a class="btn btn-secondary" href="#">Button</a>
.btn-success Success (green) color button
<a class="btn btn-success" href="#">Button</a>
.btn-danger Danger (red) color button
<a class="btn btn-danger" href="#">Button</a>
.btn-warning Warning (yellow) color button
<a class="btn btn-warning" href="#">Button</a>
.btn-info Info (cyan) color button
<a class="btn btn-info" href="#">Button</a>
.btn-link Simple link button
<a class="btn btn-link" href="#">link</a>
.btn-outline-primary Button with borders. To add button with border, You just need to use outline after btn prefix and then simply button type. For example, .btn-outline-dark This will create button with dark border.
<a class="btn btn-outline-primary" href="#">Button</a>
.btn-round Rounded Button
<a class="btn btn-round btn-primary" href="#">Button</a>
Button with icon. You can use any font icon before button name.
<a class="btn btn-primary" href="#">
<i class="fa fa-arrow-circle-right"></i>Default
</a>
.btn-xs Use this class for mini button
<a class="btn btn-primary btn-xs" href="#">Button</a>
.btn-sm Use this class for small button
<a class="btn btn-primary btn-sm" href="#">Button</a>
.btn-lg Use this class for large button
<a class="btn btn-primary btn-lg" href="#">Button</a>

Font icons

We have included font awesome and Themify Icons fonts in Wizixo theme. A complete list of icons along with the class names can be found here: Font awesome and Themify Icons

Font awesome:

You can place Font Awesome icons just about anywhere using the CSS Prefix fa and the icon's name. See below example code:


<i class="fa fa-book"></i>


Themify Icons:

You can place Themify Icons icons just about anywhere using icon's name. See below example code:


<i class="ti-arrow-up"></i>


Google map

We have uses 2 types of Google map in Wizixo. Simple Google map with iFrame and Custom Google map with different styles.

Google map with iFrame:

Follow below steps to create Google map iFrame.

  • Go to Google map
  • Search your address in Google map search bar and click on your location or your location pin icon
  • Click on Hamburger menu icon and click on Share or embed map
  • In popup select Embed a map and copy HTML iFrame code
  • Past it in your HTML

See example code below:


<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3151.8112338627093!2d144.96300941550422!3d-37.81789024205276!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x6ad642b4758afc1d%3A0x3119cc820fdfc62e!2sEnvato!5e0!3m2!1sen!2sin!4v1539108561743" width="600" height="450" frameborder="0" style="border:0" allowfullscreen></iframe>


Custom Google map with different styles:

We have created 6 styles of google map in wizixo.

  1. Standard map id="map-standard"
  2. Silver map id="map-silver"
  3. Retro map id="map-retro"
  4. Dark map id="map-dark"
  5. Night map id="map-night"
  6. Aubergine map id="map-aubergine"

You just need to use below code and change id name with above map style id and set your latitude, longitude and address(data-string).


<div class="contact-map o-hidden">
  <div class="map-wrapper" id="map-standard" data-lat="-37.817274" data-lng="144.955914" data-string="121 King Street, Melbourne
Victoria 3000 Australia" data-zoom="10"></div>
</div>


How to find latitude longitude?

Visit one of below site to find latitude longitude

  1. Visit Google support article
  2. Map Coordinates
  3. Visit latitude longitude finder

Animations

You can add animations to any elements in your website. Animations can be shown on scroll appear. See code example below:


<div class="wow bounceInLeft" data-wow-duration="2.5s" data-wow-delay="1s" data-wow-offset="300" data-wow-iteration="2">
  ...
</div>


The animation can be set to:
bounce flash pulse rubberBand
shake headShake swing tada
wobble jello bounceIn bounceInDown
bounceInLeft bounceInRight bounceInUp bounceOut
bounceOutDown bounceOutLeft bounceOutRight bounceOutUp
fadeIn fadeInDown fadeInDownBig fadeInLeft
fadeInLeftBig fadeInRight fadeInRightBig fadeInUp
fadeInUpBig fadeOut fadeOutDown fadeOutDownBig
fadeOutLeft fadeOutLeftBig fadeOutRight fadeOutRightBig
fadeOutUp fadeOutUpBig flipInX flipInY
flipOutX flipOutY lightSpeedIn lightSpeedOut
rotateIn rotateInDownLeft rotateInDownRight rotateInUpLeft
rotateInUpRight rotateOut rotateOutDownLeft rotateOutDownRight
rotateOutUpLeft rotateOutUpRight hinge jackInTheBox
rollIn rollOut zoomIn zoomInDown
zoomInLeft zoomInRight zoomInUp zoomOut
zoomOutDown zoomOutLeft zoomOutRight zoomOutUp
slideInDown slideInLeft slideInRight slideInUp
slideOutDown slideOutLeft slideOutRight slideOutUp
heartBeat
Advanced Options:
  • data-wow-duration: Change the animation duration in MS
  • data-wow-delay: Delay before the animation starts in MS
  • data-wow-offset: Distance to start the animation in pixel (related to the browser bottom)
  • data-wow-iteration: Number of times the animation is repeated

For more info please Visit WOW.js docs

Tabs

Use below code to display tab:


<ul class="nav nav-tabs">
  <li class="nav-item"> <a class="nav-link active" data-toggle="tab" href="#tab-1-1"> Tab Title </a> </li>
  <li class="nav-item"> <a class="nav-link" data-toggle="tab" href="#tab-1-2"> Tab Title </a> </li>
</ul>
<div class="tab-content">
  <div class="tab-pane show active" id="tab-1-1">
    Tab Content
  </div>
  <div class="tab-pane" id="tab-1-2">
    Tab Content
  </div>
</div>


Note: Make sure you add unique IDs for each tab title and tab-pane.

We have created 8 tab style. you can use any of them by changing class name.

Tab Class name Description
No need any additional class name for default tab. you can use above example to apply this style
.nav-justified Tab title in justified
.tab-line tab bottom line style
.tab-bordered Tab border style
.tab-grad Tab Gradient style
.tab-dark Tab dark style
.tab-with-icon Tab with icon. You need to set font icon before tab name.
tab-with-center-icon justify-content-center nav-justified Tab with top icon. You need to set font icon before tab name.

See below example tab with style:

<ul class="nav nav-tabs tab-line"> <li class="nav-item"> <a class="nav-link active" data-toggle="tab" href="#tab-1-1"> Tab Title </a> </li> <li class="nav-item"> <a class="nav-link" data-toggle="tab" href="#tab-1-2"> Tab Title </a> </li> </ul> <div class="tab-content"> <div class="tab-pane show active" id="tab-1-1"> Tab Content </div> <div class="tab-pane" id="tab-1-2"> Tab Content </div> </div>

Accordion

Use below code to display Accordion:


<div class="accordion" id="accordion1">
  <!-- item -->
  <div class="accordion-item">
    <div class="accordion-title">
      <h6><a data-toggle="collapse" href="#collapse-1">Accordion 1 title</a></h6>
    </div>
    <div class="collapse show" id="collapse-1" data-parent="#accordion1">
      <div class="accordion-content">Accordion 1 content</div>
    </div>
  </div>
  <!-- item -->
  <div class="accordion-item">
    <div class="accordion-title">
      <h6><a class="accordion-link collapsed" data-toggle="collapse" href="#collapse-2">Accordion 2 title</a></h6>
    </div>
    <div class="collapse" id="collapse-2" data-parent="#accordion1">
      <div class="accordion-content">Accordion 2 content</div>
    </div>
  </div>
</div>


Note: Make sure you add unique IDs for each Accordion title, content and data-parent.

We have created 5 Accordion style and few icons styles. You can use any of them by changing class name.

Accordion Class name Description
No need any additional class name for default Accordion. you can use above example to apply this style
.accordion-primary With primary color
.accordion-grad With gradient color
.accordion-line With bottom line
.accordion-dark With dark color
.toggle-icon-round Accordion icon round
.toggle-icon-left Accordion icon left side

See below example accordion with style:


<div class="accordion accordion-primary toggle-icon-round toggle-icon-left" id="accordion1">
  <!-- item -->
  <div class="accordion-item">
    <div class="accordion-title">
      <h6><a data-toggle="collapse" href="#collapse-1">Accordion 1 title</a></h6>
    </div>
    <div class="collapse show" id="collapse-1" data-parent="#accordion1">
      <div class="accordion-content">Accordion 1 content</div>
    </div>
  </div>
  <!-- item -->
  <div class="accordion-item">
    <div class="accordion-title">
      <h6><a class="accordion-link collapsed" data-toggle="collapse" href="#collapse-2">Accordion 2 title</a></h6>
    </div>
    <div class="collapse" id="collapse-2" data-parent="#accordion1">
      <div class="accordion-content">Accordion 2 content</div>
    </div>
  </div>
</div>


helper classes

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eum cumque nisi sit. Ipsam magni quaerat labore eaque dolorum vitae ipsa beatae, molestias sint iure reiciendis aliquid porro vel, recusandae temporibus.

Text Colors

You can add this helper class to any element in your HTML code to set text color:

Class name Description
.text-primary Main primary color text
.text-white White color text
.all-text-white All White color text
.text-dark Dark color text
.text-grad Gradient color text

You can also use bootstrap color classes.

Extra helper classes

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

  • .zoom-on-hover Zoom on hover
  • .up-on-hover Slide Up on hover
  • .primary-hover Primary color on a tag of this class
  • .title-font font family primary (Poppins)
  • .body-font font family secondary (Roboto)
  • .alt-font font family tertiary (Playfair Display)

  • .shadow 30px box shadow
  • .shadow-light 10px box shadow
  • .no-shadow box shadow none
  • .shadow-hover Shadow on hover

  • .border-radius-3 Border radius 3
  • .border-radius-0 Border radius 0
  • .border-radius-left-0 Border radius left 0
  • .border-radius-right-0 Border radius right 0

  • .border 1px solider border
  • .border-right-0 border right 0
  • .border-left-0 border left 0
  • .border-dotted 2px dotted border
  • .border-dashed 2px dashed border

  • .o-hidden Overflow hidden
  • .o-visible Overflow visible
  • .o-scroll Overflow scroll

  • .pos-absolute-center Position absolute with content center
  • .left-0 left 0
  • .right-0 right 0
  • .top-0 top 0
  • .bottom-0 bottom 0

Contact Form

To make contact form work, simply go to template/include/contact-action.php file. Look out for $recip_address = "info@yourdomain.com"; on line number 11 and replace your email there. If you want to add multiple email recipients, Please follow the instructions written at line number 13 in contact-action.php file.

Our Tips

Check out some of our tips and tricks that will speed up your website and work process.

General tips

  • We recommend Sublime Text software that is light-weight and super easy to use.
  • We recommend FileZilla FTP manager.
  • When you finish with your site make sure you check below points:

FAQs

  1. Why there are no images that were in live demo?

    All images are only for demonstration purpose, however you can re-download them from sites we have listed in Credits section.

  2. Why some videos might not work?

    Ajax methods of Jquery are used for some videos and they can work only on the real server. For the correct operation of all functions, upload your website on a real server.

  3. Why contact form doesn’t work?

    For the correct operation of contact form, the php support is necessary. Upload your website on a server with support of PHP and PHP mail() function.

Source & Credits

All images are only for demonstration purpose, however you can re-download them in sites below.

Images

jQuery

CSS and Fonts

PHP

Changelog

v1.1.0 - 23rd January 2020
  • Update
    • Bootstrap 4.4.1
v1.0.1 - 16 September 2019
  • Documentation updates
    • Added: theme color scheme changing guide
    • Added: logo image changing guide
    • Updated: contact form using guide
  • Fixed: contact form issue (sending e-mail 2 times)
    • Updated template/contact.html
    • Updated template/assets/include/contact-action.php
  • Fixed: owl carousel data-autoplay attribute
    • Updated template/assets/js/functions.js
v1.0.0 - 26 March 2019
  • Initial Release

Support

We've tried to make this documentation as easy and understandable as possible. However, in case of any difficulties with the theme, you can contact our technical support department with any suggestions regarding documentation and theme improvement.

Included in Support:

  • Fixing all issues related to original theme.
  • Answers to questions regarding theme.
  • Providing regular updates depending on your needs and feedbacks.

Not Included in Support:

  • Customization of theme.
  • Specific support for third party plugins integrated in theme.

Your read it entirely. Thanks!