モバイルで列/コンテンツを並べ替える

モバイルで列を並べ替えることが重要な理由

デフォルトでは、 デスクトップで水平に並べられた行は、モバイルでは垂直に並べられる。ただし、自動列順序が希望のレイアウトと一致しない場合があります。 

具体的な例を挙げますと、以下の通りです。

あなたは Shopify ストアのオーナーです。2 列の行を持つデスクトップ レイアウトを設計しました。

• コラム1 – 画像
• コラム2 – 専門家の考えとCTAボタン

デスクトップでは、このレイアウトはスムーズに流れます。しかし、モバイルでは、コンテンツはデフォルトで垂直に積み重ねられます。問題は次のとおりです。

• 最初に画像が表示されますが、CTAボタンの前にお客様の声が表示されます。 CTAをページの下の方に移動させる.
• ユーザーはCTAに到達する前に興味を失う可能性がある。 コンバージョン率に影響を与える.

ページがデスクトップからモバイルに移行するときに、列の順序が正しいことを確認すると、フローと読みやすさが維持されます。 

適切に整理されたモバイル レイアウトはユーザー エクスペリエンスを向上させ、訪問者がコンテンツ内を移動して操作しやすくなります。 

モバイルで列を並べ替えるには、次の簡単な手順に従います。

モバイルで列を並べ替える方法（ステップバイステップ）

ステップ1： まずはページを開いて GemPages エディター並べ替えたいコンテンツがある行に移動します。

ステップ2： モバイルビューを選択します。

ステップ3： 調整したい列を含む行をクリックします。これにより、エディターの左側に行の設定パネルが表示されます。

ステップ4： 列の順序を変更する モバイルレイアウトに最適なものを選択してください。 

これにより、コンテンツが垂直スタックにどのように表示されるかを完全に制御できます。

ステップ5： 列の新しい順序を確認したら、 'セーブ' その後 '公開' 変更内容をサイトにリアルタイムで適用します。

最終的なヒント

• レイアウトをテストする 複数のモバイル画面サイズ 最良の結果を得るために。
  
• キープ CTAと主要メッセージ 視認性を高めるために、上半分に表示します。
  
• 検討 行の複製 レイアウト ロジックが複雑になりすぎる場合は、デスクトップとモバイルで比較します。