회전 배너 carousel-banners

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

먼저 AEM Assets의 캐러셀 배너 작성 프로세스 중에 핫스팟과 이미지 맵 데이터를 제대로 입력할 수 있도록 기존 Quickview 구현에서 사용하는 동적 변수를 식별합니다.

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

관리자의 경우 자체 캐러셀 뷰어 사전 설정을 만들어 회전판의 동작과 모양을 사용자 지정할 수 있습니다. 주요 이점은 여러 회전 메뉴에 대해 이 사용자 지정 뷰어 사전 설정을 다시 사용할 수 있다는 것입니다. 그러나 사용자는 회전판을 작성하는 동안 회전판의 동작 및 모양을 직접 사용자 지정할 수도 있습니다. 특정 회전판에 대해 매우 구체적인 디자인을 원할 경우 이 방법이 선호됩니다.

이미지 배너 업로드.

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

회전판 세트 만들기.

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

To create a Carousel Set in Assets, tap Create, then select Carousel Sets. Add assets to slides and tap Save. You can also edit the appearance and behavior of the carousel directly within the editor.

이미지 배너에 핫스팟이나 이미지 맵을 추가합니다.

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

자세한 내용은 (선택 사항) 회전 배너 미리 보기 - 선택 사항입니다. 원하는 경우 회전 메뉴 세트의 표시를 보고 상호 작용을 테스트할 수 있습니다.

회전 배너 게시.

모든 자산과 마찬가지로 회전 메뉴 세트를 게시합니다. Assets에서 회전 메뉴 세트 로 이동하여 선택하고 탭하거나 탭합니다 게시. 회전 메뉴 세트를 게시하면 URL 및 포함 문자열이 활성화됩니다.

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

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

  • 캐러셀 배너를 기존 Quickview와 통합합니다. 타사 웹 컨텐츠 관리 시스템을 사용하는 경우, 새 회전 배너를 웹 사이트의 기존 Quickview 구현과 통합해야 합니다.

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

자산에서 회전 메뉴 세트를 만들 폴더로 이동하여 탭합니다 만들기 > 회전 메뉴 세트.

설정 캐러셀 배너 편집기 페이지, 탭 탭하여 자산 선택기 열기 첫 번째 슬라이드에 사용할 이미지를 선택하려면

설정 캐러셀 배너 편집기 페이지에서 다음 중 하나를 수행합니다.

• 페이지의 왼쪽 위 모서리 근처에 있는 탭하기 슬라이드 추가 아이콘.
• 페이지 가운데 근처에 있는 탭하여 자산 선택기 열기.

Tap to select assets that you want to include in your Carousel Set. Selected assets have a checkmark icon over them. 완료되면 페이지의 오른쪽 위 모서리 근처에 있는 를 탭합니다. 선택.

With the Asset Selector, you can search for assets by typing in a keyword and tapping Return. You can also apply filters to refine your search results. You can filter by path, collection, file type, and tag. Select the filter and then tap the Filter icon on the toolbar. 을 탭하여 보기를 변경합니다. 보기 아이콘 및 선택 열 보기, 카드 보기, 또는 목록 보기.

자세한 내용은 선택기를 사용한 작업 추가 정보.

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

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

• 필요한 경우 슬라이드 순서를 드래그하여 설정된 목록에서 이미지 순서를 변경합니다.
• 이미지를 삭제하려면 이미지를 선택한 다음 를 누릅니다 슬라이드 삭제 클릭합니다.
• 페이지의 오른쪽 위 모서리 근처에 있는 사전 설정을 적용하려면 사전 설정 드롭다운 목록을 탭한 다음, 세트에 적용할 사전 설정을 선택합니다.

슬라이드를 삭제하려면 슬라이드를 누르고 슬라이드 삭제 클릭합니다. 슬라이드를 이동하려면 순서 지정 아이콘을 누르고 원하는 위치로 이동합니다.

슬라이드에 이미지를 추가한 후 이미지에 핫스팟이나 이미지 맵 또는 둘 다 추가할 수 있습니다. 자세한 내용은 핫스팟 또는 이미지 맵 추가.

[동작 및 모양] 탭을 탭하거나 클릭하고 회전 배너의 모양 또는 특정 구성 요소의 동작 방식을 조정하여 회전 메뉴 세트의 시각적 디자인과 동작을 변경할 수 있습니다. 자세한 내용은 뷰어 사전 설정 관리 뷰어 편집기 사용 방법에 대한 자세한 정보.

캐러셀 배너의 모습을 미리 볼 수도 있습니다. 자세한 내용은 (선택 사항) 회전 배너 미리 보기.

탭 저장 완료됨.

Assets에서 인터랙티브하게 만들 회전 메뉴 세트로 이동합니다.

회전판 세트를 선택하고 탭합니다 편집.

회전판 뷰어 편집기에서 상호 작용하려는 슬라이드를 선택합니다.

Near the upper-left corner of the page, tap Hotspot or Image Map.

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

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

필요한 경우 핫스팟이나 이미지 맵을 새 위치로 드래그합니다. 필요에 따라 핫스팟이나 이미지 맵을 추가합니다.

To delete a hotspot or image map, tap the Actions tab. Under the Maps & Hotspots heading, from the Selected Type drop-down menu, select the name of the hotspot or image map you want to remove. Tap the Trash icon next to the menu, then tap Delete.

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

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

