미디어 - 슬라이더

슬라이더를 배치할 페이지, 블록 또는 동적 블록을 열고 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 드래그 텍스트 스테이지에서 행, 열 또는 탭 세트에 대한 자리 표시자

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

{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.

에서 페이지 찾기 페이지 그리드 및 선택 View 다음에서 Action ​열.

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

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

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