WordPress のページスクロールにスティッキーフローティングビデオを追加する方法

学びたい WordPress サイトのページスクロールにスティッキーフローティングビデオを追加するにはどうすればよいですか?

スティッキービデオは、視聴者を Web サイトに引き付ける強力な方法です。現在、人々は文書コンテンツよりもビデオコンテンツを多く消費しています。そのため、Web サイト訪問者がサイトに十分に興味を持っていない場合は、ビデオを追加することで問題を解決できます。

Web サイトのビデオを簡単に作成する方法を探している場合は、適切な記事が見つかります。このブログで学べることがあるからです 数ステップと数分で Elementor ベースの WordPress サイトにスティッキービデオを追加する方法。

それで読み続けてください…

粘着ビデオとは何ですか?

スティッキービデオは であるビデオ ウェブページに固定すると、同じ場所に浮かんだままになります ユーザーが上下にスクロールしているときでも、Web ページ ウィンドウ上で。 

Elementor WordPress Web サイトに Sticky Video を追加する理由は何ですか?

Web サイト上のスティッキービデオというコンセプトは、クールに聞こえるだけでなく、多くの利点もあります。ここでは、スティッキービデオを追加することで活用できる利点をいくつか紹介します。 WordPress ウェブサイト.

• ユーザーエンゲージメントを向上: スティッキー ビデオを使用すると、ユーザーは Web ページのコンテンツを見ながら同時に読むことができます。その結果、人々はウェブサイトにもっと関与する傾向があります。
• ビデオの完成率を向上: スティッキービデオはページ全体をブロックしないため、顧客は途中で閉じずに最後まで視聴する可能性が高くなります。したがって、ビデオをスティッキーにすると、実際にビデオの完了時間が長くなる可能性があります。
• ユーザーの注意を引きます: 通常、人々はサイトをさぼって閲覧します。この場合、テキストコンテンツのみに依存すると、顧客に注目してもらいたい重要なことを見逃してしまう可能性があります。ビデオを使用すると、ユーザーの注意をより効果的に特定の情報に集めることができます。
• より良いストーリーテリング: 動画は、プレーン テキスト コンテンツよりもストーリーを伝えるための広いキャンバスを提供します。ビデオではテキスト、アニメーション、音声を同時に使用できるため、ストーリーをより効果的に伝える能力が高まります。

WordPress サイトにスティッキービデオを追加する必要があると確信していますか?そうであれば、次のセクションに進んで、その方法を見つけてください。

6 つのステップでスティッキービデオを Elementor Web サイトに追加する方法

これは、WordPress サイト上でビデオを固定して浮かせる最も簡単なプロセスです。スティッキー ビデオを Elementor に追加するすべての手順をすぐに完了します。

ステップ 1: Elementor と ElementsKit をインストールする

まず、必要なプラグインをすべてインストールします。 Elementor にスティッキービデオを追加する方法に関するこのチュートリアルに従うには、次のものが必要です。

• エレメンター そして
• ElementsKit (無料版とプロ版の両方)。 

Elementor はドラッグ アンド ドロップ ページ ビルダーであり、Elementor のアドオンは ElementsKit です。したがって、まず Elementor をインストールし、次に ElementsKit をダウンロードして、プラグインを Pro バージョンにアップグレードする必要があります。

チェックアウトできます ドキュメンテーション ElementsKit pro のインストールとライセンスのアクティベーションのプロセスに関してサポートが必要な場合。

ステップ 2: ElementsKit のスティッキー コンテンツ モジュールを有効にする

ビデオをスティッキーにするために、ElementsKit のスティッキー コンテンツ機能を使用します。したがって、スティッキー コンテンツ モジュールを有効にする必要があります。

次に、次の場所に移動します ElementsKit ⇒ モジュール ⇒ スティッキーコンテンツ, オンにする オプション、そして 「変更を保存」をクリックします をクリックして、行った変更を更新します。

