行要素

行要素について

その 行要素 ページを作成するときに最も重要なコンポーネントの 1 つです。

通常、レイアウトの基礎となる行要素から始めます。複数の行を自由に配置して、ページを必要に応じて構成できます。

より高度なグリッドレイアウトでは、コンテンツが整理され、さまざまな画面サイズでレスポンシブに表示されるように、ネストすることができます。 最大12列 1 行内にあります。 

フレームワークが設定されると、テキスト、画像、ビデオ、ボタンなどの要素を行に簡単にドラッグ アンド ドロップできます。 

GemPages V7 に行要素を追加するにはどうすればいいですか?

ステップ1： GemPagesダッシュボード、アクセス ページ セクションでは、既存のページを開くか、新しいページを作成します。GemPages エディターに移動します。

ステップ2： 左側のサイドバーで行要素を見つけます。行レイアウトを選択し、デザイン領域にドラッグ アンド ドロップします。

ステップ 3: 要素をクリックすると、左側のサイドバーに設定パネルが開きます。 設定 の三脚と 高機能 タブをクリックします。

設定タブを構成する

レイアウト

下 レイアウト セクションでは、1 行に表示される列の数を定義します。

あなたはから選ぶことができます 6つのプリセットレイアウト (1～6 列)、各プリセットは行を自動的に均等なセクションに分割します。

これらの列は、画像、テキスト ブロック、ボタンなどのさまざまな要素を追加してコンテンツを構造化できるコンテナーとして機能します。

列幅

各列が行内で占めるスペースを制御します。設定方法は2通りあります。

• 変化率: すべての列は均等に配置されます。スライダーをドラッグして、列間の幅の比率を調整してください。
• コンテンツに合わせる: 列の幅はコンテンツのサイズに合わせて自動的に調整されます。

この柔軟性により、さまざまなコンテンツの長さに適応し、ページ全体のバランスを維持するレイアウトを設計できます。

列管理

このセクションでは、行内の列の数と順序を管理できます。リスト内の各列にマウスポインターを合わせると、以下の操作を実行できます。

• 再配置: 列の位置を変更します。
• コピー： 列とその内容を複製します。
• 削除： 選択した列を削除します。

このセクションでは、最初からやり直すことなく、コンテンツ ブロックを簡単に再編成または複製できます。

列間隔

を調整する 列間の隙間 レイアウトのコンパクトさや広がり具合を調整します。次のいずれかを選択できます。

• 正確な数値を入力するか、
• ドラッグ ブルースライダー 視覚的に間隔を変更します。

適切な間隔を設定すると、読みやすさが向上し、列間の視覚的な階層が維持されます。

サイズ

Row 要素の全体的なサイズと内部のパディングを設定します。

• 幅： 行がページ上でどのくらいの幅に広がるかを定義します。
• 高さ： 行の垂直スペースを設定します。
• パディング： 行の端とそのコンテンツ間の内部間隔を制御します。

これらの設定を使用して、レイアウト全体で一貫した構造とバランスを維持します。

経歴

行に背景を追加して、視覚的な奥行きを演出したり、特定のセクションを強調したりできます。GemPages では、以下の 3 種類の背景を提供しています。

• 色： HEX コード、カラー ピッカー、またはスウォッチ セレクターを使用して、単色/グラデーションの背景色を選択します。

• イメージ： 新しい画像をアップロードするか、メディア ライブラリから画像を選択します。

• 動画： YouTube または Shopify からホストされたビデオを使用して、動的な背景を作成します。

形状

このセクションでは、行の全体的な外観をカスタマイズして微調整することができます。 国境, コーナー半径, 影の効果:

• ボーダー: 行の周囲の境界線を追加または変更します。境界線は次のように定義できます。 厚さ,  （実線、破線、点線）、および カラー あなたのブランドスタイルに合わせて。
• コーナー：調整する コーナー半径 カルーセルの角を丸くしたり、シャープにしたりできます。例えば、値を大きくすると、より柔らかくモダンな外観になります。
• Shadow：適用 影を落とす カルーセルに奥行き感とページの背景からの視覚的な分離感を与えます。影の調整も可能です。 オフセット, ブラー, カラー 微妙な効果や劇的な効果を実現します。

