レイアウト – 行

の使用 行を追加するコンテンツタイプ Page Builder ステージ.

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

行ツールボックス

行のツールボックスは、行コンテナにカーソルを合わせると表示されます。 ツールボックスには、行を移動、非表示、複製、編集または削除するオプションが含まれています。 設定の選択によって、行の外観、背景、レイアウトが決まります。 追加のコンテンツ要素は、 Page Builder 左側のパネル。

行ツールボックス

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

行を追加

  1. が含まれる Page Builder 下のパネル Layout、新規ドラッグ​ Row ​ステージの最初の行のすぐ下に。

  2. 行を書式設定するには、行コンテナにカーソルを合わせてツールボックスを表示し、次の中から 設定 設定アイコン {width="20"} ) アイコンをクリックします。

    使用可能な設定の完了の詳細については、次の節を参照してください。

    行の追加 {width="600" modal="regular"}

行設定の変更

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

    行ツールボックス {width="600" modal="regular"}

  2. 使用可能な設定の更新について詳しくは、次の節を参照してください。

  3. 完了したら、 Save 設定を適用し、 Page Builder ワークスペース。

外観

の使用 外観 行にコンテンツを表示する方法を決定するための設定。

外観設定

  • コンテンツ領域のコンテナと幅に対する背景色や背景画像の表示方法を決定するには、配置を選択します。

    table 0-row-2 1-row-2 2-row-2 3-row-2 layout-auto
    オプション 説明
    Contained 背景色または画像は、テーマで定義されている最大ページ幅に制限されます。
    Full Width テーマで定義されているページの幅の最大値にコンテンツを制限します。 背景色や画像に制限はなく、行の全幅を拡張します。
    Full Bleed コンテンツと背景画像や色は制限されず、行の全幅を拡張します。 フル ブリードアウトは以下の場合にのみ使用できます。 テーマ レイアウトをサポートする。
  • を入力 Minimum Height 行に使用します。 この値には、有効な CSS 単位(など)を含む数値を指定できます 100px, 50%, 50em, 100vh)または計算(など 100vh - 237px)に設定します。

    例えば、行の最小の高さを設定して、ページの完全な高さを伸ばすことができ、完全なページの背景画像やビデオに対して魅力的なオプションを提供します。

  • を選択 Vertical Alignment 行(上、中央または下)に追加されたコンテンツコンテナを揃えるための設定。

背景

行の背景表示を定義するには、多くのオプションがあります。 シンプルなカラーまたは背景画像を適用し、より高度な効果を管理できます。

背景色

スウォッチを選択するか、カラーピッカーをクリックするか、有効なカラー名または同等の 16 進数値を入力して、背景色を指定します。 この設定により、行の背景色が決まります。 また、カラーの不透明度を調整することもできます。

カラーなし(デフォルト)

次の 3 つの方法のいずれかで値を設定できます。

  • 事前定義済みのカラー名(など) White
  • カラーの 16 進数値(例:) #ffffff
  • 次のような、不透明度のパーセントを使用したカラーの rgba 値 rgba(255, 255, 255, 0.75)

カラーを選択する場合は、の左側にあるスウォッチをクリックします カラーなし ボックス。

カラースウォッチの選択

カラーボックスをクリックして再度カラーピッカーを開くと、スライダの下のボックスに現在の赤、緑、青、アルファ値(rgba)が表示されます。 最後の数値は、現在の不透明度の割合を小数で示します。 スライダを使用して、不透明度を調整したり、必要な小数値を入力したりできます。

不透明度の設定

NOTE
Page Builder では、透明度レイヤーもサポートされています。 アルファチャネル:様々な不透明度の背景を作成するために使用できる背景画像。

Background Type

背景の種類は、画像またはビデオです。 Page Builder デフォルトは Image 様々な画像設定を表示します。 を選択する場合 Video, Page Builder 画像設定をビデオ設定にスワップします。 どちらの背景タイプも次のように説明します。

背景タイプ

画像タイプの設定

を設定した場合 Background Type ​対象: Image以下の設定を使用して、背景画像の表示を定義します。

