今回は Divi の各種モジュールのうちから、動画モジュールと動画スライダーモジュールについて図解したいと思います。

動画と動画スライダーモジュール Diviの使い方10-3

ここでは動画モジュールと動画スライダーモジュールに固有の設定について図解します。各モジュール設定のうち、デザイン設定の共通項については下記を参照ください

https://websvr.org/matome/wordpress-divi-design/

1.動画モジュールを利用する

「動画モジュール」は動画を表示させたいときに利用すると良いでしょう。

1)動画モジュールを追加する

add-new-module「新たなモジュールを追加」をクリックし、
「動画」をクリックします。

動画モジュールが追加されます。動画モジュールには、初期設定では、Divi の説明動画がセットされています。

2)動画モジュールのコンテンツ設定

動画モジュールではコンテンツに下記を設定できます。

  • 動画
  • オーバーレイ
(1) 動画を設定する
「Add Video」をクリックしメディアライブラリを表示し動画を選択します。

メディアライブラリが表示されるので、動画をアップロードし、あるいは、既存の動画を選択し、

「動画をアップロードする」をクリックします。
動画モジュールに動画が設置されます。

もし動画を変えたいのであれば、動画をクリックすると再度メディアライブラリが表示されます。また、表示を削除する場合は、動画上のゴミ箱のアイコンをクリックします。

(2) オーバーレイを設定する
動画を覆う画像オーバーレイを配置できます。

3)動画モジュールのデザイン設定

動画モジュールではデザインに下記を設定できます。

  • プレイアイコン
再生アイコンカラー:再生アイコンの色を選択できます

2.動画スライダーモジュールを利用する

「動画スライダーモジュール」は複数の動画を表示させたいときに利用します。

1)動画スライダーモジュールを追加する

動画スライダーモジュールを利用するには、

「動画スライダー」をクリックします。

動画スライダーモジュールが追加されます。動画スライダーモジュールには、初期設定では、Divi の説明動画が新しい動画の名称でセットされています。

2)動画スライダーモジュールのコンテンツ設定

動画スライダーモジュールではコンテンツに下記を設定できます。

  • 動画の追加
  • 要素
  • オーバーレイ
(1) 動画の追加

「新規動画を追加」をクリックすることでメディアライブラリが表示され、複数の動画を設置できます。

追加された各動画には上記の動画モジュールと同様な設定が可能です。
(2) 要素

要素では下記の設定ができます。

  • 矢印を表示:動画を移動する矢印
  • スライダーコントロール:ドットナビあるいはサムネイルトラック
(3) オーバーレイ
オーバーレイ:各動画に設定したオーバーレイを機能させるかどうかを設定できます

3)動画スライダーモジュールのデザイン設定

動画スライダーモジュールのデザイン設定では下記を設定できます。

  • コントロールの配色:スライダーコントロールの色を設定
  • スライダーコントロールの色:
  • 再生アイコンカラー:
  • サムネイルマウスオーバーカラー:

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

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

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

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

DiviでYouTubeを表示する Diviの使い方5の3

Divi は YouTube 動画も簡単にサイトに設置できるように作られています。今回はその設置方法を図解したいと思います。Diviの使い方5の3 Divi で YouTube を表示する...
divi-lesson3-3-logo

ワードプレス Diviの使い方3 レイアウトを使ったWebページ作成3

今回は Divi のレイアウトライブラリを使ったサイト( Webページ...
divi-lesson2-logo

ワードプレス Diviの使い方2 固定ページの作成チュートリアルツアー

Divi 入門講座の第2回目として、 今回は Divi...
Divi-lesson9-logo

Divi レッスン9 テーマのオプションのおすすめ設定

Divi でサイトを作成したら、ぜひオプション設定も変更しましょう。Divi...

Pin It on Pinterest