Air. HTML Theme Documentation

<div class="topslider top-slider-text">
    <div class="text-slider-inn middle-ux">
        <h1 class="slider-headding slider-headding-1 headding-with-bg" data-bg="****.jpg">
              ...

The background image clip effect is for Webkit Browser only, like Chrome, Safari. If you don't show the background, please remove data-bg and className "headding-with-bg".

<div class="topslider fullscreen-wrap">
    <!--The data-auto is for slider autoplay by default, default is false, you could set true also-->
        <div class="owl-carousel" data-auto="true" data-item="1" data-center="false" data-margin="0" data-autowidth="false" data-slideby="1" data-showdot="true">
            <!--Each tag section is a slide item-->
            <section class="item">

Each <section class="item"> wrap is one slide item. Refer home5.html

This template html structure looks like:

    <div id="content_wrap">
        <!--Introduction-->
        <section class="ux-portfolio-template-intro container">
        ...
        <div class="container-masonry ux-portfolio-spacing-40 ux-portfolio-2col container ux-has-filter filter-left" data-col="2" data-spacer="40" data-template="intro-above">
            <!--Filter-->
            <div class="clearfix filters">
            ...
            <!--Portfolio Listing-->
            <div class="masonry-list masonry-grid grid-mask-filled-left">
        ...

The Filter text align, set the className in <div class="container-masonry ... "> wrap:
Filter text align left : filter-left
Filter text align right : filter-right
Filter text align center : filter-center

Refer: home4.html

This template html structure looks like:

<div id="content_wrap">
    <class="container-masonry ux-portfolio-spacing-40 ux-portfolio-3col ux-has-filter" data-col="3" data-spacer="40" data-template="intro-r-filter">
        <!--Introduction right & Filter left-->
        <div class="container page-template-intro-left-list-right">
            <!--Introduction-->
            <section class="ux-portfolio-template-intro">
            ...
            <!--Filter-->
            <div class="filters-wrap">
                <div class="clearfix filters">
            ...
        <!--Portfolio Listing-->
        <div class="masonry-list masonry-grid grid-mask-filled-left">
    ...

Refer: home6.html

This template html structure looks like(The introduction and filter shown in first grid item):

<div id="content_wrap">
    <div class="container-masonry ux-portfolio-spacing-40 ux-portfolio-3col container ux-has-filter" data-col="3" data-spacer="40" data-template="intro-in-list">
        <!--Portfolio Listing-->
        <div class="masonry-list masonry-grid grid-mask-filled-left">
            <section class="grid-item--width2 grid-item-long grid-item filter-in-grid filter_works filter_branding filter_illustration filter_photography-works">
            ...
                <!--Introduction-->
                <section class="grid-inn-con ux-portfolio-template-intro">
                ...

Refer: home3.html

Each <section class="grid-item ..."> is one thumbnail item(grid item). Refer index.html

<section class="grid-item grid-item-small *** ">
    <div class="grid-item-inside">
        <!--Hot Link-->
        <a title="" class="grid-item-mask-link" href="***">
        <!--Text: title, meta-->
        <div class="grid-item-con-text">
        <!--Image: set the thumbnail image file url into data-bg="" -->
        <div class="brick-content ux-lazyload-wrap" style=" padding-top: 150%;">
            <div class="ux-lazyload-bgimg ux-background-img" data-bg="***.jpg">
            ...

