今回は Divi で作成しているサイトに動画を設定する方法について図解します。Divi では動画を複数の方法で配置することができます。動画はファイルサイズが大きいので、あまり多量に配置するのはおすすめできませんが、ところどころに使うと効果的です。また、MP4動画を使う以外により軽い方法でアニメーションを設定する方法についても図解します。

Diviサイトで動画を表示する Diviの使い方5-2

1.動画モジュールで動画を表示する

動画を表示させるには複数の方法がありますが、まずは、動画モジュールを利用する方法から説明します。

divi-lesson4-2-movie-moduleモジュールを挿入で新規モジュールから「動画」を選択します。

1)MP4 動画を設定する

MP4 の動画を表示させるには、動画の設定で 表示させたい MP4 ファイルを指定します。動画モジュールは初期設定では Divi の解説が表示されているので、

divi-lesson4-2-movie-module

 動画上のゴミ箱のアイコンをクリックし削除します。

 

「+(Add Video)」をクリックします。

メディアライブラリが表示されるので、表示させたい動画ファイルを選択して、

「動画をアップロードする」をクリックします。
その際に埋め込みまたはリンクを設定できます。
表示させたい動画に置きかわるので、それでよければ、
「✔(チェックマーク)」をクリックして承認します。

そうすると下記のように、サイトで動画を表示させることができます。

2)WebM 動画を表示させる

Divi には WebM 動画をアクセスしてきたブラウザで切り分けて表示させることができる機能があります。

divi-lesson4-2-movie動画設定で「動画.WEBM」に WebM 動画を上記手順と同様の手順で設定するだけです。

下記のように、WebM に対応したブラウザでは WebM で、そうでない場合は MP4 で動画が表示されます。

2.背景に動画を設定する

1)モジュールの背景に動画を設定する

背景に動画を設定するには、例えばテキストモジュールでは下記のようにコンテンツの、

「背景」をクリックします。
divi-lesson4-2-background-movie

背景の「再生アイコン」をクリックします。

動画モジュールと同様に MP4 と WebM を設定します。

設定したら「✔(チェックマーク)」をクリックして承認します。

下記のようにテキストの背景に動画が表示されます。

動画テスト(モジュールの背景)

■■■■■■■■■■■■■■■■■■
■■■■■■■■■■■■■■■■■■
 テキスト ABCD abcd ● ▼ ▲ ■ ★
■■■■■■■■■■■■■■■■■■
■■■■■■■■■■■■■■■■■■

ブレンドモード(デザイン>フィルター>保存モジュール:通常)

2)行の背景に動画を設定する

背景はモジュールだけでなく、行(Row)やセクションでも同様に設定し利用できます。下記は行のカラム1の背景に設定しています。

動画テスト(モジュールの背景)

■■■■■■■■■■■■■■■■■■
■■■■■■■■■■■■■■■■■■
 テキスト ABCD abcd ● ▼ ▲ ■ ★
■■■■■■■■■■■■■■■■■■
■■■■■■■■■■■■■■■■■■

ブレンドモード(デザイン>フィルター>保存モジュール:通常)

なので、行やモジュールとを組み合わせて、文字のカラーが動くようにも作成できます。

行のカラムの背景に動画を設定し、
テキストモジュールの「デザイン」>「テキスト」で、
テキストカラーを白に変更し、
テキストモジュールの背景の塗りつぶしで、Add Background Color をクリックし、
テキストモジュールの背景の塗りつぶしで、黒く塗りつぶし、
デザインの Filters で、
Blend Mode を通常から、スクリーンに変更します。

下記のように文字の部分が動画で動くようになります。

動画テスト(モジュールの背景)

■■■■■■■■■■■■■■■■■■
■■■■■■■■■■■■■■■■■■
 テキスト ABCD abcd ● ▼ ▲ ■ ★
■■■■■■■■■■■■■■■■■■
■■■■■■■■■■■■■■■■■■

ブレンドモード(デザイン>フィルター>保存モジュール:通常)

ワードプレス Divi レッスン Diviの使い方図解

写真サイトを構築する際に、役に立ちそうな設定や情報をまとめています。こちらは、ワードプレステーマ Divi に関連する記事の目次ページとしています。なるべく図を用いて簡単に説明するようにしています。参考にどうぞ。

Diviモジュールの設定方法8 トグルとアコーディオン

今回は Diviの各種モジュールのうちから「トグル」と「アコーディオン」のモジュールの使い方について、Divi初心者向けに図解したいと思います。 Diviモジュールの設定方法8...

ワードプレス Divi の使い方8 外観のカスタマイズ2 サイトの文字の大きさを変える

Divi にはサイトの文字の大きさを変える複数の方法が存在します。それぞれで使いどころを分けて利用すると便利です。Diviの使い方8 外観のカスタマイズ2...

Divi用の子テーマ作成プラグインを利用する Diviの使い方8-1-3

今回はDivi で子テーマを作成する方法の3つ目としてプラグインを利用する方法を図解します。複数のプラグインがありますが、その中から今回は「Divi...

ワードプレス Diviの使い方6 設定でデザインできる共通項目と固有項目

Divi Builder の設定のデザインタブで設定できる項目として、セクションの Dividers...

Divi サイトに目次機能を追加 Easy Table of Contents の設定

Divi で作成している Web サイトに目次機能を追加するのに、便利なプラグインとして「 Easy Table of Contents...

Pin It on Pinterest