미디어 - 이미지

Page Builder 패널에서 Media ​을(를) 확장하고 Image 자리 표시자를 대상 컨테이너로 드래그합니다.

행, 열 또는 탭에 이미지를 추가할 수 있습니다. 다음 예제에서는 이미지가 빈 열로 드래그됩니다.

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

다음 방법 중 하나를 사용하여 이미지 에셋을 추가합니다.

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

• ​ 새 이미지 업로드 ​: 이 메서드를 사용하여 시스템에서 새 이미지 파일을 업로드합니다.

  • Upload Image ​을(를) 클릭합니다.

  • 갤러리와 대상 컨테이너에 추가할 이미지를 찾아 선택합니다.

  또는 시스템에서 이미지 파일을 드래그하여 카메라( {width="20"} ) 아이콘에 놓을 수도 있습니다.

• ​ 기존 에셋 선택 ​: 이 메서드를 사용하여 미디어 저장소/갤러리에서 기존 이미지 에셋을 선택합니다.

  • Select from Gallery ​을(를) 클릭합니다.

  • 트리를 사용하여 이미지로 이동합니다.

  • 썸네일을 클릭하고 Add Selected ​을(를) 클릭합니다.

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

• ​ Adobe Stock 이미지 검색 및 선택 ​: 이 메서드를 사용하여 Adobe Stock에서 이미지를 찾습니다.

  note note
  NOTE
  이 메서드를 사용하려면 관리자에 대해 Adobe Stock 통합이(가) 구성되어 있어야 합니다.

  • Search Adobe Stock ​을(를) 클릭하고 이미지를 검색합니다.

  • 미리 보기 또는 라이선스가 부여된 이미지를 갤러리에 저장합니다.

    Adobe Stock 자산 작업에 대한 자세한 내용은 Adobe Stock 이미지 사용을 참조하십시오.

  • 갤러리에서 자산 축소판을 선택하고 Add Selected ​을(를) 클릭합니다.

플레이스홀더 위치의 대상 컨테이너에 이미지가 표시됩니다. 배경 이미지와 달리 이미지를 현재 컨테이너 내의 다른 위치나 다른 컨테이너로 이동할 수 있습니다.

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

이미지 컨테이너 위로 마우스를 가져가 도구 상자를 표시하고 설정( {width="20"}) 아이콘을 선택합니다.
파일 이름, 치수 및 파일 크기가 현재 이미지 아래에 나타납니다.

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

현재 Image ​을(를) 변경하려면 다음 중 하나를 실행하십시오.

• ​ 새 이미지 업로드 ​: 이 메서드를 사용하여 시스템에서 새 이미지 파일을 업로드합니다.

  • Upload Image ​을(를) 클릭합니다.

  • 갤러리와 대상 컨테이너에 추가할 이미지를 찾아 선택합니다.

• ​ 기존 에셋 선택 ​: 이 메서드를 사용하여 미디어 저장소/갤러리에서 기존 이미지 에셋을 선택합니다.

  • Select from Gallery ​을(를) 클릭합니다.

  • 트리를 사용하여 이미지로 이동합니다.

  • 썸네일을 클릭하고 Add Selected ​을(를) 클릭합니다.

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

• Adobe Stock 이미지 검색 및 선택: 이 메서드를 사용하여 Adobe Stock에서 이미지를 찾습니다.

  note note
  NOTE
  이 메서드를 사용하려면 관리자에 대해 Adobe Stock 통합이(가) 구성되어 있어야 합니다.

  • Search Adobe Stock ​을(를) 클릭하고 이미지를 검색합니다.

  • 미리 보기 또는 라이선스가 부여된 이미지를 갤러리에 저장합니다.

    Adobe Stock 자산 작업에 대한 자세한 내용은 Adobe Stock 이미지 사용을 참조하십시오.

  • 갤러리에서 자산 축소판을 선택하고 Add Selected ​을(를) 클릭합니다.

Mobile Image ​을(를) 추가하려면 이전 단계에서 설명한 것과 동일한 방법을 사용하여 모바일 장치에서 표시하는 데 사용할 이미지를 선택하십시오.

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

필요한 경우 이미지에 대해 Link ​을(를) 지정하십시오.

링크는 고객이 이미지를 클릭할 때 나타나는 대상 페이지입니다. 다음 세 가지 링크 유형 중 하나를 사용할 수 있습니다.

• URL - 상대 URL 또는 정규화된 URL에 연결된 링크입니다.

• Product - 제품 이름 또는 SKU를 기반으로 대상 페이지를 식별합니다. 부분 또는 전체 이름을 기반으로 이름으로 제품을 검색합니다. 검색 결과 목록에서 제품을 선택합니다.

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

• Category - 대상 페이지를 범주 트리에서 특정 범주 또는 하위 범주로 식별합니다. 부분 이름 또는 전체 이름을 기반으로 범주를 검색합니다. 표시된 트리의 확장된 섹션에서 범주를 선택합니다.

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

• Page - 대상 페이지를 특정 콘텐츠 페이지로 식별합니다. 부분 이름 또는 전체 이름을 기반으로 페이지를 검색합니다. 검색 결과 목록에서 페이지를 선택합니다.

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

방문자가 상점에서 나가지 않도록 하려면 Open in new tab 확인란을 선택하십시오. 확인란의 선택을 취소하면 연결된 대상이 동일한 브라우저 탭에서 열리고, 이를 통해 방문자가 스토어에서 멀리 떨어진 곳으로 효과적으로 이동할 수 있습니다.

Image Caption ​을(를) 추가하려면 이미지 아래에 표시할 텍스트를 입력하십시오.

캡션의 형식은 현재 테마와 연결된 스타일시트에 의해 결정됩니다.

캡션은 일반적으로 이미지 아래에 표시되며, 방문자 및 검색 엔진을 위한 이미지에 대한 정보를 제공합니다. 사이트를 여러 언어로 사용할 수 있는 경우 동일한 이미지를 사용할 수 있지만 캡션을 번역할 수 있습니다. HTML에서 <figcaption> 태그는 <figure> 태그의 하위 집합입니다. <figcaption>This is the image caption</figcaption>

필요에 따라 다른 설정을 업데이트합니다.

• 검색 엔진 최적화
• 고급

완료되면 Save ​을(를) 클릭하여 설정을 적용하고 Page Builder 작업 영역으로 돌아갑니다.

이미지 컨테이너 위로 마우스를 가져가 도구 상자를 표시하고 이동( {width="20"}) 아이콘을 선택합니다.

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

이미지를 선택하여 빨간색 지침 바로 아래의 새 위치로 드래그합니다.

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

이미지 컨테이너 위로 마우스를 가져가 도구 상자를 표시하고 제거( {width="20"} ) 아이콘을 선택합니다.

확인 메시지가 표시되면 OK ​을(를) 클릭합니다.