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