We.Retail のレスポンシブレイアウトの使用

すべてのWeb.Retailページで、レスポンシブデザインの実装にレイアウトコンテナコンポーネントが使用されます。 レイアウトコンテナは、レスポンシブグリッド内にコンポーネントを配置できる段落システムを提供します。このグリッドでは、デバイスやウィンドウのサイズおよび形式に従ってレイアウトを再編成できます。このコンポーネントは、ページエディターの​レイアウト​モードと組み合わせて使用されます。これにより、デバイスに依存したレスポンシブレイアウトを作成および編集できます。

試してみる

1. 言語マスターブランチの「エクスペリエンス」セクションで Arctic Surfing ページを編集します。

   http://localhost:4502/editor.html/content/we-retail/language-masters/en/experience/arctic-surfing-in-lofoten.html

2. プレビュー​に切り替えて、Web サイトの訪問者に表示されるページを確認します。記事「Aloha spirits in Norther Norway」**​のコンテンツまでスクロールダウンします。

   

3. ブラウザーウィンドウのサイズを変更し、そのサイズ変更に対してレイアウトが動的に調整されることを確認します。

   

4. レイアウトモードに切り替えます。エミュレーターツールバーが自動的に表示されます。このツールバーを使用して、ターゲットデバイスごとにレイアウトを計画できます。

   コンポーネントを選択すると、編集メニューにフローティングおよび非表示オプションと共に、コンポーネントのサイズ変更ハンドルが表示されます。

   

5. コンポーネントのサイズ変更ハンドルを選択してドラッグすると、サイズ変更に役立つレイアウトグリッドが自動的に表示されます。

   

その他の情報

詳しくは、オーサリングドキュメントレスポンシブレイアウトまたは管理者ドキュメントレイアウトコンテナとレイアウトモードの設定を参照してください。