A) 開始使用
FitX 是一個多用途的 HTML 模板選項，適用於需要網站模板來推廣和介紹其公司或客戶的網路開發人員或設計師。FitX 專為俱樂部、道場、健身、瑜珈、武術、體育館、運動、企業或任何想要以專業方式展示其作品、服務和業務的個人或企業設計。FitX 模板的獨特性在於其令人驚豔的美麗設計和易於使用的網站模板解決方案，可最大化使用者滿意度。它使用 bootstrap 4.2 框架建置，完全響應式，易於自訂，程式碼註解良好且對 SEO 友好
此模板使用 Bootstrap、HTML5、SASS、CSS3、JS 和 jQuery 建置。
取得程式碼編輯器
是的，完全有可能在記事本或類似程式中編輯 HTML，但如果您使用專業的程式碼編輯應用程式，您的工作將會順利得多。主要原因之一是您將獲得程式碼的彩色高亮顯示，如下所示，這將使閱讀和編輯更加容易。
我推薦 Sublime Text，您可以在此處下載： https://www.sublimetext.com/3
SASS (Syntactically Awesome Style Sheets) 主要是一個 CSS 的擴充功能。對於使用變數、巢狀規則等，SASS 非常有幫助。LESS 也是 CSS 的一部分，它允許您使 CSS 更易於維護、擴充和佈景主題化。瀏覽器無法讀取 SASS、LESS 或 Stylus。它們會在伺服器端編譯，就像 PHP 一樣。為此需要編譯器。我推薦使用 SASS，您可以在此處下載： Koala App
10+ 個最佳工具和資源來編譯與管理 SASS、LESS 和 Stylus – CSS 預處理器： 連結
從 Themeforest 下載模板主檔案
- 首先，您需要從您的 Themeforest 帳戶下載模板檔案。導航到 Themeforest 上的下載標籤。
- 找到模板。
- 點擊下載按鈕，
- 然後點擊 "所有檔案和文件"。
大多數 HTML 模板都會以 ZIP 檔案的形式提供 - 如果是這樣，請繼續解壓縮。然後在模板的資料夾中尋找，直到找到 "index.html" 或 "index.htm" 檔案。
在我們的範例模板中，"index.html" 檔案位於 "HTML" 目錄中。
B) HTML 結構
<!-- LOAD PAGE --> <div class="animationload"> ... </div> <!-- BACK TO TOP SECTION --> <a href="#0" class="cd-top cd-is-visible cd-fade-out">Top <!-- HEADER --> <div class="header header-1"> ... </div> <!-- BANNER --> <div id="oc-fullslider" class="banner"> ... </div> <!-- SHORTCUT --> <div class="section services"> ... </div> <!-- WHY CHOOSE US? --> <div class="section"> ... </div> <!-- VIDEO --> <div class="section bgi-cover-center" data-background="images/dummy-img.jpg"> ... </div> <!-- CLASS --> <div id="classes" class="section"> ... </div> <!-- SUCCESS STORIES --> <div class="section bgi-cover-center" data-background="images/dummy-img.jpg"> ... </div> <!-- OUR TRAINERS --> <div id="trainers" class="section"> ... </div> <!-- CTA --> <div class="section bgi-cover-center" data-background="images/dummy-img.jpg"> ... </div> <!-- OUR GALLERY --> <div id="gallery" class="section"> ... </div> <!-- OUR PACKAGES --> <div class="section"> ... </div> <!-- CLIENTS --> <div class="section bg-primary"> ... </div> <!-- BLOG --> <div class="section"> ... </div> <!-- CONTACT --> <div id="contact" class="section bg-gray"> ... </div> <!-- INFO --> <div class="section bg-primary"> ... </div> <!-- FOOTER SECTION --> <div class="footer" data-background="images/dummy-img.jpg"> ... </div>
如何透過 scss 更改顏色配置
開啟 sass/variable.scss 檔案並更改以下區域
@import url('https://fonts.googleapis.com/css?family=Lato:400,400i,900,900i');
$font-primary : 'Lato', sans-serif;
$font-secondary : 'Lato', sans-serif;
$font-tertiary : '', sans-serif;
$font-heading : $font-secondary;
$font-icon: FontAwesome;
$font-sas: 'sas-webfont';
$black: #000;
$white: #ffffff;
// Global
$color-body: #999999;
$color-primary: #ABC502;
$color-secondary: #000000;
$color-tertiary: transparent;
$color-quaternary: transparent;
$body-bg: #fff;
$font-body: $font-primary;
$content-padding: 100px;
/* --------------------
TOPBAR SETTING
-----------------------*/
$topbar-bg: darken($color-primary,40%);
$topbar-color: $color-body;
$topbar-nav-color: $color-primary;
$topbar-nav-hover-color: $color-secondary;
$topbar-font: $font-primary;
/* --------------------
NAVBAR SETTING
-----------------------*/
$navbar-bg: $color-secondary;
$navbar-font: $font-secondary;
$navbar-color: $white;
$navbar-hover-color: $color-primary;
$navbar-active-color: $color-primary;
$navbar-stiky-color: $color-primary;
/* --------------------
FOOTER SETTING
-----------------------*/
$footer-bg: $black;
$footer-font-color: $color-body;
如果您想編輯 顏色, 字型或其中一個欄位中任何元素的樣式，您將執行以下操作：
.section-heading { color: #someColor; }
如果您發現您的新樣式沒有被覆蓋，很可能是因為特異性問題。向下捲動您的 CSS 檔案，並確保沒有類似的樣式具有更高的權重。
.services .section-heading { color: #someColor; }
因此，為了確保您的新樣式被套用，請確保它們具有足夠的 "權重"，並且 CSS 檔案中沒有較低的樣式在您之後被套用。
C) CSS 檔案與結構
在 CSS 端，我們根據載入的頁面載入不同的 css 檔案。
如何更改背景圖片
將 "images/bg-map-dot.jpg" 替換為您的圖片網址來源或網站名稱。
如何從 css 更改標題/字型
我們建議使用 Firefox 中的 FireBug 外掛程式，以快速識別您可能想要更改的 CSS 屬性。假設例如我們想更改圖片下方的 h1 的顏色並新增連結。
從根資料夾開啟 style.css 檔案並搜尋 h1，直到找到檔案中的 color 屬性。它位於第 661 行，看起來像這樣：
h1, .page-header {
font-size: 40px;
line-height: normal; }
h2, .single-news .blok-title, .news-item .blok-title {
font-size: 32px;
line-height: normal; }
更改您想要的顏色並點擊儲存。如果您只想更改 h1 的顏色，您必須將 h1 分開並給予它另一種顏色。CSS 應該看起來像這樣。.page-header {
font-size: 40px;
line-height: normal; }
h1{
color: #12aaeb;
font-size: 40px;
line-height: normal; }
現在，假設我們想讓 h1 指向 http://google.com。此時 h1 看起來像這樣：<h1>簡碼：排版與段落樣式</h1>
要使其指向特定 URL，h1 必須看起來像這樣：
<h1><a href="http://www.google.com">想了解更多提供即时更新的赛程、新闻和数据相关内容，尽在雨燕直播。</a></h1>
您可以更改 CSS 中任何元素的樣式。您只需要知道該元素或 div 的名稱，方法是使用 FireBug 或開啟 HTML 然後在 CSS 中搜尋該元素。小菜一碟！
社交圖示
要為您的社交圖示新增連結，請將必要的 URL 貼到 <a href=> 標籤中。請參閱以下範例：
<a href="#"><i class="fa fa-facebook"></i></a>
D) JavaScript
此模板從首頁和其餘頁面匯入不同的 js 檔案，用於不同的滑桿、燈箱和互動式分頁。所有 js 都圍繞 JQuery 建置。以下是一些使用 jQuery 的範例：
首頁滑桿設定
/* =================================
BANNER ROTATOR IMAGE
=================================== */
var slides = $(".full-screen"),
b = slides.find('.item');
b.each(function(){
var e = $(this),
ocImg = e.find('img').attr('src');
e.css({'background-image': 'url(' + ocImg + ')'});
});
slides.owlCarousel({
loop: true,
nav: true,
navText: [
'<h1><i class="fa fa-angle-left" aria-hidden="true"><h1></i>',
'<h1><i class="fa fa-angle-right" aria-hidden="true"><h1></i>'
],
navContainer: '.banner .custom-nav',
items: 1,
});
替換 fadeIn 和 rollOut 用於滑桿首頁動畫。要更改動畫，請參閱 animate.css 文件 animate.css
Google 地圖
開啟 contact.html 雨燕直播围绕专业视角解读赛事动态，助力球迷决策不断创新，回应用户的真实需求。
<div class="maps-wraper"> <div id="cd-zoom-in"></div> <div id="cd-zoom-out"></div> <div id="maps" class="maps" data-lat="-7.452278" data-lng="112.708992" data-marker="images/cd-icon-location.png"> </div> </div>
您可以透過編輯屬性來更改 Google 地圖的座標 data-lat 用於緯度 data-lng 用於經度。以及透過編輯屬性更改標記圖示 data-marker.
開啟 contact.html 檔案並將以下區域更改為您的 Google Map API KEY 取得 API 金鑰
聯絡表單 (phpMailer 搭配 SMTP Gmail)
您可以輕鬆快速地安裝您的表單。開啟 php/form-process.php 精选简洁易用的界面，信息查询一目了然内容，雨燕直播与你一同发现更多精彩。
簡單快速的驗證功能位於檔案結尾 js/vendor/form-scripts.js。通過此階段後，在 php/form-process.php 檔案中會檢查電子郵件。電子郵件無法通過檢查，腳本將停止運行並返回 EMAIL-ERROR 錯誤。
/* Contact Form Setup Begin */ $send_name = "Rometheme"; // Replace your name $send_title = "Rometheme Send Mail"; // Replace email sent title $send_address = "[email protected]"; // Replace your email address $smtp_address = "[email protected]"; // Replace your email GMail address $smtp_password = "12345"; // Replace your email password $smtp_server = "smtp.gmail.com"; // Replace your email server address
E) 搜尋引擎優化
為了提高您的搜尋引擎排名，從而讓您的網站出現在搜尋結果中，請不要忘記更改您的描述和關鍵字。
<meta name="description" content=""> <meta name="keywords" content="">
F) 來源與鳴謝
我使用了以下圖像、圖示或其他檔案，如列表所示。
HTML、CSS 和 JS：
圖像：
字型：
再次感謝您購買此佈景主題。正如我一開始所說，如果您對此佈景主題有任何疑問，我很樂意為您提供協助。不保證，但我會盡力協助。如果您對 ThemeForest 上的佈景主題有更一般性的問題，您可以考慮訪問論壇並在 "項目討論" 部分提出您的問題。
Rometheme
回到頂部