GemPagesで要素を整列させる方法

GemPagesで要素の配置が重要な理由

適切な配置は、すっきりとしたユーザーフレンドリーなページデザインの基礎です。GemPagesでは、ボタン、画像、テキスト、フォームなどの要素を適切な位置に配置することで、洗練されたレイアウトを実現し、読みやすく、あらゆるデバイスでレスポンシブなデザインを実現します。

GemPages で要素を整列させる方法（ステップバイステップガイド）

単一要素の場合

ステップ1： エディター内の要素をクリックします。

ステップ2： 左側のサイドバーで、 設定 タブには何も表示されないことに注意してください。

ステップ3： 下にスクロールして 整列 のセクションから無料でダウンロードできます。 左、中央、または右を選択します。

複数の要素を持つ行の場合

ステップ1： まず 行.

ステップ2： 設定で、 列揃え. 子要素を均等に配置するには、「中央揃え」または「均等配置」に設定します。

高度な配置: 間隔と位置の設定

さらに細かく制御するには、サイドバーの [詳細設定] タブを使用します。

余白を使って間隔を調整する

• に行く 詳細設定 > 間隔.
• 上、下、左、または右の余白を拡大または縮小します。
• 負のマージンを使用して、要素を通常の境界外に移動します。

位置を利用して正確な制御を行う

• に行く 詳細設定 > 位置.
  から選択します。
  • 静的 （デフォルト）
  • 相対 （元の位置からのオフセット）
  • 絶対の （親要素の内側に正確に配置）
  • 一定 （スクロールすると画面に貼り付きます）
  • スティッキー （一定のポイントを超えてスクロールすると固定されます）

ある要素を別の要素の下に中央配置するにはどうすればよいでしょうか?

ボタン、画像、または任意の要素を他の要素の真下に表示し、中央に配置する場合は、次の手順に従います。

ステップ1: 1列の行要素を追加する

左側のサイドバーから、1 列の行要素をデザイン領域にドラッグ アンド ドロップします。 

ステップ2: 両方の要素を同じ列に配置する

同じ列内の最初の要素 (アイコンなど) のすぐ下に、2 番目の要素 (ボタンなど) をドラッグします。

ステップ3: 行にネストされた各要素を中央に揃える

以下を行うには、 ボタン 要素をクリックして、左パネルで設定を開きます。次に、下にスクロールして 整列 セクションで中央揃えを選択します。

続行します アイコン 要素。

これで、Icon 要素が Button 要素の中央に配置されます。 

ステップ5: 必要に応じて間隔を調整する

親の行要素をクリックすると設定パネルが表示されます。 高機能 タブをクリックして下にスクロールします 間隔 のセクションから無料でダウンロードできます。

このセクションでは、margin-top または margin-bottom を設定して、必要に応じて要素間に適切な距離を作成できます。

こうすることで、テキストの下の中央揃えのボタンや見出しの下の画像などのレイアウトを簡単に作成でき、すべてのデバイスでバランスの取れた表示を実現できます。

よくあるご質問

1. GemPages で 1 つの要素を別の要素の真下に中央配置できますか?

はい。両方の要素を同じ列に配置し、各要素の配置を次のように設定します。 センター必要に応じて、margin-topまたはmargin-bottomを使用してください。 高機能 間隔を調整する設定。

2. 複数の要素を一列に均等に並べるにはどうすればよいですか?

要素を含む行を選択します。 設定 タブを選択 列揃え 「中央揃え」または「均等割り付け」に設定します。これにより、すべての子要素が行全体に均等に配置されます。

3. GemPages における配置と位置の違いは何ですか?

配置は、要素がコンテナーに対してどのように配置されるか (左、中央、右) を定義しますが、位置はより正確な制御 (静的、相対、絶対、固定、固定) を提供します。