Elementor でビデオをアップロードして管理する

企業のホームページに短い説明動画が掲載されていないと、時代遅れで味気ないものとみなされてしまいます。最近では、短い動画が掲載されていないウェブサイトを見ることの方が稀です。この記事では、Elementorで動画を管理する方法について解説するため、短い動画を掲載する必要があることを強調します。この記事では、動画ウィジェットと動画背景のオプションを拡張しました。.

セルフホストとDailymotionビデオのサポート

Elementor では、YouTube や Vimeo の動画を埋め込むことができるだけでなく、自己ホスト型の HTML5 や Dailymotion の動画も組み込むことができるようになりました。.

セルフホスト動画の利点:

  • プライバシーとコントロール:GDPRをはじめとするプライバシー関連の課題により、動画をセルフホストすることがますます重要になっています。これらの動画のコンテンツを自分でコントロールできます。.
  • 所有権:動画を自分でホストすることで、他人が作成したコンテンツに依存する必要がなくなります。自分の動画であれば、著作権の問題が100%発生しないことが保証されます。また、動画が削除されるリスクもありません。.
  • パーソナライゼーション:セルフホスティングでは、動画にロゴや外部リンクは表示されません。これにより、質の高いコンテンツを掲載でき、よりプロフェッショナルな印象を与えることができます。動画は、サイト訪問者のエンゲージメントを高めるのに非常に役立ちます。.
  • UX:動画を自社ホストすることで、訪問者に広告やおすすめ動画が表示されることがなくなります。おすすめ動画によって訪問者が気を散らされたり、競合他社のサイトへリダイレクトされたりすることもありません。.

ビデオウィジェットと背景の開始時間と終了時間

対応プラットフォームでは、ビデオウィジェットの開始と終了を設定できます。また、ビデオの背景を選択して、選択した部分のみを再生することもできます。この機能を使えば、ビデオの関連部分を簡単にループ再生できます。選択したコンテンツを訪問者にループ表示することも可能です。.

控えめなブランディング

たとえば、YouTube からビデオを埋め込んだが、そのビデオから YouTube のロゴを非表示にしたい場合は、「控えめなブランディング」を選択して、埋め込まれた YouTube ビデオからロゴを非表示にすることができます。.

Elementorにビデオ背景を追加する

このセクションでは、Elementor にビデオを追加する方法について説明します。

Elementorエディターを起動し、パネルに移動します。ここで「video」を検索し、ビデオウィジェットをドラッグします。.

  • Elementor > パネル > 「ビデオ」を検索 > 「ビデオウィジェット」をドラッグ
  • 「ビデオ > ソース」で、「YouTube」、「Dailymotion」、「Vimeo」、または自己ホストのいずれかを選択します。.
  • 次に、動画へのリンクを追加します。動画がセルフホストされている場合は、メディアライブラリを参照するか、外部URLを使用してアップロードできます。.
  • ビデオの特定の部分を再生したい場合は、開始時間と終了時間を選択できます。.
  • 画像オーバーレイを追加して、選択したサムネイルを追加することもできます。.

モバイル編集の改善

モバイルとタブレットのブレークポイントを変更する

スティッキービデオ.png

モバイルやタブレット上の動画にブレークポイント値を自由に設定したいという要望は、長い間ありました。朗報です!解決策がここにあります。.

上記のセクションに示すように、ビデオを追加した後、Elementorのタブレットおよびモバイルブレークポイントの値を変更できます。革新的なブレークポイント機能の助けを借りて、ワイドスクリーンのコンピューター、ラップトップ、タブレット、または小さなモバイル画面に合わせてサイトをカスタマイズできます。.

ブレークポイントの値を変更するには、次の場所に移動します。

Elementor ダッシュボード > 設定 > スタイルで、「タブレット ブレークポイント」と「モバイル ブレークポイント」の新しい値を入力します。

そして出来上がり!!!

ギリギリのところでそれをやりましたね。.

WP CLI統合

2.png

WordPressのコマンドラインインターフェース(WP-CLI)は、WordPress管理画面で実行できる様々な操作のためのコマンドラインインターフェースを提供するオープンソースプロジェクトです。開発者の間ではよく知られています。

つまり、WP-CLIを使えば、任意のターミナルから膨大な数のタスクを実行できます。こうすることで、管理ターミナルにログインする必要がなくなります。.

ElementorにはWP-CLIが統合されました。このWP-CLIの統合により、コマンドラインから以下のタスクを実行できるようになります。

  • flush_css – ElementorページビルダーのCSSキャッシュをフラッシュする
  • sync-library – Elementorライブラリを同期
  • replace-URLs – すべてのElementorページで古いURLを新しいURLに置き換えます
  • ライセンスの有効化または無効化 – Proライセンスを有効化または無効化します
  • import-library – テンプレートファイルをライブラリにインポートする

