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

Diviの使い方10 モジュールの使い方4 スライダーと投稿スライダーモジュール

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

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

1.スライダーモジュールを利用する

「スライダーモジュール」は画像と文書を組み合わせた複数枚のスライドを表示させたいときに利用できます。

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

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

add-new-module「新たなモジュールを追加」をクリックし、
「✔(チェックマーク)」をクリックして承認します。

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

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

  • 新規スライドを追加
  • 要素
  • リンク
(1) 新規スライドを追加する

新規スライドを追加では、複数のスライドを追加できます。各スライドには様々な設定が可能です。設定できる内容は「広告モジュール」と似ています。

① 新規スライドのコンテンツ

新規スライドのコンテンツでは下記を設定できます。

  • テキスト:
  • 画像とビデオ:
  • リンク:
  • 背景:
② 新規スライドのデザイン
  • オーバーレイ:画像オーバーレイと文字オーバーレイの色を設定
  • ナヴィゲーション:ナビゲーションの色
  • 属性:スライド画像の配置
  • 画像:
  • テキスト:
  • タイトルテキスト:
  • ボディテキスト:
  • ボタン:ボタンの色やデザインを設定
③ 新規スライドの詳細>属性の設定
  • 画像の代替テキスト:
  • ボタンRelationship:rel属性の設定

属性の設定の ボタン Relationship はスライダーモジュールのものと、スライドのものの2種類あります

 

(2) 要素の設定
  • 矢印を表示:
  • スライドショーのコントロール:
(3) リンクの設定
「✔(チェックマーク)」をクリックして承認します。

2.投稿スライダー(スライダーを投稿する)モジュール

「スライダーを投稿するモジュール」は過去の投稿のアイキャッチ画像と文書を組み合わせた複数枚のスライドを表示させたいときに利用できます。

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

add-new-module「新たなモジュールを追加」をクリックし、
「スライダーを投稿する」をクリックします。

投稿スライダー(スライダーを投稿する)モジュールが追加されます。

2)スライダーを投稿するモジュールのコンテンツ設定

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

  • コンテンツ
  • 要素
  • 注目画像(アイキャッチ画像のこと)
  • リンク
(1) コンテンツの設定

スライダーを投稿するモジュールのコンテンツのコンテンツでは、

  • 投稿数:
  • カテゴリーを追加:
  • 順序:
  • ボタンテキスト:
  • コンテンツ表示:
  • 抜粋を投稿する:
  • 自動抜粋の長さ:

を設定できます。

(2) 要素の設定
  • 矢印を表示
  • スライドショーのコントロール
  • 「もっと読み込む」ボタンを表示
  • ポストメタを表示する

を設定できます。

(3) 注目画像の設定
  • 注目画像を表示:アイキャッチ画像
  • 画像の置き換え:配置

を設定できます。

(4) リンクの設定
  • Module Link URL:モジュールリンクを設定
  • Module Link Target:モジュールリンクの表示先(同じウィンドウ、新しいタブ)を設定

3)スライダーを投稿するモジュールのデザイン設定

  • オーバーレイ:画像オーバーレイと文字オーバーレイの色を設定
  • ナヴィゲーション:ナビゲーションの色
  • 画像:
  • テキスト:
  • タイトルテキスト:
  • ボディテキスト:
  • メタ情報テキスト:
  • ボタン:ボタンの色やデザインを設定
  • サイズ変更:
  • 余白:
  • 境界:
  • Box Shadow:
  • Filters:
  • Transform:
  • アニメーション:

スライダーを投稿するモジュールのデザイン設定で特別なのは下記になります。

  • 背景のオーバーレイ:背景全体
  • テキストのオーバーレイ:文字領域
  • 矢印カスタムカラー:
  • ドットナビカスタムカラー:

4)スライダーを投稿するモジュールの詳細>属性の設定

  • ボタンRelationship:rel属性設定

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

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

divi-lesson5-3-youtube-logo01

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

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

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

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

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

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

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

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

Diviのモジュールの使い方6 アクションの呼び出しとボタン

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

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

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

Pin It on Pinterest