by:
mix_design
version: 3.0.0
created: 11.07.2017
last update: 26.04.2022
01
Thank you for choosing Axio - coming soon HTML template. We have prepared detailed documentation to make Axio customization an easy task for you. If you have any questions that are beyond the scope of this help file, you can email us on support@mixdesign.club.
We would be very happy if you could rate this item here with 5 stars. Your feedback is very important so write us a line ! :)
02
Follow the steps below to setup your site template:
In order to start working with Axio unzip the downloaded package and open HTML folder to find all ready-to-use template files. Choose one of the demo *.html files (any ready-to-use demo you like) and rename it to index.html.
Next you’ll need to prepare a project for customization. Below is a list of files and folders that are required in the root directory of your project:
index.html - your chosen *.html file (renamed already);css folder - stylesheet files;js folder - JavaScript files;fonts folder - icon and lining nums fonts files;img folder for project images and favicon;video folder - project video files;mail.php file for sending e-mails;.htaccess - this file contain rules for files caching on web server;The other files can be used according to your preferences.
Your project is ready to go! Now you can start adding your texts, images and video to your new awesome website.
After the customization is over, you’ll need to upload the project files to your hosting web server using FTP client or cPanel interface in order to use it on your website.
03
After downloading and extracting template package you will find 3 folders:
This section describes
HTML
folder structure. More about
AxioGULP
folder structure you can find out in
AxioGULP
section.
Axio is one page HTML template. So, mostly you will need one
*.html
file and supporting
*.css,
*.js,
*.php
files with some images. All the directories and files are well organized as it shown on the image bellow.
source-files folder contains all expanded CSS files, expanded JavaScript files, plugins and components files;mail.php file for sending e-mails is located in the root directory;.htaccess file is located in the root directory. This file contain rules for files caching on web server.Axio is one page HTML template and comes with 20 ready-to-use demo pages:
Axio has a simple and easy to customize structure based on Bootstrap 5 Grid. Here is a sample page structure:
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
Meta tags, Title, Favicon and Icons, Facebook Metadata, CSS, Custom Browser Color
</head>
<body>
<!-- Old Browsers Support Start -->
...
<!-- Old Browsers Support End -->
<!-- Loader Start -->
<div class="loader">
...
</div>
<!-- Loader End -->
<!-- Custom HTML Start -->
<!-- Main Section Start-->
<section id="main" class="section-main">
...
</section>
<!-- Main Section End -->
<!-- About Us Section Start -->
<section id="about" class="section-inner about">
...
</section>
<!-- About Us Section End -->
<!-- Our Works Section Start -->
<section id="works" class="section-inner works">
...
</section>
<!-- Our Works Section End -->
<!-- Contact Section Start -->
<section id="contact" class="section-inner contact">
...
</section>
<!-- Contact Section End -->
<!-- Notify Section Start -->
<div id="notify" class="notify">
...
</div>
<!-- Notify Section End -->
<!-- Custom HTML End -->
<!-- Root element of PhotoSwipe. Must have class pswp. -->
<div class="pswp" tabindex="-1" role="dialog" aria-hidden="true">
...
</div>
<!-- Load Scripts Start -->
...
<!-- Load Scripts End -->
</body>
</html>
Axio template CSS files have a well-organized structure and a table of contents, as you can see on image below:
All CSS files are placed in
css
folder and have to be included in the
<head>
tag.
Axio uses uncompressed CSS files.
If you want to improve Google PageSpeed Insights performance, you can use minificated files from
source-files → axio-css-min-files.
<!-- Template Styles Start-->
<link rel="stylesheet" type="text/css" href="css/loaders/loader-color-1.css">
<link rel="stylesheet" type="text/css" href="css/plugins.css">
<link rel="stylesheet" type="text/css" href="css/main.css">
<link rel="stylesheet" type="text/css" href="css/colors/color-1.css">
<!-- Template Styles End-->
CSS files that have to be included in chosen .html file:
loader-color-*.css
plugins.css
main.css
color-*.css
If you want to customize CSS styles, We recommend to create your own
custom.css
file and include it to
Template Styles
section of the
HTML
file. This solution will help you in future updates.
* - Color skin number
All JavaScript files are placed in
js
folder and have to be included before the
</body>
tag.
libs.min.js - all JavaScript libraries that are necessary for Axio proper work, are сompiled in this file;gallery-init.js - for photoswipe gallery initialization;axio-custom.js - includes other scripts calls and settings;map-color-*.js - for Google Map.
<!-- Load Scripts Start-->
<script src="js/libs.min.js"></script>
<script src="js/gallery-init.js"></script>
<script src="js/axio-custom.js"></script>
<script src="js/maps/map-color-1.js"></script>
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyDNMDtmEsvSevM4ztfsbhLfLNZhKHCvWXk "></script>
<!-- Load Scripts End-->
We used minificated
libs.min.js
file to add all necessary JavaScript libraries to this template. The file contains:
All this uncompressed files you can find in the source-files folder.
* - color skin number
04
In Axio template we used Google Fonts Library and Fontawesome Free Iconic Font.
Axio uses Montserrat font for titles, basic text content and additional text. The font is embedded in the main.css file:
@import url("https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,300;0,400;0,500;0,600;0,700;0,800;1,300;1,400;1,500;1,600;1,700;1,800&display=swap");You can customize Montserrat font or embed another fonts for your project with Google Fonts. In this case, you'll also need to change the fonts in the css files per your fonts used.
Axio uses free version of FontAwesome 5.15.4 iconic font. You can use fontawesome.com/icons page to easily find the icon you want to use. Solid, regular and brands icons are already compiled in the plugins.css file and ready for use.
To change icons, just change the class names: fas fa-heart, fab fa-instagram, far fa-address-book.
<li>
<a href="https://www.facebook.com/ " target="_blank">
<i class="fab fa-facebook"></i>
</a>
</li>More information about FontAwesome you can find on official documentation website - FontAwesome Docs.
05
Axio covers almost all platforms design requirements for favicon and icons:
Classic favicon:
<link rel="icon" href="img/favicon/color-*/favicon.ico" sizes="any">
Android Web App Manifest & Apple Touch Icon:
<link rel="apple-touch-icon" href="img/favicon/color-*/apple-touch-icon.png">
<link rel="manifest" href="img/favicon/color-*/manifest.webmanifest">
Universal SVG Icon for All Sizes ang Dark & Light Browser Color Themes:
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 500 500">
<style type="text/css">
.st0 {
fill: #6642FA;
}
.st1 {
fill: #ffffff;
}
@media (prefers-color-scheme: dark) {
.st0 {
fill: #ffffff;
}
.st1 {
fill: #6642FA;
}
}
</style>
<circle class="st0" cx="250.3" cy="250.3" r="250"/>
<path class="st1" d="M254.3,52.7c-9.3,0-15.7,4.3-19.2,12.8l-140,381.1c0,0.1,0,0.1-0.1,0.2c8.1,6.4,16.5,12.3,25.4,17.7
c1.9-1.7,3.3-4,4.3-6.9c9.7-27.1,26.3-49,50-65.6c23.6-16.6,49.8-25,78.4-25h1.7c28.7,0,54.8,8.3,78.4,25
c23.6,16.7,40.3,38.5,50,65.6c0.5,1.4,1.2,2.6,1.9,3.8c9.1-5.9,17.8-12.3,26.1-19.3L272.9,65.5C269.8,57,263.6,52.7,254.3,52.7z
M304.3,313c-12.4,17.4-29,26.1-50,26.1c-21.3,0-38.2-8.7-50.5-26.1c-12-17-14.5-35.6-7.6-55.8l58.1-162.7l57.5,162.7
C319.2,277.4,316.7,295.9,304.3,313z"/>
</svg>
Facebook Metadata:
<meta property="og:image:height" content="1200">
<meta property="og:image:width" content="1200">
<meta property="og:title" content="Axio - Coming Soon Template">
<meta property="og:description" content="Axio - awesome coming soon template to kick-start your project">
<meta property="og:url" content="http://mixdesign.club/themeforest/axio/">
<meta property="og:image" content="http://mixdesign.club/themeforest/axio/img/favicon/og-image.jpg">
You can use Axio favicon as an example or generate new one with Favicon Generator or any other favicon generator by your needs.
* - color skin number
06
Axio template comes with easy-to-customize page elements. You can choose from 5 color skins, various backgrounds and much more.
Loader will hide contents of your site until it's fully loaded.

