リストブロックを使用すると、アイコンベースのリストを作成して、ページ上の機能、メリット、または任意の項目セットを強調表示できます。各リスト項目は、カスタマイズ可能なアイコンとリッチテキストを組み合わせており、コンテンツの表示方法を完全に制御できます。
製品の機能を提示する場合でも、要点を要約する場合でも、比較リストを作成する場合でも、リストブロックを使用すると、コーディングなしでブランドに合った視覚的に魅力的なリストを簡単に作成できます。
ページにリストブロックを追加する
リストブロックをSeedProdページに追加するには、次の手順に従います。
ステップ1：ブロックを追加する
デザイン > ブロックの下で、リストブロックをページの目的のセクションにドラッグアンドドロップします。
ステップ2：コンテンツ設定を構成する
追加したら、リストブロックをクリックして設定を開きます。コンテンツタブで、リスト項目を作成し、全体の外観を構成します。
リスト:
- 項目:各リスト項目には、アイコンとテキストフィールドがあります。項目をクリックして設定を展開し、テキスト（太字、イタリック、リンクなどをリッチテキストエディターを使用して編集）を編集し、アイコンピッカーを使用してアイコンを選択します。項目をドラッグして並べ替えたり、項目を複製したり、削除したりできます。
- 新規項目を追加:このボタンをクリックして、リストに別の項目を追加します。
- アイコンの色:リスト内のすべてのアイコンに適用される色を設定します。
- フォントサイズ:すべてのリスト項目のテキストサイズを10pxから72pxまで制御します。
- 間隔:リスト項目の間の間隔を調整します。デスクトップ、タブレット、モバイルのデバイスごとの値をサポートします。
- 配置:リストの水平方向の配置を設定します — 左、中央、または右。デバイスごとの配置をサポートします。
ステップ3：デザインをカスタマイズする
詳細タブでは、リストブロックの視覚的な外観をカスタマイズできます。
スタイル:
- リストレイアウト:縦（項目が積み重ねられる）または横（項目が行に並べて表示される）を選択します。
- タイポグラフィ:リストテキストのフォントファミリー、太さ、サイズ、行の高さ、文字間隔、テキスト変換をカスタマイズします。
- テキストの色:リスト項目のテキストの色を設定します。
- テキストシャドウ:リストテキストに影を追加します。なし、ヘアライン、小、中、大、特大、特大2倍から選択します。
間隔：
- 余白:リストブロックの周囲の外側の間隔を制御します（上、右、下、左）。
- パディング:リストブロックの内側の間隔を調整します（上、右、下、左）。デスクトップ、タブレット、モバイルのデバイスごとの値をサポートします。
属性:
- CSS ID:SeedProdがカスタムスタイリングまたはJavaScriptターゲティングのために自動生成したリストブロックの自動生成された一意の識別子を表示します。
- カスタムクラス: テーマまたはカスタムCSSから特定のスタイルを適用するためにカスタムCSSクラスを追加します。
- カスタム属性:リストラッパー要素に任意のHTML属性を追加します。属性名を改行し、次の形式で入力します: attribute-name|value。
デバイス表示:
- デスクトップで非表示: デスクトップ画面でリストブロックを非表示にします。
- タブレットで非表示: タブレットデバイスでリストブロックを非表示にします。
- モバイルで非表示: モバイルデバイスでリストブロックを非表示にします。
アニメーション効果:
- 表示アニメーション: バウンス、フェードイン、ズームイン、ローテートインなど、リストブロックが表示領域にスクロールインしたときに再生されるアニメーション効果を選択します。
ステップ4：変更を保存
リストブロックの設定と外観のカスタマイズが完了したら、作業内容を保存してください。
リストブロックをページに追加しました！リストブロックは、機能、メリット、または一連のポイントを視覚的に魅力的な形式で提示するための多用途な方法です。さまざまなアイコン、レイアウト、色、タイポグラフィを試して、ページに完全に一致するリストを作成してください。