미디어 - 슬라이더

슬라이더를 배치할 페이지, 블록 또는 동적 블록을 열고 Content 섹션을 확장합니다.

Page Builder 패널에서 Media ​을(를) 확장하고 Slider 자리 표시자를 스테이지의 행, 열 또는 탭으로 드래그합니다.

다음 예제에서는 행의 배경색이 노란색(#fffd16)입니다.

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

슬라이더 컨테이너는 단 하나의 빈 슬라이드로 스테이지에 표시됩니다.

슬라이더 컨테이너를 클릭하여 텍스트 편집기를 표시하고 첫 번째 슬라이드의 내용을 입력합니다.

콘텐츠 설정을 사용하여 보다 복잡한 배너 콘텐츠를 포함할 수도 있습니다.

슬라이더 하단에 있는 탐색 점을 클릭하여 개별 슬라이드의 도구 상자를 표시하고 설정( {width="20"} ) 아이콘을 선택합니다.

슬라이더에는 두 개의 도구 상자가 있습니다. 맨 아래에 있는 슬라이드 도구 상자를 사용하고 있는지 확인합니다.

필요에 따라 다음 섹션에 따라 설정을 완료합니다.

• Appearance
• Background
• Content
• Search Engine Optimization
• Advanced

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

슬라이드 아래 탐색 점을 클릭하여 도구 상자를 표시하고 복제( {width="20"} ) 아이콘을 선택합니다.

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

새 슬라이드의 탐색 점을 클릭하고 도구 상자를 표시하고 설정( {width="20"} ) 아이콘을 선택합니다.

필요에 따라 다음 섹션에 따라 설정을 수정합니다.

• Appearance
• Background
• Content
• Advanced

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

상단의 슬라이더 컨테이너 위로 마우스를 가져가면 도구 상자를 표시하고 추가( {width="20"}) 아이콘을 선택합니다.

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

고유한 탐색 점과 도구 상자가 있는 새 빈 슬라이드가 슬라이더에 추가되어 스테이지에 표시됩니다.

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

새 슬라이드의 탐색 점을 클릭하고 도구 상자를 표시하고 설정( {width="20"} ) 아이콘을 선택합니다.

필요에 따라 다음 섹션에 따라 설정을 수정합니다.

• Appearance
• Background
• Content
• Advanced

완료되면 오른쪽 상단의 Save ​을(를) 클릭하여 Edit Slide ​페이지를 닫습니다.

슬라이드에 표시할 위젯을 만듭니다.

슬라이더를 배치할 페이지, 블록 또는 동적 블록을 열고 Content 섹션을 확장합니다.

Page Builder 패널에서 Media ​을(를) 확장하고 Slider 자리 표시자를 스테이지의 행, 열 또는 탭으로 드래그합니다.

슬라이더 컨테이너를 클릭하여 텍스트 편집기 도구 모음을 표시하고 위젯 삽입( {width="20"} ) 아이콘을 클릭합니다.

필요한 Widget Type ​을(를) 선택하십시오.

위젯 유형에 따라 다르게 설정을 지정합니다

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

완료되면 오른쪽 상단의 Insert Widget ​을(를) 클릭합니다.

필요에 따라 다른 설정을 수정합니다.

완료되면 오른쪽 상단의 Save ​을(를) 클릭합니다.

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

스테이지에서 슬라이더 표시를 변경하고 변경할 슬라이드를 봅니다.

개별 슬라이드 도구 상자에서 설정( {width="20"}) 아이콘을 선택하고 필요에 따라 다음 섹션에 따라 설정을 완료합니다.

오른쪽 상단 모서리에서 Save ​을(를) 클릭하여 설정을 적용하고 Page Builder 작업 영역으로 돌아갑니다.

다음 슬라이드 배치 유형 중 하나를 선택합니다.

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

Slide Name 입력.

편집 모드로 작업하는 경우 슬라이드 이름이 탐색 점 위에 도구 설명으로 나타납니다. 슬라이드 이름이 상점 앞에 표시되지 않습니다.

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

슬라이드의 Minimum Height ​을(를) 입력하십시오.

최소 높이는 유효한 CSS 단위(예: 100px, 50%, 50em, 100vh) 또는 계산(예: 100vh - 237px)이 있는 숫자일 수 있습니다.

예를 들어, 페이지의 전체 높이를 포함하도록 슬라이드의 최소 높이를 설정한 다음 배경 이미지와 비디오를 사용하여 매력적인 디자인 옵션을 선택할 수 있습니다.

자리 표시자 또는 기존 텍스트를 클릭하고 슬라이드에 표시할 새 텍스트를 입력합니다.

편집기 도구 모음이 텍스트 상자 위에 나타납니다.

편집기 도구 모음을 사용하여 텍스트를 입력하고 서식을 지정할 수 있을 뿐만 아니라 링크, 이미지 및 위젯과 같은 요소를 삽입할 수 있습니다.

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

슬라이더 하단에 있는 탐색 점을 클릭하여 개별 슬라이드의 도구 상자를 표시하고 설정( {width="20"} ) 아이콘을 선택합니다.

Content ​섹션에서 슬라이드와 함께 표시할​ Message Text ​을(를) 입력합니다.

Content ​섹션까지 아래로 스크롤한 다음​ Message Text ​편집기를 사용하여 배너 텍스트를 입력하고 서식을 지정합니다.

텍스트 링크, 이미지 및 위젯과 같은 요소를 삽입할 수도 있습니다.

편집기 도구 모음을 사용하여 필요에 따라 텍스트 서식을 지정합니다.

이 예제의 첫 번째 슬라이드에는 배경 이미지가 있지만 메시지 텍스트는 없습니다. 슬라이더 위에 있는 Buy 3 Get 1 Free 텍스트는 텍스트 컨테이너에 있습니다(나중에 추가됨).

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

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

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

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

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

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

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

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

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

2.4.1 릴리스부터 Page Builder은(는) 상점에서의 표시 문제로 인해 더 이상 중첩 텍스트 내에서 슬라이드 및 링크 연결을 지원하지 않습니다. _Message Text_​에서 링크를 사용하는 경우 _Link_ 옵션을 구성할 수 없습니다. 전체 슬라이드에 하나의 링크를 사용하려는 경우 텍스트에서 모든 링크를 제거할 수 있습니다. {width="300"}

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

필요한 경우 고객에게 링크를 따라가라는 메시지를 표시하는 버튼을 추가합니다.

슬라이드 모양 위치는 텍스트 아래에 하나의 링크나 단추를 배치합니다. 추가하려는 링크 또는 버튼의 속성을 완료합니다.

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

• Show Button ​을(를) 다음 중 하나로 설정합니다.

  table 0-row-2 1-row-2 2-row-2 3-row-2 layout-auto
  옵션	설명
  Always	단추는 항상 슬라이드에 나타납니다.
  On Hover	마우스로 가리키면 슬라이드에 단추가 표시됩니다.
  Never Show	단추는 슬라이드에 나타나지 않습니다.

• 단추에 표시할 Button Text ​을(를) 입력하십시오.

• Button Type ​을(를) 다음 중 하나로 설정합니다.

  table 0-row-2 1-row-2 2-row-2 3-row-2 layout-auto
  옵션	설명
  Primary	현재 스타일 시트의 기본 단추 스타일을 적용합니다.
  Secondary	해당하는 경우 현재 스타일 시트의 보조 단추 스타일을 적용합니다.
  Link	단추가 아닌 하이퍼링크를 만듭니다.

  현재 테마의 단추 스타일에 따라 단추 형식이 결정됩니다. 일반적으로 기본 단추는 보조 단추보다 배경색이 더 두드러집니다.

Show Overlay ​을(를) 다음 중 하나로 설정합니다.

오버레이를 사용하여 모양새 설정으로 정의된 활성 컨텐트 영역에 배경색을 적용할 수 있습니다. 슬라이드 배경 이미지는 슬라이드의 전체 너비로 계속 표시됩니다.

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

오버레이를 표시하도록 선택한 경우 Overlay Color ​을(를) 설정합니다.

• 색상 없음 견본을 클릭하고 견본을 선택합니다.
• Color 필드에 올바른 색상 이름 또는 16진수 값을 입력하십시오.

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

슬라이드에 추가된 콘텐츠의 가로 위치를 제어하려면 Alignment ​을(를) 선택합니다.

슬라이드의 네 면에 모두 적용되는 Border 스타일을 설정합니다.

None 이외의 테두리 스타일을 설정하는 경우 테두리 표시 옵션을 완료하십시오.

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

(선택 사항) 슬라이드에 적용할 현재 스타일 시트의 CSS classes 이름을 지정합니다.

여러 클래스 이름은 공백으로 구분합니다.

Margins and Padding ​에 대한 값을 픽셀 단위로 입력하여 슬라이드의 외부 여백과 내부 패딩을 지정합니다.

슬라이드 다이어그램에 해당하는 각 값을 입력합니다.

Page Builder 패널에서 Elements ​을(를) 확장하고 Text 자리 표시자를 스테이지의 행, 열 또는 탭 집합으로 드래그합니다.

드래그하면 빨간색 지침이 슬라이더 위에 있는 삽입점을 표시합니다.

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

편집기를 사용하여 필요에 따라 텍스트 서식을 지정합니다.

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

슬라이더 컨테이너 위로 마우스를 가져가 기본 도구 상자를 표시하고 설정( {width="20"} ) 아이콘을 선택합니다.

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

슬라이드의 Minimum Height ​을(를) 입력하십시오.

최소 높이는 유효한 CSS 단위(예: 100px, 50%, 50em, 100vh) 또는 계산(예: 100vh - 237px)이 있는 숫자일 수 있습니다.

예를 들어 슬라이더의 최소 높이를 설정하여 페이지의 전체 높이를 늘릴 수 있으므로 전체 페이지 배경 이미지 및 비디오에 대한 매력적인 옵션을 제공합니다.

{width="400"}

페이지가 로드될 때 슬라이더를 시작하려면 Autoplay ​을(를) Yes(으)로 설정하고 슬라이드 사이의 지연 시간(밀리초)으로 Autoplay Speed ​을(를) 설정합니다.

기본적으로 속도는 4초인 4000ms로 설정되어 있습니다. 자동 재생을 No(으)로 설정하면 첫 번째 슬라이드가 기본적으로 나타나며 고객은 슬라이드 탐색(점 또는 화살표)을 클릭하여 다음 슬라이드를 순서대로 표시해야 합니다.

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

한 슬라이드에서 다음 슬라이드로 원활하게 전환하려면 Fade ​을(를) Yes(으)로 설정하십시오.

페이드를 사용하면 슬라이드가 제자리에 있는 것처럼 보이지만, 콘텐츠는 하나에서 다음으로 매끄럽게 변경됩니다. 페이드를 사용하지 않으면 한 슬라이드에서 다음 슬라이드로 수평 이동이 표시됩니다.

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

페이지가 열려 있는 동안 슬라이드 쇼를 무한정 반복하려면 Infinite Loop ​을(를) Yes(으)로 설정하십시오.

슬라이더에 대한 탐색 컨트롤의 유형을 선택하려면 다음을 수행하십시오.

• 각 슬라이드의 왼쪽과 오른쪽에 다음 및 이전 화살표를 포함하려면 Show Arrows ​을(를) Yes(으)로 설정하십시오.

• 슬라이더 아래에 탐색 점 집합을 포함하려면 Show Dots ​을(를) Yes(으)로 설정하십시오.

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

필요에 따라 고급 슬라이더 설정을 완료합니다.

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

상위 슬라이더 컨테이너 내의 슬라이드 위치를 제어하려면 Alignment ​을(를) 선택하십시오.

슬라이더 컨테이너의 네 면에 모두 적용되는 Border 스타일을 설정합니다.

None 이외의 테두리 스타일을 설정하는 경우 테두리 표시 옵션을 완료하십시오.

(선택 사항) 슬라이더 컨테이너에 적용할 현재 스타일 시트의 CSS classes 이름을 지정합니다.

여러 클래스 이름은 공백으로 구분합니다.

슬라이더 컨테이너의 외부 여백과 내부 패딩을 확인하려면 Margins and Padding ​에 대한 값을 픽셀 단위로 입력하십시오.

다이어그램에 해당 값을 입력합니다.

슬라이더를 포함한 페이지를 열고 Enable Page ​을(를) Yes(으)로 설정합니다.

오른쪽 상단 모서리에서 Save 화살표를 클릭하고 Save & Close ​을(를) 선택합니다.

페이지 그리드에서 페이지를 찾은 다음 Action ​열에서​ View ​을(를) 선택합니다.

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

슬라이더를 미리 볼 때 모바일 디바이스에서 슬라이더가 어떻게 표시되는지 볼 수 있도록 창 크기를 조정합니다.

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