GemPagesセクション設定：レイアウト、背景、形状、高度なコントロール

GemPages のセクションとは何ですか?

A セクション GemPagesのあらゆるページの主要な構成要素です。各ページは複数のセクションが縦に積み重なって構成されており、各セクションには1つ以上の コラム, 行, 要素は その中。

セクションを使用すると、ページをヒーローバナー、製品の機能、お客様の声、CTA などの明確なコンテンツ ブロックに構造化できるため、各部分を個別に設計および管理できます。

GemPages New Editor v7 では、セクションがこれまで以上に柔軟になりました。

• 合計することができます 6列 セクション内
• 間隔、サイズ、背景スタイルを調整する
• 境界線、角の半径、影を適用する
• セクションがさまざまなデバイスにどのように表示されるかを制御する

設定タブを構成する

GemPages エディターで、対象のセクションをクリックして、左側に設定パネルを開きます。

そこから、以下のようにセクションの表示を好みに応じてカスタマイズできます。

レイアウト

セクションの希望レイアウトを選択してください レイアウト 設定。セクションには最大 6 つの列を追加できます。

列幅

セクション内に複数の列がある場合は、列幅を次のように調整できます。

• 変化率: 手動で調整
• コンテンツに合わせる: コンテンツに合わせて各列の幅を自動的に調整します

列管理

この設定の下で、 注文 詳細な設定パネルを開くには、ボックスをクリックしてください。 組み替​​えます 各列の位置、 複製 それ、または 削除 ボーマンは

サイズ

その サイズ 設定により、セクションの表示幅と内部の間隔を制御できるため、すっきりとした快適なレイアウトを作成できます。

• 幅： セクションの幅を選択します。
  • フル（100％）: このセクションはブラウザの幅全体に広がり、ヒーローバナー、全幅の画像、または大きなビジュアルブロックに最適です。
  • デフォルト（1200ピクセル）: より構造化されたページ レイアウトを実現するために、コンテンツを固定の最大幅で中央に配置します。
• パディング： パディングは、セクション内、そしてすべての内部要素の周囲にスペースを追加します。上下左右のパディングを調整することで、コンテンツに余裕を持たせることができます。

• ページの余白: ページパディングは、 ブラウザの端 とは ページセクションこれをグローバルに定義するには、 グローバルスタイル > ページパディング.
  • あり: このセクションは、ページ全体の一貫性を保つために、グローバルなページ パディング設定に従います。
  • いいえ: このセクションでは、上で設定したカスタム パディング値が使用されるため、レイアウトの柔軟性が向上します。

経歴

下 経歴 設定を変更できます 背景色 または使用する 画像/ビデオ セクションの背景として。

参照する この記事 GemPages の背景設定のカスタマイズの詳細については、こちらをご覧ください。

形状

このセクションの 形状設定 スタイルを設定できます 国境, コー​​ナー, 影 レイアウトがより洗練され、ブランド スタイルに合うようになります。

• 境界： セクションの周囲に境界線を追加し、境界線の色、太さ、ストロークを調整して、大きなコンテンツ ブロック間の明確な境界を定義します。

• コーナー： より滑らかな視覚スタイルを作成するには、セクションの角の半径を調整します。

• 影： シャドウコントロールを使用して、視覚的な奥行きを演出したり、セクションを強調したりできます。以下の設定が可能です。
  • 種類： 外側、内側、または中央
  • 方向： 影が落ちる場所を選択する
  • 色： ブランドパレットに合わせる
  • 距離： 影がどのくらい遠くまで落ちるか
  • ぼかし： 影がどれだけ柔らかく、または鮮明に見えるか
  • サイズ： 影の広がり

整列

セクションの配置を調整します。以下から選択できます。 左揃え, 水平中央揃えまたは 右揃え.

詳細タブを設定する

その 高機能 タブを使用すると、詳細な間隔オプションや追加の図形スタイルとともに、さまざまなデバイスでのセクションの表示方法をより細かく制御できます。

これらの設定は、応答性を微調整し、ページ全体でクリーンで一貫したレイアウトを作成するのに役立ちます。

より高度なカスタマイズについては、 この記事.