시각적 경험 작성기 옵션

Adobe Target Visual Experience Composer (VEC)에서 페이지 요소를 클릭하면 메뉴에 해당 요소 유형에 사용할 수 있는 옵션이 표시됩니다. 또한 페이지 구조를 쉽게 탐색할 수 있는 DOM 경로가 페이지 하단에 표시됩니다.

다양한 Visual Experience Composer (VEC) 작업은 작업을 보다 빠르고 효율적으로 수행할 수 있도록 적절한 메뉴 옵션으로 그룹화됩니다.

VEC 선택 사항 메뉴

NOTE
사용 가능한 옵션은 만들거나 편집하는 활동 유형과 요소에 따라 다릅니다. 다음 섹션에는 이미지 및 텍스트에 대한 다양한 옵션에 대한 정보가 포함되어 있습니다.

이미지 옵션

A/B Test 활동에서 이미지를 클릭하면 VEC가 다음 그림과 유사합니다.

이미지가 선택된 VEC

왼쪽의 구성 요소 프레임에서 구성 요소를 선택하여 다음 요소를 삽입합니다.

이미지 맨 위에 있는 메뉴를 사용하여 다음을 수행할 수 있습니다.

  • 링크를 삽입합니다( 링크 삽입 아이콘 ).
  • 이미지를 변경합니다( 이미지 선택 아이콘 ).
  • 개인화 추가( Personalization 추가 아이콘 ).
  • 이미지를 삭제합니다( 삭제 아이콘 ).

오른쪽의 프레임을 통해 이미지의 속성을 추가로 구성할 수 있습니다.

프레임 상단의 아이콘을 사용하면 다음 작업을 수행할 수 있습니다.

  • HTML( HTML 삽입 아이콘 )을 편집합니다. 자세한 내용은 아래의 HTML 편집을 참조하십시오.
  • 이미지를 복제합니다( 복제 아이콘 ).
  • 이미지를 삭제합니다( 삭제 아이콘 ).
  • 이미지를 숨깁니다( 숨기기 아이콘 ).

오른쪽 프레임의 옵션을 사용하면 다음 작업을 수행할 수 있습니다.

  • CSS 클래스를 편집합니다.
  • 이미지의 속성(소스, 제목, 대체 텍스트)을 구성합니다.
  • 링크 URL을 편집합니다.
  • 이미지의 크기(높이 및 너비)를 구성합니다. 이미지의 최소 및 최대 크기, 너비, 높이, 오버플로 및 개체 맞춤을 구성하려면 Show Advanced Options을(를) 클릭하십시오.
  • 페이지에서 이미지의 위치(절대, 고정, 상대, 정적 또는 고정)를 구성합니다.
  • 여백 및 패딩을 포함하여 요소의 간격을 구성합니다.
  • 요소의 효과(불투명도)를 구성합니다. 이미지의 세피아, 회색 음영, 대비, 밝기 및 흐림 값을 구성하려면 Show Advanced Options을(를) 클릭합니다. 이미지를 반전하거나 회전할 수도 있습니다.
  • 이미지의 인라인 스타일을 구성합니다.

텍스트 옵션

A/B Test 활동에서 텍스트를 클릭하면 VEC가 다음 그림과 유사합니다.

텍스트가 선택된 VEC

다음 요소를 삽입하려면 왼쪽의 Components 프레임에서 구성 요소를 선택하십시오.

Show Modifications 아이콘( 수정 사항 표시 아이콘 )을 클릭하여 경험에 대한 수정 사항을 표시합니다.

텍스트 요소의 맨 위에 있는 메뉴를 사용하여 다음을 수행할 수 있습니다.

  • 텍스트 속성(제목 수준, 단락, 블록 인용 또는 고정 폭) 구성
  • 텍스트 색상 선택( 텍스트 색상 아이콘 )
  • 텍스트의 특성(굵게, 기울임꼴, 밑줄 또는 취소선)을 구성합니다( 텍스트 특성 선택 아이콘 ).
  • 텍스트의 맞춤을 구성합니다(왼쪽, 가운데, 오른쪽, 양쪽 맞춤)( 텍스트 맞춤 아이콘 ).
  • 링크를 삽입합니다( 링크 삽입 아이콘 ).
  • 콘텐츠를 HTML 오퍼, 경험 조각 또는 [권장 사항]/help/main/c-recommendations/recommendations-as-an-offer.md)으로 바꾸십시오.
  • HTML( HTML 삽입 아이콘 )을 편집합니다.
  • 개인화 추가( Personalization 추가 아이콘 ).
  • 이미지를 삭제합니다( 삭제 아이콘 ).

