行またはカルーセル要素を使用して 5 列のグリッドを作成する方法

ページに 5 列のグリッドを作成する理由

製品を展示し、コンバージョンを促進するには、すっきりとした魅力的なレイアウトが不可欠です。

5 列のグリッドを使用すると、特に次のような場合に柔軟性が高まります。

• 製品の可視性を最大化する: より広い概要を把握するために、複数の製品、機能、またはカテゴリを 1 行に表示します。
• ユーザーエクスペリエンスの向上: 顧客が一度に多くの商品を閲覧できるようにすることで、購入の決定を迅速化します。

最新のアップデートでは ジェムページ v7、5 列のグリッドをより簡単に、より優れたカスタマイズ オプションを使用して設定できるようになりました。

GemPages で 5 列のグリッドを作成する方法

GemPages v7では、ページ上に5列のグリッドレイアウトを簡単にデザインできます。 行 素子 または 回転木馬 素子.

まず、エディターを見つける必要があります。

• Shopify管理画面から、 GemPages ビルダー 下のアプリ アプリ のセクションから無料でダウンロードできます。
• に行く ページ、ここで GemPages で構築されたすべてのページを見つけることができます。
• 対象ページをクリックしてエディターに入ります。

新しいテンプレートをデザインしたい場合は、 新しいページを作成する.

参照する この記事 GemPages を使用して新しいページを作成する詳細な手順については、こちらをご覧ください。

方法1: 行要素を使用する

GemPages の Row 要素を使用して 5 列のグリッド レイアウトを作成するには、次の手順に従います。

ステップ1： 左側のサイドバーから、 行要素 ページ上の任意の位置に移動します。

ステップ2： 要素をクリックすると設定パネルが開きます。 レイアウト セクションで、5 列レイアウトを選択します。

ステップ3： お好みに合わせてレイアウトをカスタマイズできます。以下のことが可能です。

• 各列内に要素をドロップする
• 列間隔を調整する
• グリッドの背景色を変更する
• 要素の形状を変更する

ヒント： 5 列のグリッドの視覚的なバランスを保つには、製品ごとに一貫した製品画像サイズを使用します。

方法2: カルーセル要素を使用する

一方、 行要素 シンプルですが、特に 5 列のグリッドが垂直方向のスペースを過度に消費する可能性があるモバイル デバイスでは、必ずしも最も効率的なソリューションであるとは限りません。

その カルーセル要素 よりダイナミックで省スペースな商品表示オプションを提供します。設定方法は以下の通りです。

ステップ1： ドラッグアンドドロップ カルーセル要素 グリッドを表示したいページに貼り付けます。

ステップ2： 下 スライドあたりの項目数 セクションで、5 項目のグリッドを選択します。

ステップ3： 次に、ブランドに合うように 5 列のグリッド カルーセルをデザインします。

有効にすることもできます 自動再生, ナビゲーション矢印または スワイプジェスチャ モバイルでのブラウジング体験をよりスムーズにします。

よくあるご質問

1. 5 列以上 (例: 6 列または 7 列) を作成できますか?

現在、GemPagesは 6まで 行要素の列。より多くの項目を必要とするレイアウトの場合は、カルーセル要素が推奨されるオプションです。

2. 5 列グリッドはモバイルでもレスポンシブですか?

はい。モバイル端末ではレイアウトが自動的に調整されます。ただし、画面サイズによっては、読みやすさを向上させるため、2行あたりの表示項目数が少なくなる場合があります（例：3～XNUMX列）。

3. 行要素とカルーセル要素のどちらを使用すればよいですか?

静的な5列レイアウトにはRow要素を使用します。省スペースでスクロール可能なデザイン（モバイルに最適）が必要な場合は、Carousel要素の方が適しています。

4. 5 列のグリッド内で異なる要素を混在させることはできますか?

はい。商品要素、画像、その他の要素を各列にドロップできます。