회전 배너 carousel-banners

핫스팟 및 이미지 맵 변수 식별 (Adobe Experience Manager Assets + Dynamic Media을 사용하는 고객만 해당)

기존 빠른 보기 구현에서 사용하는 동적 변수를 식별하여 시작합니다. 이렇게 하면 Experience Manager Assets에서 회전 배너 만들기 프로세스 중에 핫스팟과 이미지 맵 데이터를 제대로 입력할 수 있습니다.

Optional: Create a Carousel Set viewer preset, as needed.

관리자는 고유한 회전판 뷰어 사전 설정을 만들어 회전판의 비헤이비어와 모양을 사용자 정의할 수 있습니다. 주요 이점은 여러 회전 메뉴에 대해 이 사용자 지정 뷰어 사전 설정을 다시 사용할 수 있다는 것입니다. 그러나 사용자는 선택적으로 회전판을 작성하는 동안 회전판의 비헤이비어와 모양을 직접 사용자 정의할 수 있습니다. 이 접근 방식은 제공된 캐러셀에 특정 디자인을 원하는 경우 선호됩니다.

이미지 배너 업로드.

대화형으로 만들 이미지 배너를 업로드합니다.

회전 메뉴 세트 만들기.

회전 메뉴 세트에서 사용자는 배너 이미지를 탐색하고 핫스팟 또는 이미지 맵을 선택하여 관련 콘텐츠에 액세스합니다.

에셋에서 회전 메뉴 세트를 만들려면 다음을 선택합니다. 만들기 ​을 선택한 다음 을 선택합니다. 회전 메뉴 세트. 슬라이드에 에셋 추가 및 선택 저장. You can also edit the appearance and behavior of the carousel directly within the editor.

이미지 배너에 핫스팟 또는 이미지 맵 추가.

이미지 배너에 하나 이상의 핫스팟 또는 이미지 맵을 추가합니다. 그런 다음 각 항목을 링크, 빠른 보기 또는 경험 조각과 같은 작업에 연결합니다. 핫스팟 또는 이미지 맵을 추가한 후 회전 메뉴 세트를 게시하여 이 작업을 완료합니다. 게시하면 웹 사이트 랜딩 페이지를 복사하고 적용하는 데 사용할 수 있는 포함 코드가 만들어집니다.

다음을 참조하십시오 (선택 사항) 회전 배너 미리 보기 - 선택 사항입니다. 원하는 경우 회전 메뉴 세트의 표현을 보고 상호 작용을 테스트할 수 있습니다.

회전 배너 게시.

에셋의 경우와 마찬가지로 회전 메뉴 세트를 게시합니다. 에셋에서 회전 메뉴 세트로 이동하여 선택하고 를 선택합니다 게시. 회전 메뉴 세트를 게시하면 URL 및 포함 문자열이 활성화됩니다.

다음 중 하나를 수행하십시오.

• 웹 사이트 페이지에 회전 배너 추가웹 사이트 페이지에 복사한 회전 배너 URL 또는 포함 코드를 추가할 수 있습니다.

  • 캐러셀 배너를 기존 빠른 보기와 통합. 서드파티 웹 콘텐츠 관리 시스템을 사용하는 경우 새 캐러셀 배너를 웹 사이트의 기존 빠른 보기 구현과 통합해야 합니다.

• Experience Manager에서 웹 사이트에 캐러셀 배너 추가. Experience Manager Sites 고객인 경우 대화형 미디어 구성 요소를 사용하여 페이지에 직접 회전 메뉴 세트를 추가할 수 있습니다.

에셋에서 회전 메뉴 세트를 만들 폴더로 이동한 다음 로 이동합니다 만들기 > 회전 메뉴 세트.

회전판 배너 편집기 페이지에서 자산 선택기를 열려면 탭하십시오. 을 클릭하여 첫 번째 슬라이드의 이미지를 선택합니다.

회전 배너 편집기 페이지에서 다음 중 하나를 수행합니다.

• 페이지의 왼쪽 상단 모서리 근처에서 을 선택합니다. 슬라이드 추가 아이콘.

• 페이지 가운데 근처에서 을 선택합니다. 자산 선택기를 열려면 탭하십시오..

회전 메뉴 세트에 포함할 자산을 선택하려면 를 선택합니다. 선택한 에셋에는 확인 표시 아이콘이 있습니다. 완료되면 페이지의 오른쪽 상단 모서리 근처에서 을 선택합니다. 선택.

자산 선택기를 사용하여 키워드를 입력하고 를 선택하여 자산을 검색할 수 있습니다 반환. You can also apply filters to refine your search results. You can filter by path, collection, file type, and tag. 필터를 선택한 다음 필터 아이콘을 클릭합니다. 보기 아이콘을 선택하고 을 선택하여 보기 변경 열 보기, 카드 보기, 또는 목록 보기.

다음을 참조하십시오 선택기를 사용한 작업 추가 정보.

회전 메뉴 세트에서 회전할 모든 이미지를 추가할 때까지 슬라이드를 계속 추가합니다.

