您可以選擇 6 種標頭樣式。只需將標頭樣式 CSS 類別新增到標頭標籤即可啟用標頭樣式。下方提供了標頭樣式類別及其說明的列表供您參考：

<nav class="navbar navbar-default">	預設標頭，具有白色背景和深色選單。
<nav class="navbar navbar-default fullwidth">	全寬標頭
<nav class="navbar navbar-default transparent">	透明轉為較小尺寸，帶有白色背景
<nav class="navbar navbar-default transparent-dark">	透明轉為較小尺寸，帶有深色背景
<nav class="navbar navbar-default dark">	深色標頭，帶有淺色選單。
<header class="navbar navbar-default transparent dark-menu">	透明標頭，帶有深色選單。

Wander 使用 2 組精美的付費圖示字體： Ion Icons, 和 Et Line Icons.
使用圖示需要您遵循簡單的語法，使用預定義的圖示代碼：

    <i class="ion-heart"> 

所有可用圖示代碼的列表，請參閱下方頁面：

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

預設情況下，圖示會以非常小的尺寸顯示。您可以透過新增一些尺寸類別來調整：

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

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

Wander 使用 Owl Carousel jQuery 外掛程式來處理所有滑桿行為，包括圖片滑桿和英雄滑桿。
所有滑桿均支援行動裝置觸控，且桌面模式有導覽箭頭。

圖片滑桿可以在 features-slider-columns.html 檔案中找到，它們的結構始終如下：

            				
    <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>
            				        

Wander 使用輔助類別來間隔頁面上的元素。輔助類別用於使用邊距和內距來間隔元素。這使得在不需額外 CSS 的情況下，更容易在 HTML 中建立自己的元素並適當排列。

範例：您有一個標題，您想透過在底部新增邊距，將其與後續內容隔開 100px。您可以使用間距類別來協助：

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

間距以 10 的倍數工作。這表示您可以使用類似以下的類別： mb10, mb20, mb30, mb40, mb50 依此類推，最高可達 mb100.

• 'mb' 指的是 'margin-bottom'
• 'mt' 指的是 'margin-top'
• 'ml' 指的是 'margin-left'
• 'mr' 指的是 'margin-right'

對於內距，我們使用了 'pb' 而非 'mb'，其中 'pb' 指的是 'padding-bottom'。

• 'pb' 指的是 'padding-bottom'
• 'pt' 指的是 'padding-top'
• 'pl' 指的是 'padding-left'
• 'pr' 指的是 'padding-right'

訂閱表單已整合至 Mailchimp 電子報名單。您需要擁有一個有效的 Mailchimp 帳戶並建立一個名單。

一旦您擁有 Mailchimp 帳戶和名單，您就必須使用您的 API 金鑰和名單 ID 來配置訂閱檔案。在 php 資料夾中開啟 subscribe-mailchimp.php 檔案並更改變數：

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

- 如何尋找或產生您的 API 金鑰 * http://kb.mailchimp.com/accounts/management/about-api-keys
- 如何尋找您的名單 ID * http://kb.mailchimp.com/lists/managing-subscribers/find-your-list-id

注意：php 檔案只能在您的伺服器上運行，因此在測試時請將網站上傳到您的伺服器。

Wander 使用 Raleway、Lovelo 和 Open Sans 這 3 種字體，來自 Google Fonts Library。您可以在所有 .html 檔案的 head 標籤中找到字體檔案的連結。

<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'>

若要新增或更改字體，您需要新增新的 Google 字體連結，或用您的新 Google 字體替換上述連結。之後，在 css/theme.css 檔案中，您可以將所有 font-family：名稱更改為您的新字體名稱。

Wander 隨附 4 種英雄首頁區塊類型：圖片、滑桿、內容滑桿和影片英雄。

您可以在下方列出的檔案中找到它們：

• - 全螢幕滑桿 /home-slider-fullscreen.html
• - 全寬滑桿 /home-slider-fullwidth.html
• - 全螢幕內容滑桿 /home-content-slider-fullscreen.html
• - 全寬內容滑桿 /home-content-slider-fullwidth.html
• - 全螢幕影片 /home-video-fullscreen.html
• - 全寬影片 /home-video-fullwidth.html
• - 全螢幕視差 /index.html
• - 全寬視差 /home-parallax-fullwidth.html

許多區塊都有覆蓋背景的圖片，這些背景可以是視差或靜態的。
背景圖片透過 CSS 類別連結，例如 bg-img-1, bg-img-2 依此類推。您可以在 css/custom.css 檔案中找到所有這些。

範例：要為區塊放置背景圖片並使其靜態，請新增圖片類別 bg-img-1:

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

要使其成為視差，請新增類別 parallax

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

您也可以新增類別 overlay 來用深色透明點狀圖案覆蓋圖片。

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

Wander 提供了一種非常優雅的方式來展示您的作品。您可以從主資料夾中選擇多種作品集變體。
若要設定新的作品集，請使用以下代碼：

作品集篩選器設定：

    <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>  

作品集項目設定：

    <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>  

請依照以下步驟開始：

