コーディングなしでElementorを使用してビデオプレイリストを簡単に作成する方法[2022]

Webサイトにビデオを追加するのは非常に簡単ですが、 Elementorを使用してビデオプレイリストを作成することは、コンテンツ作成者にとって課題でした。 Elementor PROの最新アップデートにより、Webサイト用の美しいビデオプレイリストを簡単に作成し、ビデオを紹介することができます。

Elementor Pro 3.3には、Webクリエーターがマルチメディアコンテンツをサイトに追加する方法を変更する、まったく新しい「ビデオプレイリスト」ウィジェットが付属しています。 これで、アニメーション化されたインタラクティブなビデオプレイリストを美しく紹介することで、サイトの訪問者を引き付け、ページに長くとどまらせることができます。また、コード行に触れることなく、好きなようにカスタマイズすることもできます。

コーディングせずにElementorでビデオプレイリストを美しく表示する

コンテンツ作成者にとって、WordPressのビデオプレイリストのようなインタラクティブなビジュアルコンテンツを追加すると、サイト訪問者とのエンゲージメントを高めるのに役立ちます。 これは、Youtubeのコンテンツを作成する人だけでなく、ゲーマー、フィットネストレーナー、ダンスティーチャー、さらには中小企業のオーナーなど、WordPressWebサイトを持っている人にも当てはまります。

Elementor Pro 3.3を使用すると、これまでにない方法でビデオコンテンツを表示できるようになります。 再生リストに追加する特定の動画を決定できるだけでなく、表示される順序を制御したり、再生アイコン、タブ、サムネイル、オーバーレイなどをカスタマイズしたりすることもできます。

一番良いところ？ Elementorでビデオプレイリストを作成するのにかかる時間はわずか5分です。

それだけではありません。再生が必要になるまで動画が読み込まれないように、動画の遅延読み込みを有効にすることもできます。 これにより、Webページの読み込みが速くなり、サイト訪問者のエクスペリエンスが向上します。

Elementorのこの新しいウィジェットがどのように機能するか、そしてそれを使用してWordPressで美しいビデオプレイリストを作成する方法を見てみましょう。

WordPressWebサイトに複数のビデオをシームレスに追加する

WordPress Webサイトに一度に1つのビデオをアップロードすることは、特にWebサイトの訪問者と共有したい重要なビデオコンテンツがたくさんある場合は、少し面倒なことがあります。 Webページが重くなるだけでなく、ビデオを個別にアップロードすると、多くのページスペースと時間がかかります。

ただし、ビデオプレイリストを使用すると、すべてのビデオコンテンツが適切に整理されたセクションを作成し、サイトの訪問者が再生するビデオを選択できるようにすることができます。 これにより、Webページに他のコンテンツを追加したり、スクロールコンテンツを減らしたり、サイト訪問者がサイトに長く滞在するように促したりするためのスペースが増えます。

ビデオプレイリストをパーソナライズして、好きなようにスタイルを設定

Elementor Editorでプレイリストのスタイルを自由に設定して、独自のタッチを加え、ブランドを宣伝することができます。 あなたがしなければならないのは、プレイリストを目立たせるために「スタイル」タブの設定を微調整することです。 カスタムサムネイルを追加したり、動画の下にタブを追加して説明や動画のトランスクリプトを表示したりすることができます。

魅力的なチュートリアルプレイリストでオンライン学習を簡単にする

Webサイトの訪問者とチュートリアルを共有している場合、 Elementorのこのビデオプレイリストウィジェットは、エンゲージメント率を急上昇させるのに役立ちます。 製品チュートリアル、オンライン教育ビデオ、ダンスチュートリアル、フィットネスチュートリアルを共有している場合でも、サイトの訪問者は、よりインタラクティブなビジュアルコンテンツを使用して、製品やビジネスについて学ぶことができます。

WordPressでElementorを使用してビデオプレイリストを作成する方法

これで、動画の再生リストによってWebサイトを目立たせ、サイト訪問者のエンゲージメントを高める方法についてすべて理解できました。 チュートリアルに飛び込んで、Elementorを使用してWordPressでビデオプレイリストを作成する方法を見てみましょう。

注： Elementor Webサイトビルダーを初めて使用する場合は、Elementorの使用方法に関する完全な初心者向けガイドで役立つヒントやコツを確認できます。

ステップ1：WebサイトにElementorをインストールしてアクティブ化する

