コードウェット

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

Rifat WordPressチュートリアル Mar 31, 2024

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

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

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

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

ステップ1: fullPage.jsを読み込む

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

Web サイトを正しく読み込むためには、次のコードを Web サイトのヘッダーに追加する必要があります。

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

最高の無料ページビルダー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 を使用して全画面スクロール ページを構築する最も簡単な方法です。この記事が、あなたの将来の事業のために簡単でミニマルな Web サイトをデザインするのに役立つことを願っています。

Divi WordPress Theme