We.Retail のレスポンシブレイアウトの使用 trying-out-responsive-layout-in-we-retail

CAUTION
AEM 6.4 の拡張サポートは終了し、このドキュメントは更新されなくなりました。 詳細は、 技術サポート期間. サポートされているバージョンを見つける ここ.

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

試す trying-it-out

  1. 言語 master ブランチの「エクスペリエンス」セクションで、 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」のコンテンツまでスクロールダウンします。

    chlimage_1-178

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

    chlimage_1-179

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

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

    chlimage_1-180

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

    chlimage_1-181

その他の情報 further-information

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

recommendation-more-help
2315f3f5-cb4a-4530-9999-30c8319c520e