레이아웃 모드를 사용하여 구성 요소 크기 변경

대화형 통신 웹 채널 작성 인터페이스를 사용하면 레이아웃 모드를 사용하여 구성 요소의 크기를 조정할 수 있습니다. 열 내에 파란색 점을 드래그하여 놓아 구성 요소를 배치할 시작 및 종료 점을 정의합니다. 응답형 그리드 내에서 구성 요소를 탭하면 파란색 점이 표시됩니다. 응답형 격자는 12개의 동일한 열로 구성됩니다. 대체 열의 흰색 및 파란색 음영은 한 열과 다른 열을 구별합니다.

레이아웃 모드를 사용하여 데스크톱, 태블릿, 휴대폰 및 기타 작은 장치와 같은 모든 장치 유형에 대한 구성 요소의 크기를 조정할 수 있습니다. 태블릿은 데스크탑 버전에서 레이아웃 구성을 자동으로 파생하고 작은 장치는 휴대폰에서 레이아웃 구성을 파생시킵니다. 그러나 자동으로 파생된 구성을 재정의하여 각 장치 유형에 대해 다른 구성을 정의할 수 있습니다.

노트

을 사용하여 웹 채널을 만드는 경우 채널을 마스터로 인쇄 대화형 커뮤니케이션의 경우, 크기를 조정할 수 있는 구성 요소에는 인쇄 채널을 사용하여 웹 채널에서 자동으로 생성되는 하위 양식과 필드도 포함됩니다. 웹 채널은 레이아웃 모드에서 인쇄 채널 요소의 레이아웃을 유지합니다.

액세스 레이아웃 모드

선택 레이아웃 Interactive Communication 작성 인터페이스 옆에 표시되는 드롭다운 목록에서 미리 보기 선택 사항입니다. 양식은 레이아웃 모드로 표시됩니다.

  1. AEM 작성자 인스턴스에 로그인하고 다음 위치로 이동합니다. Adobe Experience Manager > Forms > Forms 및 문서.

  2. 새 만들기 또는 기존 열기 대화형 통신.

  3. 선택 레이아웃 을 클릭합니다. 미리 보기 선택 사항입니다. 양식은 레이아웃 모드로 표시됩니다.

    대화형 커뮤니케이션용 레이아웃 모드

구성 요소 크기 조정

  1. 레이아웃 모드에서 구성 요소를 탭하여 크기를 조정합니다. 응답형 그리드의 시작 및 끝에 파란색 점이 표시됩니다.

  2. 파란색 점을 드래그하여 놓아 응답형 그리드에서 구성 요소의 위치를 정의합니다.

    레이아웃 모드를 사용한 크기 조정

    구성 요소를 탭한 후 표시되는 도구 모음은 다음 옵션으로 구성됩니다.

    • 상위: 구성 요소의 상위 항목을 선택합니다.
    • 새 라인으로 이동: 동일한 라인 내에 여러 구성 요소가 있는 경우 구성 요소를 다음 라인으로 이동합니다.

    모든 크기 변경 사항을 실행 취소하고, 중단점 레이아웃 되돌리기 ( 중단점 되돌리기) 옵션을 선택합니다. 크기가 조정된 구성 요소의 상위 항목을 눌러 옵션을 봅니다.

    노트

    레이아웃 모드를 사용하여 표 열, 도구 모음, 도구 모음 단추 및 대상 영역 구성 요소의 크기를 조정할 수 없습니다. 스타일 모드를 사용하여 이러한 구성 요소의 크기를 조정할 수 있습니다.

목표: 표 구성 요소와 이미지 구성 요소를 삽입하고 대화형 커뮤니케이션에서 서로 평행하게 배치하려고 합니다.

  1. 대화형 커뮤니케이션의 웹 채널에서 편집 모드를 사용하여 테이블 및 이미지 구성 요소를 삽입합니다. 이미지 구성 요소는 표 구성 요소 뒤에 표시됩니다.

  2. 레이아웃 모드로 전환하고 표 구성 요소를 탭합니다. 구성 요소 크기를 조정할 파란색 점은 1 및 12열에 표시됩니다.

  3. 열 12에 있는 파란색 점을 응답형 그리드의 열 6으로 끌어다 놓습니다.

    테이블의 끝점 정의

  4. 마찬가지로 이미지 구성 요소를 선택하고 1열에 있는 파란색 점을 응답형 격자의 열 7로 드래그하여 놓습니다. 테이블 및 이미지 구성 요소가 서로 평행하게 표시됩니다.

    표 및 이미지가 레이아웃 모드에서 동시에 표시됨

    이미지 구성 요소를 선택하고 새 라인으로 이동 도구 모음에서 사용 가능한 옵션을 사용하여 이미지 구성 요소를 다음 라인으로 이동합니다.

패널 크기 조정

개별 구성 요소 대신 전체 패널의 크기를 조정하려면 다음 단계를 실행합니다.

  1. 패널에서 크기를 조정할 구성 요소를 탭하고 선택합니다 상위 선택및 드롭다운 목록에서 첫 번째 옵션을 선택합니다. 패널이 구성 요소의 바로 아래 상위 패널인 경우 이 옵션을 선택합니다.

    응답형 그리드의 시작 및 끝에 파란색 점이 표시됩니다.

  2. 파란색 점을 드래그하여 놓아 응답형 그리드에서 패널의 위치를 정의합니다.
    1단계와 2단계를 반복하고 을 선택할 수 있습니다 상위 선택 크기를 조정할 때

패널에 대한 다중 열 레이아웃 정의

다음 단계를 실행하여 패널의 열 수를 정의합니다.

  1. in 편집 모드, 패널 탭, 선택 구성, 을(를) 선택하고 을(를) 선택합니다. 응답형 - 탐색 없이 페이지의 모든 사항 옵션 패널 레이아웃 드롭다운 목록.

  2. 저장 속성을 저장합니다.

  3. 에서 레이아웃 모드, 패널에서 구성 요소를 탭하고 상위 선택를 클릭하고 패널을 선택합니다.

  4. 다중 열 및 드롭다운 목록에서 열 수를 선택합니다. 열 수는 1부터 12까지입니다. 패널은 다중 열 레이아웃으로 분할됩니다.

레이아웃 모드에서 다중 열

이전 응답형 레이아웃이 있는 양식의 레이아웃 모드 비활성화

양식에 사용된 템플릿에 대한 속성을 편집하여 이전 응답형 레이아웃이 있는 양식의 레이아웃 모드를 비활성화할 수 있습니다.

레이아웃 모드를 비활성화하려면 다음 단계를 수행하십시오.

  1. 선택 도구 > 일반 > 템플릿 양식에 사용된 템플릿을 편집 모드.

  2. 왼쪽 창에서 문서 컨테이너 를 선택하고 정책.

    레이아웃 모드 비활성화

  3. 탭하기 레이아웃 설정 탭을 선택하고 레이아웃 모드 비활성화.

  4. 변경 내용 저장 템플릿 속성을 저장하려면 을 클릭합니다.

이 페이지에서는