열 레이아웃

열 레이아웃은 페이지를 디자인하고 구성 UI 빌더 하는 데 사용됩니다.

이 비디오는 다음 절차를 수행하는 방법을 보여줍니다.

열 레이아웃을 사용하면 경험에서 유용하고 시각적으로 매력적인 페이지를 만들 수 있습니다. 열 레이아웃은 구성요소를 저장할 수 있는 유연한 컨테이너 유형입니다. 열 레이아웃은 미리 구성된 단순한 레이아웃으로, 효율적이고 매력적인 페이지를 빠르게 디자인할 수 있습니다. 구성요소를 추가하기 전에 열 레이아웃으로 페이지 구조를 정의하고 설정하는 것이 유용합니다.

열 레이아웃에는 너비가 같거나 다른 열이 있을 수 있습니다.

열 레이아웃을 전체적으로 구성하고 레이아웃 내의 개별 열을 구성할 수 있습니다. 예를 들어 열 레이아웃과 레이아웃 내의 개별 열에 대해 다른 테두리 너비와 색상을 설정합니다.

주:

현재 조건에 따라 열 레이아웃에서 열 숨기기/표시는 지원되지 않습니다.

열 레이아웃 추가

에서 열 레이아웃 UI 빌더 을 추가하여 경험 페이지에서 구성요소를 빌드하고 구성합니다.

시작하기 전에

필요한 역할: ui_builder_admin

프로시저

1. 다음으로 이동 모두 > Now Experience 프레임워크 > UI 빌더.
2. 선택하여 작업할 경험을 열거나 경험을 생성합니다. 작성 > 경험.
   경험 생성에 대한 자세한 내용은 다음을 참조하십시오 에서 사용자가 애플리케이션과 상호 작용하는 방법 구성 UI 빌더 .
3. 에서 페이지 생성 UI 빌더 페이지를 엽니다.
4. 콘텐츠 트리에서 + 콘텐츠 추가 를 선택합니다.
5. 레이아웃 탭에서 기본 옵션 중 하나를 선택합니다.
   
   열에 구성요소를 추가할 수 있도록 열 레이아웃이 스테이지에 나타납니다. 자세한 내용은 구성요소 추가 및 구성 문서를 참조하십시오.
6. 위 또는 아래에 열 레이아웃을 추가합니다.
   • 콘텐츠 트리에서 열 레이아웃 이름을 길게 누르거나 마우스 오른쪽 버튼으로 클릭하거나 열 레이아웃에 대한 메뉴 아이콘을 선택합니다. 그런 다음 목록에서 이전 추가 또는 이후에 추가 를 선택하고 레이아웃을 선택합니다.

     

   • 스테이지에서 열 레이아웃을 선택한 다음 위쪽 또는 아래쪽에 있는 더하기 기호를 선택합니다.

     

열 레이아웃 구성

에서 열 레이아웃 UI 빌더 을 구성하여 적절한 열 수와 경험 페이지에서 원하는 모양을 추가합니다.

시작하기 전에

필요한 역할: ui_builder_admin

프로시저

1. 다음으로 이동 모두 > Now Experience 프레임워크 > UI 빌더.
2. 선택하여 작업할 경험을 열거나 경험을 생성합니다. 작성 > 경험.
   경험 생성에 대한 자세한 내용은 다음을 참조하십시오 에서 사용자가 애플리케이션과 상호 작용하는 방법 구성 UI 빌더 .
3. 에서 페이지 생성 UI 빌더 페이지를 엽니다.
4. 페이지에 열 레이아웃 열 레이아웃 추가이 아직 포함되어 있지 않은 경우 .
5. 콘텐츠 트리, 스테이지 또는 구성 패널을 사용하여 열을 추가합니다(최대 6개).
   • 콘텐츠 트리에서 열 이름을 길게 누르거나 마우스 오른쪽 버튼으로 클릭하거나 열의 메뉴 아이콘을 선택한 다음 목록에서 다음 앞에 열 추가 또는 뒤에 열 추가 를 선택합니다.

     

   • 스테이지에서 단일 열을 선택하고 열 이름 옆에 있는 메뉴 아이콘을 선택한 다음 목록에서 다음 앞에 열 추가 또는 다음에 열 추가 를 선택합니다.

     

   • 스테이지에서 열을 길게 선택하거나 마우스 오른쪽 버튼으로 클릭한 다음 목록에서 다음 앞에 열 추가 또는 뒤에 열 추가 를 선택합니다.

     

   • 콘텐츠 트리에서 열 레이아웃을 선택한 다음 스테이지에서 + 더하기 아이콘을 선택하여 열 레이아웃의 오른쪽에 열을 추가합니다.

     

   • 콘텐츠 트리에서 열 레이아웃을 선택한 다음 구성 패널에서 열 옆에 있는 + 더하기 아이콘을 사용하여 열 레이아웃의 오른쪽에 열을 추가합니다.

     

   주:

   열은 서로 중첩될 수 있지만 페이지에서는 이러한 수준의 복잡성이 필요하지 않습니다.
