レイアウト – 行
作成対象：
- 初心者
- 中級
- ユーザー
行 コンテンツタイプを使用して、Page Builder ステージに行を追加します。
NOTE行ツールボックス
行のツールボックスは、行コンテナにカーソルを合わせると表示されます。 ツールボックスには、行を移動、非表示、複製、編集または削除するオプションが含まれています。 設定の選択によって、行の外観、背景、レイアウトが決まります。 追加のコンテンツ要素は、左側の Page Builder パネルから行にドラッグできます。
| ツール | アイコン | 説明 |
|---|---|---|
| 移動 |
 | 行をステージ上の他の行と相対的に別の位置に移動します。 |
| （ラベル） | Row | 現在のコンテンツコンテナを行として識別します。 コンテナの上にマウスポインターを置くと、ツールボックスが表示されます。 |
| 設定 |
 | 行の編集ページが開きます。このページで、コンテナのプロパティを変更できます。 |
| Hide |
 | 現在の行を非表示にします。 |
| 表示 |
 | 非表示の行を表示します。 |
| 複製 |
 | 行をコピーします。 |
| 削除 |
 | 行コンテナとそのコンテンツをステージから削除します。 |
NOTE行を追加
-
Page Builder パネルの Layout の下で、新しい Row をステージの最初の行のすぐ下にドラッグします。
-
行を書式設定するには、行コンテナの上にマウスポインターを置いてツールボックスを表示し、設定 （
使用可能な設定の完了の詳細については、次の節を参照してください。
行設定の変更
-
行コンテナにカーソルを合わせてツールボックスを表示し、「設定」（
-
使用可能な設定の更新について詳しくは、次の節を参照してください。
-
完了したら、「Save」をクリックして設定を適用し、Page Builder ワークスペースに戻ります。
外観
外観 設定を使用して、行にコンテンツを表示する方法を決定します。
-
コンテンツ領域のコンテナと幅に対する背景色や背景画像の表示方法を決定するには、配置を選択します。
オプション説明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）が表示されます。 最後の数値は、現在の不透明度の割合を小数で示します。 スライダを使用して、不透明度を調整したり、必要な小数値を入力したりできます。
NOTEBackground Type
背景の種類は、画像またはビデオです。 デフォルト Page BuilderImage で、様々な画像設定が表示されます。 Video を選択すると、Page Builder は画像設定をビデオ設定にスワップします。 どちらの背景タイプも次のように説明します。
画像タイプの設定
Background Type を Image に設定した場合は、次の設定を使用して背景画像の表示を定義します。
-
Background Image – 必要に応じて、提供されたツールを使用して、行に適用する背景画像を選択します。
オプション説明Uploadローカルコンピューターからギャラリーに画像ファイルをアップロードし、それを行の背景画像として適用します。Select from Gallery行の背景画像として、ギャラリーから既存の画像を選択するように求めるプロンプトを表示します。
画像をカメラタイルにドラッグするか、ローカルファイルシステム内の画像を参照できます。 -
Background Mobile Image – 必要に応じて、同じツールを使用して、モバイルデバイスでの表示に使用する別の背景画像を選択します。
-
Background Size – 行の幅に対する背景画像の拡大縮小の方法を指定するには、このオプションを設定します。
オプション説明Cover背景画像は、行の全幅をカバーしています。Contain背景画像は、コンテンツ領域の幅に制限されます。Auto現在のスタイル シートからサイズを適用します。
-
Background Position – 行に対する背景画像のアンカー方法を指定するには、このオプションを設定します。
アンカーポイント位置Top左/中央/右Center左/中央/右Bottom左/中央/右アンカーポイントは、プッシュピンのようなもので、指定した背景位置の行に画像をアタッチします。
-
Background Attachment – 添付ファイルタイプを設定して、スクロールするページに対する背景画像の移動を指定します。
オプション説明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
- YouTube ビデオ：
-
Overlay Color - ビデオに透明の濃淡を適用するカラーを選択します。
-
Infinite Loop -
Noに設定すると、ビデオを 1 回再生して停止します。 このオプションをYes（デフォルト）に設定すると、ビデオは無限ループで繰り返されます。 -
Lazy Load -
Noに設定すると、非表示の場合でもビデオがページと共に読み込まれます。 このオプションをYes（デフォルト）に設定すると、画面に表示されている場合にのみ、ビデオはソースから読み込まれます。 -
Play Only When Visible - ビデオが表示されているかどうかに関係なく、ビデオの読み込み直後に再生を開始するには、
Noに設定します。 このオプションがYes（デフォルト）に設定されている場合、ビデオは表示されているときにのみ再生を開始します。 -
Fallback Image – 必要に応じて、ビデオが読み込まれる前および何らかの理由でビデオが読み込まれない場合に画面に表示する画像を指定します。
視差背景
これらのオプションを使用して、ページのスクロールに対する、背景の画像やビデオのスクロールの速度の制御を行います。 背景のスクロール速度を遅くして、没入感を生み出すことができます。
- Parallax Background を有効にする を
Yesに設定します。 - 視差速度 を
-1.0～2.0の 10 進数値で入力します。
詳細
-
行に追加されるコンテンツコンテナの水平方向の位置を制御するには、Alignment のいずれかを選択します。
オプション説明Default現在のテーマのスタイル シートで指定されている線形の既定の設定を適用します。Leftコンテンツコンテナを行コンテナの左の境界線に沿って配置します。指定したパディングを使用できます。Centerコンテンツコンテナを行コンテナの中央に揃えます。指定したパディングに余裕があります。Rightコンテンツコンテナを行コンテナの右端に沿って配置します。指定したパディングに余裕があります。 -
行コンテナの 4 つの辺すべてに適用される Border スタイルを設定します。
オプション説明Default関連付けられたスタイル シートで指定されている既定の罫線スタイルを適用します。Noneコンテナの境界線の表示はしません。Dottedコンテナの境界線は点線で表示されます。Dashedコンテナの境界線は破線で表示されます。Solidコンテナの境界線は実線で表示されます。Doubleコンテナの境界線は二重線で表示されます。Grooveコンテナの境界線は溝付き線で表示されます。Ridgeコンテナの境界線は、境界線として表示されます。Insetコンテナの境界線は、インセットされた線として表示されます。Outsetコンテナの境界線は、先頭行として表示されます。 -
None以外の境界線のスタイルを設定する場合は、境界線の表示オプションを完了します。
オプション説明Border Color見本を選択するか、カラーピッカーをクリックするか、有効なカラー名または同等の 16 進数値を入力して、カラーを指定します。Border Width境界線の幅のピクセル数を入力します。Border Radiusピクセル数を入力して、境界線の各コーナーを丸めるために使用する半径のサイズを定義します。次の例の行の境界線の半径は 15 です。
-
（オプション）行コンテナに適用する現在のスタイルシートの CSS classes の名前を指定します。
複数のクラス名はスペースで区切ります。
-
行の外側の余白と内側のパディングを指定する Margins and Padding の値をピクセル単位で入力します。
対応する各値を行コンテナ図に入力します。
コンテナ領域説明Marginsコンテナのすべての側面の外側の端に適用される空白スペースの量。 オプション：Top/Right/Bottom/LeftPaddingコンテナのすべての側面の内側の端に適用される空白のスペースの量です。 オプション：Top/Right/Bottom/Left