요소 - 단추

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

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

단추 위로 마우스를 가져가 도구 상자를 표시하고 설정( ) 아이콘을 선택합니다.

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

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

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

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

다음 형식 중 하나를 사용하여 Button Link ​을(를) 설정합니다.

• URL - 링크의 대상 URL을 입력합니다.

  URL은 스토어의 제품 또는 페이지에 대한 상대 링크이거나 정규화된 URL일 수 있습니다.

  상대 URL 예 - ../luma-analog-watch.html

  정규화된 URL 예 - http://mystore.com/luma-analog-watch.html

  링크가 다른 웹 사이트로 이동하면 새 브라우저 탭에서 링크를 열어 스토어에 대해 현재 페이지를 열어 둘 수 있습니다.

  방문자가 스토어에서 나가지 못하도록 하려면 Open in new tab 확인란을 선택하십시오.

• Product - 제품 이름(일부 또는 전체) 또는 SKU를 입력한 다음 목록에서 제품 이름을 선택합니다.

  note note
  NOTE
  재고 부족 제품 표시 설정에 따라 목록에 제품이 표시됩니다. Inventory management을(를) 사용하는 여러 Source 판매자의 경우 제품 목록은 기본 웹 사이트에만 할당된 소스로 제한됩니다.

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

• Category - 범주 이름(일부 또는 전체)을 입력하거나 빈 필드를 클릭하여 범주 트리를 표시합니다. 그런 다음 트리에서 카테고리 이름을 선택합니다.

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

• Page - CMS 페이지 이름(일부 또는 전체)을 입력하거나 빈 필드를 클릭하여 전체 목록을 표시합니다. 그런 다음 검색 결과 목록에서 페이지 이름을 선택합니다.

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

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

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

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

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

두 번째 단추에 표시할 텍스트를 입력합니다.

새 단추를 클릭하여 도구 상자를 표시하고 설정( {width="20"} ) 아이콘을 선택합니다.

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

Button Type ​을(를) Secondary(으)로 설정합니다.

필요에 따라 Button Link ​을(를) 설정합니다.

다음 예제에서 링크는 연락처 페이지로 이동하는 상대 URL입니다.

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

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

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

스테이지에서 두 번째 버튼을 다시 클릭하고 복제( {width="20"} ) 아이콘을 선택합니다.

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

세 번째 단추에 표시할 텍스트를 입력합니다.

세 번째 단추를 클릭하여 도구 상자를 표시하고 설정( {width="20"} ) 아이콘을 선택합니다.

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

필요에 따라 Button Link ​을(를) 업데이트합니다.

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

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

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

Appearance ​에서​ Stacked ​을(를) 선택합니다.

All Buttons are same size ​을(를) Yes(으)로 설정합니다.

{width="300"}

단추 컨테이너에 대한 설정 변경의 설명을 사용하여 나머지 설정을 필요에 따라 업데이트합니다.

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

1차 버튼과 2개의 보조 버튼이 있는 전체 스택 버튼 세트가 스테이지에 나타납니다.

스테이지에서 {width="500" modal="regular"}

이동할 단추를 클릭합니다.

단추 텍스트 바로 앞에 표시되는 이동( {width="20"}) 아이콘을 선택하여 단추 컨테이너 내의 단추에 대한 새 위치로 드래그합니다.

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

스테이지의 단추를 클릭하여 도구 상자를 표시하고 설정( {width="20"} ) 아이콘을 선택합니다.

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

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

• Button Text - 단추에 표시할 텍스트를 입력합니다(단계에서 직접 업데이트할 수도 있음).

• Button Type - 단추 형식을 결정합니다.

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

• Button Link - 단추를 클릭할 때 제공되는 대상 페이지를 결정합니다.

  table 0-row-2 1-row-2 2-row-2 3-row-2 4-row-2 layout-auto
  옵션	설명
  URL	상대 URL 또는 정규화된 URL을 사용하여 대상 페이지를 식별합니다.
  Product	제품 이름 또는 SKU를 기반으로 대상 페이지를 식별합니다. 부분 이름 또는 전체 이름을 기반으로 제품 이름을 검색할 수 있습니다. 그런 다음 검색 결과 목록에서 제품이 선택됩니다.
  Category	대상 페이지를 범주 트리에서 특정 범주 또는 하위 범주로 식별합니다.
  Page	대상 페이지를 특정 CMS 페이지로 식별합니다.

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

설정을 저장하고 Page Builder 작업 영역으로 돌아가려면 오른쪽 상단의 Save ​을(를) 클릭합니다.

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

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

• 배열 옵션을 사용하여 컨테이너에 가로 또는 세로로 단추를 표시합니다.

  table 0-row-2 1-row-2 2-row-2 layout-auto
  옵션	설명
  Inline	단추를 가로로 정렬합니다.
  Stacked	단추를 세로로 정렬합니다.

• 기본 설정에 따라 All buttons are same size 옵션을 설정하십시오.

  Yes(으)로 설정된 경우 컨테이너의 모든 단추는 가장 긴 단추 텍스트의 길이에 따라 크기가 같습니다.

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

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

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

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

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

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

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

Margins and Padding ​의 값을 픽셀 단위로 입력하여 단추 또는 단추 컨테이너의 외부 여백과 내부 패딩을 결정합니다.

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