페이지 일부 영역을 사이드에 고정하는 법📌 | 1분 디자인 레시피
2023. 07. 14
👥 스크롤을 아무리 내려도, 내가 원하는 부분은 고정할 수 있다고?
모든 홈페이지 방문자에게 보여주고 싶은 내용이 있으신가요? 그럴 땐 아임웹 디자인모드에서 섹션 사이드 고정 기능을 이용해 보세요! 아임웹 디자인모드에서는 섹션을 나누어 사이드 영역을 만들 수 있는데요. 나눠진 사이드 섹션을 고정하면? 사이트 방문자가 페이지를 아무리 스크롤 해도 내가 원하는 콘텐츠를 고정적으로 보여줄 수 있죠.
이번 아임웹 디자인 레시피에서는 기후정의를 실현하는 시민운동 플랫폼 <서울환경연합> 홈페이지 디자인 사례를 통해 섹션 사이드 고정법을 알아보고자 합니다. 서울환경연합은 페이지 왼쪽에 자신들이 전하고자 하는 메시지를 고정적으로 표시해, 비전을 강조하고 있는데요.
페이퍼룰러의 레시피, 지금 알아볼까요?👩🍳
📌이런 분이라면 특히 주목해 주세요!
- 홈페이지 레이아웃을 독특하게 만들고 싶은 분
- 모든 방문자에게 알리고 싶은 이벤트/프로모션, 콘텐츠 등이 있으신 분
- 방문자가 홈페이지를 더욱 편리하게 구경할 수 있게 페이지 구성을 하고 싶으신 분
STEP 1
디자인 모드에 접속 후, 위젯이 없는 빈 공간에서 마우스 오른쪽을 클릭해 [빈 섹션 추가]로 들어가 주세요.
STEP 2
추가한 섹션에서 마우스 오른쪽을 클릭해 [섹션 설정]으로 이동해 주세요.
STEP 3
[사이드] 항목에서 원하는 디자인과 규격을 설정한 뒤, ‘섹션 사이드 고정’ 기능을 체크해 주세요.
✋여기서 잠깐!
모바일은 해당 기능이 적용되지 않습니다.
(현재 '사이드 섹션' 관련 기능은 PC에서만 구현이 가능해요.) *2024년 2월 기준
STEP 4
분할된 섹션 안의 영역을 클릭해서, 원하는 디자인 요소를 추가해 주면 끝이에요!
💡TIP
웹사이트 좌측 메뉴와 함께 상단 메뉴도 고정하고 싶다면, 상단 메뉴 오른쪽 클릭 > [상단 설정] 메뉴 > 오른쪽 토글 버튼을 활성화해 주세요.
다른 브랜드들은 이 기능을 어떻게 활용했을까요?
🔎 CHILLYCHERRY 칠리체리
상품 카테고리를 왼쪽 섹션에 고정하여, 방문자가 제품을 쉽고 빠르게 찾을 수 있도록 했어요.
🔎 아임웹 (🔗2022 잘.자.란 연말결산)
페이지 타이틀을 좌/우 번갈아 고정 배치해 보여주어, 방문자에게 구경하는 재미를 선사했어요.
✅ 섹션 사이드 고정, 이렇게도 활용할 수 있어요!
- 페이지별 타이틀을 보여주기 (ex. 페이지 제목 및 설명 1-2줄)
- 방문자의 관심도를 높이는 정보를 보여주기 (ex. 할인 혜택, 행사/이벤트 안내, 광고 배너 등)
- 제품/서비스 문의를 위한 정보 보여주기 (ex. 이메일, 인스타그램 등의 연락처)
우리 브랜드만의 감도 높은 웹사이트, 쉽고 빠르게 만들어 보세요!
아임웹은 웹사이트, 온라인 쇼핑몰 제작을 고민하는 여러분들을 위해 70여 개의 템플릿을 무료로 제공하고 있어요. 조금만 수정해도 꽤 그럴듯한 웹사이트가 완성되죠! 마음에 드는 템플릿을 발견했다면, 지금 바로 가볍게 만들어 보세요👇
