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

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

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

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

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

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

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

ワードプレステーマ Diviの使い方1 Diviとは?~インストールまで

WordPress(ワードプレス)のテーマは数多くあるのですが、世界で一番多くインストールされ利用されているテーマはこの「 Divi 」になるのではないかと思います。入門講座として、...

Diviの使い方10 モジュールの利用1 画像 と 広告

今回は Divi の各種モジュールのうちから、画像モジュールと広告モジュールについて図解したいと思います。画像モジュールと広告モジュール Diviの使い方10-1...

Pin It on Pinterest