6. 콘텐츠 트리, 스테이지 또는 구성 패널에서 열 레이블을 편집하여 열 이름을 바꿉니다.
   • 콘텐츠 트리에서 열 이름을 길게 누르거나 마우스 오른쪽 버튼으로 클릭하거나 열의 메뉴 아이콘을 선택하고 이름 바꾸기를 선택합니다.
   • 스테이지에서 열 이름 옆에 있는 메뉴 아이콘을 선택하고 이름 바꾸기를 선택합니다.
   • 구성 패널에서 열 이름 옆에 있는 정보 아이콘을 선택합니다.

     

   열 이름을 바꾸면 스테이지와 컨텐츠 트리에서 서로 다른 열을 구별하는 데 도움이 됩니다. 열 레이아웃과 열이 많은 복잡한 페이지가 있는 경우 열 이름을 바꾸는 것이 좋습니다.
7. 레이아웃에서 열의 너비를 변경하려면 열 레이아웃(컨텐츠 트리 또는 스테이지)을 선택한 다음 스테이지의 열 구분선을 왼쪽이나 오른쪽으로 끌어 열을 더 좁거나 넓게 만듭니다.
   
   열 구분선을 끌면 열 맨 위에 있는 너비 백분율이 자동으로 변경됩니다. 백분율을 더하면 최대 100%가 됩니다. 열 크기를 조정할 때 열 내의 구성요소에 필요한 공간을 알고 있어야 합니다. 예를 들어 목록 및 양식 구성요소는 일반적으로 좁은 열에 잘 표시되지 않습니다.
8. 콘텐츠 트리, 스테이지 또는 구성 패널을 사용하여 레이아웃의 열을 가로로 고르게 분배합니다.
   • 콘텐츠 트리에서 열 레이아웃 이름을 길게 누르거나 마우스 오른쪽 버튼으로 클릭하거나 열 레이아웃에 대한 메뉴 아이콘을 선택한 다음 목록에서 열 균등하게 분배를 선택합니다.
   • 스테이지에서 열 레이아웃을 선택하고 열 레이아웃 이름 옆에 있는 메뉴 아이콘을 선택한 다음 목록에서 열 균등 분배를 선택합니다.
   • 열 레이아웃(컨텐츠 트리 또는 스테이지)을 선택하고 구성 패널에서 열 균등하게 분배를 선택합니다.
9. 콘텐츠 트리 또는 스테이지를 사용하여 열 레이아웃 내에서 열(콘텐츠 포함)의 순서를 변경합니다.
   • 콘텐츠 트리에서 열을 선택하고 다른 위치로 끕니다(파란색 가로선은 열을 놓을 수 있는 위치를 표시함).

     

   • 스테이지에서 열 헤더를 선택하고 열을 다른 위치로 끌어서 자홍색 세로 선으로 정의된 드롭존에 열을 놓습니다.

     

   컨텐츠 트리에서 열의 순서를 변경하면 스테이지가 업데이트되고 스테이지에서 순서를 변경하면 컨텐츠 트리가 업데이트됩니다.
10. 콘텐츠 트리, 스테이지 또는 구성 패널의 열 사이의 공간 크기를 지정합니다.
    • 콘텐츠 트리에서 열 레이아웃 이름을 길게 누르거나 마우스 오른쪽 버튼으로 클릭하거나 열 레이아웃에 대한 메뉴 아이콘을 선택한 다음 목록에서 레이아웃 을 선택한 다음 열 간격에서 크기 옵션을 선택합니다.
    • 스테이지에서 열 레이아웃을 선택하고, 열 레이아웃 이름 옆에 있는 메뉴 아이콘을 선택하고, 목록에서 레이아웃 을 선택하고, 열 간격에서 크기 옵션을 선택합니다.
    • 열 레이아웃(컨텐츠 트리 또는 스테이지)을 선택하고 구성 패널의 열 간격에서 크기 옵션을 선택합니다.

      

11. 트리 아이콘을 선택하여 컨텐츠의 다른 레이어(예: 열에서 상위 열 레이아웃 또는 하위 구성요소로)로 이동합니다.
    
12. 컨텐츠 트리 또는 스테이지에서 열을 삭제합니다.
    • 콘텐츠 트리에서 열 이름을 길게 누르거나 마우스 오른쪽 버튼으로 클릭하거나 열의 메뉴 아이콘을 선택한 다음 목록에서 열 삭제 를 선택합니다.
    • 스테이지에서 단일 열을 선택하고 열 이름 옆에 있는 메뉴 아이콘을 선택한 다음 목록에서 열 삭제 를 선택합니다.
    • 콘텐츠 트리에서 열 레이아웃을 선택한 다음 구성 패널에서 열 옆에 있는 빼기 아이콘을 사용하여 열 레이아웃의 오른쪽에서 열을 제거합니다.
    열 간격 편집에 대한 자세한 내용은 다음 문서를 참조하십시오 열의 구성요소 간 간격 설정.

열의 구성요소 간 간격 설정

