Diviテーマで全体の幅に動画の背景を追加する方法

0

Diviテーマで全幅(Fullwidth)で動画の背景を追加する方法

Diviテーマは、さまざまな方法で動画を追加するオプションを提供しています。 全体の幅に動画を背景(バックグラウンド)に追加することで二つのことを考えてみることができます。 一つは、Sliderモジュールを使用することで、他の一つは、セクションに動画を背景に追加する方法です。

Sliderモジュールを使用して動画を背景に追加する

ディビで提供されるSliderモジュールを使用して画像や動画を使用して、スライダを作成することができます。

スライダーで動画(Video)を背景に挿入する場合は、次の図のようにSlideの設定で Background Video MP4 또는 Background Video Webmに動画をアップロードします。

Diviで動画の背景を追加する

これにより、次の図のように動画がスライドの背景に追加されます。

動画を背景に追加された全体の横幅スライダー

参考までにYouTubeやVimeoの場合背景に直接追加することができず、スライドに追加が可能です。

次の動画を参照してみてください。

YouTubeの私の非メオにスライドを追加する場合は、次のように実装が可能です。 (詳細設定を使用して、さまざまな調整が可能です。)

Divi動画スライド

Sliderは、標準のセクションに追加することができるSliderとFullwidthセクションに追加することができるFullwidth Sliderがあります。

これとは別に、YouTubeやVimeoのビデオを追加することができるVideo Sliderがあります。 Video Sliderは、標準のセクションのみ提供され、YouTube、Vimeo、MP4など、様々な動画形式をサポートします。

Divi動画スライダー

Video Sliderの場合は、複数の動画を追加すると、上の図の中で、最初の画像のようにサムネイルナビゲーションを利用することができます。 または点でコントロールを選択することもできます。

Divi動画モジュール

ここで サンプルを確認することができます。

セクションに動画のバックグラウンドを挿入する方法

Sliderモジュールを使用する代わりに、セクションのページレイアウトにモジュールを追加するセクションモジュール(Section Module)の設定で動画に背景を追加することができます。

セクションページモジュールに他のモジュールを追加する
セクションページモジュールに他のモジュールを追加する

上記のようにモジュールを追加した後のセクションモジュールの設定(上の図で一番左上の三行の設定アイコン)で動画を追加します。

Diviでセクションモジュールに動画を追加する

.MP4 .WEBMフォーマットを追加することができます。 結果は、前に紹介したものと同様に実装が可能です。 この場合、ユーザーフレーズのボタンは アクションの呼び出し モジュールと テキスト モジュールを使用して手動で追加ヘジュオヤします。

詳細については、次の動画で確認することができます。

他にも、外部スライダーを使用して動画を追加することも可能です。 例えば、 革命スライダーを使用して動画のスライドを作って追加することができます。 Elegant ThemesのDiviテーマから Slider Revolutionで作成されたスライダーを全幅(Fullwidth)に追加する方法は、次の記事を参照してください。

メモ:

コメントを残す

コメントを入力してください!
名前を入力してください