방문자의 행동을 이끌어내는 하단 고정 배너 설정법 📌 | 1분 디자인 레시피
2025. 05. 02
방문자가 그냥 나가지 않고, 특정 행동을 하도록 유도하고 싶다면? 스크롤을 내려도 계속 따라오는 ‘PC 하단 고정 섹션’을 만들어 보세요.
하단 고정 섹션은 웹사이트 내 어디에서도 볼 수 있는 하단 섹션으로, 중요한 CTA(Call to action) 버튼을 만들 때 특히 유용해요. 보통 상담 신청, 앱 다운로드, 뉴스레터 구독 등 특정 행동을 유도하는 랜딩페이지에 많이 활용됩니다. 쇼핑몰 사이트라면 ‘첫 구매 10% 할인’ 같은 혜택을 알리거나, ‘이벤트 종료 임박’ 같은 문구를 띄워볼 수도 있죠.
아임웹에서는 간단한 코드 추가만으로 이 고정 섹션을 바로 만들 수 있답니다. 오늘은 간단한 코드를 활용해 PC 하단 고정 섹션 설정하는 법을 1분 안에 알려드릴게요!
📌이런 분이라면 특히 주목해 주세요!
- 웹사이트를 처음 만들거나 리뉴얼 중인 분
- 방문자의 전환율을 높이고 싶은 분 (ex. 상담 신청, 앱 다운로드, 뉴스레터 구독, 회원가입 등)
- 중요한 프로모션이나 이벤트를 효과적으로 알리고 싶은 분
STEP 1
아임웹 디자인모드 접속 후, 회색 영역을 오른쪽 클릭한 뒤, 빈 섹션을 추가해 주세요.
STEP 2
해당 섹션을 가장 아래로 이동시킨 뒤, 오른쪽에 '섹션 반복' 아이콘을 클릭해 주세요.
STEP 3
섹션 왼쪽 영역을 오른쪽 클릭한 후 [섹션 설정] 메뉴 클릭, 적혀져 있는 섹션 ID를 메모해 주세요.
STEP 4
관리자 페이지로 이동. [환경설정 > SEO] 메뉴로 들어가 고급설정의 ‘공통 코드 삽입’ 옵션을 활성화한 후, 아래 'Footer Code'에 아래 코드를 복사해 붙여넣어주세요.
1 2 3 4 5 6 7 8 9 10 | <style> @media (min-width: 992px) { #섹션ID { position: fixed; bottom: 0; width: 100%; z-index: 1040; } } </style> | cs |
STEP 5
붙여놓은 코드의 ‘#섹션ID’ 부분을 아까 메모한 섹션ID 값으로 변경한 뒤 저장하면 끝!
✋ 주의사항
- 해당 설정은 ‘모바일’에는 적용되지 않습니다.
- 아임웹에서 제공하지 않는 기능을 코드로 해결하는 내용입니다. 사용자가 임의로 변경한 부분에 대해 기술 및 고객지원은 불가하며, 향후 아임웹 업데이트에 따라 정상적으로 작동하지 않을 수 있습니다.
우리 브랜드만의 감도 높은 웹사이트, 쉽고 빠르게 만들어 보세요!
아임웹은 웹사이트, 온라인 쇼핑몰 제작을 고민하는 여러분들을 위해 70여 종의 템플릿을 무료로 제공하고 있어요. 조금만 수정해도 꽤 그럴듯한 웹사이트가 완성되죠! 마음에 드는 템플릿을 발견했다면, 지금 바로 가볍게 만들어 보세요👇
🔖 다른 레시피 보러가기