If you want to customize or remove loader, find this code in *.html file:
<div class="loader">
<div class="loader__content">
<div class="loader__logo slideInDown">
<!-- Your Logo Here -->
<img src="img/logo-loader.svg" alt="Axio - Coming Soon Template">
</div>
<div class="loader__caption slideInUp">
<p class="loading-text">Loading</p>
<span class="loading-dots">
<span class="dot"></span>
<span class="dot"></span>
<span class="dot"></span>
</span>
</div>
</div>
</div>Loader styles are included in the <head> tag:
<!-- Template Styles Start-->
...
<link rel="stylesheet" type="text/css" href="css/loaders/loader-color-*.css">
...
<!-- Template Styles End-->* - color skin number
Axio v3 provided with 5 color skins and 20 ready-to-use demo pages. Each color skin has its own CSS file. You can find all of them in the css → colors folder.





To make sure that the desired color skin is applied, find Template Styles section in the head tag and make sure that the file color-*.css is added:
<!-- Template Styles Start -->
...
<link rel="stylesheet" type="text/css" href="css/colors/color-1.css">
<!-- Template Styles End -->More beauriful color skins are coming soon in the next update.
The logo container is located in the main section header section -div class="intro__header".

<!-- Intro Header Start -->
<div class="intro__header">
...
<!-- Logo Start -->
<div class="logo">
<img src="img/axio-logo.svg" alt="Axio - awesome coming soon template to kick-start your project">
</div>
<!-- Logo End -->
...
</div>
<!-- Intro Header End -->You can use SVG, PNG or JPG image for logo. If you are using SVG, create PNG fallback image for old browsers. It'll be replaced automatically if needed.
All images used in Axio template live demo are just for preview purpose only and they are not included in main download files. You easily can find all images on unsplash.com or pexels.com. We are using placeholders from placeholder.com instead of real images. You can easily replace placeholder URL with a path to your image like img/yourimage.jpg.
All template background images you can replace in the main.css file:
/* ------------------------------------------------*/
/* Template Backgrounds Start */
/* ------------------------------------------------*/
.media-1 {
background-image: url("http://via.placeholder.com/1400x1200");
}
...
/* ------------------------------------------------*/
/* Template Backgrounds End */
/* ------------------------------------------------*/
To customize an animated headline, you need to find the following markup in the main section of the *.html file:
<h1 class="headline__title clip">
<span class="words-wrapper">
<b class="is-visible">Experience</b>
<b>Adventure</b>
<b>Coming soon</b>
</span>
</h1>You can replace, add or remove the words in the <b> tag. If you want to disable this animation, just delete class .clip from the <h1> tag.
JavaScript files that have to be included:
<!-- Load Scripts Start-->
<script src="js/libs.min.js"></script>
...
<script src="js/axio-custom.js"></script>
...
<!-- Load Scripts End-->if you want to set up a different animation delay, words reveal duration or reveal animation delay, find Animated Headline section in axio-custom.js file and change the values of the following variables:
// --------------------------------------------- //
// Animated Headline Start
// --------------------------------------------- //
var animationDelay = 2500,
revealDuration = 600,
revealAnimationDelay = 1500;
...Axio template comes with 1 header type with left aligned logo and right aligned menu button on mobile and list menu on desktop.
Desktop view:

