要素 – 区切り線

の使用 ディバイダー コンテンツタイプ:コンテンツのセクション間の視覚的な区切りとしてルールを追加します。 Page Builder ステージ. 分割線の色、太さ、幅を指定できます。 また、整列の制御、余白とパディングの設定、コンテナの境界線の形式の設定を行うこともできます。 デフォルトでは、区切りはコンテナの全幅を拡張するヘアーラインルールで、パディングに余裕があります。

境界線のないコンテナ内のデフォルトの区切り文字

ほとんどのディバイダーコンテナは非表示ですが、次の例では、コンテナを赤い破線で囲み、ディバイダー、パディング、コンテナの関係を確認できます。 区切り線の上下のパディングを調整して、要素間の間隔を制御できます。

コンテナ内のパディングを使用した区切り線(破線の境界線)

NOTE
大きな変更を加えている場合 Page Builder コンテンツでは、を増やすことを推奨します 管理セッションの有効期間 を使用して、作業中にセッションがタイムアウトしないようにします。

ディバイダーツールボックス

ツール
アイコン
説明
移動
移動アイコン {width="25"}
ディバイダーコンテナをページ上の別の有効な場所に移動します。
(ラベル)
デバイダ
現在のコンテナを分割要素として識別します。
設定
設定アイコン {width="25"}
ディバイダーを編集ページが開きます。このページで、ディバイダーとそのコンテナのプロパティを変更できます。
Hide
アイコンを非表示 {width="25"}
ディバイダーコンテナを非表示にします。
表示
アイコンを表示 {width="25"}
非表示のディバイダーコンテナを表示します。
複製
アイコンを複製 {width="25"}
ディバイダーコンテナをコピーします。
削除
アイコンを削除 {width="25"}
ディバイダーコンテナとそのコンテンツをステージから削除します。
NOTE
非表示の要素はデータベースに保存され、顧客には表示されません。 ただし、これらの要素は、サイトをクロールする検索エンジンやその他のボットには表示されます。 また、非表示の属性を持つ API 呼び出しを通じてリクエストされた場合、ステージから削除しない限り、コンテンツの一部として返されます。

ディバイダーの追加

  1. が含まれる Page Builder パネル、展開 Elements をドラッグします。 Divider ステージ上の行、列またはタブセットへのプレースホルダー。

    赤いガイドラインを参考にして、ステージ上の別のコンテンツコンテナの前または後にディバイダーを配置します。

    ディバイダーのステージへのドラッグ {width="600" modal="regular"}

    次の使用例では、区切り記号を使用して文字列の新しいセクションの先頭を指定します。

    テキストのセクションを区切るディバイダー {width="500" modal="regular"}

  2. 新しいディバイダーの設定を指定するには、次の手順に従います。

ディバイダー設定の変更

  1. ディバイダーコンテナにカーソルを合わせてツールボックスを表示し、 設定 設定アイコン {width="20"} ) アイコンをクリックします。

    ディバイダーツールボックス {width="500" modal="regular"}

  2. ディバイダーの変更 Line Color 次のいずれかの方法を使用します。

    • 有効なを入力 HTMLカラー名. 例: Teal.
    • 16 進数のカラー値を入力します。 例: #008080.

    完了したら、 Apply.

    線の色の設定 {width="600" modal="regular"}

  3. を入力 Line Thickness ピクセル単位。

  4. 計測単位を指定するには、 Line Width に続いて、次のいずれか px または %.

    線の色、太さ、幅の設定 {width="600" modal="regular"}

  5. を更新 Advanced ​必要に応じて設定します。

    • 親コンテナ内のディバイダーの位置を制御するには、 Alignment:

      table 0-row-2 1-row-2 2-row-2 3-row-2 4-row-2 layout-auto
      オプション 説明
      Default 現在のテーマのスタイル シートで指定されている線形の既定の設定を適用します。
      Left 親コンテナの左罫線に沿ってリストを配置します。指定したパディングはすべて許可されます。
      Center 親コンテナの中央にリストを揃えます。指定したパディングに対する許容値を使用します。
      Right 親コンテナの右端に沿ってブロックを配置します。指定したパディングは許可されます。

      次の例では、ディバイダーに中央揃えを使用するようにオプションを設定しています。

      中央揃えのディバイダー {width="600" modal="regular"}

    • 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
  6. 完了したら、 Save 設定を適用し、 Page Builder ワークスペース。

    行の中央に配置されたディバイダー {width="500" modal="regular"}

ディバイダーの複製

特定の設定を持つフォーマットされたディバイダーの場合は、新しいプレースホルダーでやり直すよりも、複製を作成する方が効率的です。

  1. ディバイダーコンテナにカーソルを合わせてツールボックスを表示し、 複製 アイコンを複製 {width="20"} ) アイコンをクリックします。

    重複したディバイダーコンテナは、オリジナルのすぐ下に表示されます。

    重複除算器 {width="500" modal="regular"}

  2. 新しいディバイダーコンテナにカーソルを合わせてツールボックスを表示し、 移動 移動アイコン {width="20"} ) アイコンをクリックします。

    ディバイダーの移動 {width="500" modal="regular"}

  3. ディバイダーを選択してドラッグし、赤いガイドラインが新しい位置を示すようにします。

    分割線を移動すると、各コンテナの上下の境界が破線で表示されます。

    複製したディバイダーの位置への移動 {width="500" modal="regular"}

recommendation-more-help
85b60248-86a4-4d5f-9933-5179643f608d