今回は 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のモジュールの使い方6 アクションの呼び出しとボタン

今回は Diviの各種モジュールのうちから「アクションの呼び出し」と「ボタンモジュール」の使い方について、Divi初心者向けに図解したいと思います。Diviの使い方10 モジュールの使い方6...
Divi-lesson9-logo

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

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

Diviの使い方10-2 ギャラリーモジュールの利用方法

今回は Divi の各種モジュールのうちから、ギャラリーモジュールについて図解したいと思います。 Diviの使い方10-2 ギャラリーモジュールの利用方法...
divi-lesson3-1-logo

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

今回は一連の流れで、実際のサイト( Webページ )の作成を行ってみましょう。作るサイトは写真家のサイトということにしましょう。 Divi...

Pin It on Pinterest