Mobile view:

<!-- Intro Header Start -->
<div class="intro__header">
<!-- Logo Start -->
<div class="logo">
<img src="img/axio-logo.svg" alt="Axio - awesome coming soon template to kick-start your project">
</div>
<!-- Logo End -->
<!-- Menu Trigger Start - Visible on Mobile -->
<a href="#0" id="menu-trigger" class="menu-trigger">
<i class="fas fa-bars"></i>
</a>
<!-- Menu Trigger End - Visible on Mobile -->
</div>
<!-- Intro Header End -->07
Axio template comes with one countdown type:
#countdown
Axio template comes with KBW Countdown Plugin. This plugin can be tricky to set up, but it is very flexible and has a lot of features.
For more details you can see documentation reference page: keith-wood.name/countdownRef.html or see a minimal page with basic settings: keith-wood.name/countdownBasics.html. In our case we are using UTCDate function. (You can also find this function in documentation reference page):
$.countdown.UTCDate(tz, year, month, day, hours, mins, secs, ms)
tz
- timezone offset, either in hours or minutes, from GMT, for example, Brisbane, Australia, would be +10 or +600;
year
- local year;
month
- local month (0 to 11);
day
- local day in the month;
hours
- local hour;
mins
- local minute;
secs
- local second;
ms
- local millisecond.
So here: countdown.UTCDate(10, 2022, 11, 22)
Find the Load Scripts section at the end of <body> and make sure that all the necessary js files are added in the following order:
<!-- Load Scripts Start-->
<script src="js/libs.min.js"></script>
...
<script src="js/axio-custom.js"></script>
...
<!-- Load Scripts End-->
Setting your own date for countdown script can be done in axio-custom.js file in js folder:
$('#countdown').countdown({until: $.countdown.UTCDate(+10, 2022, 2, 19), format: 'D'});
Visit KBW Countdown site for more details and settings - keith-wood.name/countdown.html
Portfolio gallery is made using PhotoSwipe JavaScript Gallery.

