logo_w
beaver builder resources

How to Beaver

logo_w

行のレイアウトについて〜全幅と固定幅〜

行のレイアウトについて

ページビルダーで行(カラム)を作成する時、その行の幅が「全幅」であるか「固定幅」であるかを指定することができます。
行を「全幅」に設定すると、その行のコンテンツが「全幅」であるか「固定
幅」であるかの選択もできます。

①カラム:全幅→コンテンツ幅:全幅

②カラム:全幅→コンテンツ幅:固定

③カラム:固定→コンテンツ幅:固定

の各レイアウトを下記にスクリーンショットで示しています。
行、列、およびモジュールの余白とパディングはすべて0pxに設定されています。
詳しくは、次のセクションで各行の説明を参照してください。

houtwo_row

① [幅:全幅 / Fixe wide:全幅]のコンテンツについて

行幅が[全幅]に設定されている場合、行の背景はブラウザの全幅またはページのボックス化されたコンテンツ領域の全幅に拡大されます。
これはテーマによって設定されます。 

コンテンツも[全幅]に設定されている場合、同様に画面またはボックス領域の全幅に伸びます。
この設定では、行、列、またはモジュールの余白とパディングを使用して、ページの左右の端から列またはコンテンツを移動します。 

ヒント:

行の余白を設定すると、ページの端から行の背景が移動しますが、通常は不要になります。
行のパディングを設定すると、行の背景がページの端に残りますが、列はその行から離れるようにプッシュされます。

② [幅:全幅 / Fixe wide:固定]のコンテンツについて

[行]を[全幅]に設定し、[Fixe wide(コンテンツ)]を[固定]に設定し場合、デフォルトの固定幅設定は1100pxとなります。
デフォルトの固定幅は変更することができます。
見出しとテキストはそのコンテンツの幅内で左揃えになります。

ヒント:

固定幅を設定すると、実際には最大幅が設定されます。
固定幅の設定が800pxの場合は、幅が800pxを超えることはありませんが、画面のサイズが小さくなると縮小され、デバイス幅によって可変します。 

③ [幅:固定 / Fixe wide:固定]のコンテンツについて

[行]を[固定]に設定した場合、行の背景がデフォルトの固定幅(1100px)または指定したカスタム幅のいずれかに伸びることを意味します。
固定幅の設定は、前の例のように最大幅です。
行が[固定]幅に設定されている場合、コンテンツは自動的に同じ幅から任意のマージンとパディング設定を差し引いた値に設定されます。