• 1. 開啟 HTML 資料夾以尋找所有範本檔案。
• 2. 開始新增您的內容並自訂 html 檔案。
• 3. 使用 FTP 程式（例如 Filezilla）將這些檔案上傳到您的網路伺服器。
請務必上傳下方所列的必要檔案與資料夾：
• HTML/css 樣式表資料夾
• HTML/fonts 字體資料夾
• HTML/img 圖片資料夾
• HTML/js 腳本資料夾
• HTML/php PHP 函數資料夾
• HTML/index.html 首頁
其他檔案可依您的偏好使用。
• 您現在已成功啟動並運行您全新美麗且功能齊全的網站。

聯絡表單已完全設定好，唯一需要使其正常運作的就是填入您的電子郵件地址。
在 php 資料夾中開啟 contact-form.php 檔案並更改第 45 行的電子郵件地址：

英超直播专注英超高清直播，为用户提供专业可靠的体验。

45 $address = "[email protected]";

Wander 隨附 10 種預設顏色配置，它們位於 css/colors/ 資料夾中。若要使用其中一種，請依照以下步驟操作。

您可以立即更改您網站的顏色配置：

開啟您的 html 檔案，在 head 中您會找到藍色 blue.css 樣式表連結：

<!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>

只需將 blue.css 連結更改為 10 種預設顏色配置中的任何一種：

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

若要從您的 Instagram 使用者帳戶獲取動態消息，您需要在 Instagram 開發者網站上註冊一個應用程式。
請遵循以下步驟：

步驟 1  — 註冊應用程式

造訪 並註冊一個新應用程式。

點擊註冊新用戶。

步驟 2  — 註冊新應用程式用戶

填寫與圖片相同的資訊。

步驟 3  — 複製或儲存用戶 ID

在此複製用戶 ID，或至少保持此標籤開啟，您很快就會需要用戶 ID。

步驟 4  — 設定應用程式以公開存取

從「管理用戶」畫面點擊您的應用程式上的「編輯」，然後開啟「安全性」標籤，並取消勾選「停用隱含 OAuth」，因為我們希望公眾能夠看到我們的動態消息。

再次點擊您的應用程式上的「編輯」，然後開啟「沙盒」標籤，並確認您是此應用程式的「管理員」。

步驟 5  — 在瀏覽器中使用此 API URL

開啟您的瀏覽器並貼上以下 URL，將 "client_id=" 後面和 "&" 符號之前的字串替換為您之前儲存的用戶 ID，然後按 Enter 鍵訪問此 URL：

請記住：將此 URL 中的 "7329358a04c0403c8389201ef5e4733b" 部分替換為您的用戶 ID。您可以從 Instagram 開發者網站的「管理用戶」頁面再次存取用戶 ID。

步驟 6  — 授權

訪問我們使用用戶 ID 建立的 URL 將會出現一個「授權」畫面。此時，您正在使用您的本機伺服器模擬 API 連線，您將授權它以查看存取權杖回應。點擊「授權」。

步驟 7  — 瞧！存取權杖。

此頁面看起來損壞，但 URL 中有一個關鍵資料… 在 "#access_token=" 後面，您可以取得您的公開存取權杖，其中也包含您的 ID。根據此回應，存取權杖為：2985464939.7329358.026dd38d94c046c3aac748818d3c50c2

步驟 8  — 使用您的存取權杖和用戶 ID

開啟「js」資料夾中的 scripts.js 檔案並搜尋 instagram。
將您的存取權杖號碼貼在 accessToken 行的引號之間，並將您的用戶 ID 號碼貼在 clientID 行。
完成後，將 vossen_inc 使用者名稱替換為您的。

accessToken: '2985464939.7329358.026dd38d94c046c3aac748818d3c50c2',
clientID: '7329358a04c0403c8389201ef5e4733b',

query: 'vossen_inc',

在此下載

---

v1.1.2

更新於 2016 年 6 月 4 日

- 已修復 - Instagram 存取權杖

變更檔案：

• - js/scripts.js

---

v1.1

更新於 2016 年 4 月 30 日

- 已修復 - YT 影片背景響應式

- 已修復 - 標頭導覽單一連結

- 已修復 - 團隊圖片懸停卡頓

- 已新增 - 單頁選單滾動演示

- 已新增 - 簡單標頭檔案

變更檔案：

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

新增檔案：

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

---

初始版本 v1.0

發佈於 2016 年 4 月 26 日

若要顯示您的 Twitter 動態，您需要將 html 檔案中的 Twitter 小工具 ID 替換為您自己的：

• - 首先，正常登入 www.twitter.com，然後前往您的設定頁面。
• - 在左側導覽列中選擇「小工具」。
• - 為您需要的內容建立一個新小工具，例如「使用者時間軸」或「搜尋」等。
• - 現在回到設定頁面，然後再回到小工具頁面，您應該會看到您剛才建立的小工具。
• - 點擊編輯。
• - 查看您網頁瀏覽器中的 URL，您會看到一個長數字，例如：345735908357048478
• - 在下方使用此數字作為您的 ID！

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

若要更改 Google 地圖地址，請開啟包含 Google 地圖區塊的 html 檔案，並將您的地址或座標放入 "map-coordinates" 和 "marker-coordinates" 屬性中：

<!-- 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 -->