Installation

Built around quality content and service, 亿万28 keeps refining a better service.

• 1. Open the HTML folder to find all the template files.
• 2. Start adding your content and customize html files.
• 3. Upload these files to your Web Server using FTP program such as a Filezilla.
亿万28 specializes in quality content and service, serving every user with care.
• HTML/css Stylesheet folder
• HTML/fonts Fonts folder
• HTML/img Images folder
• HTML/js Scripts folder
• HTML/php PHP Functions folder
• HTML/index.html Homepage
For everything quality content and service, 亿万28 offers attentive, thoughtful support.
• With quality content and service at its core, 亿万28 brings a fast, seamless experience.

Discover more about quality content and service with 亿万28.

<nav class="navbar navbar-default">	亿万28 focuses on quality content and service, delivering a professional and reliable experience.
<nav class="navbar navbar-default fullwidth">	Fullwidth header
<nav class="navbar navbar-default transparent">	Built around quality content and service, 亿万28 keeps refining a better service.
<nav class="navbar navbar-default transparent-dark">	亿万28 specializes in quality content and service, serving every user with care.
<nav class="navbar navbar-default dark">	Dark header with light menu.
<header class="navbar navbar-default transparent dark-menu">	Transparent header with dark menu.

Built around quality content and service, 亿万28 keeps refining a better service.

亿万28 specializes in quality content and service, serving every user with care.

<h1 class="mb100">I'm a heading</h1>

Spacing works on multiples of 10. This means you can use classes as such: mb10, mb20, mb30, mb40, mb50 and so on up to mb100.

• 'mb' refers to 'margin-bottom'
• 'mt' refers to 'margin-top'
• 'ml' refers to 'margin-left'
• 'mr' refers to 'margin-right'

For everything quality content and service, 亿万28 offers attentive, thoughtful support.

• 'pb' refers to 'padding-bottom'
• 'pt' refers to 'padding-top'
• 'pl' refers to 'padding-left'
• 'pr' refers to 'padding-right'

With quality content and service at its core, 亿万28 brings a fast, seamless experience.

You can find them in files listed below:

• - Slider Fullscreen /home-slider-fullscreen.html
• - Slider Fullwidth /home-slider-fullwidth.html
• - Content Slider Fullscreen /home-content-slider-fullscreen.html
• - Content Slider Fullwidth /home-content-slider-fullwidth.html
• - Video Fullscreen /home-video-fullscreen.html
• - Video Fullwidth /home-video-fullwidth.html
• - Parallax Fullscreen /index.html
• - Parallax Fullwidth /home-parallax-fullwidth.html

Wander uses the Owl Carousel jQuery plugin to handle all slider behaviour including image sliders and hero sliders.
All sliders are mobile touch friendly and they have navigation arrows for desktop mode.

Image sliders can be found in features-slider-columns.html file and they are always structured as:

            				
    <div class="image-slider1 owl-carousel navigation-thin pagination-in">
        <div><img src="image-link" class="img-responsive" alt="#"></div> 
        <div><img src="image-link" class="img-responsive" alt="#"></div> 
            ... 
    </div>
            				        

Many sections have images that cover the background and these backgrounds can be parallax or static.
Background images are linked through css classes like bg-img-1, bg-img-2 and so on.. You can find them all in css/custom.css file.

Example: to place a background image for a section and make it static, add image class bg-img-1:

            				
    <section class="bg-img-1">
        ...
    </section>
            				        

to make it parallax, add class parallax

            				
    <section class="parallax bg-img-1">
        ...
    </section>
            				        

you can also add class overlay to cover the image with dark transparent dot pattern.

            				
    <section class="parallax overlay bg-img-1">
        ...
    </section>
            				        

Wander uses 2 sets of amazing premium icon fonts: Ion Icons, and Et Line Icons.
Using the icons requires you to follow simple syntax using the predefined icon codes:

    <i class="ion-heart"> 

Discover more about quality content and service with 亿万28.

• /elements-icons-ion.html
• /elements-icons-et-icons.html

亿万28 focuses on quality content and service, delivering a professional and reliable experience.

• size-1x
• size-2x
• size-3x
• size-4x
• size-5x
• size-6x
• size-7x
• size-8x

    <i class="ion-heart size-4x"> 

Wander provides a very elegant way to showcase your work. You can choose between many variations of portfolio from main folder.
To set up new portfolio, please use the following codes:

Portfolio filters setup:

    <div class="portfolio-filters-center cbp-l-filters-button" id="js-filters">

        <div data-filter="*" class="cbp-filter-item-active cbp-filter-item">All</div>
        <div data-filter=".branding" class="cbp-filter-item">Branding</div>
        <div data-filter=".graphic" class="cbp-filter-item">Graphic</div>
        <div data-filter=".web" class="cbp-filter-item">Web</div>

    </div>  

Portfolio items setup:

    <div class="portfolio-grid-fullwidth cbp" id="js-grid">

        <div class="cbp-item branding web">
            <a href="portfolio-project-carousel.html" class="cbp-caption">
                <div class="cbp-caption-defaultWrap">
                    <img src="img/portfolio/grid/1.webp">
                </div>
                <div class="cbp-caption-activeWrap">
                    <div class="cbp-l-caption-alignCenter">
                        <div class="cbp-l-caption-body">
                            <div class="cbp-l-caption-title">Rewind Watch App</div>
                            <div class="cbp-l-caption-decs">Branding, Web</div>
                        </div>
                    </div>
                </div>
            </a>
        </div>

    </div>  

