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

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

今回は一連の流れで、実際のサイト( Webページ )の作成を行ってみましょう。作るサイトは写真家のサイトということにしましょう。...

Diviの使い方10-2 ギャラリーモジュールの利用方法

今回は Divi の各種モジュールのうちから、ギャラリーモジュールについて図解したいと思います。 Diviの使い方10-2...

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

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

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

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

0コメント

コメントを提出

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

Pin It on Pinterest