We.Retail에서 응답형 레이아웃 시험 사용 trying-out-responsive-layout-in-we-retail

Last update: Thu May 04 2023 00:00:00 GMT+0000 (Coordinated Universal Time)

주제:
Developing

작성 대상:

Developer

CAUTION

AEM 6.4가 확장 지원이 종료되었으며 이 설명서는 더 이상 업데이트되지 않습니다. 자세한 내용은 기술 지원 기간. 지원되는 버전 찾기 여기.

모든 We.Retail 페이지는 레이아웃 컨테이너 구성 요소를 사용하여 응답형 디자인을 구현합니다. 레이아웃 컨테이너는 응답형 격자 내에 구성 요소를 배치할 수 있도록 해주는 단락 시스템을 제공합니다. 이 격자를 사용하면 디바이스/창 크기 및 형식에 따라 레이아웃을 다시 정렬할 수 있습니다. 구성 요소는 과 함께 사용됩니다 레이아웃 모드 : 장치에 따라 응답형 레이아웃을 만들고 편집할 수 있도록 페이지 편집기에서 입니다.

사용해 보기 trying-it-out

언어 마스터 분기의 경험 섹션에서 북극 서핑 페이지를 편집합니다.

http://localhost:4502/editor.html/content/we-retail/language-masters/en/experience/arctic-surfing-in-lofoten.html
다음으로 전환 미리 보기 페이지를 웹 사이트 방문자에게 렌더링할 때처럼 확인합니다. 문서의 컨텐츠로 스크롤합니다. 노르웨이의 알로하 주령.
브라우저 창의 크기를 조정하고 레이아웃이 크기 조정에 동적으로 적응하는 것을 볼 수 있습니다.
레이아웃 모드로 전환합니다. 에뮬레이터 도구 모음이 자동으로 표시되어 타깃팅된 장치별로 레이아웃을 계획할 수 있습니다.

구성 요소를 선택하면 구성 요소에 대한 크기 조정 핸들과 함께 편집 메뉴에 부동 및 숨기기 옵션이 표시됩니다.
구성 요소의 크기 조정 핸들을 잡고 드래그하면 크기 조정을 지원하기 위해 레이아웃 격자가 자동으로 표시됩니다.