要素 – ディバイダ

Page Builder パネルで、Elements​を展開し、Divider プレースホルダーをステージ上の行、列、またはタブ セットにドラッグします。

ステージ上の別のコンテンツコンテナの前または後に区切りを配置する場合は、赤いガイドラインを参照してください。

{width="600" modal="regular"}

次の例では、区切り記号はテキストの新しいセクションの先頭をマークします。

{width="500" modal="regular"}

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

分割コンテナにカーソルを合わせてツールボックスを表示し、設定 （ {width="20"}）アイコンを選択します。

{width="500" modal="regular"}

次のいずれかの方法を使用して区切り記号​ Line Color ​を変更します。

• 有効なHTML カラー名を入力してください。 例：Teal。
• 16進数カラー値を入力します。 例：#008080。

完了したら、Apply​をクリックします。

{width="600" modal="regular"}

Line Thickness​をピクセル単位で入力します。

測定単位を示すには、Line Width​の後にpxまたは%を入力します。

{width="600" modal="regular"}

必要に応じて​ 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"}

• 分割コンテナのすべての4つの側面に適用される​Border スタイルを設定します。

  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	コンテナの境界線が2行で表示されます。
  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 ワークスペースに戻ります。

{width="500" modal="regular"}

分割コンテナにカーソルを合わせてツールボックスを表示し、複製 （ {width="20"}）アイコンを選択します。

重複するディバイダーコンテナが元のコンテナのすぐ下に表示されます。

{width="500" modal="regular"}

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

{width="500" modal="regular"}

赤いガイドラインが新しい位置を示すまで、区切り記号を選択してドラッグします。

各コンテナの上下の境界線は、区切り線を移動すると破線として表示されます。

{width="500" modal="regular"}