This is an example for one portfolio item, just duplicate it to add new pictures or fill it with your content:
<!-- gallery single item -->
<figure class="col-12 col-sm-6 my-gallery__item" itemprop="associatedMedia" itemscope itemtype="http://schema.org/ImageObject">
<a href="http://via.placeholder.com/1200x900" data-image="http://via.placeholder.com/1200x900" class="works-link" itemprop="contentUrl" data-size="1200x900">
<img src="http://via.placeholder.com/1200x900" class="works-image" itemprop="thumbnail" alt="Image description" />
</a>
<figcaption class="my-gallery__descr" itemprop="caption description">
<h4 class="light">Agency website
<small>web design</small>
</h4>
<p>Mauris porttitor lobortis ligula, quis molestie lorem scelerisque eu. Morbi aliquam enim odio, a mollis ipsum tristique eu.</p>
</figcaption>
</figure>
JavaScript files that have to be included:
<!-- Load Scripts Start-->
<script src="js/libs.min.js"></script>
<script src="js/gallery-init.js"></script>
...
<!-- Load Scripts End-->More information about PhotoSwipe Gallery you can find in PhotoSwipe Documentation.
08
All backgrounds CSS styles are сompiled in plugins.css file so you don't need to add any CSS files.
This background effect is based on the Particles.js plugin.
Make sure you have <div id="particles-js"> in *.html file:
<!-- Background Effect Start-->
<div id="particles-js"></div>
<!-- Background Effect End-->Find the Load Scripts section at the end of <body>and make sure that all the necessary js files are added in the following order:
<!-- Load Scripts Start-->
<script src="js/libs.min.js"></script>
...
<script src="js/axio-custom.js"></script>
<!-- Load Scripts End-->Done! More information about particles.js configuration you can find on official website.
This background effect is based on the Particles.js plugin.
Make sure you have <div id="stars-js"> in *.html file:
<!-- Background Effect Start-->
<div id="stars-js"></div>
<!-- Background Effect End-->Find the Load Scripts section at the end of <body>and make sure that all the necessary js files are added in the following order:
<!-- Load Scripts Start-->
<script src="js/libs.min.js"></script>
...
<script src="js/axio-custom.js"></script>
<!-- Load Scripts End-->Done! More information about particles.js configuration you can find on official website.
This background effect is based on the Particles.js plugin.
Make sure you have <div id="snow-js"> in *.html file:
<!-- Background Effect Start-->
<div id="snow-js"></div>
<!-- Background Effect End-->Find the Load Scripts section at the end of <body>and make sure that all the necessary js files are added in the following order:
<!-- Load Scripts Start-->
<script src="js/libs.min.js"></script>
...
<script src="js/axio-custom.js"></script>
<!-- Load Scripts End-->Done! More information about particles.js configuration you can find on official website.
This background effect is based on the Particles.js plugin.
Make sure you have <div id="polygons-js"> in *.html file:
<!-- Background Effect Start-->
<div id="polygons-js"></div>
<!-- Background Effect End-->Find the Load Scripts section at the end of <body>and make sure that all the necessary js files are added in the following order:
<!-- Load Scripts Start-->
<script src="js/libs.min.js"></script>
...
<script src="js/axio-custom.js"></script>
<!-- Load Scripts End-->Done! More information about particles.js configuration you can find on official website.
To provide this effect we use Vegas jQuery Plugin . Make sure you have <div id="bgndKenburns"> in *.html file:
<!-- Background Effect Start -->
<div class="fullscreen">
<div id="bgndKenburns"></div>
</div>
<!-- Background Effect End -->Find the Load Scripts section at the end of <body> and make sure that all the necessary js files are added in the following order:
<!-- Load Scripts Start-->
<script src="js/libs.min.js"></script>
...
<script src="js/axio-custom.js"></script>
...
<!-- Load Scripts End-->To replace or add images to the slideshow, find the axio-custom.js file in js folder and make the necessary changes to the slides array:
$('#bgndKenburns').vegas({
...
slides: [
{ src: '../img/example-slide-1.jpg' },
{ src: '../img/example-slide-2.jpg' },
{ src: '../img/example-slide-3.jpg' }
],
...
});More information about Vegas settings you can find in the official documentation - vegas.jaysalvat.com/documentation
To provide this effect we use YTPlayer jQuery Plugin. Make sure you have <div id="bgndVideo"> with class player in *.html file:
<!-- Background Effect Start -->
<div id="video-wrapper">
<div id="bgndVideo" class="player" data-property="{ videoURL:'https://youtu.be/SZn6-u2kK54' }"></div>
</div>
<!-- Background Effect End -->Find the Load Scripts section at the end of <body>and make sure that all the necessary js files are added in the following order:
<!-- Load Scripts Start-->
<script type="text/javascript" src="js/libs.min.js"></script>
...
<script type="text/javascript" src="js/axio-custom.js"></script>
...
<!-- Load Scripts End-->If you want to change background video, find the data-property attribute in <div id="bgndVideo"> and replace videoURL property.
More information about YTPlayer settings you can find in the official documentation.
To provide self-hosted (local) video background feature we use HTML5 <video> tag. Aso we used <source> property with 3 video formats to maximize browser support:
<!-- Background Effect Start -->
<div class="video-background">
<video id="main-video" preload="auto" autoplay="autoplay" loop="loop" muted="muted" poster="img/backgrounds/poster.jpg">
<source type="video/mp4" src="video/video.mp4">
<source type="video/webm" src="video/video.webm">
<source type="video/ogv" src="video/video.ogv">
</video>
</div>
<!-- Background Effect End -->You can use online service to convert your video: Online Uniconverter or any other similar applicaton.
Please note, if you'll not use muted property of the <video> tag, your video will not start automatically in some browsers.
This effect is provided by <div id="clouds"> in the main screen section. There are three layers with different animation speed.
<!-- Floating Clouds Background Start-->
<div id="clouds">
<div class="clouds__layer clouds__layer1">
<img src="img/backgrounds/clouds-layers/layer-1.png">
</div>
<div class="clouds__layer clouds__layer2">
<img src="img/backgrounds/clouds-layers/layer-2.png">
</div>
<div class="clouds__layer clouds__layer3">
<img src="img/backgrounds/clouds-layers/layer-3.png">
</div>
</div>
<!-- Floating Clouds Background End-->We used only CSS transitions for this effect, so you don't need any js files.
09
Axio template is provided with 2 form types:
This active subscribe form will save emails to MailChimp list.

