에서 작성 Quebec 된 페이지의 레이아웃 변경 Rome

레이아웃 디자인을 추가하고 수정하여 페이지의 모양을 변경합니다. Flexbox 및 CSS 그리드와 같은 CSS 웹 레이아웃 기술을 통해 구성요소가 페이지에 표시되는 방식을 선택합니다.

시작하기 전에

필요한 역할: ui_builder_admin

이 태스크 정보

레이아웃은 페이지에서 사용할 수 있는 컨테이너와 구성요소의 위치와 위치를 제어합니다. CSS 규칙이 적용됩니다. 다음과 같이 레이아웃을 변경할 수 있습니다.

프로시저

1. 다음으로 이동 모두 > Now Experience 프레임워크 > UI 빌더.
2. 선택하여 작업할 경험을 열거나 경험을 생성합니다. 작성 > 경험.
   경험 생성에 대한 자세한 내용은 다음을 참조하십시오 에서 사용자가 애플리케이션과 상호 작용하는 방법 구성 UI 빌더 .
3. 페이지를 만들거나 엽니다.
4. 레이아웃 탭을 선택합니다.
5. 페이지 유형에 따라 다음 중 하나를 수행하여 업데이트할 컨테이너를 선택합니다.

   페이지 유형	지침
   기존 페이지	페이지에서 레이아웃을 변경할 컨테이너를 선택합니다. 주: 또는 메인 페이지 영역의 왼쪽에 있는 컨텐츠 트리에서 컨테이너를 선택할 수 있습니다. 페이지 구조가 구조화된 트리에 있으면 변경하려는 컨테이너를 더 쉽게 찾을 수 있습니다. 컨텐츠 트리에 구성요소와 컨테이너가 많은 경우 검색 창을 사용하여 특정 컨테이너를 찾습니다.
   새 페이지	메인 페이지 영역 왼쪽의 컨텐츠 트리에서 페이지의 본문을 선택합니다. 본문 은 페이지의 루트 요소입니다.

   새 페이지를 시작하는 경우 페이지 수준에서 레이아웃을 선택하고 나중에 컨테이너 수준에서 레이아웃을 선택할 수 있습니다. 기존 페이지의 소유자가 아닌 경우 페이지 수준에서 레이아웃 변경이 미치는 영향을 알고 있어야 합니다.
6. 컨테이너의 레이아웃을 변경합니다.
   1. 페이지 구성 창에서 레이아웃 탭을 선택하여 사용할 레이아웃을 선택합니다.

      기존 페이지의 현재 레이아웃을 새 레이아웃으로 변경할 수 있습니다. 예를 들어 3열 레이아웃에서는 4열 레이아웃을 클릭하여 레이아웃을 변경할 수 있습니다.

      컨테이너의 레이아웃을 설정할 수도 있습니다. 다음 이미지는 UI 빌더의 레이아웃 옵션을 보여줍니다.

      

   2. 페이지를 생성하는 경우 레이아웃의 새 영역에 구성요소를 추가합니다.
   3. 저장을 클릭합니다.
   4. 웹 선택하여 페이지를 보고 테스트합니다.
   기존 페이지를 변경하기 위해 다음 비디오는 컨테이너 레이아웃을 3열에서 4열로 변경한 다음 네 번째 열에 새 구성요소를 추가하는 방법을 보여줍니다.

   

   새 페이지의 레이아웃을 설정하기 위해 다음 비디오는 페이지에 대해 원하는 레이아웃을 설정하는 방법을 보여줍니다. 예를 들어 페이지에 두 개의 슬롯 또는 열이 있도록 설정할 수 있습니다. 그런 다음 각 슬롯에 컨테이너를 추가하고 각 컨테이너의 레이아웃을 변경할 수 있습니다. 페이지에 컨테이너를 추가한 후 컨테이너 수준에서 레이아웃을 설정할 수도 있습니다.

   그림 1. 페이지 레이아웃 변경

   

