제품 위젯: 디자인
2 분 분량
아래 옵션을 사용해 완벽한 제품 위젯을 디자인하세요.
배경 및 테두리
- 배경 투명도 및 색상: 색상 상자를 클릭해 버튼 배경 색상을 선택합니다. 슬라이더를 끌어 투명도를 변경합니다.
- 테두리 두께 (px) 및 색상: 색상 상자를 클릭해 테두리 색상을 선택하고 슬라이더를 끌어 테두리 두께를 설정합니다.
- 구분선 두께 (px) 및 색상: 색상 상자를 클릭해 구분선 색상을 선택하고 슬라이더를 끌어 구분선 두께를 설정합니다. (일부 레이아웃에서 사용 가능)
- 구분선 길이 (px): 슬라이더를 끌어 이름 및 가격 사이의 구분선 길이를 변경합니다. (일부 레이아웃에서 사용 가능)
텍스트
텍스트 색상을 선택하고 텍스트
아이콘을 클릭해 다음 텍스트에 대한 글꼴을 선택합니다.
아이콘을 클릭해 다음 텍스트에 대한 글꼴을 선택합니다.- 제품명
- 가격
- 가격 내역 (예: $2.50/kg)
- 품절 메시지
버튼
- 버튼 스타일: 클릭해 버튼 스타일을 선택합니다.
- 색상 및 투명도: 색상 상자를 클릭해 버튼 배경 색상을 선택합니다. 슬라이더를 끌어 투명도를 변경합니다.
- 테두리 두께 (px) 및 색상: 색상 상자를 클릭해 테두리 색상을 선택하고 슬라이더를 끌어 테두리 두께를 설정합니다.
- 모서리 반경 (px): 슬라이더를 끌어 버튼 모서리 반경을 설정합니다. (숫자가 클수록 모서리가 둥글어 집니다.)
- 버튼 크기: 슬라이더를 끌어 버튼 크기를 변경합니다.
- 텍스트 글꼴 및 색상: 텍스트 색상을 선택하고 텍스트 아이콘을 클릭해 버튼 텍스트에 대한 글꼴을 선택합니다.
마우스오버
고객이 위젯에 마우스오버 시 제품 위젯이 어떻게 변경될지 설정합니다.
- 없음: 위젯이 변경되지 않습니다.
- 오버레이: 색상 오버레이가 마우스오버에 표시됩니다.
- 색상 상자를 클릭해 오버레이 색상을 선택합니다. 슬라이더를 끌어 투명도를 변경합니다.
- (선택사항) 색상 상자를 클릭해 테두리 색상을 선택하고 슬라이더를 끌어 테두리 너비를 변경합니다.
- (선택사항) 마우스오버 줌인 버튼을 클릭합니다.
- 활성: 고객이 이미지에 마우스오버 시, 이미지가 줌인됩니다.
- 비활성: 고객이 이미지에 마우스오버 시, 이미지는 줌인되지 않습니다.
- 확대: 마우스오버 시 이미지가 확대됩니다.
- (선택사항) 색상 상자를 클릭해 오버레이 색상을 선택합니다. 슬라이더를 끌어 투명도를 변경합니다.
- (선택사항) 색상 상자를 클릭해 테두리 색상을 선택하고 슬라이더를 끌어 테두리 너비를 변경합니다.
- 마우스오버 줌인 버튼: 확대를 유지하려면, 버튼이 활성화되어 있는지 확인합니다.
- 테두리: 마우스오버 시 제품 정보에 테두리가 표시됩니다.
- (선택사항) 색상 상자를 클릭해 오버레이 색상을 선택합니다. 슬라이더를 끌어 투명도를 변경합니다.
- 색상 상자를 클릭해 테두리 색상을 선택하고 슬라이더를 끌어 테두리 너비를 변경합니다.
- (선택사항) 마우스오버 줌인 버튼을 클릭합니다.
- 활성: 고객이 이미지에 마우스오버 시, 이미지가 줌인됩니다.
- 비활성: 고객이 이미지에 마우스오버 시, 이미지는 줌인되지 않습니다.
리본
리본 디자인을 설정합니다. 여기에서 제품에 리본을 추가하는 방법을 확인하세요.
- 색상 및 투명도: 색상 상자를 클릭해 리본 색상을 선택합니다. 슬라이더를 끌어 리본 투명도를 변경합니다.
- 텍스트 색상: 리본 텍스트에 대한 색상을 선택합니다.
도움이 되었나요?
|