아임웹으로 제작한 감각적인 웹사이트들, 어떻게 만들었을까 궁금하셨나요? 1분 안에 만들 수 있는 아임웹 레시피를 소개합니다👩🍳
고객이 상품을 클릭하도록 유도하기 위해서는 시선이 가는 상품 썸네일을 만드는 것이 중요한데요. 마우스포인터를 올렸을 때 이미지가 전환되는 롤오버(Hover) 효과 설정법, 지금 알아볼까요?
준비물
상품 이미지와 배경색이 깔린 이미지. 총 2장을 준비해 주세요.
✅ STEP 1
[관리자페이지] > [쇼핑] > [상품 관리]에 접속하여 이미지를 변경할 상품을 클릭해주세요. [이미지 추가]를 클릭하여 준비한 이미지 2개를 추가해 주세요.
✅ STEP 2
상품 이미지를 설정했다면, [디자인 모드]에 접속하여 [쇼핑 기획전 위젯]에서 마우스 오른쪽 버튼을 클릭 후 [쇼핑 설정]을 클릭해 주세요.
✅ STEP 3
[디자인 설정]에서 [Hover] 항목 중 ‘두 번째 이미지 표시’를 클릭하면 끝이에요!
💡Tip!
1️⃣ 두 번째 이미지 설정에 따라 상품의 구성품을 자세히 보여줄 수도 있고, 상품 착용컷이나 연출컷을 보여줄 수도 있답니다.
2️⃣ 상품 썸네일 외에도 텍스트, 이미지, 버튼 등에 마우스 포인터가 올라갔을 때 전환 효과를 줄 수 있어요. 웹사이트 무드에 맞게 다양한 옵션을 설정해보세요!
*사례로 소개한 Sarangbang(사랑방)은 아임웹과 함께 성장하는 브랜드입니다.
오늘 소개해 드린 내용 외에 다양한 인사이트가 궁금하다면?
by 마케팅 소영