<!-- Notify Form Start -->
<form class="form form-light notify-form" id="notify-form">
<div class="container-fluid">
<div class="row">
<div class="col-12">
<input class="transition-el transition-el-3" type="email" placeholder="Email Adress*" required>
<button class="btn btn-solid-light transition-el transition-el-4" type="submit">
<span class="btn-caption">Send</span>
</button>
</div>
</div>
</div>
</form>
<!-- Notify Form End -->JavaScript files that have to be included:
<!-- Load Scripts Start-->
<script src="js/libs.min.js"></script>
...
<script src="js/axio-custom.js"></script>
...
<!-- Load Scripts End-->Follow these steps to get Mailchimp list URL:
Audience section.




https:// if it is not included with MailChimp list URL.Open axio-custom.js file from js folder. Just replace our Mailchimp form action URL with your Mailchimp list URL:
$('.notify-form').ajaxChimp({
callback: mailchimpCallback,
// Replace this Mailchimp form action URL with your Mailchimp list URL
url: 'https://besaba.us10.list-manage.com/subscribe/post?u=e8d650c0df90e716c22ae4778&id=54a7906900'
});Done! Now you can save emails to your MailChimp Audience List!
Axio has 2 integrated ajax contact forms.
Contact form:

Stay in touch form:

All these forms have the same settings. It's very easy to set up this forms to receive feedback on your e-mail:
mail.php file is added to the root directory of your project.<form> tag with id="contact-form" or id="stayintouch-form" in the *.html file. <form class="form form-dark contact-form" id="contact-form">
<!-- Hidden Required Fields-->
<input type="hidden" name="project_name" value="Axio - Coming Soon Template">
<input type="hidden" name="admin_email" value="example@yourdomain.com"> <!-- Your E-mail Here-->
<input type="hidden" name="form_subject" value="Contact Form Message">
<!-- END Hidden Required Fields-->
...
</form>JavaScript files that have to be included:
<!-- Load Scripts Start-->
<script src="js/libs.min.js"></script>
...
<script src="js/axio-custom.js"></script>
...
<!-- Load Scripts End-->Done! Now you can receive messages on your e-mail.
10
Axio provides custom Google Maps for each color skin. All Google Maps JavaScript files you can find in the js → maps folder.