(선택 사항) 다음 중 하나를 수행합니다.

• 필요한 경우 슬라이드를 드래그하여 세트 목록에서 이미지 순서를 변경합니다.

• 이미지를 삭제하려면 이미지를 선택한 다음 를 선택합니다 슬라이드 삭제 을 클릭합니다.

• 페이지의 오른쪽 상단 모서리 근처에서 사전 설정을 적용하려면 사전 설정 드롭다운 목록을 선택한 다음 세트에 적용할 사전 설정을 한 번에 선택합니다.

슬라이드를 삭제하려면 슬라이드를 선택합니다. 도구 모음에서 를 선택합니다. 슬라이드 삭제 을 클릭합니다. 슬라이드를 이동하려면 순서 변경 아이콘을 선택하고 원하는 위치로 이동합니다.

슬라이드에 이미지를 추가한 후 이미지에 핫스팟, 이미지 맵 또는 두 가지 모두를 추가할 수 있습니다. 다음을 참조하십시오 이미지 배너에 핫스팟 또는 이미지 맵 추가.

회전 메뉴 세트의 시각적 디자인과 비헤이비어를 변경할 수 있습니다. 다음 항목 선택 비헤이비어 및 모양 탭 - 회전 배너가 표시되는 방식이나 특정 구성 요소의 작동 방식을 조정합니다. 다음을 참조하십시오 뷰어 사전 설정 관리 뷰어 편집기 사용 방법에 대한 자세한 정보.

회전 배너의 모양을 미리 볼 수도 있습니다. 다음을 참조하십시오 (선택 사항) 회전 배너 미리 보기.

선택 저장 완료 시.

Assets에서 대화형으로 만들 회전 메뉴 세트로 이동합니다.

회전 메뉴 세트를 선택하고 편집. 슬라이드 뷰어 편집기가 열립니다.

대화형으로 만들 슬라이드를 선택합니다.

페이지의 왼쪽 상단 모서리 근처에서 을 선택합니다. 핫스팟 또는 이미지 맵.

다음 중 하나를 수행합니다.

• 핫스팟의 경우: 이미지에서 핫스팟을 표시할 위치를 선택합니다.
• 이미지 맵의 경우: 이미지에서 왼쪽 상단에서 오른쪽 하단으로 드래그하여 이미지 맵 영역을 만듭니다. 모퉁이를 드래그하여 이미지 맵의 크기를 조정할 수 있습니다.

필요한 경우 핫스팟 또는 이미지 맵을 새 위치로 드래그합니다. 또는 키보드 화살표 키를 사용하여 선택한 핫스팟의 위치를 제어합니다. 필요에 따라 더 많은 핫스팟 또는 이미지 맵을 추가합니다.

핫스팟 또는 이미지 맵을 삭제하려면 작업 탭. 아래 지도 및 핫스팟 제목, 출처: 선택한 유형 드롭다운 목록에서 제거할 핫스팟 또는 이미지 맵의 이름을 선택합니다. 다음 항목 선택 휴지통 아이콘을 클릭한 다음 선택 삭제.

이름 텍스트 필드에 핫스팟 또는 이미지 맵의 이름을 입력합니다. 이 이름은 지도 및 핫스팟 드롭다운 목록입니다. 이름을 제공하면 나중에 핫스팟 또는 이미지 맵을 변경하기로 결정하는 경우 쉽게 식별할 수 있습니다.

다음 중 하나를 수행합니다. 작업 탭:

• 선택 빠른 보기.

  • Experience Manager Sites인 경우 고객은 제품 선택기 아이콘(돋보기)을 선택하여 제품 선택 페이지를 엽니다. 회전 메뉴 배너 편집기로 돌아가려면 사용할 제품을 선택한 다음 페이지의 오른쪽 상단에 있는 확인 표시를 선택합니다.

  • Experience Manager Sites이 아닌 경우 고객:

    • 변수를 정의합니다. 다음을 참조하십시오 핫스팟 변수 식별.

    • 그런 다음 수동으로 SKU 값을 입력합니다. SKU 값 텍스트 필드에 제품의 SKU(Stock Keeping Unit)를 입력합니다. 이 SKU는 제공하는 각 고유 제품이나 서비스에 대한 고유 식별자입니다. 입력한 SKU 값이 빠른 보기 템플릿의 변수 부분을 자동으로 채웁니다. 이제 시스템에서 선택한 핫스팟을 특정 SKU의 빠른 보기와 연결해야 한다는 것을 알고 있습니다.

    • (선택 사항) 빠른 보기 내에 제품을 추가로 식별하는 데 사용해야 하는 다른 변수가 있는 경우 다음을 선택합니다 일반 변수 추가. 텍스트 필드에 추가 변수를 지정합니다. 예를 들어 category=Mens는 추가된 변수입니다.

    • 다음을 참조하십시오 선택기를 사용한 작업 추가 정보.

