カウントダウンブロックを使用すると、カスタムコードやプラグインを必要とせずに、ページにアニメーション化されたカウントダウンタイマーを追加できます。製品ローンチ、フラッシュセール、またはライブイベントへの期待感を醸成する場合でも、カウントダウンブロックは、訪問者の行動を促す説得力のある緊急感を生み出します。
特定の瞬間に終了する固定日カウントダウンか、訪問者ごとにリセットされる常緑タイマーのいずれかを選択できます。これにより、訪問者がページにアクセスしたときに、パーソナライズされた常にアクティブな緊急体験を提供できます。
カウントダウンブロックをページに追加する
SeedProdページにカウントダウンブロックを追加するには、次の手順に従ってください。
ステップ1：ブロックを追加する
デザイン > ブロックの下で、カウントダウンブロックをページの目的のセクションにドラッグアンドドロップします。
ブロックパネルからカウントダウンブロックをドラッグし、目的のページセクションにドロップします。
ステップ2：コンテンツ設定を構成する
追加したら、カウントダウンブロックをクリックして設定を開きます。コンテンツタブで、タイマータイプを選択し、その動作とラベルを構成します。
タイマータイプ：
- 日時カウントダウン：特定の С日時にカウントダウンします。製品ローンチ、フラッシュセール、または特定のエンド日を持つイベントに最適です。すべての訪問者は、アクセスした時間に関係なく同じタイマーを確認できます。
- 訪問者タイマー（常緑）：設定された期間からカウントダウンし、新しい訪問者ごとにリセットされます。Cookieを使用してページのリフレッシュ間で一貫性を維持し、すべての訪問者がオファーが個人的に時間制限されていると感じられるようにします。
日時カウントダウンを使用すると、タイマーの特定のエンドС日と時刻を指定できます。
訪問者タイマー（常緑）は、Cookieを使用して新しい訪問者ごとにカウントダウン期間をリセットします。
タイマー設定：
- 終了日時：（日時のみ）カウントダウンが期限切れになる正確なС日と時刻を設定します。
- タイムゾーン：（日時のみ）ターゲットオーディエンスにとって正確性を確保するために、終了時刻のタイムゾーンを選択します。
- 時間 / 分 / 秒：（常緑のみ）最初にアクセスしたときに各訪問者が表示するカウントダウン期間を設定します。
- サイズ：カウントダウンタイマーの全体的なサイズを設定します - Tiny、Small、Medium、またはLarge。
期限切れ時のアクション：
- メッセージを表示：タイマーがゼロに達したら、「オファー終了」や感謝のメッセージなど、カスタムメッセージを表示します。
- リダイレクト：カウントダウンが終了したら、訪問者をチェックアウトページや販売後のランディングページなどの別のページに自動的に送信します。
- 再開：（常緑のみ）タイマーがゼロに達したら、最初からタイマーを再開します。
タイマーがゼロになったときに何が起こるかを選択します - カスタムメッセージを表示する、訪問者を別のURLにリダイレクトする、またはタイマーを再開します。
ラベルをカスタマイズ：
- 日ラベル：日数ユニットの下に表示されるテキストをカスタマイズします（デフォルト：「Days」）。
- 時間ラベル: 時間ユニットの下に表示されるテキストをカスタマイズします（デフォルト：「時間」）
- 分ラベル: 分ユニットの下に表示されるテキストをカスタマイズします（デフォルト：「分」）
- 秒ラベル: 秒ユニットの下に表示されるテキストをカスタマイズします（デフォルト：「秒」）
ステップ3：テンプレートスタイルを選択
テンプレートタブでは、個々の設定を調整せずにタイマー全体の見た目を素早く変更するために、あらかじめデザインされたカウントダウンのスタイルを選択できます。
- 事前定義テンプレート: 様々な既製のデザインから選択します。それぞれにユニークな配色、ボックススタイル、レイアウトがあります。いずれかのテンプレートをクリックすると、カウントダウンブロックに即座に適用されます。
テンプレートタブから、あらかじめデザインされたカウントダウンのスタイルを参照して適用します。
ステップ4：デザインのカスタマイズ
詳細設定タブでは、カウントダウンブロックの視覚的な外観とレイアウトを完全にカスタマイズできます。
スタイル:
- タイポグラフィ: 編集をクリックして、完全なタイポグラフィパネルを開きます。カウントダウンテキストのフォントファミリー、サイズ（デスクトップ、タブレット、モバイル）、フォントの太さ、イタリック、下線、大文字/小文字、行の高さ、文字間隔を制御します。
- ハイライトカラー: 個々の時間ユニットボックスの背景色を設定します。
- ラベルカラー: 各数字の下にある「日」「時間」「分」「秒」ラベルの色を設定します。
- 間隔: スライダーを使用して、各時間ユニットボックス間のギャップを制御します。
- 角丸: スライダーを使用して、時間ユニットボックスの角を丸めます。
- 影: カウントダウンボックスに影を追加します。プリセットサイズ（なし、ヘアライン、小、中、大、特大、超特大、カスタム）から選択します。
間隔：
- マージン: カウントダウンブロックの外側のスペース（上、右、下、左）を制御します。これにより、タイマーと周囲の要素の間のスペースが決まります。
- パディング: カウントダウンブロックの内側のスペース（上、右、下、左）を調整します。これにより、タイマーとブロックの端の間に余白ができます。
属性:
- CSS ID: カウントダウンブロックの自動生成された一意の識別子を表示します。このIDは、カスタムスタイリングまたはJavaScriptのターゲット指定のためにSeedProdによって自動的に作成されます。
- カスタムクラス: テーマまたはカスタムCSSから特定のスタイルを適用するために、カスタムCSSクラスを追加します。
- カスタム属性: カウントダウンラッパー要素に任意のHTML属性を追加します。各属性を新しい行に「属性名|値」の形式で入力します（例: data-timer|true）。
デバイス表示:
- デスクトップで非表示: デスクトップ画面でカウントダウンブロックを非表示にします。
- タブレットで非表示: タブレットデバイスでカウントダウンブロックを非表示にします。
- モバイルで非表示: モバイルデバイスでカウントダウンブロックを非表示にします。
アニメーション効果:
- 表示アニメーション: カウントダウンブロックが表示領域に入ったときに再生される様々なアニメーション効果から選択します。オプションには、バウンス、フェードイン、ズームイン、ローテートインなどがあります。表示アニメーションは、訪問者がタイマーに気づいた瞬間に、即座に注意を引きます。
カウントダウンブロックのスタイル、間隔、属性、デバイスの可視性、および表示アニメーションを制御するには、[高度な設定]タブを使用します。
ステップ5：変更を保存
カウントダウンブロックの設定と外観のカスタマイズが完了したら、必ず作業内容を保存してください。
ページにカウントダウンブロックを追加しました！カウントダウンタイマーは、期間限定オファー、製品発売、または今後のイベントを宣伝する場合でも、コンバージョンを促進するための最も効果的なツールの1つです。訪問者を惹きつけ、行動を促すような体験を作成するために、タイマーの種類、テンプレート、および有効期限切れのアクションを試してください。