今回は 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-lesson5-2-movie

ワードプレス Diviの動画利用方法 Diviレッスン5-2

今回は Divi で作成しているサイトに動画を設定する方法について図解します。Divi...

Divi モジュールの使い方7 投稿タイトルと投稿ナビゲーション

今回は Diviの各種モジュールのうちから「投稿タイトル」と「投稿ナビゲーション」のモジュールの使い方について、Divi初心者向けに図解したいと思います。Divi モジュールの使い方7...

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

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

ワードプレス Diviの使い方8 外観のカスタマイズ3 色を変える方法

今回はサイトの色を変える方法を解説します。Divi では複数の方法で色を変えることができます。Divi の使い方8 外観のカスタマイズ3 色を変える方法 4.カラースキームでサイト全体の色を変える...
divi-lesson8-1-logo

Divi レッスン8 テーマのカスタマイズ1 子テーマを作成する方法

今回から複数回にわたって、テーマのカスタマイズ、オプション設定について解説します。まず、Divi のテーマをカスタマイズする前に、子テーマ(Divi Childe...

Pin It on Pinterest