ステップ 3: Elementor Video ウィジェットをドラッグ アンド ドロップします。

スティッキービデオを追加するページに移動し、「Elementor で編集」オプションをクリックします。

をクリックして希望のレイアウトを選択します + アイコン。その後、 ビデオを検索しますdget、ウィジェットをドラッグし、 落とす 追加したい場所に追加します。

注記: このチュートリアルでは、 事前に作成されたページはすでにインポートされています プロセス全体を示すために編集中です。あなたはできる WordPress ウェブサイトを作成する ElementsKit の事前構築済みセクションを使用して簡単に実行できます。

ステップ 4: ビデオソースを選択し、URL を追加します

Elementor ビデオ ウィジェットを使用すると、次のようなソースからビデオを表示できます。 Youtube、Vimeo、DailyMotion、および自己ホスト型。

初め、 好みのソースタイプを選択し、ビデオの URL を入力します。  この記事ではyoutubeを使用させていただきます。

注記: 自己ホスト型の場合、ビデオをサーバーにアップロードするか、 外部 URL。

ビデオのスタイルをカスタマイズすることもできます。これを行うには、「スタイル」タブに移動します。ここでできます アスペクト比とCSSフィルターを選択します。 1:1、3:2、4:3、16:9など6種類の比率から選択できます。CSSフィルター編集アイコンをクリックして、ぼかし、明るさ、コントラスト、彩度、色相をカスタマイズします。

ステップ 5: Elementor ビデオをスティッキーにするための設定

に行きます 詳細設定タブ。次に、ElementsKit スティッキーを展開します オプション。ここで選択できるのは、 上部、下部、列としてスティッキー タイプを設定し、上にスクロールすると表示されます。

[スティッキー タイプ] として [なし] 以外を選択すると、次のオプションが表示されます。

• スティッキーになるまで: ここでは、ビデオを固定し続けるセクションの CSS ID を設定する必要があります。設定できるのは、 カスタム CSS ID を列に追加し、コピーして [Sticky until] オプションに貼り付けます。

• スティッキー オフセット: このオプションでは、オフセット値を設定します。オフセット値は、ビデオとページの上部位置の間の距離を示します。

注記: 親列が画面上に表示されるまでのみ表示されるため、オプションがスティッキー オプション列で使用できなくなるまでスティッキーになります。

変更できます スティッキーな背景色 そして、作ります すべてのデバイス、デスクトップのみ、またはデスクトップとタブレットの両方でビデオを固定します。

ステップ 6: Elementor にスティッキー ビデオを追加して更新し、プレビューを表示する

ビデオの種類を選択し、すべてのスティッキー設定をセットアップしたら、更新をクリックして保存し、プレビュー ボタンをクリックして最終結果を確認します。

注記： ご希望の場合は、 クリックするとポップアップしてビデオを表示するスティッキービデオボタン そうすればできます ElementsKit ビデオを使用する ウィジェット Elementor Video ウィジェットの代わりに。フォローすることができます 同じプロセス 上記で説明したように、ElementsKit ビデオ ウィジェットを使用して Elementor にスティッキー ビデオを追加します。

がここにあります ElementsKit ビデオ ウィジェットを使用した Sticky Video のプレビュー.

最後の言葉

おめでとう！これで、Elementor サイトにスティッキービデオを追加する方法がわかりました。最初に思ったよりもはるかに簡単ですよね?

ElementsKit スティッキー モジュールのすべてのオプションと設定を試し、サイトで最大限の結果を得るために使用してください。 ElementsKit スティッキー モジュールと、ページ スクロールにスティッキー フローティング ビデオを追加する方法の簡単さに感銘を受けた場合。

そうして 健全なウィジェットのコレクション ElementsKit のモジュールはあなたをさらに驚かせるでしょう。したがって、ElementsKit が提供するすべての機能を必ずチェックしてください。