コードウェット

ElementorでフルページスクロールWebサイトを作成する方法

Rifat WordPressチュートリアル Jan 24, 2023

Elementor で全画面スクロール ページを作成するのも非常に簡単で便利です。 これを実現するために、 fullPage.jsというプラグインを利用します。 CSS スクロールやElementorアドオンなど、この効果を実現する方法は他にもあります。 ただし、fullPage.js は、互換性、応答性、および使いやすさに関して最適なソリューションを提供します。

ElementorでフルページスクロールWebサイトを作成する方法

Elementor で全画面スクロール Web サイトを作成する

次に、Elementor でフルページのスクロール Web サイトを作成するプロセスを示します。

ステップ 1: fullPage.js をロードする

fullPage.jsプラグイン関数を使用するには、最初にロードする必要があります。

正しくロードするには、次のコードをウェブサイトのヘッダーに追加する必要があります。

素晴らしいウェブサイトを作成します

最高の無料ページビルダーElementor を使用

今すぐ始める 
<script src="https://cdnjs.cloudflare.com/ajax/libs/fullPage.js/3.0.4/fullpage.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/fullPage.js/3.0.4/fullpage.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/fullPage.js/3.0.4/fullpage.extensions.min.js"></script>

Elementor は現在、サイト ヘッダーにコードを追加する手段を提供していないため、このコードを実行するにはプラグインが必要です。 ヘッダーにコードを追加できるプラグインはいくつかありますが、これが最も使いやすいことがわかりました。

プラグインをインストールした後、WordPress ダッシュボードのカスタム CSS & JS で [カスタム HTML を追加] を選択します。 ここで、前述のコードを貼り付けます。ヘッダーとフロント エンドの両方に配置してください。

Adding code to the Header using a WordPress Plugin

次のステップは、独自の JS を組み込むことです。 fullPage.js を初期化し、そのオプションと手順を設定するには、jQuery を使用する必要があります。 ここでは、垂直スクロールを使用するすべてのサイトに適用される基本的な選択肢をいくつか示します。

jQuery(document).ready(function($) {
    $('#fullpage').fullpage({
        //options here
        scrollingSpeed: 1000,
        navigation: true,
        slidesNavigation: true
    });
    //methods
    $.fn.fullpage.setAllowScrolling(true);
});

このコードをフロント エンドのフッターに必ず含めてください。

このフェーズでは、FullPage 設定も設定します。 前の例には、スクロール サイトの右側に表示されるナビゲーション ドットと、フルページのスクロール サイトに必要な最小限のオプションが含まれています。 デザインをレスポンシブに変更するときは、さらに多くの代替案を検討します。 オプションの詳細については、公式ドキュメントを参照してください。

ステップ 2: Elementor ページを設定する

スクロール ページのfullPage.js では、次のマークアップが必要です。

<div id="fullpage">
    <div class="section">Section 1</div>
    <div class="section">
        <div class="slide">Slide 2.1</div>
        <div class="slide">Slide 2.2</div>
        <div class="slide">Slide 2.3</div>
    </div>
    <div class="section">Section 3</div>
</div>

クラス セクションを含むスクロール ページの個々の div は、それぞれフルスクリーン セクションになります。 テンプレートを利用することは、これを Elementor で機能させるための最も簡単な方法です。

まず、実際のページを構成しましょう。 Pages で新しいページを作成し、適切なタイトルと URL を付けてから、Elementor を使用して編集します。

Elementor で 1 つの列を持つセクションを作成します。 この列に HTML ウィジェットを追加します。 個々のスライドのショートコードを含むこのウィジェットは、ページのフレームワークとして機能します。 次のコードを追加します。

<div id="fullpage">
    <div class="section"></div>
    <div class="section"></div>
    <div class="section"></div>
</div>

セクションが全幅であることを確認します。 さらに、Elementor がデフォルトで列に追加するパディングが必要ないため、セクションと列のパディングを 0 に設定します。

後の手順で実際のスライドを作成した後、Elementor テンプレート ID を正しい値に変更します。

ステップ 3: セクションを設定する

最後のステップは、各セクションを個別に作成してテンプレートとして保存することです。

ショートコードを使用するには、 Elementor Proが必要です。 まだ購入を考えていない場合は、購入する時が来ました。 Elementor を使用して Web サイトを構築するために必要なツールがすべて揃っています。 毎回新しいテーマを購入する必要はありません!

[テンプレート] - [新規追加] に移動して、新しいセクションを作成します。

全ページスクロール サイトの最初のスライドが作成されます。 Elementor で新しいセクションを作成し、その高さを「画面に合わせる」に設定します。 マテリアルを追加したので、スタイルを設定できます。 各テンプレートに最大で 1 つのパーツが含まれていることを確認してください。 独自のレイアウトを作成するために、必要な数の列と内部列を使用できます。

終了したらスライドを保存してから、Elementor テンプレートに戻ります。 最近作成したテンプレートがリストに表示されるはずです。 このテンプレートの ID を取得し、手順 2 で作成したページにコピーして貼り付けます。

所有しているスライドごとにこの手順を繰り返します。 すべてのテンプレートには、画面に合わせて高さが調整された領域が 1 つ必要です。

まとめ

それでは、それだけです！ これは、 Elementorで fullPage.js を使用して全画面スクロール ページを作成する最も簡単な方法です。 これが、将来のベンチャーのために簡単で最小限のウェブサイトをデザインするのに役立つことを願っています.

Divi WordPress Theme