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

公開: 2022-03-25

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

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

あなたがあなたのウェブサイトのビデオを粘着性にするための楽な方法を探しているなら、あなたは正しい記事にたどり着きました。 このブログでは、ElementorベースのWordPressサイトにスティッキービデオを追加する方法を数ステップと数分で学習するためです。

だから読み続けて…

内容を隠す
スティッキービデオとは何ですか?
Elementor WordPressWebサイトにスティッキービデオを追加する理由
スティッキービデオをElementorWebサイトに6つのステップで追加する方法
ステップ1:ElementorとElementsKitをインストールする
ステップ2:ElementsKitのスティッキーコンテンツモジュールを有効にする
ステップ3:ElementorVideoウィジェットをドラッグアンドドロップします
ステップ4:ビデオソースを選択し、URLを追加します
ステップ5:Elementorビデオをスティッキーにするための設定
ステップ6:更新してElementorにスティッキービデオを追加し、プレビューを表示する
最後の言葉

スティッキービデオとは何ですか?

スティッキービデオは、Webページに固定され、ユーザーが上下にスクロールしている間もWebページウィンドウの同じ場所に浮かんでいるビデオです

Elementor WordPressWebサイトにスティッキービデオを追加する理由

Webサイトのスティッキービデオの概念は、クールに聞こえるだけでなく、多くの利点があります。 スティッキービデオをWordPressWebサイトに追加することで活用できる利点のいくつかを次に示します。

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

WordPressサイトにスティッキービデオを追加する必要があると確信しましたか? もしそうなら、次のセクションに進んで、それをどのように行うことができるかを理解してください。

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

これは、WordPressサイトでビデオをスティッキーでフローティングにする最も簡単なプロセスです。 すぐにElementorにスティッキービデオを追加するためのすべての手順を実行します。

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

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

  • Elementor
  • ElementsKit (無料版とプロ版の両方)。

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

ElementsKit proのインストールとライセンスのアクティブ化のプロセスに関してヘルプが必要な場合は、ドキュメントを確認してください。

ElementsKitProを入手する

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

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

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

Elementorにスティッキービデオを追加

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

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

ページスクロールでスティッキーフローティングビデオを作成する方法

+アイコンをクリックして、任意のレイアウトを選択します。 その後、ビデオウィジェットを検索し、ウィジェットをドラッグして、追加する場所にドロップします。

Elementorビデオウィジェットをドラッグアンドドロップして、ページスクロールにスティッキーフローティングビデオを追加する方法

:このチュートリアルでは、プロセス全体を表示するために編集している作成済みのページを既にインポートしています。 ElementsKitのビルド済みセクションを使用すると、WordPressWebサイトを簡単に作成できます。

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

Elementorビデオウィジェットを使用すると、Youtube、Vimeo、DailyMotion、SelfHostedなどのソースからのビデオを表示できます。

YouTubeビデオタイプを選択しますElementorウィジェットページスクロールでスティッキーフローティングビデオを作成する方法

まず、ご希望のソースタイプを選択してから、動画のURLを入力してください。 この記事ではyoutubeを使用します。

:セルフホストの場合は、サーバーに動画をアップロードするか、外部URLを指定できます。

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

Elementorビデオウィジェットのスタイル設定により、Elementorにスティッキービデオが追加されます

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

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

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

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

  • スティッキーまで:ここでは、ビデオをスティッキーに保つまでのセクションのCSSIDを設定する必要があります。 カスタムCSSIDを列に設定し、それをコピーして[スティッキーまで]オプションに貼り付けることができます。
  • スティッキーオフセット:このオプションでは、オフセット値を設定します。 オフセット値は、ビデオとページの一番上の位置の間の距離を示します。
スティッキートップ設定WordPressサイトのページスクロールでスティッキーフローティングビデオを作成する方法

:スティッキーオプション列では、親列が画面に表示されるまでしか表示されないため、オプションがスティッキーオプション列で使用できなくなるまでスティッキーです。

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

ウェブサイトのテーブルに大量のデータを追加する簡単な方法をお探しですか? ElementsKitを使用して、わずか数ステップでWordPressテーブルにCSV/Excelデータを追加する方法を確認してください。

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

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

Elementorにスティッキービデオを追加

注:クリックするとポップアップでビデオを表示するスティッキービデオボタンが必要な場合は、ElementorVideoウィジェットの代わりにElementsKitVideoウィジェットを使用できます。 上記と同じプロセスに従って、ElementsKitビデオウィジェットを使用してElementorにスティッキービデオを追加できます。

これは、 ElementsKitビデオウィジェットを使用したスティッキービデオのプレビューです

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

カスタムElementorブログ投稿テンプレートを作成する方法に関するブログをチェックアウトすることもできます

最後の言葉

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

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

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

ElementsKitProを入手する