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

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

ここでは「アクションの呼び出し」と「ボタンモジュール」に固有の設定について図解します。各モジュール設定のうち、デザイン設定の共通項については下記を参照ください

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

1.ボタンモジュールを利用する

「ボタンモジュール」はクリックすることでページ遷移等を実行させたいときに使用します。ボタンを押すと何かが動くというのは一般的にイメージしやすいのでよく利用されます。

1)ボタンモジュールを追加する

ボタンモジュールを利用するには、

add-new-module「新たなモジュールを追加」をクリックし、
「ボタン」をクリックします。

標準状態では「クリック」とだけ表示されたボタンが設置されます。

2)ボタンモジュールのコンテンツ設定

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

  • テキスト
  • リンク
(1) テキスト

テキストではボタンに表示する文字を設定できます。標準ではクリックと表示されます。あるいは、

「動的コンテンツを使用する」をクリックすることで、下記を設定することもできます。
  • 投稿タイトル
  • 抜粋投稿
  • 公開日投稿
  • 投稿コメント数
  • 投稿カテゴリ
  • 投稿タグ
  • 投稿リンク
  • 投稿作者
  • 著者バイオ
  • ウェブサイト名
  • サイトタグライン
  • 現在の日付
(2) リンク

リンクではリンクを設定できます。

  • ボタンリンクURL
  • ボタンリンクターゲット

3)ボタンモジュールのデザイン設定

ボタンでは配置がデザイン設定の属性にあります。

4)ボタンモジュールの詳細>属性の設定

ボタンの関係で rel 属性を設定できます。

2.アクションの呼び出しモジュールを利用する

「アクションの呼び出しモジュール」はクリックすることでページ遷移等を実行させたいときに使用します。ボタンを利用するのが一般的ですが、アクションの呼び出しモジュールでは、同様の機能をより見栄え良く実装できます。

1)アクションの呼び出しモジュールを追加する

add-new-module「新たなモジュールを追加」をクリックし、
「アクションの呼び出し」をクリックします。

初期設定では説明文がセットされていますので変更します。

2)アクションの呼び出しモジュールのコンテンツ設定

アクションの呼び出しモジュールではコンテンツに下記を設定できます。

  • テキスト
  • リンク
  • 背景
(1) テキスト
テキストでは、タイトル、ボタンでそれぞれ文字列を設定できます。またボディにはテキストモジュールと同様に文字列も画像も設定できます。
(2) リンク

リンクではリンクを設定できます。

  • ボタンリンクURL
  • ボタンリンクターゲット
  • モジュールリンクURL
  • モジュールリンクターゲット

3)アクションの呼び出しモジュールの詳細>属性の設定

ボタンの関係で rel 属性を設定できます。

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

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

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

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

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

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

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

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

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

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

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

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

ワードプレス Diviの使い方4 背景設定と新機能 Dividers

Divi は Web ページの背景を編集過程をリアルタイムに確認しながら編集することができます。背景の設定はセクション、行、モジュールのそれぞれで設定できます。さらに、セクションの背景では新たに「...

Pin It on Pinterest