• 탭 Quickview.

  • AEM Sites 및 Ecommerce 고객인 경우 제품 선택기 아이콘(확대경)을 클릭하여 열기 제품 선택 페이지. 사용할 제품을 탭한 다음, 페이지의 오른쪽 위 모서리에 있는 확인 표시를 탭하여 로 돌아갑니다 캐러셀 배너 편집기.

  • AEM Sites 또는 Ecommerce 고객이 아닌 경우

    • 자세한 내용은 핫스팟 변수 식별 이러한 변수를 정의할 수 있습니다.
    • 그런 다음 SKU 값을 수동으로 입력합니다. 에서 SKU 값 텍스트 필드에 제공하는 각 개별 제품 또는 서비스의 고유 식별자인 제품의 SKU(Stock Keeping Unit)를 입력합니다. 입력한 SKU 값은 Quickview 템플릿의 변수 부분을 자동으로 채우므로 시스템이 탭된 핫스팟을 특정 SKU의 Quickview와 연결하려는 것을 알게 됩니다.
    • (선택 사항) 빠른 보기 내에 제품을 추가로 식별하는 데 사용해야 하는 다른 변수가 있는 경우 를 탭합니다 일반 변수 추가. 텍스트 필드에서 추가 변수를 지정합니다. 예, category=Mens 는 추가된 변수입니다.
    • 자세한 내용은 선택기를 사용한 작업 추가 정보.

• 탭 하이퍼링크.

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

    note note
    NOTE
    대화형 컨텐츠에 상대 URL이 있는 링크, 특히 AEM Sites 페이지에 대한 링크가 있는 경우 URL 기반 연결 방법이 없습니다.

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

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

    자세한 내용은 선택기를 사용한 작업 추가 정보.

• 탭 경험 조각.

  • AEM Sites 고객인 경우 검색 아이콘(확대경)을 클릭하여 경험 조각 페이지를 엽니다. 사용할 경험 조각을 탭한 다음, 선택 페이지의 오른쪽 위 모서리에서 핫스팟 관리 페이지로 돌아갑니다.

    자세한 내용은 경험 조각.

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

  • 배너에 표시될 경험 조각의 폭과 높이를 지정합니다.

캐러셀 배너의 모습을 미리 볼 수도 있습니다. 자세한 내용은 (선택 사항) 회전 배너 미리 보기.

탭 저장.

회전판 세트를 게시합니다. 게시하면 웹 사이트 페이지에서 사용할 수 있는 포함 코드 또는 URL이 만들어집니다. AEM Sites 고객의 경우 웹 페이지에 직접 회전판 세트를 추가할 수 있습니다.

자세한 내용은 자산 게시.

자세한 내용은 웹 사이트 랜딩 페이지에 회전 메뉴 추가

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

• 회전판 세트 자산 위로 마우스를 가져간 다음 탭하기 편집 (연필 아이콘).
• 회전판 세트 자산 위로 마우스를 가져간 다음 탭하기 선택 (확인 표시 아이콘)을 누른 다음 편집 클릭합니다.
• 회전판 자산 세트를 탭한 다음, 페이지 탭의 왼쪽 상단 모서리에서 을(를) 탭합니다 편집 (연필 아이콘).

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

• 슬라이드를 추가하려면 슬라이드 추가 아이콘을 클릭한 다음 해당 슬라이드에 추가할 자산으로 이동하여 확인 표시를 누릅니다.
• 슬라이드를 다시 정렬하려면 슬라이드를 새 위치로 드래그합니다(항목을 이동하려면 다시 정렬 아이콘 선택).
• 핫스팟이나 이미지 맵을 추가하려면 핫스팟이나 이미지 맵 아이콘을 탭하고 핫스팟 및 이미지 맵 추가.
• 회전판 세트의 모양이나 동작을 편집하려면 모양 탭 또는 비헤이비어 탭을 클릭한 다음 원하는 옵션을 설정합니다.
• 핫스팟이나 이미지 맵을 편집하려면 해당 슬라이드에서 핫스팟이나 이미지 맵을 선택하고 필요에 따라 아래에서 변경합니다 작업 탭.
• 슬라이드를 삭제하려면 해당 슬라이드를 선택하고 슬라이드 삭제 클릭합니다.
• 페이지의 오른쪽 위 모서리 근처에 있는 사전 설정을 적용하려면 사전 설정 드롭다운 목록을 탭한 다음 뷰어 사전 설정을 선택합니다.
• 전체 캐러셀 세트를 삭제하려면 캐러셀 세트로 이동하여 선택한 다음 탭합니다 삭제.

in 자산 ​만든 기존 회전 배너로 이동하고 탭하여 엽니다.

탭 편집.

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

탭 미리 보기.

이미지의 핫스팟이나 이미지 맵을 탭하여 연결된 동작을 테스트합니다.

게시된 회전 메뉴 세트의 포함 코드를 복사합니다.

자세한 내용은 웹 페이지에 비디오 또는 이미지 뷰어 포함.

AEM Assets에서 복사한 포함 코드를 웹 페이지에 추가합니다.

복사된 포함 코드는 응답형이므로 페이지의 포함 영역에 자동으로 맞게 조정됩니다.