今回は 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-lesson3-3-logo

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

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

ワードプレス Diviの使い方 7-2 イラストの形にグラデーション画像を表示する

前回は文字の形に画像を切り抜いて表示させましたが、今回はイラストの形にグラデーション画像を切り抜いてみましょう。Divi Builder...
divi-lesson6-logo

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

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

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

今回は Divi を使ったサイト( Webページ )作成練習の続きとして、サイトに写真ギャラリーと、自己紹介と、連絡先情報のページを追加で作成します。ワードプレス Divi の使い方3...
divi-lesson8-3-logo

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

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

Pin It on Pinterest