アコーディオン

アコーディオン要素について

アコーディオン要素を使用すると、ページ上で折りたたみ可能なコンテンツを作成でき、よりクリーンなユーザーエクスペリエンスを提供し、コンバージョン率を高める可能性を秘めています。タブ、スライドショー要素、またはストア内のFAQを表示するためにアコーディオン要素を使用します。

詳細なステップに進む前に、以下のビデオをご覧ください。

アコーディオン要素にアクセスする方法

• ステップ1：左側のツールバーの上から2番目にある「要素」アイコンをクリックします。次に、「PageFly」タブでアコーディオン要素を選択します。

• ステップ2：目的の要素をページエディターにドラッグアンドドロップして使用を開始します。

アコーディオン要素には、ほとんどのニーズに対応するための3つのバリエーションがあり、時間を節約するためにさらに多くのバリエーションが定期的に追加されています。

バリエーションをレイアウトにドラッグして、設定方法を確認してください。

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

アコーディオン要素には、最適なコンバージョン率を得るためにコンテンツの外観を微調整するための多数のパラメーターが用意されています。

• ステップ1：左側のツールバーの上から2番目にある「要素」アイコンをクリックします。次に、「PageFly」タブでアコーディオン要素を選択します。

• ステップ2：必要なバリアントをページエディターにドラッグアンドドロップして使用を開始します。

レイアウト内の要素を選択して、そのパラメーターを確認します。

この記事では、アコーディオン要素の「全般」タブと「スタイル設定」タブのパラメーターについて説明します。

全般設定

属性、表示設定、アニメーションのパラメーターに関する詳細については、こちらをご覧ください。

スタイル設定

スタイル設定は以下を選択できます:

• Accordion Header: ヘッダーのスタイル設定をカスタマイズします。

• Accordion Content: コンテンツのスタイル設定をカスタマイズします。

詳細については、スタイル設定タブをこちらでご確認ください。

アコーディオンヘッダーをカスタマイズする方法

アコーディオン要素はアコーディオンヘッダーとして機能し、各ヘッダーはコンテンツパネルの表示/非表示を制御するボタンとして機能します。

各アコーディオンヘッダーの上にあるツールバーを使用して、アコーディオンヘッダーごとに複製/削除/スタイルコピー/スタイル貼り付けを行うことができます。

全般設定

スタイル設定

アコーディオンヘッダーのスタイル設定では、以下のパラメーターに加えて、ヘッダーの状態を選択できます。これには、標準状態、マウスオーバー状態、およびアクティブ/選択状態の3つのオプションがあります。

含まれる要素の設定

アコーディオン要素は、見出し、段落、画像などの複数のコンテンツをグループ化できます。通常セクションのように、他の要素をドラッグアンドドロップすることでアコーディオンコンテンツを編集できます。

これを踏まえて、アコーディオンコンテンツ内に他の要素をドラッグアンドロップできます。

よくある質問

1. PageFlyアコーディオンとは何ですか？

アコーディオンは、縦に積み重ねられたアイテム（ラベルまたはサムネイル）のリストを持つグラフィカルな表示です。アイテムは「展開」または「折りたたみ」でき、複雑なコンテンツを表示できます。ガイドライン、利用規約、ポリシーなどの長い段落に最適です。

2. アコーディオン要素内で何をカスタマイズできますか？

PageFlyエディターで利用可能な要素から、テキスト、画像、HTML、見出し要素などを追加できます。

追加リソース

• ユースケース - アコーディオンを追加する