이미지·텍스트를 본문 상단에 고정하는 법📌 | 1분 디자인 레시피
2023. 10. 13
※ 이번 레시피는 고객님의 소중한 의견을 바탕으로 제작되었습니다.
눈에 확! 꽂히는 웹사이트, 쉽게 만드는 디자인 꿀팁을 공개합니다. 바로 아임웹 디자인모드의 [본문 섹션 고정] 기능을 사용하는 건데요. 이 기능을 활용해 웹사이트를 구성하면 마우스 스크롤을 통해 특정 섹션이 브라우저 화면을 벗어나더라도 상단에 고정되는 효과를 줄 수 있죠.
이번 아임웹 레시피에서는 자연적인 소재를 활용해 감각적인 제품을 선보이는 브랜드 <베지터블 플라워 스튜디오>의 사례를 통해 본문 섹션 고정법을 알아보려 합니다. 이 브랜드는 웹사이트 페이지를 스크롤 했을 때, 상단에 고정된 심볼과 뒷배경 이미지가 딱 들어맞도록 하여 브랜드 로고를 더욱 재치 있게 보여주고 있는데요.
베지터블 플라워 스튜디오의 레시피, 지금 알아볼까요?👩🍳
📌이런 분이라면 특히 주목해 주세요!
- 방문자에게 고정적으로 보여주고 싶은 내용이 있으신 분
- 독특한 웹사이트 디자인으로 방문자의 눈길을 끌고 싶은 분
- 웹사이트에서 브랜드 아이덴티티를 더욱 잘 드러내고 싶은 분
STEP 1
디자인 모드에 접속 후 가장자리 마우스 우클릭, 빈 섹션 추가 후 [이미지]위젯을 추가해 주세요.
STEP 2
고정적으로 보여줄 이미지를 추가한 뒤, 메뉴에서 나와 가장자리 마우스 우클릭, [섹션 설정] 메뉴에서 ‘섹션 고정’을 체크해 주세요.
✋여기서 잠깐!
고정적으로 보여줄 이미지 배경이 ‘투명’이어야 합니다. remove.bg를 활용하면 무료로 이미지 배경을 지울 수 있어요!
STEP 3
고정된 이미지 뒤에 표시할 이미지를 원하는 만큼 추가해 주면 끝이에요!
STEP 4
하단에 [옵션] 항목에서 ‘원페이지 구성’을 체크하면 끝이에요!
💡TIP
이미지별로 애니메이션을 넣어 생동감을 더할 수 있어요. 마우스 우클릭 > [애니메이션] 메뉴를 클릭해 원하는 모션을 추가해 보세요.
다른 브랜드들은 이 기능을 어떻게 활용했을까요?
🔎 주얼주얼
할인 혜택과 제품 카테고리 버튼을 고정적으로 표시하여, 방문자가 자연스럽게 제품을 구경하게끔 했어요.
🔎 로케이트서울
브랜드 로고와 함께 연상되는 이미지들을 보게끔 하여, 방문자에게 브랜드 아이덴티티를 감각적으로 느낄 수 있게끔 했어요.
✅ 본문 섹션 고정(이미지/텍스트 본문 상단 고정), 이런 용도로도 활용할 수 있어요!
- 방문자를 환영하는 메시지를 보여주기
- 방문자에게 알리고 싶은 정보를 강조하기 (ex. 슬로건, 이벤트/프로모션, 신제품 소식, 주의사항 등)
- 다른 페이지로 이동하는 장치로 활용하기 (ex. 클릭 시 회원가입 페이지로 이동 등)
우리 브랜드만의 감도 높은 웹사이트, 쉽고 빠르게 만들어 보세요!
아임웹은 웹사이트, 온라인 쇼핑몰 제작을 고민하는 여러분들을 위해 70여 개의 템플릿을 무료로 제공하고 있어요. 조금만 수정해도 꽤 그럴듯한 웹사이트가 완성되죠! 마음에 드는 템플릿을 발견했다면, 지금 바로 가볍게 만들어 보세요👇
