구조 구성 요소 structure-components

시각적 디자인 공간에서 구조 구성 요소​를 사용하여 콘텐츠의 구조를 정의합니다. 간단한 드래그 앤 드롭 작업으로 구조 요소를 추가 및 이동하여 콘텐츠 레이아웃의 모양을 빠르게 정의할 수 있습니다. 각 구조 구성 요소는 가로 공간에 걸쳐 있으며 이를 스택하여 레이아웃을 세로로 작성할 수 있습니다.

구조 라이브러리 structure-library

구성 요소 라이브러리의 맨 위에 있는 구조 섹션에 사용 가능한 구조 구성 요소가 표시됩니다.

구조 구성 요소 추가 add-structure-components

이메일, 랜딩 페이지 또는 조각에 대한 콘텐츠를 디자인할 때 각 구조 구성 요소를 추가하여 레이아웃을 구성합니다. 왼쪽의 구조 섹션에서 항목을 드래그하여 캔버스에 놓습니다. 도구 모음을 사용하여 열을 선택하고 오른쪽 패널의 설정 및 스타일 탭을 사용하여 선택한 구성 요소 또는 열의 매개 변수를 정의할 수 있습니다.

{width="800" modal="regular"}

구성 요소 도구 모음 component-toolbar

도구 모음은 캔버스에서 선택하면 캔버스에 표시됩니다. 사용 가능한 도구를 사용하여 열을 선택하고 구성 요소 함수를 적용하는 간편한 방법을 제공합니다.

{width="150"}

구성 요소 설정 component-settings

구성 요소를 추가하면 시각적 디자인 공간에서 해당 구성 요소가 선택되고 오른쪽 패널에 해당 속성이 표시됩니다. 기본적으로 설정 탭이 표시됩니다. 언제든지 구조 구성 요소를 선택하여 설정을 변경할 수도 있습니다.

표시 옵션

데스크톱 또는 모바일 장치 표시에서 구성 요소를 제외하려면 표시 옵션 설정을 변경합니다. 기본값인 모든 장치에서 표시​를 사용하면 모든 장치에서 표시할 수 있습니다.

{width="400" modal="regular"}

장치 유형별로 구성 요소를 배타적으로 설정하려면 다른 설정을 선택하십시오.

머리글 및 바닥글

구조 구성 요소를 이메일 메시지 또는 랜딩 페이지에서 HTML 머리글 또는 바닥글로 지정할 수 있습니다. 캔버스에서 구조 구성 요소를 선택한 상태에서 머리글 또는 바닥글 옵션을 클릭합니다. 머리글이나 바닥글은 하나만 있을 수 있으며 다른 구성 요소가 할당되면 이 옵션을 사용할 수 없습니다.

{width="600" modal="regular"}

구성 요소를 선택하고 옵션을 클릭하여 머리글 또는 바닥글 지정을 제거할 수 있습니다.

누적 열 stacked-columns

작은 화면이나 표시 창의 경우 기본 설정을 변경하지 않는 한 구조 구성 요소의 열이 스택되어 표시됩니다. 다중 열 구조 구성 요소를 선택한 상태에서 토글 슬라이더를 오른쪽으로 이동하여 모바일에서 열을 스택하지 않음 설정을 변경합니다.

{width="250"}

구성 요소 스타일 component-styles

구성 요소를 추가하면 시각적 디자인 공간에서 해당 구성 요소가 선택되고 오른쪽 패널에 해당 속성이 표시됩니다. 언제든지 구성 요소를 선택하여 설정 및 스타일을 변경할 수도 있습니다.

배경 background

오른쪽 패널에서 스타일 탭을 선택한 상태에서 배경 섹션을 사용하여 구조 구성 요소의 배경으로 사용할 색상 및 선택적 이미지를 정의합니다.

배경색

확인란을 선택하고 색상 사각형을 클릭하여 선택기에서 색상을 선택합니다. 알려진 RGB, HSL, HSB 또는 16진수 값을 입력하여 색상을 선택할 수 있습니다. 또는 색상 슬라이더와 색상 필드를 사용하여 색상을 선택합니다.

{width="300"}

배경 이미지 background-image

토글 선택기를 이동하여 배경 이미지 설정을 활성화합니다.

{width="250"}

자산 선택​을 클릭하여 자산 선택기를 엽니다. 이 선택기에서 Assets 라이브러리에서 이미지를 선택할 수 있습니다.

이미지 배치 옵션을 사용하여 이미지가 구조 구성 요소를 채우는 방법을 선택하십시오. 배치 설정은 표준 HTML 배경 이미지 채우기 및 맞춤 특성을(를) 따릅니다.

{width="250"}

기타 스타일 other-styles

다른 구조 구성 요소 스타일을 적용하여 이메일 메시지 또는 랜딩 페이지에서의 표시를 조정할 수 있습니다. 이러한 기본 제공 옵션 이상의 스타일을 보려면 콘텐츠의 사용자 지정 CSS 추가를 참조하십시오.

열 columns

구성 요소 도구 모음의 열 선택 도구를 사용하여 열을 선택합니다. 그런 다음 열 도구 모음을 사용하여 열 선택을 변경하거나 열을 제거하거나 열에 대한 조건부 콘텐츠 변형을 적용할 수 있습니다. 열의 매개 변수는 오른쪽의 설정 및 스타일 탭에 표시됩니다.

{width="500"}

n:n개 열 변경 change-nn-columns

열 너비는 대부분의 구조 구성 요소에서 정적입니다. n:n 열 구성 요소를 추가할 때 열 수와 열 크기 조정을 변경할 수 있습니다. n:n 열 구성 요소는 동일한 너비(20%)의 5개 열로 시작합니다.

캔버스에서 구성 요소를 선택한 상태에서 오른쪽 패널의 열 개수 옵션을 사용하여 열 수를 변경합니다. 위쪽 및 아래쪽 화살표 아이콘을 클릭하여 열 수를 늘리거나 줄이거나 필드에 숫자를 입력합니다.

{width="650" modal="regular"}

캔버스에서 열 크기 조정 아이콘을 이동하여 선택한 열의 너비를 조정합니다. 너비를 늘리거나 줄이면 인접한 열도 조정되어 모든 열이 구성 요소 너비의 100%를 차지합니다.

{width="500" modal="regular"}

열 스타일 column-styles

캔버스에서 열을 선택하면 해당 열에 적용할 스타일을 설정할 수 있습니다.

탐색 트리 navigation-tree

시각적 디자인 공간에서 탐색 트리를 사용하여 열 및 콘텐츠를 포함한 구조 구성 요소에 액세스할 수 있습니다. 왼쪽의 탐색 트리 아이콘( )을 클릭하여 트리를 표시합니다.

{width="800" modal="regular"}

Body 요소는 트리 구조의 루트입니다. 트리에서 구성 요소 또는 열 하위 요소를 클릭하여 캔버스에서 선택합니다. 오른쪽의 설정 및 스타일 탭에는 해당 구성 요소 또는 열의 매개 변수가 표시됩니다.

{width="800" modal="regular"}