Please set the thumbnail image file url into data-bg="". We use the placehold url to replace the real image file in demo template file (like http://placehold.it/650x490)
The Masorny list use <img data-src="" > instead of <div class="ux-lazyload-bgimg ux-background-img" data-bg="">. (refer: portfolio-listing-7.html)
The padding-top percentage value of brick-content wrap is the thumbnail image origin size (height / width) * 100

Including Masonry Grid, Masonry, Grid and Grid with Title:

 <div id="content_wrap">
    <div class="container-masonry ux-portfolio-spacing-40 ux-portfolio-3col container ux-has-filter filter-center" data-col="3" data-spacer="40">
            ...
        <div class="masonry-list masonry-grid grid-mask-filled-left">

Masonry Grid

<section class="grid-item grid-item-small filter_branding filter_illustration filter_works">
...

Masonry

Refer portfolio-listing-7.html

Grid

Refer portfolio-listing-3.html

Grid with Title

Refer portfolio-listing-4.html

Portfolio Listing container width

Columns

Items Spacing

Mouseover Effect

Open item By Lightbox

<div class="masonry-list masonry-grid grid-mask-boxed-left lightbox-photoswipe">
    ...
    <section class="grid-item *** ">
        <div class="grid-item-inside" data-lightbox="true">
        ...
            <a title="Image Caption" class="lightbox-item grid-item-mask-link" href="***.jpg" data-size="1000x665"> 

<a title="Image Caption" class="lightbox-item grid-item-mask-link" href="***.jpg" data-size="1000x665" data-type="video"> 
    <div class="hidden">
        <div class="videoWrapper video-wrap video-post-wrap">
            <iframe src="https://player.vimeo.com/video/xxxx" width="640" height="360" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>
        </div>
    </div>
</a>    
        

If you set page cover, please add className into <body> tag: page_from_top non_bg_header.

The title wrap html structure looks like:

<div class="title-wrap container gallery-des-center">
    <div class="title-wrap-con">
        <h1 class="title-wrap-tit title-masking" data-bg="***.jpg">Title
<div class="container gallery-post-des gallery-des-center">
    <!-- Content -->
    <div class="entry">
    <!-- Social Share Media-->
    <div class="social-bar">

If you remove the className "gallery-des-center", the text would be align left.
The title background image clip effect is for Webkit Browser only, like Chrome, Safari. If you don't show the background, please remove data-bg and className "title-masking".

If you want to use social share icons, please make sure there is className "gallery-show-social-share-body" in <body> tag.
Please replace the page url for each share icon item:

<ul class="post_social post-meta-social">
    <li class="post-meta-social-li">
        <a class="share postshareicon-facebook-wrap" href="http://www.facebook.com/sharer.php?u=page url" onclick="window.open('http://www.facebook.com/sharer.php?u=page url','Facebook','width=600,height=300,left='+(screen.availWidth/2-300)+',top='+(screen.availHeight/2-150)+''); return false;">          
        

The html struture looks like:

<div class="blog-unit-gallery-wrap gallery-spacing-40">
            ...
    <div class="list-layout lightbox-photoswipe" data-gap="40">
        <!--Row-->    
        <div class="list-layout-col list-layout-col1 clearfix">
            <!--Item Image Wrap-->
            <div class="list-layout-col1-item list-layout-item">
                <div class="list-layout-inside">
                    <div class="single-image mouse-over" data-lightbox="true">
                        <a title="" class="lightbox-item" href="the-target-image-file.jpg" data-size="1400x788">
                            <span class="ux-lazyload-wrap" style=" padding-top: 56.285714285714%;">
                                <img src="img/blank.gif" data-src="the-thumbnail-image-file.jpg" width="1400" height="788" class="list-layout-img gallery-images-img ux-lazyload-img lazy">
            ...
        <div class="list-layout-col list-layout-col2 clearfix">
            <div class="list-layout-col2-item list-layout-item">
            <div class="list-layout-col2-item list-layout-item">
            ...

The 1 - 4 images could be put into each row. You could notive the className list-layout-col1 / list-layout-col1-item, it is for one image each row.

Please set the thumbnail image file url into <img data-src="">. We use the placehold url to replace the real image file in demo template file (like http://placehold.it/650x490). Set the target image file url into <a class="lightbox-item" href="">.The padding-top percentage value of ux-lazyload-wrap wrap is the thumbnail image origin size (height / width) * 100.

Set the className and data-gap value for image spacing:
gallery-spacing-0 / data-gap="0"
gallery-spacing-2 / data-gap="2"
gallery-spacing-10 / data-gap="10"
gallery-spacing-20 / data-gap="20"
gallery-spacing-40 / data-gap="40"
gallery-spacing-60 / data-gap="60"
gallery-spacing-80 / data-gap="80"

<!--Fullwidth section: xxx-->
<div class="fullwrap_moudle">
    <div class="row-fluid">
        <!--set id here, menu item link here, bottom-space-40 means 40px spacer with next section-->
        <div id="xxx" class="fullwidth-wrap bottom-space-40">
            <div class="container">
                <div class="fullwidth-wrap-inn">
                    <!--fullwrap-inn-width-70 means there is 70% width for inner wrap, it is optional-->
                    <!--the options: fullwrap-inn-width-50/fullwrap-inn-width-60/fullwrap-inn-width-70/fullwrap-inn-width-80/fullwrap-inn-width-90-->
                    <div class="row-fluid fullwrap-inn-width-70">
                        <!--put elements here-->
                        <!--bottom-space-no means there is not bottom spacer, it is optional-->
                        <!--the options: bottom-space-20/bottom-space-40/bottom-space-60/bottom-space-80-->
                        <div class="col-md-12 col-sm-12 moudle bottom-space-no">
        

The "col-md-12 col-sm-12" means width for elements, the template is based on bootstrap 3.3.x. It obeys the bootstrap grid system, there are 12 grids in each row:
col-md-3 col-sm-3 = 3 cols width
col-md-4 col-sm-4 = 4 cols width
col-md-6 col-sm-6 = 6 cols width
col-md-12 col-sm-12 = 12 cols width (fullwdith of outer wrap)
(check more)

You could set the background image parallax for the fullwidth wrap, please refer page-about.html(yes, it could be set a page cover also)

<div class="fullwrap_moudle">
    <div class="row-fluid">
        <div id="testimonial" class="fullwidth-wrap top-space-80-in bottom-space-40-in  fullwidth-text-white  ">
            <div data-type="background" class="parallax back-background" data-ratio="0.5">
                <img class="back-background-img" src="xx.jpg" alt="xx" />
    

You could change the image in url(). The data-ratio is the ratio of scrolled speed. You could set it a number ( 0.1 - 1 )
If it is set as page cover, please make sure there is the className "page_from_top" in <body> tag.

You could set the background video for the fullwidth wrap also.

<div class="fullwrap-video">
    <video autoplay="" loop="" poster="http://ximudesign.com/aside/wp-content/uploads/sites/17/2014/04/video-post.jpg">
        <source src="http://ximudesign.com/project/bgvideo.webm" type="video/webm">
        <source src="http://ximudesign.com/project/bgvideo.m4v" type="video/mp4">
        <source src="http://ximudesign.com/project/bgvideo.ogg" type="video/ogg">
    </video>
    <div class="video-cover" style="background-image: url(http://ximudesign.com/aside/wp-content/uploads/sites/17/2014/04/video-post.jpg);"></div>
</div>
    

Video type:

• the “.webm” video url here for firefox/chrome/opera browser
• the “.m4v” or ".mp4" video url here for IE/chrome/safari browser
• the “.ogg” or ".ogv" video url here for firefox/chrome/opera browser

Touch devices do not support video background, you would set a background image.

The text elements included: H1-H6 font, Capital first letter, Text with icon list, please refer content-typography.html

Please refer page-contact.html, the google map js is necessary(you could get the Google ApiKey here):

<script type='text/javascript' src='https://maps.googleapis.com/maps/api/js?v=3.exp&key=Google AikKey'></script>

The map html structure:

    <div class="module-map-canvas" 
    data-add="Sydney, NSW"
    data-l="-33.8674869" data-r="151.20699020000006"
    data-zoom="17"
    data-pin="t"
    data-view="map"
    data-dismouse="f"
    data-pin-custom=""
    data-style="f"
    data-pin-custom="xxx.png"
    style="height: 360px;">
    </div>

Data-view options are: map, satellite, map_terrain. option value "t" present true and "f" present false

Please refer page-contact.html. Set contact form receive email address in file contact.php here:

$mailTo = 'yourmail@yourmal.com';

It need the site spacer supported PHP and mail server.
If the mail server of PHP doesn’t work. Please check.

Please refer page-about.html, the js/infographic.js is necessary

<div class="col-md-3 col-sm-3 moudle">
<section class="infrographic bignumber ux-mod-nobg">
...
</section>
</div>

Including Button, Image, Icons, Switching Words... Please refer content-element.html.