区切り線ブロックを使用すると、ページ上の異なるコンテンツセクションの間に視覚的に魅力的な線区切りを挿入できます。これらの区切り線は、可読性を向上させ、より構造化され、魅力的なレイアウトを作成するのに役立ちます。
単なる線だけでなく、区切り線ブロックを使用すると、区切り線の中央にテキストラベルまたはアイコンを配置でき、スタイルでコンテンツを分割するための汎用性の高いデザイン要素になります。
区切り線ブロックをページに追加する
SeedProdページに区切り線ブロックを追加するには、次の手順に従ってください。
ステップ1：ブロックを追加する
デザイン > ブロックの下で、区切り線ブロックを目的のページセクションにドラッグアンドドロップします。
ステップ2：コンテンツ設定を構成する
追加したら、区切り線ブロックをクリックして設定を開きます。コンテンツタブで、区切り線の外観とスタイルを構成します。
区切り線:
- スタイル: 区切り線の線スタイルを選択します — 実線、点線、破線、または二重線。
- 色: 区切り線の色を設定します。
- 幅: 区切り線の幅をコンテナのパーセンテージで制御します。1%から100%まで。
- 高さ: 区切り線の太さをピクセル単位で設定します。1pxから10pxまで。
- 配置: 区切り線を左、中央、右に配置します。デスクトップ、タブレット、モバイルのデバイスごとの配置をサポートします。
- 要素を追加: 区切り線の中心に要素をオプションで配置します。なし（線のみ）、テキスト（テキストラベル）、またはアイコン（Font Awesomeアイコン）から選択します。
- テキストが選択されている場合: ラベルテキストを入力し、HTMLタグ（H1～H6またはspan）を選択して、セマンティックマークアップを制御します。
- アイコンが選択されている場合: アイコンピッカーを使用してアイコンを選択し、アイコンサイズを設定します。
ステップ3：デザインをカスタマイズする
高度な設定タブでは、区切り線ブロックの外観をさらにカスタマイズできます。
スタイル:
- 影: 区切り線に影の効果を追加します。なし、ヘアライン、小、中、大から選択します。
- ヘッダーのタイポグラフィ（要素の追加がテキストに設定されている場合に表示）: テキスト要素のフォントファミリー、太さ、サイズ、行の高さ、文字間隔、テキスト変換をカスタマイズします。
- テキストの色（要素の追加がテキストに設定されている場合に表示）: 区切り線のテキストラベルの色を設定します。
- アイコンの色（要素の追加がアイコンに設定されている場合に表示）: 区切り線に表示されるアイコンの色を設定します。
間隔：
- 余白: 区切り線ブロックの周囲の外部スペース（上、右、下、左）を制御します。これにより、区切り線とページ上の周囲の要素との間にどれだけのスペースが表示されるかが決まります。
- パディング: 区切り線ブロックの内部スペース（上、右、下、左）を調整します。デスクトップ、タブレット、モバイルのデバイスごとの値をサポートします。
属性:
- CSS ID: カスタムスタイリングまたはJavaScriptターゲティングのためにSeedProdによって自動的に作成された、区切り線ブロックの自動生成された一意の識別子を表示します。
- カスタムクラス: テーマまたはカスタムCSSから特定のスタイルを適用するためにカスタムCSSクラスを追加します。
- カスタム属性: 区切り線ラッパー要素に任意のHTML属性を追加します。属性名を改行し、次の形式で入力します: attribute-name|value。
デバイス表示:
- デスクトップで非表示: デスクトップ画面で区切り線ブロックを非表示にします。
- タブレットで非表示: タブレットデバイスで区切り線ブロックを非表示にします。
- モバイルで非表示: モバイルデバイスで区切り線ブロックを非表示にします。
アニメーション効果:
- 表示アニメーション: バウンス、フェードイン、ズームイン、ローテートインなど、区切り線ブロックがビューにスクロールしたときに再生されるアニメーション効果を選択します。
ステップ4：変更を保存
区切り線ブロックの設定が完了し、外観のカスタマイズが終わったら、必ず作業を保存してください。
ページに区切り線ブロックを追加しました！区切り線は、視覚的な構造を作成し、訪問者をコンテンツに誘導するためのシンプルでありながら効果的な方法です。さまざまな線のスタイル、色、幅、中央の要素を試して、デザインに最適な外観を見つけてください。