Find the Load Scripts section at the end of <body> and make sure that all the necessary js files are added in the following order:
* - color skin number
For example:
<!-- Load Scripts Start-->
<script src="js/libs.min.js"></script>
...
<script src="js/axio-custom.js"></script>
<script src="js/maps/map-color-1.js"></script>
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyDNMDtmEsvSevM4ztfsbhLfLNZhKHCvWXk "></script>
<!-- Load Scripts End-->Change the Google Map parameters in map-color-*.js file:
$(function() {
// Insert Your Google Map Parameters:
var latitude = 40.761425,
longitude = -73.977643,
map_zoom = 14;
...
});For Google Map proper work you need to get Google Map API key and insert it in your chosen .html file. At first get API key. Google has detailed instructions for this process: Get API key.
Find “Load Scripts” section of the .html file and replace demo API key with your new key. You’ll need to wait some time for the changes to take effect:
<!-- Load Scripts Start-->
...
<script src="https://maps.googleapis.com/maps/api/js?key=YOUR-API-KEY "></script>
<!-- Load Scripts End-->Done! More information about Google Maps styling you can find on the Google Maps API tutorial page.
11
If you want to totally customize Axio, you can use our all-inclusive AxioGULP template. AxioGULP includes Bootstrap (grid), Gulp, Sass, Bourbon, Autoprefixer, Browsersync, Clean-CSS, CSS Beautify, Uglify, and other packages for efficient and comfortable work.
AxioGULP requires node, npm and git.
Install Node Modules: npm i
Run AxioGULP: gulp
app directory;sass directory;dist folder is a production folder. It contains ready project with optimized HTML, CSS, JS and images.gulp: run default gulp task for web development;
build: build project to dist folder;
clearcache: clear all gulp cache.
If you have any questions about AxioGULP, you can email us on support@mixdesign.club.
12
13