分栏行动呼吁 CTASection

概览

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

实时预览

想要咨询更多定制化方案？

联系我们的专家

使用方法

import { CTASection } from '@goenhance/cms-ui';

const Example = () => (
  <CTASection
    title="现在就开始你的项目"
    text="立即预约"
    url="/book"
    backgroundUrl="/footer-bg.jpg"
  />
);

属性说明 (Props)

属性	类型	默认值	说明
title	string	-	居中展示的标题
text	string	-	按钮文字
url	string	-	按钮链接
backgroundUrl	string	-	背景图片 URL
target	string	-	链接打开方式 (如 _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="..." />