跳到主要内容
前端术语库

UI 组件 · 营销

行动号召区

CTA Section

也叫：结尾行动区、号召区块、转化区、Call to Action、CTA Banner、Final CTA

官网页面结尾（或中间）一块醒目的区域，一句标题加一个主按钮，在访客看完介绍后再推一把，让他注册、试用或联系销售。

点「标注」看每个部分叫什么。

怎么跟 AI 说

改成你的业务内容再发

在页脚上方加一个行动号召区：内容最大宽度 960px，圆角 24px，深色背景，上下内边距 64px。左侧是 36px 白色标题和一行 16px 浅灰说明，标题写一句具体的理由（例如「今天开店，明天就能收款」，换成我的产品真实能做到的事）；右侧是一个 48px 高的主按钮「免费试用」（和首屏主按钮文案一致）和一个描边次按钮「联系销售」。按钮下方可以放一行 13px 小字写试用政策，只写真实存在的条款，没有就删掉这一行。手机上改为上下排列，按钮撑满宽度。

发给

01判断

你的内容是这样吗？

对照两列，确认行动号召区是不是你要找的。

符合这些情况，用行动号召区

  • 落地页、产品页的结尾，访客看完介绍后需要一个明确的下一步
  • 长页面中间某个说服点之后（例如客户评价之后），顺势引导注册
  • 活动页、新功能发布页，需要把访客集中引导到一个报名或试用入口

是这些情况，换成别的

  • 页面第一屏，应该用首屏横幅先讲清产品是什么

    改用首屏横幅

  • 维护通知、临时活动提醒

    改用横幅公告

  • 后台、工具页面里的普通操作

    改用按钮

拿不准？上传页面截图，页面分析会逐块判断该用什么布局。

02避坑

常见坏用法

看起来能用，其实会给用户添麻烦。

  1. 01

    每隔一个区块就插一个行动号召区，按钮文案还各不相同，显得很急躁

  2. 02

    放了三四个同样醒目的按钮（试用、演示、下载、联系），访客不知道该点哪个

  3. 03

    标题写「还在等什么？」这种空话，按钮旁写着实际没有的「永久免费」承诺

03识别

怎么认出它

先看整体结构，再对照几个一眼能认出的特征。

结构

由一行标题、一行补充说明和一到两个行动按钮组成，常放在整宽的深色或浅灰色块里，按钮旁可带一行小字说明（试用政策、是否需要绑卡）。

组成部分点一下，在上面的线框里标出来

识别特征

  1. 1页面靠后、页脚上方一块深色或浅灰的整块区域
  2. 2里面一行大号标题，旁边或下方一个醒目的主按钮
  3. 3内容很少，没有图片列表或表格

04解释

详细解释

行动号召区（CTA，Call to Action）通常放在落地页的最后、页脚上方，有时也插在长页面中间。结构很简单：一行具体的标题（「今天开店，明天就能收款」）、一行补充说明、一个主按钮，最多再加一个次按钮，按钮旁可以有一行小字写试用政策。背景常用深色或浅灰色块，和上下区块明显分开。

它和 首屏横幅 都是「标题 + 按钮」，但首屏横幅在第一屏，要先讲清产品是什么，配产品图；行动号召区出现在访客已经了解之后，不再解释，只给出下一步。它也不同于 横幅公告：横幅公告是页面顶部一条通知（维护、活动），可以关掉；行动号召区是页面内容的一部分。和单独一个 按钮 的区别是，它是一整块区域，给按钮配上了理由。

按钮文案和首屏主按钮保持一致（都叫「免费试用」），别每处换一个说法；一个区块只推一个主要行动。「无需绑卡」「随时取消」这类承诺只写真实存在的政策。一页里出现两三次就够了，每个区块后面都插一个会让人烦。

开发者信息
术语 ID
component-cta-section
DOM 选择器

插件在本地识别时匹配这些 CSS 选择器（标签、ARIA role、常见组件库 class）。

  • section:is([class*="cta" i], [id*="cta" i])
  • :is(div, aside):is([class*="cta" i], [id*="cta" i]):has(h2, h3):has(a[href], button):not([class*="cta" i] *, [id*="cta" i] *, nav *, header *)
类名关键词

类名、id、data-testid 拆成单词后连续匹配，例如 page-header、PageHeader_root__x7a、pageHeader 都拆成 page、header。

  • cta-section
  • cta-banner
  • cta-box
  • cta-block
  • cta-area
  • cta-card
  • call-to-action
  • final-cta
  • bottom-cta
  • closing-cta
组件名

React / Vue 开发模式下读到的组件名，不区分大小写，会去掉 El、Ant、Mui 这类组件库前缀。

  • CtaSection
  • CallToAction
  • CtaBanner
  • FinalCta
  • CtaBlock
结构特征

根据元素的排列和样式算出来的特征，只用来加分，单独不判定。

  • 标题开头
优先级
4 · 同一层有多条命中时，优先级高的胜出
版本
v2 · 更新于 2026/09/30