アコーディオン要素

アコーディオン要素とは何ですか?

アコーディオン 訪問者がクリックして展開したり折りたたんだりできる、垂直に積み重ねられたヘッダーのリストです。これにより、顧客は表示される情報を制御でき、ページが整理され、ナビゲートしやすくなります。

アコーディオンデザインの一般的な使用例は FAQページでは複数の質問がリストされており、視聴者は質問をクリックするだけで求めている答えが表示されます。

GemPagesにアコーディオン要素を追加する方法

ページにアコーディオン要素を追加するには、次の手順に従ってください。

ステップ 1： の中に GemPagesダッシュボード、ページを選択してエディターに入ります。

完了すると、アコーディオン要素の構成が左側のサイドバーに表示されます。

アコーディオン要素の設定

GemPagesのアコーディオン要素は完全にカスタマイズ可能です。設定は 2つのメインタブ: 設定 の三脚と 高機能.

1. 設定タブ

アイテム管理

• アイテムを追加するには: クリックするだけで さらに追加 オプションを選択します。 
• アイテムを複製するには: 目的のスライドの上にマウスを移動し、複製アイコンをクリックします。 
• アイテムを削除するには: 特定のスライドにマウスを移動し、ゴミ箱アイコンをクリックします。

アイテムスタイル

• 背景: アコーディオン内の各項目 (項目の折りたたまれた状態と展開された状態を含む) の背景色。

• 境界線: 境界線の色、太さ、線をカスタマイズします。

• コーナー: 丸いエッジのコーナー半径を調整します。

• 影: 深みを出すために影の効果を追加します。

アイテムヘッダー

• タイトルアイコン: アコーディオンヘッダーのアイコンの設定。

• タイトル: ヘッダータイトルのテキスト スタイル。

• 展開アイコン: アコーディオン内の各項目の展開アイコンの設定。

• 高さ: アコーディオンヘッダーの高さ。デフォルトでは高さは「自動」に設定されており、ヘッダー内のコンテンツに合わせて高さが自動的に調整されます。 

• 背景: ヘッダーの背景色を変更します。

• パディング: アコーディオン ヘッダーのパディング。ヘッダーの端からその中のコンテンツまでの内側のスペースを作成します。

• 境界線: ヘッダーの境界線をカスタマイズします。

• 配置: ヘッダー コンテンツ (ヘッダー アイコンとタイトルを含む) の配置。

アイテムの内容

• パディング: 各アコーディオン項目のコンテンツ領域のパディング

アイテム間隔

• ギャップ: 各アコーディオン項目間の間隔。デフォルトの間隔 = 16px

効果

• ホバー項目: ホバーしたときの Accordion ヘッダー スタイルの設定。

• 展開ヘッダー: 展開時のアコーディオンヘッダースタイルの設定。展開設定をクリックすると、展開状態の設定を含むポップオーバーが開きます。

サイズ

• 幅: アコーディオン要素内の実際のコンテンツのサイズ。

形状

これらのシェイプ設定は、アコーディオンのラッパー用です。

• ボーダー
• コーナー
• Shadow

表示条件

• 拡張モード: 顧客が同時に開ける商品の数を選択します。
• シングルモードでは、1 つのアイテムのみを開くことができます。
• 複数オプションを使用すると、複数のアイテムを同時に開くことができます。
• 自動展開: アコーディオン項目の 1 つをデフォルトで最初に開くように設定します。

このオプションが「はい」の場合、デフォルトの展開項目を選択する設定が表示されます。 デフォルトで展開されている項目を選択します。デフォルトで複数の項目が開いている場合は、カンマで区切ってください。

整列

• 要素の幅が 100% の場合、配置は無効になります。
• そうでない場合、デフォルトの配置オプションは中央揃えになります。

2. 詳細設定タブ

より高度なカスタマイズについては、 詳細設定タブ の指示に従います。 この記事.