背景画像

  • Background Image – 必要に応じて、提供されたツールを使用して、行に適用する背景画像を選択します。

    table 0-row-2 1-row-2 2-row-2 3-row-2 layout-auto
    オプション 説明
    Upload ローカルコンピューターからギャラリーに画像ファイルをアップロードし、それを行の背景画像として適用します。
    Select from Gallery 行の背景画像として、ギャラリーから既存の画像を選択するように求めるプロンプトを表示します。
    カメラアイコン {width="25"} 画像をカメラタイルにドラッグするか、ローカルファイルシステム内の画像を参照できます。
  • Background Mobile Image – 必要に応じて、同じツールを使用して、モバイルデバイスでの表示に使用する別の背景画像を選択します。

  • Background Size – 行の幅に対して背景画像をどのように拡大/縮小するかを指定するには、このオプションを設定します。

    table 0-row-2 1-row-2 2-row-2 3-row-2 layout-auto
    オプション 説明
    Cover 背景画像は、行の全幅をカバーしています。
    Contain 背景画像は、コンテンツ領域の幅に制限されます。
    Auto 現在のスタイル シートからサイズを適用します。

    背景サイズ {width="250"}

  • Background Position – このオプションを設定して、背景画像を行に対してどのように固定するかを指定します。

    table 0-row-2 1-row-2 2-row-2 3-row-2 layout-auto
    アンカーポイント 位置
    Top 左/中央/右
    Center 左/中央/右
    Bottom 左/中央/右

    アンカーポイントは、プッシュピンのようなもので、指定した背景位置の行に画像をアタッチします。

  • Background Attachment – 添付ファイルタイプを設定して、スクロールするページに対する背景画像の移動を指定します。

    table 0-row-2 1-row-2 2-row-2 layout-auto
    オプション 説明
    Scroll 添付された背景画像は、ページがスクロールすると下に移動するように同期されます。 スクロール速度を制御するには、Parallax Background を使用します。
    Fixed (モバイルでは使用できません)コンテナが画像の上をスクロールし、指定された背景位置に固定されるので、背景画像は移動しません。
  • Background Repeat – に設定 Yes 行内の空きスペースを埋めるために背景画像を繰り返します。

ビデオタイプの設定

を設定した場合 背景の種類 対象: Video以下の設定を使用して、背景画像の表示を定義します。

  • Video URL – 有効なビデオ URL を入力します。 有効なビデオ URL は、次へのリンクです。

    • YouTube ビデオ: https://youtu.be/CoDhMRUUjeI
    • Vimeo 動画: https://vimeo.com/190156113
    • 有効なビデオファイル (.mp4 推奨): https://myvideos.com/spiral.mp4

    背景ビデオ URL {width="300"}

  • Overlay Color - ビデオに透明な色合いを適用するカラーを選択します。

  • Infinite Loop – に設定 No ビデオを一度再生して停止します。 このオプションを Yes (デフォルト)ビデオは無限ループで繰り返されます。

  • Lazy Load – に設定 No 表示されていない場合でも、ビデオをページと共に読み込むことができるようにする。 このオプションを Yes (デフォルト)ソースからビデオが読み込まれるのは、画面に表示されている場合のみです。

  • Play Only When Visible – に設定 No ビデオが表示されているかどうかに関係なく、ビデオの読み込み直後に再生を開始します。 このオプションを Yes (デフォルト)ビデオは、表示されている場合にのみ再生を開始します。

  • Fallback Image – 必要に応じて、ビデオが読み込まれる前および何らかの理由でビデオが読み込まれない場合に、画面に表示する画像を指定します。

視差背景

これらのオプションを使用して、ページのスクロールに対する、背景の画像やビデオのスクロールの速度の制御を行います。 背景のスクロール速度を遅くして、没入感を生み出すことができます。

  • を設定 視差の背景を有効にする 対象: Yes.
  • を入力 視差速度 間の小数値として -1.0 および 2.0.

Parallax Background 設定

詳細

  • 行に追加されるコンテンツコンテナの水平方向の位置を制御するには、次のいずれかを選択します 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の場合は、次のボーダー表示オプションを入力します。

    境界線のカラー {width="600" modal="regular"}

    table 0-row-2 1-row-2 2-row-2 3-row-2 layout-auto
    オプション 説明
    Border Color 見本を選択するか、カラーピッカーをクリックするか、有効なカラー名または同等の 16 進数値を入力して、カラーを指定します。
    Border Width 境界線の幅のピクセル数を入力します。
    Border Radius ピクセル数を入力して、境界線の各コーナーを丸めるために使用する半径のサイズを定義します。

    次の例の行の境界線の半径は 15 です。

    行(境界線の半径 15) {width="500"}

  • (オプション)の名前を指定します 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

    余白とパディング {width="600" modal="regular"}

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