CMS:プログレスバーを追加・設定する

読了時間:6分
サイトにプログレスバーを追加して、目標達成に向けた進捗状況を視覚的に表示します。プログレス値(進捗状況の値)は、Velo コードまたは CMS コレクションのフィールドを使用して表すことができます。目標値には、変化しない静的値を設定することも、Velo を使用した動的値を設定することも、コレクションのフィールドで選択した動的値を設定することもできます。
プログレスバーの使用例:
  • ToDo リストで「完了」としてマークしたタスク数を表示する
  • オンボーディングで完了したステップの割合を表示する
  • ファンディングで集まった現在の金額を表示する
  • 現在までの請願書の署名者数を表示する
ヒント:
Velo を使用すると、CMS に接続せずにプログレスバーの値を更新することができます。方法については、「プログレスバー要素を操作する」をご覧ください。(英語)
始める前に:
サイトに CMS を追加して、プログレス値の数値フィールドを含むコレクションを作成します。

プログレスバーを追加・設定する方法:

Wix エディタ
Editor X
Wix Studio エディタ
  1. エディタにアクセスします。
  2. エディタで Velo が有効になっていることを確認してください。
    1. 上部の「開発モード」をクリックします。
    2. 開発モードを有効にする」をクリックします。
  3. エディタ左側で「パーツを追加 をクリックします。
  4. インタラクティブ」をクリックします。
  5. インジケーター」下で「プログレスバー」をクリックします。
  6. プログレスバーをクリックしてページにドラッグします。
  7. プログレスバーの「CMS に接続」アイコン  をクリックします。
  8. データセットを選択」ドロップダウンをクリックし、コレクションに接続する既存のデータセットを選択します。または、「新しいデータセットを作成」をクリックし、接続するコレクションを選択し、データセットに名前を付けて「作成」をクリックすることもできます。
  9. プログレスの Value を接続」ドロップダウンをクリックし、目標達成に向けた進捗状況を表すために使用するフィールドを選択します。
  10. 目標値を、変化しない静的値または動的値として設定します:
    • 静的目標値を設定する:プログレスバー要素の「Target Value を設定」をクリックし、「Target Value」フィールドに値を入力します。
    • 動的目標値を設定する:「Target Value を接続」ドロップダウンをクリックし、目標値を表すために使用するフィールドを選択します。
  11. レイアウト」アイコン  をクリックして、進捗状況の方向を選択します。
  12. デザイン」アイコン  をクリックしてプリセットデザインを選択するか、既存のデザインをさらにカスタマイズします。
  13. (オプション)「アニメーション」アイコン  をクリックして、要素にアニメーションを追加します。

お役に立ちましたか?

|