페이지 일부 영역을 사이드에 고정하는 법📌 | 1분 디자인 레시피

2023. 07. 14


👥 스크롤을 아무리 내려도, 내가 원하는 부분은 고정할 수 있다고?


모든 홈페이지 방문자에게 보여주고 싶은 내용이 있으신가요? 그럴 땐 아임웹 디자인모드에서 섹션 사이드 고정 기능을 이용해 보세요! 아임웹 디자인모드에서는 섹션을 나누어 사이드 영역을 만들 수 있는데요. 나눠진 사이드 섹션을 고정하면? 사이트 방문자가 페이지를 아무리 스크롤 해도 내가 원하는 콘텐츠를 고정적으로 보여줄 수 있죠.

이번 아임웹 디자인 레시피에서는 기후정의를 실현하는 시민운동 플랫폼 <서울환경연합> 홈페이지 디자인 사례를 통해 섹션 사이드 고정법을 알아보고자 합니다. 서울환경연합은 페이지 왼쪽에 자신들이 전하고자 하는 메시지를 고정적으로 표시해, 비전을 강조하고 있는데요.


페이퍼룰러의 레시피, 지금 알아볼까요?👩‍🍳

 

📌이런 분이라면 특히 주목해 주세요!

  • 홈페이지 레이아웃을 독특하게 만들고 싶은 분
  • 모든 방문자에게 알리고 싶은 이벤트/프로모션, 콘텐츠 등이 있으신 분
  • 방문자가 홈페이지를 더욱 편리하게 구경할 수 있게 페이지 구성을 하고 싶으신 분




STEP 1
디자인 모드에 접속 후, 위젯이 없는 빈 공간에서 마우스 오른쪽을 클릭해 [빈 섹션 추가]로 들어가 주세요.


STEP 2
추가한 섹션에서 마우스 오른쪽을 클릭해 [섹션 설정]으로 이동해 주세요.


STEP 3
[사이드] 항목에서 원하는 디자인과 규격을 설정한 뒤, ‘섹션 사이드 고정’ 기능을 체크해 주세요.

✋여기서 잠깐!
모바일은 해당 기능이 적용되지 않습니다. 
(현재 '사이드 섹션' 관련 기능은 PC에서만 구현이 가능해요.) *2024년 2월 기준



STEP 4
분할된 섹션 안의 영역을 클릭해서, 원하는 디자인 요소를 추가해 주면 끝이에요!

💡TIP
웹사이트 좌측 메뉴와 함께 상단 메뉴도 고정하고 싶다면, 상단 메뉴 오른쪽 클릭 > [상단 설정] 메뉴 > 오른쪽 토글 버튼을 활성화해 주세요.




다른 브랜드들은 이 기능을 어떻게 활용했을까요?


🔎 CHILLYCHERRY 칠리체리
상품 카테고리를 왼쪽 섹션에 고정하여, 방문자가 제품을 쉽고 빠르게 찾을 수 있도록 했어요.



🔎 아임웹 (🔗2022 잘.자.란 연말결산)
페이지 타이틀을 좌/우 번갈아 고정 배치해 보여주어, 방문자에게 구경하는 재미를 선사했어요.



섹션 사이드 고정, 이렇게도 활용할 수 있어요!

  • 페이지별 타이틀을 보여주기 (ex. 페이지 제목 및 설명 1-2줄)
  • 방문자의 관심도를 높이는 정보를 보여주기 (ex. 할인 혜택, 행사/이벤트 안내, 광고 배너 등)
  • 제품/서비스 문의를 위한 정보 보여주기 (ex. 이메일, 인스타그램 등의 연락처)



아임웹 디자인모드 내 기능들을 잘 활용하면, 독특한 홈페이지 디자인으로 방문자의 마음을 사로잡을 수 있답니다! 오늘 소개해 드린 기능을 통해 하이라이트 하고 싶은 콘텐츠를 색다르게 표현해보는 건 어떨까요?🎇


레시피 사례로 소개한 서울환경연합칠리체리는 아임웹과 함께 성장하는 브랜드입니다.


💌 평소 궁금했던 디자인 설정법이 있다면 알려주세요!

아임웹을 사용하거나, 고객사례를 보며 궁금했던 디자인 설정법이 있으셨다면 👉 여기에 남겨주세요. 보내주신 의견을 참고하여, 더욱 유익한 디자인 레시피를 들고 찾아올게요!




📖 오늘 내용과 연관된 아임웹 가이드



🔖 다른 레시피 보러가기




by 마케팅 소영