アイコンブロックを使用すると、SeedProdの任意のページに単一のスケーラブルなアイコンを追加できます。数千ものFont Awesomeアイコンにアクセスできるため、ソーシャルメディアアイコン、方向矢印、機能インジケーター、装飾的なアクセントなど、コンテンツをサポートする視覚的なシンボルをすばやく配置できます。
各アイコンは、サイズ変更、色付け、配置、およびオプションで任意のURLにリンクできるため、ボタン、機能リスト、コールトゥアクションなどの汎用性の高いビルディングブロックになります。
ページへのアイコンブロックの追加
アイコンブロックをSeedProdページに追加するには、次の手順に従います。
ステップ1：ブロックを追加する
デザイン > ブロックの下で、アイコンブロックをページの目的のセクションにドラッグアンドドロップします。
ステップ2：コンテンツ設定を構成する
追加したら、アイコンブロックをクリックして設定を開きます。コンテンツタブで、アイコンの外観とリンクを構成します。
アイコン：
- アイコン：アイコンピッカーをクリックして、利用可能な数千ものFont Awesomeアイコンを閲覧および選択します。キーワードで検索して、必要なアイコンをすばやく見つけます。
- 配置：アイコンの水平方向の配置をセクション内で設定します - 左、中央、または右。デスクトップ、タブレット、モバイルのデバイスごとの値に対応しています。
- 色：カラーピッカーを使用してアイコンの色を設定します。
- サイズ：スライダーを使用して、アイコンのサイズを10〜150pxに設定します。
- リンク：オプションでURLを入力して、アイコンを clickable link にします。リンクフィールドの横にある設定アイコンをクリックすると、追加のリンクオプションが表示されます。
- 新規ウィンドウで開く: このオプションをチェックすると、リンクされたURLが新しいブラウザタブで開かれます。
- ノーフォロー: このオプションをチェックすると、リンクに
rel="nofollow"属性が追加され、検索エンジンにリンクエクイティを宛先に渡さないように指示します。
ステップ3：デザインをカスタマイズする
高度な設定タブでは、アイコンブロックの影のスタイルと間隔をカスタマイズできます。
スタイル:
- テキストシャドウ：アイコンに影の効果を追加します。なし、ヘアライン、小、中、大、特大、2倍特大から選択して、アイコンに奥行きと視覚的な強調を与えます。
間隔：
- マージン：アイコンブロックの周囲の外部スペースを制御します（上、右、下、左）。デスクトップ、タブレット、モバイルのデバイスごとの値に対応しています。
- パディング：アイコンブロック内の内部スペースを調整します（上、右、下、左）。デスクトップ、タブレット、モバイルのデバイスごとの値に対応しています。
属性:
- CSS ID：SeedProdによってカスタムスタイリングまたはJavaScriptターゲティングのために自動的に作成された、アイコンブロックの自動生成された一意の識別子を表示します。
- カスタムクラス: テーマまたはカスタムCSSから特定のスタイルを適用するためにカスタムCSSクラスを追加します。
- カスタム属性: ブロックラッパー要素に任意のHTML属性を追加します。属性名を改行し、attribute-name|valueの形式で入力します。
デバイス表示:
- デスクトップで非表示：デスクトップ画面でアイコンブロックを非表示にします。
- タブレットで非表示：タブレットデバイスでアイコンブロックを非表示にします。
- モバイルで非表示：モバイルデバイスでアイコンブロックを非表示にします。
アニメーション効果:
- 表示アニメーション：アイコンブロックが表示領域にスクロールインしたときに再生されるアニメーション効果を選択します。バウンス、フェードイン、ズームイン、ローテートインなど、多数用意されています。
ステップ4：変更を保存
アイコンブロックの設定と外観のカスタマイズが完了したら、作業を保存してください。
アイコンブロックをページに正常に追加しました！アイコンは、コンテンツに視覚的な明瞭さを加えるシンプルでありながら強力な方法です。アイコンは視線誘導し、意味を強化し、ページをより洗練されたものにします。さまざまなアイコン、サイズ、色を試して、デザインに最適な組み合わせを見つけてください。