跳到内容

编辑 CTA 的大小(传统)

上次更新时间: 二月 12, 2025

除非另有说明,否则适用于以下任何订阅

营销 Hub   Professional , Enterprise
内容 Hub   Professional , Enterprise
旧版 Marketing Hub Basic

使用内置大小选项和自定义 CSS 调整 CTA(传统)的大小。为图片 CTA 上传图片时,您可能需要考虑视网膜优化

要进一步自定义 CTA,请学习如何使用 CSS 为 CTA(传统)添加自定义样式。如果您要将 CTA 添加到电子邮件或模板,请学习如何将CTA 置中(传统)

编辑 CTA(传统)大小

您可以手动调整 CTA 的大小,或使用自定义 CSS 自动填充 CTA 容器或模块的宽度。如果你在非HubSpot网站上 嵌入图像 CTA,你可能需要在样式表中应用额外的CSS声明(如width: 100%; ),以使图像CTA响应。

要编辑按钮CTA的大小,请点击以下链接:
  • 在 HubSpot 帐户中,导航到营销 > CTA
  • 在左上角单击 下拉菜单 并选择CTA(传统)
  • 将鼠标悬停在 CTA 上,然后单击操作 >编辑
  • 在滑入面板中,单击高级选项
  • 手动调整自定义 CTA 的大小:
    • 清除 "适合文本"复选框。这将移除应用的自动调整大小功能。
    • 按钮填充部分,输入按钮宽度按钮高度字段的尺寸值
    • 单击下一步 >。
    • 单击 保存。然后单击 完成
  • 要让自定义 CTA 填满容器或模块的整个宽度,请执行以下操作
    • 清除自动尺寸 复选框。
    • 自定义 CSS 字段中,输入您的自定义 CSS
    • 将宽度设置为width:100%;
    • 单击下一步 >。
    • 单击 保存。然后单击 完成

什么是视网膜优化?

视网膜优化可使您的 CTA 图像在网站页面上和电子邮件中更加清晰,如果您的收件人在现代版 Apple Mail 和 iOS 邮件中查看 CTA;Outlook 或 Gmail 等网络邮件服务不支持视网膜优化。

如果您上传的图片大小至少是 CTA 所需的两倍,则支持视网膜优化,这与互联网上所有图片的视网膜支持方式类似。还请注意以下几点:

  • 如果您创建的 CTA 大小为 400px x 100px,则上传的图片需要 800px x 200px 才能支持 @2x 像素密度显示。
  • CTA 支持添加到 4x 版本。例如,如果您创建的 CTA 大小为 400px x 100px,您可以上传 1600px x 400px 的图片。
  • 该 CTA 将自动在网站上呈现,并通过 srcset 属性提供可用的 1x、2x、3x 和 4x 版本。
  • 如果上传的图片大小与 CTA 呈现的大小相同,则不支持视网膜。例如,如果为一个 400px x 100px 的 CTA 上传了一张 400px x 100px 的图片
这篇文章有帮助吗?
此表单仅供记载反馈。了解如何获取 HubSpot 帮助