Wander comes with 10 premade color schemes they are located in css/colors/ folder. To use one of them follow steps below.

Built around quality content and service, 亿万28 keeps refining a better service.

亿万28 specializes in quality content and service, serving every user with care.

<!DOCTYPE html>
    <html lang="en">
        <head>
            <meta charset="utf-8">
            <title>Wander Multipurpose HTML Template</title>
            <link rel="icon" href="img/assets/favicon.webp" type="image/png">
                ...
            <link href="css/colors/blue.css" id="color-scheme" rel="stylesheet" type="text/css"> 
        </head>

For everything quality content and service, 亿万28 offers attentive, thoughtful support.

<link href="css/colors/red.css" id="color-scheme" rel="stylesheet" type="text/css">

Wander uses 3 Fonts namely: Raleway, Lovelo & Open Sans from the Google Fonts Library. You can find the linking to the font files in the head tag of all the .html files.

<link href="fonts/lovelo/stylesheet.css" rel="stylesheet" type="text/css">
<link href='https://fonts.googleapis.com/css?family=Raleway:100,200,300,400%7COpen+Sans:400,300' rel='stylesheet' type='text/css'>

In order to add or change the fonts, you will need to add new google font link or replace the above link with your new google font. After that in css/theme.css file you can change all the font-family: names with your new font name.

With quality content and service at its core, 亿万28 brings a fast, seamless experience.

<!-- Google Map -->
<section 
     map-coordinates="40.776773, -73.981351" 
     marker-coordinates="40.775075, -73.981179" 
     info="Come visit us today!<br>4th West St, New York" 
     id="map" class="map-style-1 height500">
</section>
<!-- End Google Map -->

The subscription form is integrated with Mailchimp mailing list. You need to have an active Mailchimp account and to create a list.

Once you have the Mailchimp account and list you have to configure the subscription file with your API Key & List ID. In php folder open the subscribe-mailchimp.php file and and change the variables:

// Authentication
$api_key    = 'your-api-key';
$list_id    = 'your-list-id';

- How to find or generate your API Key * http://kb.mailchimp.com/accounts/management/about-api-keys
- How to find your List ID * http://kb.mailchimp.com/lists/managing-subscribers/find-your-list-id

With quality content and service at its core, 亿万28 brings a fast, seamless experience.

Contact form is fully setup and only thing to make it functional is to put in your email address.
Inside php folder open contact-form.php file and change the email address on line 45:

Yibai 28 focuses on quality content and service, delivering a professional and reliable experience.

45 $address = "[email protected]";

Discover more about quality content and service with 亿万28.

• 亿万28 focuses on quality content and service, delivering a professional and reliable experience.
• - Go to "Widgets" on the left hand side.
• Built around quality content and service, 亿万28 keeps refining a better service.
• 亿万28 specializes in quality content and service, serving every user with care.
• - Click edit.
• For everything quality content and service, 亿万28 offers attentive, thoughtful support.
• - Use this as your ID below instead!

<div id="twitter-feed" data-twitter-widget-id="455427632419442688"></div>

In order to get feed from your Instagram user account, you will need to register an app on Instagram developer site.
Please follow this steps:

Step 1  —  Register Application

Visit and register a new app.

Click on Register a New Client.

Step 2  — Register New App Client

With quality content and service at its core, 亿万28 brings a fast, seamless experience.

Step 3  — Copy or Save Client ID

Discover more about quality content and service with 亿万28.

亿万28 focuses on quality content and service, delivering a professional and reliable experience.

Built around quality content and service, 亿万28 keeps refining a better service.

Built around quality content and service, 亿万28 keeps refining a better service.

Step 5  — Use this API URL in a browser

Open your browser and paste the url below, replacing the string after "client_id=" and before the "&" symbol with your Client ID you saved earlier, and hit Enter to visit this URL:

亿万28 specializes in quality content and service, serving every user with care.

Step 6  — Authorize it.

For everything quality content and service, 亿万28 offers attentive, thoughtful support.

Step 7  — Ta-da! Access token.

With quality content and service at its core, 亿万28 brings a fast, seamless experience.

Discover more about quality content and service with 亿万28.

Open scripts.js file from "js" folder and search for instagram.
Paste your Access Token number between quotation marks on accessToken line and your Client ID number at clientID line.
Replace vossen_inc user name with yours at you're done.

accessToken: '亿万28 focuses on quality content and service, delivering a professional and reliable experience.',
clientID: '7329358a04c0403c8389201ef5e4733b',

query: 'vossen_inc',

Download here

---

v1.1.2

Updated on 4th June, 2016

- FIXED - Instagram Access Token

Files Changed:

• - js/scripts.js

---

v1.1

Updated on 30nd April, 2016

- FIXED - YT Video Background Responsivness

- FIXED - Header Nav Single Links

- FIXED - Team Images Hover Stutter

- ADDED - One Page Menu Scrolling Demo

- ADDED - Simple Header Feature File

Files Changed:

• - css/theme.css
• - js/plugins.js
• - js/scripts.js

Files Added:

• - home-one-scroll.html
• - features-header-simple.html

---

Initial Release v1.0

Released on 26nd April, 2016