• 선택 하이퍼링크.

  • Experience Manager Sites 고객의 경우 사이트 선택기 아이콘(폴더)을 선택하여 URL로 이동합니다.

    note note
    NOTE
    대화형 콘텐츠에 상대 URL이 있는 링크, 특히 Experience Manager Sites 페이지에 대한 링크가 있는 경우에는 URL 기반 연결 방법이 불가능합니다.

  • 독립형 고객인 경우 href 텍스트 필드에 연결된 웹 페이지에 대한 전체 URL 경로를 지정합니다.

링크를 새 브라우저 탭(권장 기본값)에서 열지 또는 동일한 탭에서 열지를 지정해야 합니다.

다음을 참조하십시오 선택기를 사용한 작업 추가 정보.

• 선택 경험 조각.

  • Experience Manager Sites 고객인 경우 검색 아이콘(돋보기)을 선택하여 경험 조각 페이지를 엽니다. 핫스팟 관리 페이지로 돌아가려면 사용할 경험 조각을 선택한 다음 페이지의 오른쪽 상단 모서리에서 을 선택합니다. 선택.
    다음을 참조하십시오 경험 조각.

  • 배너에 표시되는 경험 조각의 너비와 높이를 지정합니다.

    note note
    NOTE
    경험 조각에 뷰어를 포함할 때 회전 배너의 소셜 미디어 공유 도구가 지원되지 않습니다.
    이 점을 해결하려면 소셜 미디어 공유 도구가 없는 뷰어 사전 설정을 사용하거나 만들 수 있습니다. 이러한 뷰어 사전 설정을 사용하면 경험 조각에 성공적으로 포함할 수 있습니다.

회전 배너의 모양을 미리 볼 수도 있습니다. 다음을 참조하십시오 (선택 사항) 회전 배너 미리 보기.

저장 ​을 선택합니다.

회전 메뉴 세트를 게시합니다. 게시하면 웹 사이트 페이지에서 사용할 수 있는 포함 코드 또는 URL이 만들어집니다. Experience Manager Sites 고객인 경우 웹 페이지에 바로 회전 메뉴 세트를 추가합니다.

다음을 참조하십시오 자산 게시.

다음을 참조하십시오 웹 사이트 랜딩 페이지에 회전 메뉴 세트 추가

다음 중 하나를 수행합니다.

• 회전 메뉴 세트 에셋을 마우스로 가리킨 다음 을 선택합니다. 편집 (연필 아이콘).

• 회전 메뉴 세트 에셋 위로 마우스를 가져간 후 선택 (확인 표시 아이콘) 을 클릭한 다음 도구 모음에서 를 선택합니다 편집.

• 회전 메뉴 세트 에셋을 선택한 다음 페이지의 왼쪽 상단 모서리에서 을(를) 선택합니다. 편집 (연필 아이콘).

회전 메뉴 세트를 편집하려면 다음 중 하나를 수행합니다.

• 슬라이드를 추가하려면 슬라이드 추가 아이콘. 해당 슬라이드에 추가할 에셋으로 이동한 다음 확인 표시를 선택합니다.
• 슬라이드의 순서를 바꾸려면 슬라이드를 새 위치로 끕니다. 항목을 이동하려면 순서 바꾸기 아이콘을 선택합니다.
• 핫스팟 또는 이미지 맵을 추가하려면 핫스팟 또는 이미지 맵 아이콘을 선택하고 이미지 배너에 핫스팟 및 이미지 맵 추가.
• 회전 메뉴 세트의 모양이나 비헤이비어를 편집하려면 모양 탭 또는 비헤이비어 탭을 클릭한 다음 원하는 옵션을 설정합니다.
• 핫스팟 또는 이미지 맵을 편집하려면 해당 슬라이드에서 핫스팟 또는 이미지 맵을 선택합니다. 아래 작업 탭에서 변경합니다.
• 슬라이드를 삭제하려면 해당 슬라이드를 선택한 다음 를 선택합니다 슬라이드 삭제 을 클릭합니다.
• 페이지의 오른쪽 상단 모서리 근처에서 사전 설정을 적용하려면 사전 설정 드롭다운 목록에서 뷰어 사전 설정을 선택합니다.
• 전체 회전식 세트를 삭제하려면 회전식 세트로 이동하여 선택한 다음 를 선택합니다 삭제.

위치 에셋 ​를 클릭하고 생성한 기존 회전 배너로 이동한 다음 를 선택하여 엽니다.

편집 ​을 선택합니다.

도구 모음의 오른쪽 모서리에 있는 뷰어 사전 설정 목록에서 회전 배너를 미리 볼 뷰어를 선택합니다.

선택 미리 보기.

연결된 작업을 테스트하려면 이미지에서 핫스팟 또는 이미지 맵을 선택합니다.

게시된 회전 메뉴 세트의 포함 코드를 복사합니다.
다음을 참조하십시오 웹 페이지에 비디오 또는 이미지 뷰어 포함.

Experience Manager Assets에서 웹 페이지로 복사한 포함 코드를 추가합니다.
복사된 포함 코드는 응답하므로 페이지의 포함 영역에 자동으로 맞습니다.