/No-Code Development Agency

Bubble.io에서 고정 헤더를 어떻게 추가하나요?

저희의 단계별 가이드를 통해 Bubble.io를 마스터하세요. 이 원활한 탐색 기능을 통해 앱의 UX를 향상시키는 붙박이 헤더를 추가하세요.

Matt Graham, CEO of Rapid Developers

Book a call with an Expert

Starting a new venture? Need to upgrade your web or mobile app? RapidDev builds Bubble apps with your growth in mind.

Book a free No-Code consultation

Bubble.io에서 고정 헤더를 어떻게 추가하나요?

단계 1:
Bubble.io 편집기를 열고 페이지 레이아웃 작업 중인 디자인 탭으로 이동합니다.

단계 2:
비주얼 요소 팔레트가 있는 사이드바를 찾습니다. 이 팔레트에서 "Floating Group" 요소를 선택하십시오.

단계 3:
스티키 헤더가 있기 원하는 페이지의 위치에 Floating Group를 그립니다. 보통 페이지의 상단에 위치합니다.

단계 4:
전체 폭 스티키 헤더를 원한다면 Floating Group의 크기를 페이지 전체 폭에 맞게 조정할 수 있습니다. 헤더 컨텐츠를 수용할 수 있도록 높이를 조정할 수 있습니다.

단계 5:
Floating Group 속성 내에서 Floating Group을 위(세로 축)와 페이지 (수평 축)에 대해 상대적으로 "float"으로 설정합니다. 이렇게 하면 사용자가 아래로 스크롤해도 헤더가 페이지 맨 위에 유지됩니다.

단계 6:
Floating Group의 'z-index'를 정의하십시오. 이는 페이지의 다른 요소에 비해 Floating Group이 위 or 아래 레이어에 배치되어야 하는지, 또 스티키 헤더가 페이지 상의 나머지 콘텐츠와 어떻게 상호 작용해야 하는지에 따라 달라집니다.

단계 7:
Floating Group 내에 텍스트, 로고, 버튼, 또는 탐색 링크와 같은 다른 요소를 추가하여 스티키 헤더의 외관을 맞춤설정합니다.

단계 8:
페이지를 미리 보고 스티키 헤더가 실제로 작동하는지 페이지를 스크롤할 때 예상대로 동작하는지 확인합니다.

단계 9:
Floating Group 내의 스티키 헤더 스타일이나 위치에 필요한 추가 조정을 수행합니다.

단계 10:
스티키 헤더에 만족하면 변경 사항을 저장하고 앱 배포하여 스티키 헤더를 웹사이트에 실시간으로 적용합니다.

더 유용한 노코드 리소스 살펴보기

No-Code Tools Reviews

Delve into comprehensive reviews of top no-code tools to find the perfect platform for your development needs. Explore expert insights, user feedback, and detailed comparisons to make informed decisions and accelerate your no-code project development.

Explore

WeWeb Tutorials

Discover our comprehensive WeWeb tutorial directory tailored for all skill levels. Unlock the potential of no-code development with our detailed guides, walkthroughs, and practical tips designed to elevate your WeWeb projects.

Explore

No-Code Tools Comparison

Discover the best no-code tools for your projects with our detailed comparisons and side-by-side reviews. Evaluate features, usability, and performance across leading platforms to choose the tool that fits your development needs and enhances your productivity.

Explore

By clicking “Accept”, you agree to the storing of cookies on your device to enhance site navigation, analyze site usage, and assist in our marketing efforts. View our Privacy Policy for more information.

Cookie preferences