アコーディオン
Last updated
Was this helpful?
Last updated
Was this helpful?
を使用すると、ページ上で折りたたみ可能なコンテンツを作成でき、よりクリーンなユーザーエクスペリエンスを提供し、コンバージョン率を高める可能性を秘めています。、要素、またはストア内のFAQを表示するためにアコーディオン要素を使用します。
詳細なステップに進む前に、以下のビデオをご覧ください。
ステップ1:左側のツールバーの上から2番目にある「要素」アイコンをクリックします。次に、「PageFly」タブでアコーディオン要素を選択します。
ステップ2:目的の要素をページエディターにドラッグアンドドロップして使用を開始します。
アコーディオン要素には、ほとんどのニーズに対応するための3つのバリエーションがあり、時間を節約するためにさらに多くのバリエーションが定期的に追加されています。
バリエーションをレイアウトにドラッグして、設定方法を確認してください。
アコーディオン要素には、最適なコンバージョン率を得るためにコンテンツの外観を微調整するための多数のパラメーターが用意されています。
ステップ1:左側のツールバーの上から2番目にある「要素」アイコンをクリックします。次に、「PageFly」タブでアコーディオン要素を選択します。
ステップ2:必要なバリアントをページエディターにドラッグアンドドロップして使用を開始します。
レイアウト内の要素を選択して、そのパラメーターを確認します。
この記事では、アコーディオン要素の「全般」タブと「スタイル設定」タブのパラメーターについて説明します。
Accordion icon: 好みに合わせた3つのアイコンスタイル
Icon Size: アイコンのサイズを設定
Icon Position: 左または右を選択します。
Allow Open Multiple: この機能はライブページでのみ機能します
Default Active Item: クリックせずにデフォルトで開くアコーディオンアイテムです。(この機能はライブページでのみ機能します)
Enable Scroll Top: ユーザーがアコーディオンヘッダーをクリックしたときに、ページがアコーディオンヘッダーの最上部に自動的にスクロールします。(この機能はライブページでのみ機能します)
スタイル設定は以下を選択できます:
Accordion Header: ヘッダーのスタイル設定をカスタマイズします。
Accordion Content: コンテンツのスタイル設定をカスタマイズします。
アコーディオン要素はアコーディオンヘッダーとして機能し、各ヘッダーはコンテンツパネルの表示/非表示を制御するボタンとして機能します。
各アコーディオンヘッダーの上にあるツールバーを使用して、アコーディオンヘッダーごとに複製/削除/スタイルコピー/スタイル貼り付けを行うことができます。
Header text: アコーディオンヘッダー内のテキストのコンテンツとスタイルを設定します
Anchor Text: ここにアンカーテキストを追加します。ライブビューでは、ページURLの後にアンカーテキストと共に「#」アイコンを追加することで、このアコーディオンヘッダー要素に正確にスクロールダウンできます。(この機能はライブページでのみ機能します)
Show Icon: アコーディオンヘッダーにアイコンを追加します
アコーディオンヘッダーのスタイル設定では、以下のパラメーターに加えて、ヘッダーの状態を選択できます。これには、標準状態、マウスオーバー状態、およびアクティブ/選択状態の3つのオプションがあります。
アコーディオン要素は、見出し、段落、画像などの複数のコンテンツをグループ化できます。通常セクションのように、他の要素をドラッグアンドドロップすることでアコーディオンコンテンツを編集できます。
これを踏まえて、アコーディオンコンテンツ内に他の要素をドラッグアンドロップできます。
1. PageFlyアコーディオンとは何ですか?
アコーディオンは、縦に積み重ねられたアイテム(ラベルまたはサムネイル)のリストを持つグラフィカルな表示です。アイテムは「展開」または「折りたたみ」でき、複雑なコンテンツを表示できます。ガイドライン、利用規約、ポリシーなどの長い段落に最適です。
2. アコーディオン要素内で何をカスタマイズできますか?
PageFlyエディターで利用可能な要素から、テキスト、画像、HTML、見出し要素などを追加できます。
許可されている場合、ライブビューでは複数のアコーディオンアイテムが表示されます:
属性、表示設定、アニメーションのパラメーターに関する詳細については、をご覧ください。
詳細については、をこちらでご確認ください。