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

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 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">
  <img class="navbar-brand-item" src="assets/images/logo.png" alt="Wizixo">
</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>

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 include/contact-action.php file. Look out for $recip_address = "info@yourdomain.com"; and replace your email there. If you want to add multiple email recipients, simply just add a comma(,) separation.
For Example: email@domain.com, email2@domain.com

Not receiving Form Emails?

If you are not receiving Emails from your Forms then chances are that your Server Configuration doesn't support PHP mail() function. But you can use SMTP Authentication. Just find the following line of code:

$mail = new PHPMailer();

Add below code after the above line:

$mail->IsSMTP();
$mail->Host = "mail.yourdomain.com";
$mail->SMTPDebug = 0;
$mail->SMTPAuth = true;
$mail->Port = 26;
$mail->Username = "yourname@yourdomain.com";
$mail->Password = "yourpassword";

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

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!