アイコンボックスブロックを使用すると、Font Awesomeアイコン、見出し、説明文を1つの統一されたレイアウトで組み合わせることができます。このブロックは、機能、メリット、サービス、または視覚的なシンボルと短い説明を組み合わせることでメリットが得られるコンテンツを強調するのに理想的です。
アイコンのサイズ、色、配置、間隔、タイポグラフィを完全に制御できるアイコンボックスブロックは、機能セクションやバリュープロポジションレイアウトを構築するための最も汎用性の高いブロックの1つです。
アイコンボックスブロックをページに追加する
SeedProdページにアイコンボックスブロックを追加するには、次の手順に従ってください。
ステップ1：ブロックを追加する
デザイン > ブロックの下で、アイコンボックスブロックをページの目的のセクションにドラッグアンドドロップします。
ステップ2：コンテンツ設定を構成する
追加したら、アイコンボックスブロックをクリックして設定を開きます。コンテンツタブは、アイコン/画像とテキストの2つのセクションに分かれています。
アイコン：
- アイコン：アイコンピッカーをクリックして、利用可能な数千のFont Awesomeアイコンを閲覧して選択します。
- 色：カラーピッカーを使用してアイコンの色を設定します。
- サイズ：スライダーを使用して、アイコンのサイズを10〜150pxに設定します。
- アイコンの間隔：アイコンとテキストコンテンツの間の間隔を10〜150pxに設定します。
- 配置：セクション内のアイコンボックス全体の水平方向の配置を設定します—左、中央、または右。デスクトップ、タブレット、モバイルのデバイスごとの値に対応しています。
- 垂直方向の配置：アイコンが見出しとテキストに対して垂直方向にどのように配置されるかを設定します—上、中央、または下。
テキスト:
- ヘッダーテキスト：リッチテキストエディターを使用して、アイコンボックスの見出しを入力します。太字、斜体、下線、取り消し線、インラインリンクに対応しています。
- レベル：ヘッダーのHTML見出しタグ（H1、H2、H3、またはH4）を選択して、適切なドキュメント構造を維持します。
- テキスト：アイコンボックスの本文の説明テキストを入力します。太字、斜体、下線、取り消し線、リンクなどの基本的なリッチテキストフォーマットに対応しています。
ステップ3：デザインをカスタマイズする
高度な設定タブでは、アイコンボックスブロックのタイポグラフィ、色、間隔をカスタマイズできます。
スタイル:
- ヘッダータイポグラフィ：ヘッダーのフォントファミリー、フォントの太さ、行の高さ、文字間隔、テキストの変換を微調整します。デスクトップ、タブレット、モバイルのデバイスごとの値に対応しています。
- ヘッダーの色：カラーピッカーを使用してヘッダーのテキスト色を設定します。
- タイポグラフィ：本文のフォントファミリー、フォントの太さ、行の高さ、文字間隔、テキストの変換を微調整します。デスクトップ、タブレット、モバイルのデバイスごとの値に対応しています。
- 色：カラーピッカーを使用して本文の説明のテキスト色を設定します。
間隔：
- マージン：アイコンボックスブロックの周囲の外部の間隔（上、右、下、左）を制御します。デスクトップ、タブレット、モバイルのデバイスごとの値に対応しています。
- パディング: アイコンボックスブロックの内側の余白（上、右、下、左）を調整します。デスクトップ、タブレット、モバイルのデバイスごとの値に対応しています。
属性:
- CSS ID: SeedProdによってカスタムスタイリングまたはJavaScriptターゲティングのために自動生成された、アイコンボックスブロックの一意の識別子を表示します。
- カスタムクラス: テーマまたはカスタムCSSから特定のスタイルを適用するためにカスタムCSSクラスを追加します。
- カスタム属性: ブロックラッパー要素に任意のHTML属性を追加します。属性名を改行し、attribute-name|valueの形式で入力します。
デバイス表示:
- デスクトップで非表示: デスクトップ画面でアイコンボックスブロックを非表示にします。
- タブレットで非表示: タブレットデバイスでアイコンボックスブロックを非表示にします。
- モバイルで非表示: モバイルデバイスでアイコンボックスブロックを非表示にします。
アニメーション効果:
- 表示アニメーション: バウンス、フェードイン、ズームイン、ローテートインなど、アイコンボックスブロックがスクロールして表示されるときに再生されるアニメーション効果を選択します。
ステップ4：変更を保存
アイコンボックスブロックの設定と外観のカスタマイズが完了したら、必ず作業を保存してください。
アイコンボックスブロックをページに追加しました！アイコンボックスは、機能、メリット、サービスを、スキャン可能で視覚的に魅力的な形式で提示する最も効果的な方法の1つです。アイコンの選択、見出しレベル、タイポグラフィ設定を試して、ブランドに合った、価値を明確に伝えるアイコンボックスを作成してください。