即時預覽
功能區控件
16px
100%
熱門色帶Examples
從這些專業設計的色帶範本中獲得靈感。按兩下任何範例以將其載入到生成器中。
Sale!
Classic Sale 緞帶
非常適合突出折扣和促銷活動。
新品上市
現代新品
用於展示新產品的時尚絲帶。
Featured
彎曲的特色色帶
醒目的設計以突出重要內容。
Banner 特別優惠
用於醒目的公告的寬橫幅。
限時
傾斜的 限時
用它的動態角度創造緊迫感。
Hot Deal!
動畫熱賣
引人注目的熱門優惠動畫絲帶。
如何使用色帶生成器
開始
1
自定義您的功能區
使用右側的控件調整功能區的文本、樣式、顏色、大小和位置。
2
即時預覽
您的更改會立即反映在左側的預覽面板中。
3
複製代碼
對設計滿意後，按兩下複製 CSS 代碼“和”複製 HTML 代碼“按鈕。
4
粘貼到您的專案中
將複製的 CSS 添加到樣式表中，並將 HTML 添加到要顯示功能區的網頁中。
選擇對比色
確保文本顏色與色帶顏色形成良好對比，以實現最大的可讀性。深色背景上的淺色文本（反之亦然）效果最佳。
注意位置
將功能區放置在不會遮擋重要內容但仍非常明顯的角落或邊緣。
謹慎使用動畫
雖然動畫可以引起注意，但過度使用它們可能會分散注意力。為真正緊急或重要的消息保留動畫色帶。
測試回應能力
通過在不同設備上測試或使用瀏覽器開發人員工具，確保您的功能區在所有螢幕尺寸上都顯示良好。
常見用例
突出您商品的促銷優惠和特別優惠。
特色內容
提請注意重要的文章、產品或公告。
限時優惠
通過展示時效性強的促銷活動來營造緊迫感。
新產品
宣佈新品以引起興奮和興趣。
Certifications
顯示獎項、認證或品質印章的徽章。
Announcements
與您的受眾分享重要的更新或新聞。