저희의 단계별 가이드를 통해 Bubble.io를 마스터하세요. 이 원활한 탐색 기능을 통해 앱의 UX를 향상시키는 붙박이 헤더를 추가하세요.
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.
단계 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:
스티키 헤더에 만족하면 변경 사항을 저장하고 앱 배포하여 스티키 헤더를 웹사이트에 실시간으로 적용합니다.
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.
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.
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.