カウンターブロックを使用すると、開始値から最終的な数値までカウントアップするアニメーション数値カウンターを表示できます。このブロックは、訪問者の注意を引く方法で、印象的な統計、マイルストーン、成果を強調するのに最適です。
事業年数、対応顧客数、完了プロジェクト数、またはその他の指標を強調したい場合でも、カウンターブロックは、訪問者がブロックをビューにスクロールしたときに再生されるスムーズなカウントアニメーションで数値を生き生きとさせます。
ページにカウンターブロックを追加する
次の手順に従って、SeedProdページにカウンターブロックを追加します。
ステップ1：ブロックを追加する
デザイン > ブロックの下で、カウンターブロックをページの目的のセクションにドラッグアンドドロップします。
ブロックパネルからカウンターブロックをドラッグし、目的のページセクションにドロップします。
ステップ2：コンテンツ設定を構成する
追加したら、カウンターブロックをクリックして設定を開きます。コンテンツタブで、カウンターの値、アニメーションの動作、ラベルを構成できます。
カウンターの値：
- 開始番号：アニメーションがトリガーされたときにカウンターがカウントを開始する数値を設定します。通常は0に設定しますが、任意の値を開始して部分的なカウント効果を作成できます。
- 終了番号：カウンターがカウントアップする最終的な数値を設定します。これは、表示したい主な統計または成果です。
- 番号プレフィックス：通貨記号（例：$）やプラス記号などの、数値の前に表示されるテキストまたは記号を追加します。
- 番号サフィックス：パーセント記号（%）、プラス記号（+）、または「K」のような単位など、数値の後に表示されるテキストまたは記号を追加します。
アニメーション設定：
- アニメーション期間：カウントアップアニメーションが完了するまでの時間（ミリ秒単位）を制御します。期間が長いほど、遅く、よりドラマチックなカウントアップ効果が得られます。
- 桁区切り：読みやすくするために、数値に桁区切りを表示するかどうかを選択します（例：1000ではなく1,000）。
- 区切り文字：地域の書式設定の好みに合わせて、コンマまたはピリオドなどの桁区切りとして使用される文字を選択します。
ラベル：
- タイトル：統計が何を表すかを説明する、数値の下に表示される説明ラベルを追加します（例：「ハッピーカスタマー」、「完了プロジェクト」、「経験年数」）。
コンテンツタブで、カウンターの値、アニメーション期間、桁区切り、タイトルラベルを構成します。
ステップ3：デザインをカスタマイズする
高度な設定タブで、カウンターブロックの視覚的な外観をカスタマイズできます。
数値のタイポグラフィ：
- 数値の色：ブランドまたはページデザインに合わせて、カウンター数値の色を設定します。
- フォント：カウンター数値のフォントファミリーを選択します。
- フォントサイズ：デスクトップ、タブレット、モバイルデバイスでの数値のサイズを設定します。
- フォントの太さ: 数値を太字または細いウェイトで表示するかどうかを制御します
- 行の高さ: 数値テキストの垂直方向の間隔を調整します
- 文字間隔: 数値の文字間の水平方向の間隔を微調整します
- 数値の配置: カウンターの数値を左揃え、中央揃え、または右揃えにします
- 数値の影: 数値にテキストシャドウを追加します。色、水平/垂直オフセット、ぼかし、拡張を制御できます
タイポグラフィ:
- タイトルの色: カウンターの下にある説明ラベルの色を設定します
- フォント: タイトルラベルのフォントファミリーを選択します
- フォントサイズ: デスクトップ、タブレット、モバイルのブレークポイント全体でタイトルのサイズを設定します
- フォントの太さ: タイトルテキストの太さを制御します
- 行の高さ: タイトルテキストの間隔を調整します
- 文字間隔: タイトルの文字間隔を微調整します
- タイトルの配置: タイトルラベルを左揃え、中央揃え、または右揃えにします
- タイトルの影: タイトルにテキストシャドウを追加します。色、オフセット、ぼかし、拡張を制御できます
間隔：
- マージン: カウンターブロックの外側の間隔（上、右、下、左）を制御します。これにより、カウンターと周囲の要素の間のスペースが決まります
- パディング: カウンターブロックの内側の間隔（上、右、下、左）を調整します。これにより、カウンターコンテンツとブロックエッジの間に余白が生まれます
属性:
- CSS ID: カウンターブロックの一意の自動生成IDを表示します。このIDは、カスタムスタイリングまたはJavaScriptターゲティングのためにSeedProdによって自動的に作成されます
- カスタムクラス: テーマまたはカスタムCSSから特定のスタイルを適用するために、カスタムCSSクラスを追加します。
- カスタム属性: カウンターラッパー要素にHTML属性を追加します。属性名を新しい行に入力し、次の形式を使用します: attribute-name|value (例: data-counter|true)
デバイス表示:
- デスクトップで非表示: デスクトップ画面でカウンターブロックを非表示にします
- タブレットで非表示: タブレットデバイスでカウンターブロックを非表示にします
- モバイルで非表示: モバイルデバイスでカウンターブロックを非表示にします
アニメーション効果:
- 表示アニメーション: カウンターブロックが表示領域に入ったときに再生されるさまざまなアニメーション効果から選択します。オプションには、バウンス、フェードイン、ズームイン、ローテートインなどがあります。表示アニメーションとカウントアップ効果を組み合わせることで、訪問者にとって非常に魅力的な体験が生まれます
高度なタブを使用して、カウンターブロックのタイポグラフィ、色、影、間隔、および表示を制御します。
ステップ4：変更を保存
カウンターブロックの設定と外観のカスタマイズが完了したら、必ず作業を保存してください。
ページにカウンターブロックを追加しました！アニメーションカウンターは、最も印象的な数値を前面に表示することで、信頼と信憑性を構築するための実績のある方法です。さまざまな数値形式、プレフィックス、サフィックス、タイポグラフィスタイルを試して、ブランドを完全に反映し、統計を無視できないものにするカウンターを作成してください。