디자인 요소 – 스티키요소

함께 나누는 케이테마 입니다. 언제나 변화와 차별화, 창의적인 디자인을 향해 도전하고 있습니다.

디자인 요소 – 스티키요소

K-Theme Widgets

스크롤 흐름 안에서 고정되는 K-Sticky

Elementor의 Sticky Scrolling은 Motion Effects에서 설정하는 패턴입니다. K-Theme에서는 무료 Elementor 기준에서도 바로 배치할 수 있도록 K-Sticky 위젯으로 상단 고정, 사이드바 고정, 하단 CTA 고정 예시를 제공합니다.
01

상단 고정 안내 패널

헤더 아래에서 안내, 필터, 목차가 따라오게 만드는 가장 기본적인 sticky 패턴입니다.
Top sticky

헤더 아래 고정

상단 헤더 높이를 고려해 offset을 두고, 사용자가 긴 내용을 읽는 동안 현재 섹션의 핵심 액션을 유지합니다.

상단 패턴
01

Offset

고정 요소가 헤더를 가리지 않도록 80-120px 정도의 상단 여백을 둡니다.

02

Parent height

sticky는 부모 섹션 안에서만 동작하므로 데모처럼 충분한 스크롤 높이를 확보합니다.

03

Focus action

문의 버튼, 필터, 진행 상태처럼 계속 보여야 하는 요소에 적합합니다.

02

사이드바 목차 고정

문서형 페이지, 서비스 소개, 가격 비교처럼 긴 콘텐츠에서는 좌측 또는 우측 요약 패널이 읽기 흐름을 잡아줍니다.
Sidebar sticky

섹션 목차

현재 섹션의 핵심 정보와 이동 액션을 sticky 패널로 유지해 사용자가 길을 잃지 않게 합니다.

목차 패턴
01

정보 구조

제목, 짧은 설명, CTA를 한 패널에 묶어 반복 탐색을 줄입니다.

02

스크롤 범위

패널은 이 위젯의 부모 영역 끝까지만 고정되어 다음 섹션을 침범하지 않습니다.

03

모바일

모바일에서는 sticky를 해제하고 일반 카드처럼 쌓아 읽기 공간을 확보합니다.

04

실무 적용

사이드 메뉴, 견적 요약, 신청 CTA, 다운로드 패널에 적합합니다.

03

하단 고정 CTA 바

상담 신청, 구매 버튼, 요약 알림처럼 사용자가 스크롤 중에도 놓치면 안 되는 액션은 하단 sticky bar로 구성합니다.
Bottom CTA

상담 신청을 유지

페이지 하단 영역에서 CTA를 고정해 전환 액션을 놓치지 않게 합니다.

상담 신청
01

Conversion

상담, 구매, 예약처럼 전환성이 높은 액션에 사용합니다.

02

Spacing

하단 버튼이 본문을 가리지 않도록 섹션 아래 여백을 충분히 둡니다.

03

Device

모바일에서는 크기와 위치를 단순화해 콘텐츠를 가리지 않게 합니다.