アラートブロックを使用すると、SeedProdのページに目を引くカラフルなアラートボックスを追加できます。このブロックは、重要なメッセージ、お知らせ、警告、または成功通知を訪問者に視覚的に目立つ方法で伝えるのに役立ちます。
アラートボックスは、特別なプロモーション、重要なアップデート、システム通知、または期間限定のお知らせなど、すぐに注意が必要な重要な情報を強調するのに最適です。カスタマイズ可能なスタイルと色により、メッセージを目立たせ、訪問者の注意を引くことができます。
ページにアラートブロックを追加する
次の手順に従って、SeedProdページにアラートブロックを追加します。
ステップ1：ブロックを追加する
デザイン > ブロックの下にあるアラートブロックを、ページの目的のセクションにドラッグアンドドロップします。
アラートブロックは、デザイン > 詳細設定の下にあり、ページの任意のセクションにドラッグできます。
ステップ2：コンテンツ設定を構成する
追加したら、アラートブロックをクリックして設定を開きます。コンテンツタブで、アラートメッセージと外観をカスタマイズできます。
アラート:
- タイプ: 事前定義されたアラートスタイルから選択します – 情報（青、一般的な情報用）、成功（緑、肯定的な確認用）、警告（黄色/オレンジ、注意喚起用）、または危険（赤、重要なアラート用）。各タイプには、適切なメッセージのトーンを伝えるための適切な色が付属しています。
- 閉じるボタン:訪問者がアラートを閉じることを許可する閉じるボタンを表示または非表示にするには、切り替えます。ユーザーが非表示にしたい可能性のある重要でないメッセージの場合は、これを有効にします。
- タイトル:アラートメッセージのメインヘッダーを入力します。簡潔で注意を引くものにする必要があります。
- 説明:アラートメッセージを説明する詳細なテキストを追加します。これにより、タイトルを超えたコンテキストと追加情報が提供されます。
- タイトルの配置:アラートタイトルの水平方向の配置（左、中央、右）を設定します。
- 説明の配置:アラートの説明テキストの水平方向の配置を設定します。
- タイトルのフォントサイズ:タイトルテキストのサイズを調整して、目立ち、読みやすいことを確認します。
- 説明のフォントサイズ:最適な読みやすさのために、説明テキストのサイズを制御します。
- タイトルタグ:タイトルのHTML見出しタグ（h1、h2、h3、h4、h5、またはh6）を選択します。これはSEOと視覚的な階層の両方に影響します。
- アイコンを表示:アラートメッセージの横にアイコンを表示または非表示にするには、切り替えます。アイコンは、アラートのタイプに関する迅速な視覚的な手がかりを提供します。
- アイコン:アラートに表示するカスタムアイコンを選択します。メッセージの目的に合ったアイコンを選択してください。
コンテンツタブでは、アラートのタイプ、メッセージの内容、配置、アイコンの設定を構成できます。
ステップ2a: テンプレートスタイルを選択する
テンプレートタブでは、事前にデザインされたアラートスタイルから選択して、アラートボックス全体の外観をすばやく変更できます。
- ユニークなレイアウトとビジュアルトリートメントを備えた、4つの異なるテンプレートデザインから選択してください。各スタイルをプレビューして、ページデザインに最も合うものを見つけてください。
テンプレートタブには、アラートの外観をすばやくカスタマイズするための4つの事前デザインされたスタイルが用意されています。
ステップ3：デザインをカスタマイズする
高度な設定タブでは、アラートブロックのビジュアルの外観をカスタマイズできます。
スタイル:
- タイポグラフィ: フォントファミリー、ウェイト、スタイルを含む、アラートタイトルのフォントプロパティを制御します。
- テキストタイポグラフィ: アラートの説明テキストのフォントプロパティをカスタマイズします。
- 色: アラートタイトルのテキストの色を設定します。
- 説明の色: アラートの説明テキストの色を選択します。
- 非表示の色: アラートを閉じる非表示ボタン（Xアイコン）の色を設定します。
- タイトルの背景: アラートのタイトル領域にのみ背景色を追加します。
- 背景色: アラートボックス全体の背景色を設定します。
- テキストシャドウ: アラートテキストにシャドウ効果を追加して、奥行きと読みやすさを向上させます。なし、ヘアライン、小、中、大、特大、2倍特大、カスタムから選択します。
間隔：
- マージン: アラートブロックの周囲の外側のスペース（上、右、下、左）を制御します。これにより、アラートと周囲の要素の間にどれだけのスペースが表示されるかが決まります。
- パディング: アラートボックス内の内側のスペース（上、右、下、左）を調整します。これにより、コンテンツとアラートの境界線の間に十分なスペースが生まれます。
属性:
- CSS ID: アラートブロックの自動生成された一意の識別子を表示します。このIDは、カスタムスタイリングまたはJavaScriptターゲティングのためにSeedProdによって自動的に作成されます。
- カスタムクラス: テーマまたはカスタムCSSから特定のスタイルを適用するために、カスタムCSSクラスを追加します。
- カスタム属性: アラートラッパー要素に任意のHTML属性を追加します。各属性を新しい行に、属性名|値の形式で入力します（例: role|alert）。
デバイス表示:
- デスクトップで非表示: デスクトップ画面でアラートブロックを非表示にします。
- タブレットで非表示: タブレットデバイスでアラートブロックを非表示にします。
- モバイルで非表示: モバイルデバイスでアラートブロックを非表示にします。
アニメーション効果:
- 表示アニメーション: アラートが表示領域に入るときに再生されるさまざまなアニメーション効果から選択します。オプションには、バウンス、フェードイン、ズームイン、ローテートインなどがあります。これにより、重要なメッセージにすぐに注意を引くことができます。
高度な設定タブでは、タイポグラフィ、色、スペーシング、アニメーション効果を含む広範なスタイリングオプションが提供されます。
ステップ4：変更を保存
アラートブロックの設定と外観のカスタマイズが完了したら、作業を保存してください。
ページにアラートブロックを正常に追加しました！この強力なブロックは、重要な情報を効果的に配信し、目を引く色分けされたメッセージで訪問者の注意を引くのに役立ちます。さまざまなアラートタイプ、テンプレートスタイル、カスタムカラーを試して、ブランドに合った、メッセージを明確に伝えるアラートを作成してください。