今回は Diviの各種モジュールのうちから「トグル」と「アコーディオン」のモジュールの使い方について、Divi初心者向けに図解したいと思います。

Diviモジュールの設定方法8 トグルとアコーディオン

ここではトグルモジュールとアコーディオンモジュールに固有の設定について図解します。各モジュール設定のうち、デザイン設定の共通項については下記を参照ください

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

1.トグルモジュールを利用する

「トグル」はサイト上に訪問者が自由に開いたり閉じたりできる文書や画像のは配置場所を設置できます。

1)トグルモジュールを追加する

トグルモジュールを追加するには、

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

設置したモジュールは下記のようにクリックすることで開いたり閉じたりできます。

あなたのタイトルはここに入ります

Your content goes here. Edit or remove this text inline or in the module Content settings. You can also style every aspect of this content in the module Design settings and even apply custom CSS to this text in the module Advanced settings.

2)トグルモジュールのコンテンツ設定

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

  • テキスト
  • 状態
  • リンク
  • 背景
  • Adminラベル
(1) 状態
  • 状態:トグルを最初開いているかどうかを設定できます

3)トグルモジュールのデザイン設定

トグルモジュールには下記のデザインが設定できます。

  • アイコン
  • トグル
  • テキスト
  • タイトルテキスト
  • クローズドタイトルテキスト
  • ボディテキスト
  • サイズ変更
  • 余白
  • 境界
  • ボックスシャドウ
  • フィルター
  • 変換する
  • アニメーション
(1) アイコン
  • アイコンの色
  • カスタムアイコンサイズを使用
  • アイコンフォントサイズ
(2) トグル
  • トグル開背景色
  • トグル閉背景色

4)トグルモジュールの詳細設定

トグルモジュールの詳細設定では下記を設定できます。

  • CSSIDとクラス
  • カスタム CSS
  • 表示/非表示
  • トランジション

2.アコーディオンモジュールを利用する

「アコーディオン」はサイト上に訪問者が自由に開いたり閉じたりできる文書や画像の配置場所を設置できます。トグルとの違いは、アコーディオンでは同じ場所に複数設定することが可能で、それぞれのコンテンツが伸びたり縮んだりするアコーディオン状に配置されます。

1)アコーディオンモジュールを追加する

アコーディオンモジュールを追加するには、

add-new-module「新たなモジュールを追加」をクリックし、
「アコーディオン」をクリックします。

設置したアコーディオンモジュールは下記のように配置され、クリックすることで開いたり閉じたりします。

あなたのタイトルはここに入ります

Your content goes here. Edit or remove this text inline or in the module Content settings. You can also style every aspect of this content in the module Design settings and even apply custom CSS to this text in the module Advanced settings.

あなたのタイトルはここに入ります

Your content goes here. Edit or remove this text inline or in the module Content settings. You can also style every aspect of this content in the module Design settings and even apply custom CSS to this text in the module Advanced settings.

2)アコーディオンモジュールのコンテンツ設定

アコーディオンモジュールのコンテンツの設定では下記を設定できます。

  • 新しいアイテムの追加
  • リンク
  • 背景
  • Adminラベル

3)アコーディオンモジュールのデザイン設定

アコーディオンモジュールのデザイン設定では下記を設定できます。

  • アイコン
  • トグル
  • テキスト
  • タイトルテキスト
  • クローズドタイトルテキスト
  • ボディテキスト
  • サイズ変更
  • 余白
  • 境界
  • ボックスシャドウ
  • フィルター
  • 変換する
  • アニメーション

4)アコーディオンモジュールの詳細設定

アコーディオンモジュールの詳細設定では下記を設定できます。

  • CSSIDとクラス
  • カスタム CSS
  • 表示/非表示
  • トランジション

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

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

divi-lesson2-logo

ワードプレス Diviの使い方2 固定ページの作成チュートリアルツアー

Divi 入門講座の第2回目として、 今回は Divi...
Divi-lesson9-logo

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

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

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

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

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

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

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

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

0コメント

コメントを提出

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

Pin It on Pinterest