UI 빌더에서 열에 여러 구성요소가 포함된 경우 구성요소 사이의 간격을 설정합니다.

시작하기 전에

필요한 역할: ui_builder_admin

프로시저

1. 다음으로 이동 모두 > Now Experience 프레임워크 > UI 빌더.
2. 선택하여 작업할 경험을 열거나 경험을 생성합니다. 작성 > 경험.
   경험 생성에 대한 자세한 내용은 다음을 참조하십시오 에서 사용자가 애플리케이션과 상호 작용하는 방법 구성 UI 빌더 .
3. 에서 페이지 생성 UI 빌더 페이지를 엽니다.
4. 페이지에 열 레이아웃 열 레이아웃 추가이 아직 포함되어 있지 않은 경우 .
5. 단일 열 내에 두 개의 구성요소를 추가합니다
   1. 콘텐츠 트리에서 열을 식별하고 열 이름 아래에서 + 콘텐츠 추가 를 선택합니다.
   2. 도구 상자 창에서 구성요소(예: 아바타)를 선택합니다.
   3. 컨텐츠 트리에서 방금 추가한 구성요소의 이름 위로 마우스를 이동하고, 메뉴 열기(세로 점 3개) 아이콘을 선택하고, Add after (뒤에 추가) 를 선택합니다.
      
   4. 도구 상자 창에서 다른 구성요소( 예: 버튼)를 선택합니다.
6. 저장을 선택합니다.
7. 콘텐츠 트리에서 두 구성요소를 추가한 열을 선택합니다.
8. 구성 패널의 간격에서 크기 옵션을 선택합니다.
   
9. 정확한 간격 크기를 픽셀 단위로 지정하려면 간격 필드 위로 마우스를 이동하고 사용자 지정 값 사용 (연필) 아이콘을 선택한 다음 숫자( 예: 300px)를 입력합니다.
   
10. 구성요소를 스택하는 것과 열에서 나란히 배치하는 사이를 변경하려면 방향에서행 또는 열 아이콘을 선택합니다.
    

    열에서 구성요소의 순서와 배치를 반대로 하려면 방향에서고급(세 개의 가로 점) 아이콘을 선택한 다음 반전 옵션을 선택합니다.

    

고급 열 레이아웃 옵션 설정

스택 너비 및 열 레이아웃 높이를 포함한 고급 열 레이아웃 옵션을 UI 빌더 설정합니다.

시작하기 전에

필요한 역할: ui_builder_admin

프로시저

1. 다음으로 이동 모두 > Now Experience 프레임워크 > UI 빌더.
2. 선택하여 작업할 경험을 열거나 경험을 생성합니다. 작성 > 경험.
   경험 생성에 대한 자세한 내용은 다음을 참조하십시오 에서 사용자가 애플리케이션과 상호 작용하는 방법 구성 UI 빌더 .
3. 에서 페이지 생성 UI 빌더 페이지를 엽니다.
4. 페이지에 열 레이아웃 열 레이아웃 추가이 아직 포함되어 있지 않은 경우 .
5. 콘텐츠 트리에서 두 개 이상의 열이 포함된 열 레이아웃을 선택합니다.
   
6. 스택 너비를 설정하려면 구성 패널 > 레이아웃 으로 이동하여 고급 레이아웃 옵션 표시를 선택합니다.
   주:

   스택 너비를 설정하면 열 레이아웃이 있는 페이지가 좁은 브라우저 창, 태블릿 또는 모바일 장치에서 어떻게 보이는지 제어할 수 있습니다.

   
7. 아래 스택 열에 너비를 입력합니다.
8. 저장을 선택합니다.
9. 업데이트된 스택 너비를 테스트하려면 미리 보기 옆의 화살표를 선택하고 URL 경로 열기를 선택합니다.
10. 브라우저 창 너비를 지정한 스택 너비보다 작게 줄여 오른쪽의 열이 첫 번째 열 아래로 이동하는지 확인합니다.
11. URL 경로와 함께 열린 브라우저 탭을 닫습니다.
12. 열 레이아웃 높이를 제어하려면 콘텐츠 트리에서 두 개 이상의 열이 있는 열 레이아웃을 선택하고 구성 패널 > 레이아웃으로 이동한 다음 고급 레이아웃 옵션 표시를 선택합니다.
    주:

    열 레이아웃에 목록 구성요소와 같이 키가 클 수 있는 구성요소가 포함된 경우 높이 설정이 유용합니다.
13. 크기 조정에서 하나 이상의 옵션(높이, 최소값. H 및 최대. H)을 클릭하고 크기 조정 단위(예: px, % 또는 em)를 설정합니다.
    
14. 저장을 선택합니다.
15. 업데이트된 크기를 테스트하려면 미리 보기 옆의 화살표를 선택하고 URL 경로 열기를 선택합니다.
16. 브라우저 창 높이를 줄이거나 확장하여 지정된 값을 테스트합니다.
17. URL 경로와 함께 열린 브라우저 탭을 닫습니다.