FOOTER & SHELL
带 CTA 页脚Footer with CTA
页脚上方再嵌一块浅色 CTA 区块，用最后的转化机会收尾。滚动到底部的用户往往已经认真看完了整页。
效果预览
今天就开始第一次部署
免费额度足够跑完整个试用期，不需要绑卡。
免费开始© 2026 UI 模式词典隐私 · 条款 · 状态
适合用在哪
落地页、定价页末尾、长文页的收口。CTA 文案要与页面首屏不同。
容易踩的坑
- 页脚 CTA 与首屏按钮文案一字不差，重复劝说显得敷衍，点击率偏低。
- 已有底部悬浮 CTA 条时再叠页脚 CTA，滚到底会同时出现两个相同按钮。
- 浅色渐变底上放浅灰说明文字，对比度不足，移动端强光下几乎看不见。
设计提示词 · Prompt
带 CTA 页脚（Footer with CTA）：上方是一块浅色渐变底（如 120deg #eef2ff→#faf5ff→#ecfeff）的居中区块，13-24px 加粗标题 + 一行 9.5px 说明 + 一个深色胶囊按钮，上下内边距 13-24px。下方一条细线分隔，再接一行左右分布的小字版权与几个链接（9px 浅灰）。CTA 区块要圆角（11px）或与整块融为一体；文案换一个角度复述价值，例如首屏说「让想法一夜上线」，这里说「今天就开始第一次部署」。
Footer with CTA: on top, a centered block on a light gradient background (e.g. 120deg #eef2ff→#faf5ff→#ecfeff) with a 13-24px bold title + a 9.5px line of explanation + a dark pill button, with 13-24px vertical padding. Below, a thin divider line, then one row of small copyright text and a few links spread left and right (9px light gray). The CTA block should either have rounded corners (11px) or blend into the whole; restate the value from a different angle — e.g. if the hero says "Ship your idea overnight", this says "Start your first deploy today".
常见搭配
同一页面里经常和「带 CTA 页脚」一起出现的模式，可以收藏后用「组合收藏为整页提示词」一起交给 AI。
演示 HTML 结构
<div class="sh-fcta">
<div class="sh-fcta__c">
<b>今天就开始第一次部署</b>
<p>免费额度足够跑完整个试用期，不需要绑卡。</p>
<em>免费开始</em>
</div>
<div class="sh-fcta__b"><span>© 2026 UI 模式词典</span><span>隐私 · 条款 · 状态</span></div>
</div>