アニメーション見出しブロックを使用すると、SeedProdページに魅力的なアニメーション見出しを表示できます。このブロックは、訪問者の注意を引き、重要なメッセージを強調するために、変化、ハイライト、または回転する目を引くテキストを作成するのに役立ちます。
アニメーション見出しは、ヒーローセクション、ランディングページ、プロモーションバナー、または複数の価値提案や重要なメッセージをダイナミックで魅力的な方法で表示したい場合に最適です。さまざまなアニメーションスタイルと視覚効果を使用して、際立ち、訪問者を惹きつける見出しを作成できます。
ページにアニメーション見出しブロックを追加する
次の手順に従って、SeedProdページにアニメーション見出しブロックを追加します。
ステップ1：ブロックを追加する
デザイン > ブロックの下で、アニメーション見出しブロックをページの目的のセクションにドラッグアンドドロップします。
アニメーション見出しブロックはブロックパネルに表示され、ページの任意のセクションにドラッグできます。
ステップ2：コンテンツ設定を構成する
追加したら、アニメーション見出しブロックをクリックして設定を開きます。コンテンツタブで、アニメーションスタイル、テキストコンテンツ、タイミングをカスタマイズできます。
見出し：
- スタイル：2つのアニメーションスタイルから選択します – ハイライト（視覚的な形状や下線でテキストを強調します）またはローテーション（複数のテキストバリエーションを循環します）
- 形状：ハイライトスタイルを使用する場合、テキストの周りに表示される形状を選択します。オプションには、円、カーリー、下線、二重線、二重下線、下線ジグザグ、斜線、取り消し線、Xがあります。それぞれが独自の視覚的強調を作成します。
- 見出し前のテキスト：アニメーション部分の前に表示される静的なテキストを入力します。このテキストは一定に保たれ、アニメーション部分を設定します（例：「私たちは」）
- 見出し後：アニメーションまたはハイライトされるテキストを入力します。ローテーションスタイルでは、カンマで区切られた複数の単語またはフレーズを追加できます。これらが循環します（例：「専門家、プロフェッショナル、イノベーター」）
- 無限ループ：トグルして、連続アニメーションを有効または無効にします。有効にすると、アニメーションは無期限に繰り返されます。無効にすると、一度再生されて停止します。
- 期間（ミリ秒）：各単語またはアニメーション効果が表示される時間をミリ秒単位で設定します。値が大きいほどアニメーションは遅くなり、値が小さいほど速くなります（例：2000ミリ秒 = 2秒）
- 遅延（ミリ秒）：アニメーションサイクルの間の一時停止をミリ秒単位で制御します。これにより、テキストの変更間に余裕が生まれます。
- 配置：見出し全体の水平方向の配置（左、中央、右）を設定します。
- フォントサイズ：見出しテキストのサイズを調整して、目立ち、読みやすいことを確認します。
- レベル：アニメーション見出しのHTML見出しタグ（h1、h2、h3、またはh4）を選択します。これは、ページ上のSEOと視覚的な階層の両方に影響します。
コンテンツタブでは、アニメーションスタイルを選択したり、テキストをカスタマイズしたり、アニメーションのタイミングと動作を制御したりするオプションが提供されます。
ステップ3：デザインをカスタマイズする
高度な設定タブでは、アニメーション見出しブロックの視覚的な外観をカスタマイズできます。
スタイル:
- タイポグラフィ:見出しのフォントファミリー、太さ、スタイル、その他のテキストプロパティを制御します
- ストロークカラー:テキストの周りまたは背後に表示されるアニメーションシェイプまたはハイライトの色を設定します（ハイライトスタイルを使用する場合）
- カラー:見出しのテキストカラーを選択して、コントラストと読みやすさを確保します
- テキストシャドウ:見出しテキストにシャドウ効果を追加して、奥行きと強調を加えます。なし、ヘアライン、小、中、大、特大、2倍特大、カスタムから選択します
間隔：
- マージン:見出しブロックの外側の間隔を制御します（上、右、下、左）。これにより、見出しと周囲の要素の間にどれだけのスペースが表示されるかが決まります
- パディング:見出しブロックの内側の間隔を調整します（上、右、下、左）。これにより、テキストとブロックの端の間に十分なスペースができます
属性:
- CSS ID:見出しブロックの自動生成された一意の識別子を表示します。このIDは、カスタムスタイリングまたはJavaScriptターゲティングのためにSeedProdによって自動的に作成されます
- カスタムクラス: テーマまたはカスタムCSSから特定のスタイルを適用するために、カスタムCSSクラスを追加します。
- カスタム属性:見出しラッパー要素に任意のHTML属性を追加します。各属性を新しい行に、属性名|値の形式で入力します（例: data-animation|headline）
デバイス表示:
- デスクトップで非表示:デスクトップ画面で見出しブロックを非表示にします
- タブレットで非表示:タブレットデバイスで見出しブロックを非表示にします
- モバイルで非表示:モバイルデバイスで見出しブロックを非表示にします
アニメーション効果:
- 表示アニメーション:見出しが表示領域に入るときに再生されるさまざまなアニメーション効果から選択します。オプションには、バウンス、フェードイン、ズームイン、ローテートインなどがあります。これにより、ブロックの表示アニメーションが最初に再生され、次にヘッドライン自体のテキストアニメーションが続くレイヤー化されたアニメーション効果が作成されます
高度な設定タブでは、タイポグラフィ、色、テキストシャドウ、間隔、表示アニメーションを含むスタイリングオプションが提供されます。
ステップ4：変更を保存
アニメーション見出しブロックの設定と外観のカスタマイズが完了したら、作業を保存してください。
ページにアニメーション見出しブロックを正常に追加しました！このダイナミックブロックは、複数のメッセージを表示したり、魅力的なアニメーションで重要なポイントを強調したりする、注目を集める見出しを作成するのに役立ちます。さまざまなアニメーションスタイル、シェイプ、タイミングを試して、視聴者を魅了し、メッセージを効果的に伝える見出しを作成してください。