まず、WordPressWebサイトにElementorをインストールしてアクティブ化する必要があります。 これが完了したら、 Elementor Proもインストールしてください。このウィジェットは、プレミアムバージョンのWebサイトビルダー専用です。

ElementorとElementorProの両方をインストールしてアクティブ化したら、WordPressダッシュボードに移動して新しいページを作成します。 以下に示すように、青い「Elementorで編集」ボタンをクリックします。 これにより、ElementorEditorでページが開きます。

ステップ2：ビデオプレイリストウィジェットをドラッグアンドドロップする

Elementor Editorの読み込みが完了したら、左側のパネルから[ ELEMENTS ]タブに移動し、[VideoPlaylist]ウィジェットを検索します。 これで、ウィジェットをページの任意のセクションにドラッグアンドドロップするだけです。 以下に示すように、プレイリストはデフォルトで表示されます。

ステップ3：ビデオプレイリストを追加してコンテンツを構成する

これで、ビデオを1つずつ追加して、WordPressで独自のカスタムプレイリストを作成できます。 [コンテンツ]タブで、 [プレイリスト]オプションをクリックします。 ここでは、URLを貼り付けるか、独自のファイルをアップロードするだけで、動画を追加できます。

Youtubeの動画を共有している場合は、[タイプ]オプションをクリックして、ソースを[Youtube]に設定します。 他のソースからのビデオを共有している場合は、 「セルフホスト」に切り替えてから、ビデオをアップロードするか、 「外部URLの共有」オプションをオンにしてビデオリンクを共有します。

Youtubeビデオの場合、[ビデオデータの取得]ボタンをクリックするだけで、ビデオのサムネイルやタイトルなど、すべてのビデオ設定と情報をYoutubeから即座にインポートできます。

説明やトランスクリプトなど、動画に関する追加情報を共有する場合は、動画の[コンテンツタブ]を表示することもできます。

さらに動画を追加するには、[再生リスト]の[ +アイテムを追加]ボタンをクリックして、上記の手順を繰り返します。 Elementorでプレイリストを作成するために必要な数のビデオを自由に追加してください。

プレイリストのコンテンツを構成し、Webサイトの訪問者にとってさらに良いものにするために役立つオプションは他にもたくさんあります。 たとえば、 [タブ]オプションから、ビデオタブの名前を追加したり、折りたたみ可能にしたり、高さを調整したりできます。

カスタム画像オーバーレイと再生アイコンを追加したり、読み込み時の自動再生、動画の数と長さの表示、遅延読み込みを有効にしてWebページを高速化するなどの追加オプションをオンにすることもできます。

ステップ4：Elementorでビデオプレイリストのスタイルを設定してカスタマイズする

これはチュートリアルの最良の部分です。 ここでは、プレイリストをカスタマイズして独自のタッチを追加する方法を紹介します。 レイアウトの高さの変更から、トップバー、タブなどの色のカスタマイズまで、考えられるあらゆる方法でプレイリストのスタイルを設定できます。 設定をいじって、数回クリックするだけでWebサイトの美しいプレイリストをデザインできます。

Elementorのグローバルな色とフォント機能を使用して、プレイリストのデザインがサイトの色やブランドの色と一致していることを確認することもできます。 必要に応じて、カスタムCSSコードスニペットを追加してさらにカスタマイズを追加することもできます。

ステップ5：WordPressでビデオプレイリストを公開して共有する

再生リストへの動画の追加と外観のカスタマイズが完了したので、あとはそれを世界と共有するだけです。 行った変更を保存し、ページをプレビューして、ライブWebサイトでプレイリストがどのように表示されるかを確認します。 見た目が気に入ったら、 [公開]ボタンを押して、WordPressWebサイトでプレイリストを共有します。

以下のこのチュートリアルで作成したものを確認してください。

あなたのウェブサイトをビデオプレイリストとインタラクティブにする

ご覧のとおり、WordPressで驚くほど美しくデザインされたビデオプレイリストを作成するのは簡単ではありません。 Elementorでインタラクティブなビデオ再生リストを作成して、今すぐ試してエンゲージメント率が上がるのを見てください。

このチュートリアルを楽しんだ？ 以下のコメントであなたの考えを私たちと共有してください。 あなたからの御一報をお待ちしています。 より楽しいチュートリアル、ニュース、アップデートについては、ブログを購読するか、自分のようなElementorユーザーのフレンドリーなコミュニティに参加してください。