👩‍🍳아임웹 디자인 레시피 : 시선을 빼앗는 상품 썸네일 만들기

2023. 04. 05

아임웹으로 제작한 감각적인 웹사이트들, 어떻게 만들었을까 궁금하셨나요? 1분 안에 만들 수 있는 아임웹 레시피를 소개합니다👩‍🍳


고객이 상품을 클릭하도록 유도하기 위해서는 시선이 가는 상품 썸네일을 만드는 것이 중요한데요. 마우스포인터를 올렸을 때 이미지가 전환되는 롤오버(Hover) 효과 설정법, 지금 알아볼까요?



준비물

상품 이미지와 배경색이 깔린 이미지. 총 2장을 준비해 주세요.


✅ STEP 1

[관리자페이지] > [쇼핑] > [상품 관리]에 접속하여 이미지를 변경할 상품을 클릭해주세요. [이미지 추가]를 클릭하여 준비한 이미지 2개를 추가해 주세요.


✅ STEP 2

상품 이미지를 설정했다면, [디자인 모드]에 접속하여 [쇼핑 기획전 위젯]에서 마우스 오른쪽 버튼을 클릭 후 [쇼핑 설정]을 클릭해 주세요.


✅ STEP 3

[디자인 설정]에서 [Hover] 항목 중 ‘두 번째 이미지 표시’를 클릭하면 끝이에요!


💡Tip!

1️⃣ 두 번째 이미지 설정에 따라 상품의 구성품을 자세히 보여줄 수도 있고, 상품 착용컷이나 연출컷을 보여줄 수도 있답니다. 

2️⃣ 상품 썸네일 외에도 텍스트, 이미지, 버튼 등에 마우스 포인터가 올라갔을 때 전환 효과를 줄 수 있어요. 웹사이트 무드에 맞게 다양한 옵션을 설정해보세요!


*사례로 소개한 Sarangbang(사랑방)은 아임웹과 함께 성장하는 브랜드입니다.




오늘 소개해 드린 내용 외에 다양한 인사이트가 궁금하다면?


by 마케팅 소영

시작이 어려우신가요?

교육 받아보시면 쉽습니다.

온라인 교육 바로가기

한 번 이용하면 팬이 됩니다.

아임웹에서 당신의 생각을 표현해보세요.
978.2K
누적 사이트 이용 수
이미 수만 명이 아임웹 팬이 되어
각자의 생각을 표현하고 있습니다.
315
일 평균 사이트 개설 수
지금 이 순간에도 매일
새로운 브랜드가 소개되고 있습니다.
2.2K
전국 파트너/리셀러 수

아임웹과 함께하는 제휴사

아임웹은 페이팔, KG이니시스, 네이버, KCP, 나이스페이, 이지페이, 엑심베이 공식파트너입니다.