ボタンブロックを使用すると、SeedProdページにクリック可能なアクションボタンを追加できます。このブロックは、購入、ニュースレター登録、リソースのダウンロード、別のページへの移動など、訪問者に特定の行動を促すのに役立ちます。
ボタンはコンバージョンとユーザーエンゲージメントに不可欠な要素です。カスタマイズ可能なテキスト、リンク、スタイル、アイコン、視覚効果を活用すれば、訪問者の目を引き、行動を促すボタンを作成できます。ボタンブロックは、内部リンク（サイト内の他のページへ）、外部リンク（他のウェブサイトへ）、および同一ページ内の特定セクションへスムーズにスクロールするアンカーリンクの両方をサポートします。
ページへのボタンブロックの追加
SeedProdページにボタンブロックを追加するには、次の手順に従ってください：
ステップ1: ブロックを追加する
デザイン > ブロックで、ボタンブロックをページの任意のセクションにドラッグ＆ドロップします。
ボタンブロックはブロックパネルに表示され、ページ上の任意のセクションや列にドラッグできます。
ステップ2: コンテンツ設定の構成
追加後、ボタンブロックをクリックして設定を開きます。「コンテンツ」タブでは、ボタンのテキスト、リンク先、外観をカスタマイズできます。
ボタン:
- ボタンテキスト：ボタンに表示されるメインテキストを入力してください（例：「今すぐ始める」「今すぐ購入」「詳細を見る」）。行動を促す簡潔な表現にしましょう。
- ボタンサブテキスト：メインのボタンテキストの下に表示される、オプションの小さなテキストを追加します。価格、期間限定オファー、追加の背景情報などの補足情報を追加するのに便利です。
- リンク:ボタンがクリックされた際に訪問者を移動させるURLを入力してください。完全なURL（https://example.com）、相対パス（/about）、または同一ページ内ナビゲーション用のアンカーリンク（#section-name）を指定できます。
- 整列:ボタンをコンテナ内で水平方向に配置します（左、中央、または右）。
- サイズ：ボタンサイズは、小、中、大、特大、または2倍特大からお選びください。大きいボタンはより目立ち、主要な行動喚起に効果的です。
アイコン:
- テキストアイコン前:ボタンテキストの左側に表示されるアイコンを追加します。「アイコンを選択」をクリックして、数百種類ある利用可能なアイコンから選択してください。
- テキストアイコン後：ボタンテキストの右側に表示されるアイコンを追加します。方向を示す矢印や外部リンクの表示など、方向指示に一般的に使用されます。
コンテンツタブでは、ボタンのテキスト、リンク、配置、サイズをカスタマイズしたり、装飾用アイコンを追加したりできます。
ステップ2a: テンプレートスタイルを選択する
テンプレートタブでは、あらかじめデザインされたボタンスタイルから選択することで、ボタンの全体的な外観を素早く変更できます。
- ピルボタン、フラットボタン、ブルーボタン、ライトグリーンボタン、グリーンボタン、オレンジボタン、レッドボタン、イエローボタン、ホワイトボタン、グレーボタン、ブラックボタン：11種類の異なるテンプレートデザインから選択可能。それぞれが独自の色とスタイルを備えています。各スタイルをプレビューして、ページデザインやブランドカラーに最適なものを見つけてください。
テンプレートタブでは、ボタンの外観を素早くカスタマイズできる11種類の事前設計済みスタイルを提供します。
ステップ3：デザインのカスタマイズ
[詳細設定]タブでは、ボタンブロックの外観をカスタマイズできます：
スタイル:
- タイポグラフィ：ボタンのテキストのフォントプロパティ（フォントファミリー、サイズ、太さ、スタイルなど）を制御します
- ボタンスタイル：ボタンの視覚的表現を選択します。オプションには、フラット（モダンなフラットデザイン）、2D（微妙な奥行き）、ビンテージ（クラシックな見た目）、ゴースト（透明で枠付き）、リンク（プレーンテキストリンク）、カスタム（完全な手動制御）が含まれます。
- 背景色：ボタンにブランドに合わせた背景色を設定するか、コントラストを生む色を選択してください
- 垂直方向のパディング：ボタンの内部の上下方向の間隔を制御し、その高さに影響を与えます
- 水平方向のパディング：ボタンの内部における左右の間隔を制御し、その幅に影響を与えます
- 角丸半径:ボタンの角の丸みを調整します。値が大きいほどボタンはより丸くなり、0にすると角が鋭くなります
- ボタン枠線の太さ：ボタンの枠線の太さを設定します
- ボタン枠の色:ボタンの枠の色を選択してください
- テキストシャドウ：ボタンのテキストに影効果を追加し、立体感と可読性を向上させます。「なし」「ヘアライン」「小」「中」「大」「特大」「2倍特大」「カスタム」から選択可能
- シャドウ：ボタン全体にシャドウ効果を適用し、立体感を演出します。「なし」「ヘアライン」「小」「中」「大」「特大」「2倍特大」「カスタム」から選択可能
スペース:
- マージン:ボタンブロックの周囲の余白（上、右、下、左）を制御します。これにより、ボタンと周囲の要素の間に表示されるスペースが決まります。
- パディング：ボタンブロックコンテナ内の内側の間隔（上、右、下、左）を調整します。これによりボタン自体に余裕を持たせることができます
属性：
- CSS ID:ボタンブロックの自動生成された一意の識別子を表示します。このIDは、カスタムスタイリングやJavaScriptのターゲット指定のためにSeedProdによって自動的に作成されます。
- カスタムクラス:テーマまたはカスタムCSSから特定のスタイルを適用するためのカスタムCSSクラスを追加します
- カスタム属性:ボタンラッパー要素に任意のHTML属性を追加します。各属性は改行で区切り、以下の形式で入力してください: 属性名|値 (例: data-action|signup)
デバイスの可視性:
- デスクトップで非表示:デスクトップ画面でボタンブロックを非表示にする
- タブレットで非表示:タブレット端末ではボタンブロックを非表示にする
- モバイルで非表示:モバイル端末ではボタンブロックを非表示にする
アニメーション効果：
- エントランスアニメーション：ボタンが画面にスクロールインする際に再生される様々なアニメーション効果から選択できます。バウンス、フェードイン、ズームイン、回転インなど多数のオプションが用意されています。これにより、アクションを促す要素に即座に注目を集めます
[詳細設定]タブでは、タイポグラフィ、色、パディング、境界線、影、アニメーション効果など、幅広いスタイル設定オプションを提供します。
ステップ4: 変更を保存する
ボタンブロックの設定と外観のカスタマイズが完了したら、必ず作業内容を保存してください。
ページにボタンブロックを追加できました！この必須ブロックは、訪問者をコンバージョン目標へと導く明確な行動喚起を作成するのに役立ちます。さまざまなボタンスタイル、色、サイズ、アニメーションを試して、目立ち、訪問者に取ってほしい行動を促すボタンを作成しましょう。