7. 슬롯에 구성요소를 추가합니다.
   컨테이너 구성요소로 페이지를 빌드합니다. 자세한 내용은 구성요소를 사용하여 페이지 사용자 지정 UI 빌더 문서를 참조하십시오.

   다음 방법 중 하나를 사용하여 구성요소를 추가할 수 있습니다.

   구성요소를 추가하려면	수행 방법
   페이지에서 직접(옵션 1)	콘텐츠 추가(더하기) 아이콘을 선택하고 구성요소 탭을 선택한 다음 구성요소를 선택합니다.
   페이지에서 직접(옵션 2)	열 레이아웃 또는 구성요소에서 이전 추가(더하기) 또는 뒤에 추가(더하기) 아이콘을 선택한 다음 구성요소를 선택합니다.
   콘텐츠 트리에서	콘텐츠 트리에서 + 콘텐츠 추가 를 선택한 다음, 구성요소를 선택합니다.
   페이지 위의 플로팅 메뉴에서	열 레이아웃 또는 구성요소에서 메뉴 아이콘을 선택하고 이전 추가 또는 이후 추가를 선택한 다음 구성요소를 선택합니다.

8. 다음과 같은 방법으로 레이아웃 스타일 옵션을 수정합니다.

   옵션	지침
   레이아웃 스타일 변경	레이아웃을 변경할 컨테이너를 클릭합니다. 컨텐츠 트리에서 컨테이너를 클릭하거나 페이지에서 컨테이너를 클릭할 수 있습니다. 페이지 위의 플로팅 메뉴에서 레이아웃을 클릭합니다. 컨텐츠를 Flex 또는 Grid로 표시하도록 선택합니다. 자유 선택 또는 그리드 옵션에 대한 자세한 내용은 또는 문서를 CSS 그리드 레이아웃을 사용하여 페이지 빌드참조하십시오에서 Flexbox 레이아웃 사용 UI 빌더.
   플렉스 선택	표시 목록에서 Flex를 선택합니다. 페이지에 컨테이너 컨텐츠를 표시하는 방법에 따라 다음 옵션을 선택합니다. CSS 스타일 상자에도 옵션을 입력할 수 있습니다. 자유 선택 방향: 행, 행 역방향, 열 또는 열 역방향 중에서 선택합니다. 컨텐츠 정당화: 다음 중 하나를 선택합니다. Flex-start: 항목은 왼쪽으로 정렬된 콘텐츠와 비슷하게 플렉스 방향의 시작 부분에 있습니다. 이것이 기본 설정입니다. 플렉스 끝: 항목은 오른쪽 맞춤 콘텐츠와 유사하게 플렉스 방향의 끝에 있습니다. 간격: 항목이 균등하게 분배됩니다. 주변 공간: 항목이 주변에 동일한 공간을 두고 고르게 분포됩니다. 공간 균등: 항목 간의 간격이 동일합니다. 항목 정렬: 자유 선택 콘텐츠가 교차 축을 따라 표시되는 방법을 정의합니다. 선택 항목은 다음과 같습니다. 스트레치: 콘텐츠를 늘려 컨테이너를 채웁니다. 이것이 기본 설정입니다. Flex-start: 콘텐츠를 교차 축의 시작 부분에 배치합니다. Flex-end: 십자축의 끝에 콘텐츠를 배치합니다. 가운데: 콘텐츠를 십자축의 중심에 배치합니다. 기준선: 기준선 정렬과 동일하게 콘텐츠를 정렬합니다. 높이: 높이를 자동 또는 수동으로 설정합니다. 너비: Flexbox 항목의 높이를 자동 또는 수동으로 설정합니다. 여백: 플렉스박스 항목 사이의 최소 거리를 설정합니다. 패딩: Flexbox 항목의 각 면에 대한 패딩을 설정합니다.
   그리드 선택	표시 목록에서 그리드를 선택합니다. 다음 정보를 입력합니다. 높이: 높이를 자동 또는 수동으로 설정합니다. 너비: 그리드 항목의 높이를 자동 또는 수동으로 설정합니다. 여백: 그리드 항목 사이의 최소 거리를 설정합니다. 패딩: 그리드 항목의 각 면에 대한 패딩을 설정합니다.