오른쪽의 프레임을 통해 텍스트의 속성을 추가로 구성할 수 있습니다.

프레임 상단의 아이콘을 사용하면 다음 작업을 수행할 수 있습니다.

  • HTML( HTML 삽입 아이콘 )을 편집합니다. 자세한 내용은 아래의 HTML 편집을 참조하십시오.
  • 텍스트를 복제합니다( 복제 아이콘 ).
  • 텍스트를 삭제합니다( 삭제 아이콘 ).
  • 텍스트를 숨깁니다( 숨기기 아이콘 ).

오른쪽 프레임의 옵션을 사용하면 다음 작업을 수행할 수 있습니다.

  • CSS 클래스를 편집합니다.
  • 텍스트의 배경색 및 이미지를 구성합니다.
  • 텍스트의 타이포그래피(제목 스타일, 글꼴 크기, 글꼴 두께, 줄 높이, 정렬, 텍스트 색상, 텍스트 스타일(굵게, 기울임꼴, 밑줄 또는 취소선) 구성
  • 글머리 기호, 번호 매기기 또는 A,B,C를 포함한 목록을 구성합니다.
  • 테두리 색상을 선택합니다.
  • 텍스트 상자의 크기(높이 및 너비)를 구성합니다. Show Advanced Options을(를) 클릭하여 텍스트 상자의 최소 및 최대 크기, 너비, 높이, 오버플로 및 개체 맞춤을 구성합니다.
  • 페이지에서 텍스트 상자의 위치(절대, 고정, 상대, 정적 또는 고정)를 구성하고 위쪽, 오른쪽, 아래쪽 및 왼쪽에서 픽셀 수를 설정합니다.
  • 여백 및 패딩을 포함하여 요소의 간격을 구성합니다.
  • 요소의 효과(불투명도)를 구성합니다. 이미지의 세피아, 회색 음영, 대비, 밝기 및 흐림 값을 구성하려면 Show Advanced Options을(를) 클릭합니다. 텍스트를 반전하거나 회전할 수도 있습니다.
  • 인라인 스타일을 구성합니다.

HTML 편집 html

HTML 코드 외에도, 사용자 지정 자바스크립트를 편집하고 삽입할 수 있습니다.

A/B 및 Experience Targeting 활동에 대한 텍스트와 HTML을 편집할 때 여러 서식 있는 텍스트 서식 옵션을 사용할 수 있습니다. 글꼴을 선택하고, 글꼴 스타일을 선택하고, 텍스트 정렬을 변경하고, 기타 표준 텍스트 서식 옵션을 사용할 수 있습니다. HTML을 수정할 때 HTML의 코드 보기와 리치 편집 보기 간에 전환할 수 있습니다.

다음 HTML5 태그를 중첩할 수 있습니다.

태그
허용된 중첩 태그
<a>
<h1-h6>, <p>, <ul>, <ol>, <menu>, <div>, <figure>, <figcaption>
<ins>
<h1-h6>, <p>, <ul>, <ol>, <menu>
<del>
<ul>, <ol>, <menu>, <h1-h6>, <p>
<label>
<p>

DOM 경로를 사용하여 요소 탐색 dom-path

페이지에서 요소를 클릭하면 VEC 옵션 메뉴가 표시됩니다. 또한 요소를 클릭하면 해당 DOM 경로가 페이지 하단에 표시됩니다.

DOM 경로

DOM 경로가 표시되지 않으면 Show DOM 아이콘( DOM 아이콘 표시 )을 클릭합니다.

DOM 경로를 사용하여 선택한 요소(유형, ID 및 클래스)에 대한 정보를 빠르게 확인하고, DOM 경로로 위 또는 아래로 이동하여 원하는 요소를 선택할 수 있습니다.

DOM 경로를 사용하여 VEC 내에서 상위 요소, 동일 수준의 요소 또는 하위 요소로 손쉽게 이동할 수 있습니다.

DOM 경로 기능은 클릭 추적을 설정할 때도 사용할 수 있습니다.

recommendation-more-help
3d9ad939-5908-4b30-aac1-a4ad253cd654