プログレスバーブロックを使用すると、SeedProdのあらゆるページにアニメーション化された視覚的なプログレスバーを追加できます。資金調達目標の強調、スキルレベルの表示、キャンペーン完了の提示、またはパーセンテージベースの指標の伝達など、このブロックを使用すると、その情報をクリーンで魅力的な方法で簡単に提示できます。
各プログレスバーは完全にカスタマイズ可能です。コンテンツタブでラベルテキスト、進行状況のパーセンテージ、バーの色を設定し、4つの既製のスタイルテンプレートから選択し、高度なタブでタイポグラフィ、背景色、境界線の半径、影の効果を微調整します。このブロックには、デバイスごとのスペーシングと表示コントロールも含まれているため、プログレスバーはすべての画面サイズで素晴らしく見えます。
ページにプログレスバーブロックを追加する
SeedProdページにプログレスバーブロックを追加するには、次の手順に従います。
ステップ1：ブロックを追加する
デザイン > ブロックの下で、プログレスバーブロックをページ内の目的のセクションにドラッグアンドドロップします。
ステップ2：コンテンツ設定を構成する
追加したら、プログレスバーブロックをクリックして設定を開きます。コンテンツタブのプログレスバーセクションで、バーのラベル、パーセンテージ、塗りつぶし色を設定できます。
- バーテキスト：プログレスバーの塗りつぶされた部分の内側に表示されるラベルを入力します（例：「完了率75％」、「資金調達目標」、またはスキル名）。このテキストはバーの塗りつぶしの上に表示されるため、訪問者は進行状況が何を表しているかをすぐに確認できます。
- パーセント：スライダー（0〜100）を使用してバーの塗りつぶしレベルを設定します。この値は、バーが視覚的にどれだけ塗りつぶされているかを制御し、訪問者に表示される進行状況のパーセンテージを表します。
- 色：バーの塗りつぶし色を設定します。この色は、塗りつぶされた（進行中の）部分に適用されます。塗りつぶされていない背景色は、高度なタブで個別に設定されます。
ステップ2a: テンプレートスタイルを選択する
テンプレートタブでは、事前にデザインされたプログレスバーのスタイルから選択して、バー全体の外観をすばやく変更できます。
- スタイルテンプレート：4つの異なるテンプレートデザインから選択します。それぞれに独自のビジュアルスタイルとカラー処理が施されています。いずれかのテンプレートをクリックするとすぐに適用されます。スタイルを選択した後でも、コンテンツタブと高度なタブに戻ってさらに調整できます。
ステップ3：デザインをカスタマイズする
高度なタブでは、タイポグラフィ、色、影の効果などでプログレスバーの外観を微調整できます。
スタイル:
- タイポグラフィ：バーラベルテキストのフォントファミリー、サイズ、太さ、行の高さ、文字間隔、テキスト変換を設定します。
- 背景色：プログレスバーの塗りつぶされていない（トラック）部分の色を設定します。これは、塗りつぶされたセクションの後ろに見える背景です。デフォルトはライトグレー（
#F7F7F7）です。 - ボーダー半径: バーのトラックとフィルの両方の角の丸みを設定します（0〜25px）。この値を増やすと、ピル型または完全に丸いバーが作成されます。
- テキストシャドウ: バーラベルテキストにシャドウ効果を追加します。プリセットサイズ（なし、ヘアライン、小、中、大、特大、2倍特大）から選択して、深みを加えたり、ラベルをバーの色に対してより読みやすくしたりします。
- シャドウ: プログレスバー全体にボックスシャドウを追加して、ページ背景からの深さと分離感を与えます。
間隔：
- マージン: プログレスバーブロックの外側のスペーシングを制御します（上、右、下、左）。これにより、バーとページ上の周囲の要素との間にどれだけのスペースが表示されるかが決まります。
- パディング: プログレスバーブロックの内側のスペーシングを調整します（上、右、下、左）。これにより、バーとブロックの端の間に十分なスペースができます。
属性:
- CSS ID: プログレスバーブロックの一意の自動生成IDを表示します。このIDは、カスタムスタイリングまたはJavaScriptターゲティングのためにSeedProdによって自動的に作成されます。
- カスタムクラス: テーマまたはカスタムCSSから特定のスタイルを適用するためにカスタムCSSクラスを追加します。
- カスタム属性: ブロックラッパー要素に任意のHTML属性を追加します。属性名を改行し、形式: attribute-name|value （例: data-progress|75）で入力します。
デバイス表示:
- デスクトップで非表示: デスクトップ画面でプログレスバーブロックを非表示にします。
- タブレットで非表示: タブレットデバイスでプログレスバーブロックを非表示にします。
- モバイルで非表示: モバイルデバイスでプログレスバーブロックを非表示にします。
アニメーション効果:
- 表示アニメーション: プログレスバーブロックがビューにスクロールされたときに再生されるさまざまなアニメーション効果から選択します。オプションには、バウンス、フェードイン、ズームイン、ローテートインなどがあり、訪問者がページをスクロールするにつれて重要な指標に注意を引くのに役立ちます。
ステップ4：変更を保存
プログレスバーブロックの設定が完了し、外観のカスタマイズが終わったら、必ず作業を保存してください。
プログレスバーブロックをページに追加しました！プログレスバーは、完了、スキルレベル、資金調達目標、またはパーセンテージベースの指標を一目で伝える強力な方法です。さまざまなテンプレートスタイル、塗りつぶし色、ボーダー半径値、表示アニメーションを試して、注目を集め、ページのメッセージを強化するプログレスバーを作成してください。