Skip to content

分栏行动呼吁 CTASection

CTASection 是一个轻量级的组件,通常用于页面中段,通过全屏背景图和简洁的标题引导用户。

想要咨询更多定制化方案?
联系我们的专家
import { CTASection } from '@goenhance/cms-ui';
const Example = () => (
<CTASection
title="现在就开始你的项目"
text="立即预约"
url="/book"
backgroundUrl="/footer-bg.jpg"
/>
);
属性类型默认值说明
titlestring-居中展示的标题
textstring-按钮文字
urlstring-按钮链接
backgroundUrlstring-背景图片 URL
targetstring-链接打开方式 (如 _blank)
  • 沉浸式背景:支持设置全背景图,并自动覆盖 60% 透明度的蒙层以保证文字可读性。
  • 响应式宽度:自动适应最大 6xl 的容器宽度。

类名:mewx-cms-cta-section

变量名用途默认值
--mewx-cms-cta-section-heading-text标题文字色255 255 255
--mewx-cms-cta-section-btn-bg按钮背景色var(--blocks-primary)
--mewx-cms-cta-section-btn-text按钮文字色255 255 255
--mewx-cms-cta-section-btn-hover-bg按钮悬停背景var(--blocks-primary-dark)
/* 蓝色系 CTA */
.blue-cta-section {
--mewx-cms-cta-section-btn-bg: 59 130 246;
--mewx-cms-cta-section-btn-hover-bg: 37 99 235;
}
<CTASection className="blue-cta-section" title="立即咨询" text="联系我们" url="#" backgroundUrl="..." />