今後、Elementor にはさらに多くの CLI コマンドが追加される予定です。.

グーテンベルクの包含

3.png

今後数か月以内に、Gutenberg もコアに追加され、Elementor が完全なパッケージになります。.

Gutenberg のリリースにより、Elementor はすべての Elementor ユーザーにとってさらにスムーズに動作するようになります。.

バージョン 2.1 では、Gutenberg 内で使い慣れたボタン「Elementor で編集」を使用するため、Gutenberg と Elementor を簡単に切り替えることができます。.

UAEのスティッキービデオ

ページをスクロールしているときに、ビデオ コンテンツが左または右に揺れたり、まったく動かなくなったりすることを想像してみてください。.

それはきっとイライラする光景でしょう。.

のスティッキービデオの素晴らしい機能は、スクロールしても動画がページに張り付くため、ブラウザウィンドウの左側または右側に動画が浮かび上がります。スティッキービデオ機能を使用すると、訪問者がコンテンツを読むためにスクロールしても、動画とテキストコンテンツが常にフォーカスされた状態になります。

動画をスティッキーにするにはどうすればいいですか?

UAEの機能により、この機能はエレガントかつシンプルになりました。動画をスティッキーにするには、「コンテンツ(タブ)」>「スティッキービデオ」設定で「スティッキービデオ」のトグルをオンにするだけです。

スティッキービデオ機能では、動画の配置を様々なオプションから選択できます。アクションバーと設定から、スティッキービデオのあらゆる側面をコントロールできます。主な機能は以下の通りです。

  • ビデオサイズ
  • 端から端まで粘着ビデオを配置するためのさまざまな配置オプション
  • ビデオの間隔とスタイルを管理します。.
  • ビデオの背景を追加する
  • 情報バーを使用してビデオの説明を表示します
  • 迅速なサポート
  • フロントエンドのウィンドウにスティッキービデオをドラッグします
  • 閉じるボタンのカスタマイズ

ビデオサイズ

ビデオの幅をピクセル単位で指定することで、ビデオの高さと幅を調整できます。ビデオの表示は、ビデオに設定されたアスペクト比に基づいて行われます。ビデオのアスペクト比は、「コンテンツ」(タブ)>「ビデオ」から変更できます。.

例: 16:9 の比率を設定した場合、スティッキー ビデオの寸法は選択した比率に従って適用されます。.

スティッキーアライメント

ウィンドウの端に貼り付けるビデオの位置(配置)を調整できます

  • 右上
  • 左上
  • 右下
  • 左下
  • 中央右
  • 中央左

ビデオ間隔

間隔を変更することで、動画の周囲の間隔を調整できます。間隔は、選択したスティッキー配置に応じて適用されます。

たとえば、左下揃えの場合、間隔はビデオの下端と左端からのみ適用されます。.

背景のサイズとスタイル

UAE の最大の利点は、動画に好きな背景を追加できることです。背景のサイズや色も自由に選択できます。

背景のサイズとスタイル.png

情報バー

各動画には簡単な説明(メタデータのようなもの)が付いています。UAEスティッキービデオオプションを使用すると、スティッキービデオの下に情報テキストを追加できます。各スティッキービデオに説明を追加すると、現在再生中の動画の情報が表示されます。

情報バーでは、動画の色、背景色、タイポグラフィ、パディングも制御できます。テキストフィールドはHTMLコンテンツに対応しており、情報バーのコンテンツにカスタムスタイルを適用することもできます。.

情報バー.png

レスポンシブデバイスでスティッキービデオを管理する

スティッキービデオを非表示にするオプションがあります。スティッキービデオを非表示にするデバイスを選択できます。

画面上の任意の場所にドラッグ

この機能を使えば、ビデオ画面をどこにでもドラッグできます。ビデオをクリックしてドラッグするだけで、ビューポート内の任意の場所に配置できます。UAEスティッキービデオは、デフォルトで任意の場所にドラッグできる機能をサポートしています。

: モバイル デバイスと Elementor のバックエンド エディターはドラッグ機能をサポートしていません。

閉じるボタン

スティッキービデオの閉じるボタンを有効/無効にすることができます。また、閉じるボタンのスタイルを管理するためのコントロールも用意されています。.

閉じるボタン.png

結論

UAEのを使えば、お好みに合わせてスティッキービデオのスタイルや編集が可能です。plugin使えば、作業全体が非常に簡単になります。サイトのグラフィックコンテンツを充実させる、非常に洗練されたソリューションです。ウェブサイトに魅力的なスティッキービデオを作成し続け、訪問者がページをスクロールしている間も、あなたのウェブページに留まり続けられるようにしましょう。

コメントを残す

あなたのメールアドレスは公開されません。 *が付いているフィールドは必須です