Studio 에디터: 다중상태 상자 사용하기

4 분 분량
다중상태 상자를 사용하면 한 번에 하나의 상태를 동일한 컨테이너 상자에서 다양한 상황에 대해 서로 다른 콘텐츠로 표시할 수 있습니다. 상자에 포함되어야 하는 상태의 양을 선택하고 완전히 디자인한 후 나중에 코드에서 사용할 ID를 부여하세요.
코드는 각 상태를 표시해야 하는 시점을 정의합니다. 각 상태가 자동으로 표시되도록 조건을 생성하거나 방문자가 직접 탐색하도록 설정할 수 있습니다. 
상태를 변경하는 라이브 상태의 다중 상태 상자를 보여주는 GIF

1 단계 | 다중상태 상자 추가하기

첫 번째 단계는 요소 추가 패널에서 직접 다중상태 상자를 사이트에 추가하는 것입니다. 상자를 페이지의 원하는 위치로 끌어다 놓으세요.

다중상태 상자를 추가하려면:

  1. 에디터 왼쪽에서 요소 추가를 클릭합니다.
  2. 레이아웃 도구를 클릭합니다.
  3. 다중상태 상자를 클릭합니다.
  4. 다중상태 상자를 페이지의 관련 위치로 끌어다 놓습니다. 
요소 추가 패널이 열려 있습니다. 다중상태 상자 요소가 강조 표시되어 있습니다.
반복 레이아웃에서 다중상태 사용하기:
반복 레이아웃 아이템에 다중상태 상자를 추가할 경우, 동일한 디자인으로 나머지 아이템에 자동으로 추가됩니다. 이는 자주 묻는 질문 또는 제품 갤러리처럼 아이템이 반복되는 목록에 유용합니다.

2 단계 | 상태 추가 및 디자인하기

상자를 추가한 후에는 상자에 표시될 상태를 디자인하세요. 상태와 관계없이 상태를 사용자 지정할 수 있습니다. 제품 재고 상태와 같은 작은 배지(예: "신제품", "품절")에 사용하거나 각 상태에 대해 완전히 다른 디자인을 제작할 수 있습니다. 
아래를 클릭해 지침을 확인하세요.
다중상태 상자의 상태 관리 요소가 Studio 에디터에 열려 옵션을 표시합니다.
디자인 도움말:
각 상태는 추가 정보를 표시할 수 있도록 다양한 높이 속성을 가질 수 있습니다. 하지만, 상태의 너비는 항상 동일하게 유지됩니다.

3 단계 | 코드 추가하기

다중상태 상자를 작동시키기 위한 마지막 단계는 각 상태가 표시되는 시점을 제어하는 코드를 추가하는 것입니다. 
다중상태 상자용 Velo API에서 사용 가능한 기능 및 이벤트를 사용해 상태를 표시하고 탐색하기 위한 규칙을 정의 및 구현할 수 있습니다.
중요!
관련 코드 추가 시에는 상태 ID를 정확하게 입력했는지, 동일한 철자 및 대소문자를 사용했는지 확인하세요. 
다중상태 상자의 상태와 왼쪽의 관련 코드를 보여주는 GIF
다음 단계:
다중상태 상자 및 코드 작업에 대해 자세히 알아보세요. (영문)

도움이 되었나요?

|