はじめに

テンプレートフォルダ スランド は、ダウンロードしたzipファイル内にあります。テンプレートとドキュメントフォルダを見つけるには、zipファイルを解凍する必要があります。

ザ ファイルとフォルダの構造 は以下のようになります。

  1. assets/css — CSSファイルが入ったフォルダ。
  2. assets/fonts — フォントファイルが入ったフォルダ。
  3. assets/images — 画像ファイルが入ったフォルダ。
  4. assets/js — JavaScriptファイルが入ったフォルダ。

FileZillaのようなFTPクライアントを使用して、テンプレートファイルをサーバーにアップロードしてください。

ファイル編集とアップロード:

VS Codeのようなコードエディタで開くことで、個々のページをカスタマイズできます。カスタマイズが完了したら、ウェブサイトを公開するには、更新されたプロジェクトファイルをFileZillaのようなFTPクライアントを使用して、ご自身のドメインのホスティングサーバーにアップロードする必要があります。

HEAD CSS構造

以下の css ファイルが ヘッドセクション: 


<!--====== Font Awesome ======-->
<link rel="stylesheet" href="assets/css/fontawesome.5.9.0.min.css">
<!--====== Flaticon CSS ======-->
<link rel="stylesheet" href="assets/css/flaticon.css">
<!--====== Bootstrap css ======-->
<link rel="stylesheet" href="assets/css/bootstrap.4.5.3.min.css">
<!--====== Magnific Popup ======-->
<link rel="stylesheet" href="assets/css/magnific-popup.css">
<!--====== Slick Slider ======-->
<link rel="stylesheet" href="assets/css/slick.css">
<!--====== Animate CSS ======-->
<link rel="stylesheet" href="assets/css/animate.min.css">
<!--====== Nice Select ======-->
<link rel="stylesheet" href="assets/css/nice-select.css">
<!--====== Padding Margin ======-->
<link rel="stylesheet" href="assets/css/spacing.min.css">
<!--====== Menu css ======-->
<link rel="stylesheet" href="assets/css/menu.css">
<!--====== Main css ======-->
<link rel="stylesheet" href="assets/css/style.css">
<!--====== Responsive css ======-->
<link rel="stylesheet" href="assets/css/responsive.css">

に読み込まれています。

以下の の前に読み込まれている Javascript構造 JS.


<!--====== Jquery ======-->
<script src="assets/js/jquery-3.6.0.min.js"></script>
<!--====== Bootstrap ======-->
<script src="assets/js/bootstrap.4.5.3.min.js"></script>
<!--====== Appear js ======-->
<script src="assets/js/appear.js"></script>
<!--====== WOW js ======-->
<script src="assets/js/wow.min.js"></script>
<!--====== Isotope ======-->
<script src="assets/js/isotope.pkgd.min.js"></script>
<!--====== Circle Progress ======-->
<script src="assets/js/circle-progress.min.js"></script>
<!--====== Image loaded ======-->
<script src="assets/js/imagesloaded.pkgd.min.js"></script>
<!--====== Nice Select ======-->
<script src="assets/js/jquery.nice-select.min.js"></script>
<!--====== Magnific ======-->
<script src="assets/js/jquery.magnific-popup.min.js"></script>
<!--====== Slick Slider ======-->
<script src="assets/js/slick.min.js"></script>
<!--====== Main JS ======-->
<script src="assets/js/script.js"></script>

に基づいています。詳細については、

ザ スランド HEADまたはBODY セクション: HTML構造はレスポンシブテンプレートであり、 Bootstrap Framework.

Bootstrap CSS を参照してください。テンプレートの一般的な構造はテンプレート全体で同じであり、各部分はセクションID名を持つセクションの下にあります。以下は

旺运88の「私たちについて」セクションでは、ゲームとエンターテイメントを中心としたポータルプラットフォームを紹介します。プラットフォームの発展と全体的なコンテンツの方向性に焦点を当てています。機能はゲームコンテンツの統合、エンターテイメント情報の表示、各モジュールの構造化された表示を中心に展開し、ユーザーがプラットフォームのコンテンツ範囲を直感的に理解できるようにします。

一般的な構造:

使用フォント」ファイルパスで見つけることができます: assets/css/style.cssフォントコードは「 


// Font Family
--base-font: 'Inter', sans-serif;
--heading-font: 'Poppins', sans-serif;

style.css

メインカラー変更オプション


// colors
--base-color: #5b5675;
--heading-color: #141125;
--primary-color: #5138ee;
--light-color: #f8f7fc;
--yellow-color: #ffc800;
--border-color: #edebfd;

ファイルパス: assets/css/style.css

Slick編集オプション


// 08. Feedback Slider One
if ($('.feedback-wrap').length) {
    $('.feedback-wrap').slick({
        dots: true,
        infinite: false,
        autoplay: true,
        fade: true,
        autoplaySpeed: 5000,
        arrows: false,
        centerMode: false,
        speed: 1000,
        slidesToShow: 1,
        slidesToScroll: 1,
    });
}

ファイルパス: assets/js/script.js 詳細はこちらをご覧ください:

Slickドキュメントオプション

スクロールアニメーションを非表示にする方法



// 15. WOW Animation
if ($('.wow').length) {
    var wow = new WOW({
        boxClass: 'wow', // animated element css class (default is wow)
        animateClass: 'animated', // animation css class (default is animated)
        offset: 0, // distance to the element when triggering the animation (default is 0)
        mobile: false, // trigger animations on mobile devices (default is true)
        live: true // act on asynchronously loaded content (default is true)
    });
    wow.init();
}

以下のコードファイルパスを削除またはコメントアウトしてください: assets/js/script.js

速度最適化

- すべての画像をKB、MB単位で最適化してください。また、プレースホルダーファイルパスに従って画像サイズを使用してください: assets/images/..

Tinypng

- すべてのCSSファイルを圧縮してください。ファイルパス: assets/css/..

CSS Minifier

- すべてのJSファイルを圧縮してください。ファイルパス: assets/js/..

Javascript Minifier

画像の変更方法

画像ファイル「パス: assets/images/...」に移動し、プレースホルダー画像のサイズと名前に従って、目的の画像を置き換えてください。

既存テンプレートの新規アップデートの追加方法

一定期間後、最新のテクノロジーに基づいてプロジェクトを更新しますが、テンプレートでは、ご自身で更新したい場合はご自身で行う必要があります。

注意: クレジット 画像 すべて プレビュー は は含まれていません 目的でのみ使用されており、 最終購入 ファイルに含まれています。

画像提供元:
https://www.freepik.com/
https://pixabay.com/
https://unsplash.com/

フォント:
Inter
Poppins

IconFont
Fontawesome
Flaticon