列を揃える

行内のすべての列の垂直方向の配置を調整します。以下から選択してください。

• 上揃え: すべてのコンテンツを行の上部に揃えます。
• 垂直中央: すべてのコンテンツを垂直方向に中央揃えします。
• 下揃え: すべてのコンテンツを下部に揃えます。
• 垂直間隔を均等配分: 列間のスペースを均等に分散します。

この設定を使用すると、デバイス間でコンテンツのバランスが保たれ、視覚的に一貫性が保たれます。

詳細タブを設定する

より高度なカスタマイズについては、「詳細設定」タブに移動し、 この記事.

行要素のベストプラクティス

列を効果的に活用する

行要素は、複数列のレイアウトを作成するのに最適です。列内に追加の行をネストして、より複雑なグリッド デザインを作成することもできます。

コンテンツボックスのデザイン

行は、推薦文セクションや同様のコンテンツ領域を作成する場合に特に効果的です。行要素を使用して、背景とパディングを追加することでコンテンツ ボックスを作成できます。全幅コンテンツの場合は、Hero Banners のような背景画像の使用を検討してください。 

一定の間隔を確保する

行内では、最大幅 1200 ピクセルでコンテンツを整理し、小型デバイスから大型モニターまで、すべての画面サイズで均一な外観になるようにします。

応答性を高める

画面サイズに合わせて列の位置、順序、幅を柔軟に調整できます。これにより、あらゆるデバイスでデザインがシームレスに適応し、視覚的に魅力的な状態を維持できます。

GemPagesを使用してデザインをさまざまなデバイスにレスポンシブにするための手順については、次の詳細なガイドラインを参照してください。 この記事.

よくあるご質問

1. 列の背景色を設定するにはどうすればよいですか?

現在、この機能は利用できません。この問題を回避するには、カスタム CSS を追加します。要素をクリックし、[詳細設定] タブに移動して、[CSS クラス] ボックスに CSS コードを入力します。または、GemPages サポート チームに連絡して、さらにサポートを受けることもできます。

2. 5 列の行を作成するにはどうすればよいですか?

行設定で5列レイアウトを選択すると、5列の行を作成できます。または、 カルーセル要素 同様の効果のために。

3. 行から列を削除するにはどうすればよいですか?

行要素内の列を削除するには、次の手順に従います。

• 削除する列が含まれている行を選択します。
• 左側のサイドバーで、列セクションを見つけます。
• 削除したい列の横にあるゴミ箱アイコンをクリックします。

4. 行を複製するにはどうすればよいですか?

行を複製するには、行を右クリックして 重複ファイル、またはキーボードショートカットを使用して：

• Windowsの場合: Ctrlキー+ C コピーして Ctrlキー+ V ペーストする。
• macOSの場合： コマンド + C コピーして コマンド + V ペーストする。

5. 8 列を一列に追加するにはどうすればよいですか?

現在、 列の最大数は行あたり6です GemPages V7では（ 設定 パネル> レイアウト）。6 列以上必要な場合は、既存の列の XNUMX つ内に別の Row 要素をネストすることで実現できます。

6. 行内の各列に境界線やパディングを追加できますか?

現在、列レベルの境界線やパディングを個別に設定することはできません。境界線のスタイル設定は、 行レベル （下 形状 セクション）でパディングを適用することができ、 行レベル 同様に。

列固有のスタイル設定が必要な場合は、GemPages サポート チームにお問い合わせください。

7. ページに行を追加するにはどうすればよいですか?

行を追加するには、GemPages エディターを開き、左側のサイドバーから行要素をデザイン領域にドラッグします。

追加できる行数はセクションの制限によって制限される場合がありますのでご注意ください。詳しくは、こちらの記事をご覧ください。 Shopifyセクション制限.