ボタンブロックを使用すると、SeedProdページにクリック可能なコールトゥアクションボタンを追加できます。このブロックは、購入、ニュースレターへの登録、リソースのダウンロード、または別のページへの移動など、訪問者に特定の行動を促すのに役立ちます。
ボタンは、コンバージョンとユーザーエンゲージメントに不可欠な要素です。カスタマイズ可能なテキスト、リンク、スタイル、アイコン、ビジュアルエフェクトを使用して、目立つボタンを作成し、訪問者の行動を促すことができます。ボタンブロックは、内部リンク（サイト内の他のページへのリンク）と外部リンク（他のウェブサイトへのリンク）、および同じページ内の特定のセクションへのスムーズなスクロールのためのアンカーリンクの両方をサポートしています。
ページにボタンブロックを追加する
SeedProdページにボタンブロックを追加するには、次の手順に従ってください。
ステップ1：ブロックを追加する
デザイン > ブロックの下で、ボタンブロックを目的のセクションにドラッグアンドドロップします。
ボタンブロックはブロックパネルに表示され、ページ内の任意のセクションまたは列にドラッグできます。
ステップ2：コンテンツ設定を構成する
追加したら、ボタンブロックをクリックして設定を開きます。コンテンツタブで、ボタンのテキスト、リンク先、外観をカスタマイズできます。
ボタン:
- ボタンテキスト: ボタンに表示されるメインテキストを入力します（例：「始める」、「今すぐ購入」、「詳細はこちら」）。行動指向で簡潔に保ちます。
- ボタンサブテキスト: メインのボタンテキストの下に表示されるオプションの小さなテキストを追加します。これは、価格、期間限定オファー、追加のコンテキストなどの補足情報を追加するのに役立ちます。
- リンク: ボタンをクリックしたときに訪問者を誘導するURLを入力します。これは、完全なURL（https://example.com）、相対パス（/about）、または同じページナビゲーション用のアンカーリンク（#section-name）にすることができます。
- 配置: コンテナ内のボタンの水平方向の配置（左、中央、右）を設定します。
- サイズ: ボタンのサイズを小、中、大、特大、超特大から選択します。大きいボタンはより目立ち、プライマリコールトゥアクションに適しています。
アイコン:
- テキスト前アイコン: ボタンテキストの左側に表示されるアイコンを追加します。アイコンを選択をクリックして、何百もの利用可能なアイコンから選択して参照します。
- テキスト後アイコン: ボタンテキストの右側に表示されるアイコンを追加します。これは、矢印や外部リンクインジケーターなどの方向指示によく使用されます。
コンテンツタブでは、ボタンのテキスト、リンク、配置、サイズをカスタマイズし、装飾アイコンを追加できます。
ステップ2a: テンプレートスタイルを選択する
テンプレートタブで、事前にデザインされたボタンのスタイルから選択して、ボタン全体の外観をすばやく変更できます。
- Pill Button, Flat Button, Blue Button, Light Green Button, Green Button, Orange Button, Red Button, Yellow Button, White Button, Grey Button, Black Button: 11種類のテンプレートデザインから選択できます。それぞれにユニークな色とスタイルがあります。各スタイルをプレビューして、ページのデザインやブランドカラーに最も合うものを見つけてください。
テンプレートタブには、ボタンの外観をすばやくカスタマイズするための11種類のデザイン済みスタイルが用意されています。
ステップ3：デザインをカスタマイズする
高度な設定タブでは、ボタンブロックの視覚的な外観をカスタマイズできます。
スタイル:
- タイポグラフィ: フォントファミリー、サイズ、太さ、スタイルを含む、ボタンテキストのフォントプロパティを制御します。
- ボタンのスタイル: ボタンの視覚的な処理を選択します。オプションには、フラット（モダンなフラットデザイン）、2D（わずかな奥行き）、ビンテージ（クラシックな外観）、ゴースト（境界線付きの透明）、リンク（プレーンテキストリンク）、カスタム（完全な手動制御）があります。
- 背景色: ブランドに合わせて、またはコントラストを作成するために、ボタンの背景色を設定します。
- 垂直パディング: ボタンの内側の上下の間隔を制御し、高さを調整します。
- 水平パディング: ボタンの内側の左右の間隔を制御し、幅を調整します。
- 角丸: ボタンの角の丸みを調整します。値が大きいほど角が丸くなり、ゼロにするとシャープな角になります。
- ボタンの境界線の太さ: ボタンの境界線の太さを設定します。
- ボタンの境界線の色: ボタンの境界線の色を選択します。
- テキストシャドウ: ボタンテキストに影の効果を追加して、奥行きと読みやすさを向上させます。なし、ヘアライン、小、中、大、特大、2倍特大、カスタムから選択します。
- シャドウ: ボタン全体に影の効果を適用して、奥行きを出します。なし、ヘアライン、小、中、大、特大、2倍特大、カスタムから選択します。
間隔：
- マージン: ボタンブロックの外側の間隔（上、右、下、左）を制御します。これにより、ボタンと周囲の要素の間のスペースが決まります。
- パディング: ボタンブロックコンテナ内の内側の間隔（上、右、下、左）を調整します。これにより、ボタン自体の周りに余白ができます。
属性:
- CSS ID: ボタンブロックの自動生成された一意の識別子を表示します。このIDは、カスタムスタイルまたはJavaScriptターゲティングのためにSeedProdによって自動的に作成されます。
- カスタムクラス: テーマまたはカスタムCSSから特定のスタイルを適用するために、カスタムCSSクラスを追加します。
- カスタム属性: ボタンラッパー要素に任意のHTML属性を追加します。各属性を新しい行に、属性名|値の形式で入力します（例: data-action|signup）。
デバイス表示:
- デスクトップで非表示: デスクトップ画面でボタンブロックを非表示にします。
- タブレットで非表示: タブレットデバイスでボタンブロックを非表示にします。
- モバイルで非表示: モバイルデバイスでボタンブロックを非表示にします。
アニメーション効果:
- エントランスアニメーション： ボタンが表示されるときに再生されるさまざまなアニメーション効果から選択します。バウンス、フェードイン、ズームイン、ローテートインなどが含まれます。これにより、コールトゥアクションにすぐに注目が集まります。
高度なタブには、タイポグラフィ、色、パディング、境界線、影、アニメーション効果を含む、豊富なスタイリングオプションが用意されています。
ステップ4：変更を保存
ボタンブロックの設定と外観のカスタマイズが完了したら、作業を保存してください。
ページにボタンブロックを追加しました！この重要なブロックは、コンバージョン目標に向けて訪問者を誘導する明確なコールトゥアクションを作成するのに役立ちます。さまざまなボタンのスタイル、色、サイズ、アニメーションを試して、目立ち、訪問者に実行してほしいアクションを促進するボタンを作成してください。