要素 – 区切り線
の使用 ディバイダー コンテンツタイプ:コンテンツのセクション間の視覚的な区切りとしてルールを追加します。 Page Builder ステージ. 分割線の色、太さ、幅を指定できます。 また、整列の制御、余白とパディングの設定、コンテナの境界線の形式の設定を行うこともできます。 デフォルトでは、区切りはコンテナの全幅を拡張するヘアーラインルールで、パディングに余裕があります。
ほとんどのディバイダーコンテナは非表示ですが、次の例では、コンテナを赤い破線で囲み、ディバイダー、パディング、コンテナの関係を確認できます。 区切り線の上下のパディングを調整して、要素間の間隔を制御できます。
ディバイダーツールボックス
![移動アイコン](./media_1224013998716f9ac04c80146b04284c714a0f6df.png?width=750&format=png&optimize=medium)
![設定アイコン](./media_1cc57ae4793d2e40ac1b861dcfbf325d3b0725c54.png?width=750&format=png&optimize=medium)
![アイコンを非表示](./media_1f29e192a54526dd4f87e66b30ee7290d513264e1.png?width=750&format=png&optimize=medium)
![アイコンを表示](./media_1195f7af93e8019cfde3b86b9fa7fc3fe10079e92.png?width=750&format=png&optimize=medium)
![アイコンを複製](./media_1d20e9c33185846c6ce9b8ad56d7e52d49d00f42f.png?width=750&format=png&optimize=medium)
![アイコンを削除](./media_199b42b869af4609c58f76eb9b94cc3bc8ba1d5a0.png?width=750&format=png&optimize=medium)
ディバイダーの追加
-
が含まれる Page Builder パネル、展開 Elements をドラッグします。 Divider ステージ上の行、列またはタブセットへのプレースホルダー。
赤いガイドラインを参考にして、ステージ上の別のコンテンツコンテナの前または後にディバイダーを配置します。
次の使用例では、区切り記号を使用して文字列の新しいセクションの先頭を指定します。
-
新しいディバイダーの設定を指定するには、次の手順に従います。
ディバイダー設定の変更
-
ディバイダーコンテナにカーソルを合わせてツールボックスを表示し、 設定 (
-
ディバイダーの変更 Line Color 次のいずれかの方法を使用します。
- 有効なを入力 HTMLカラー名. 例:
Teal
. - 16 進数のカラー値を入力します。 例:
#008080
.
完了したら、 Apply.
- 有効なを入力 HTMLカラー名. 例:
-
を入力 Line Thickness ピクセル単位。
-
計測単位を指定するには、 Line Width に続いて、次のいずれか
px
または%
. -
を更新 Advanced 必要に応じて設定します。
-
親コンテナ内のディバイダーの位置を制御するには、 Alignment:
table 0-row-2 1-row-2 2-row-2 3-row-2 4-row-2 layout-auto オプション 説明 Default
現在のテーマのスタイル シートで指定されている線形の既定の設定を適用します。 Left
親コンテナの左罫線に沿ってリストを配置します。指定したパディングはすべて許可されます。 Center
親コンテナの中央にリストを揃えます。指定したパディングに対する許容値を使用します。 Right
親コンテナの右端に沿ってブロックを配置します。指定したパディングは許可されます。 次の例では、ディバイダーに中央揃えを使用するようにオプションを設定しています。
-
を Border ディバイダーコンテナの 4 つの辺すべてに適用されるスタイル:
table 0-row-2 1-row-2 2-row-2 3-row-2 4-row-2 5-row-2 6-row-2 7-row-2 8-row-2 9-row-2 10-row-2 layout-auto オプション 説明 Default
関連付けられたスタイル シートで指定されている既定の罫線スタイルを適用します。 None
コンテナの境界線の表示はしません。 Dotted
コンテナの境界線は点線で表示されます。 Dashed
コンテナの境界線は破線で表示されます。 Solid
コンテナの境界線は実線で表示されます。 Double
コンテナの境界線は二重線で表示されます。 Groove
コンテナの境界線は溝付き線で表示されます。 Ridge
コンテナの境界線は、境界線として表示されます。 Inset
コンテナの境界線は、インセットされた線として表示されます。 Outset
コンテナの境界線は、先頭行として表示されます。 -
境界線のスタイルを
None
の場合は、次のボーダー表示オプションを入力します。table 0-row-2 1-row-2 2-row-2 3-row-2 layout-auto オプション 説明 Border Color 見本を選択するか、カラーピッカーをクリックするか、有効なカラー名または同等の 16 進数値を入力して、カラーを指定します。 Border Width 境界線の幅のピクセル数を入力します。 Border Radius ピクセル数を入力して、境界線の各コーナーを丸めるために使用する半径のサイズを定義します。 -
(オプション)の名前を指定します CSS classes を現在のスタイルシートから取得して、コンテナに適用します。
複数のクラス名はスペースで区切ります。
-
次の値をピクセル単位で入力 Margins and Padding ディバイダ容器の外側の余白と内側のパディングを決定する。
対応する値を図に入力します。
table 0-row-2 1-row-2 2-row-2 layout-auto コンテナ領域 説明 Margins コンテナのすべての側面の外側の端に適用される空白スペースの量。 オプション: Top
/Right
/Bottom
/Left
Padding コンテナのすべての側面の内側の端に適用される空白のスペースの量です。 オプション: Top
/Right
/Bottom
/Left
-
-
完了したら、 Save 設定を適用し、 Page Builder ワークスペース。
ディバイダーの複製
特定の設定を持つフォーマットされたディバイダーの場合は、新しいプレースホルダーでやり直すよりも、複製を作成する方が効率的です。
-
ディバイダーコンテナにカーソルを合わせてツールボックスを表示し、 複製 (
重複したディバイダーコンテナは、オリジナルのすぐ下に表示されます。
-
新しいディバイダーコンテナにカーソルを合わせてツールボックスを表示し、 移動 (
-
ディバイダーを選択してドラッグし、赤いガイドラインが新しい位置を示すようにします。
分割線を移動すると、各コンテナの上下の境界が破線で表示されます。