如何在元素器中添加渐变文本
您需要 Elementor 和免费的 Master Addons 插件。没有自定义 CSS,也没有 Elementor Pro。
- 安装并激活 WordPress.org 的主插件.
- 使用 Elementor 编辑您的页面,搜索小部件面板 渐变标题 并拖进去。
- 输入您的文本 标题然后设置标题 HTML 标签和对齐。
- 在样式、渐变样式中,选择第一种颜色和第二种颜色并调整其位置滑块。
- 选择线性并设置角度,或选择径向并设置位置。
- 设置版式,在背景上尝试混合模式,如果您愿意,还可以添加悬停梯度。
每个步骤的屏幕截图都在 渐变文本指南.
两种颜色的线性或径向梯度
在风格上, 渐变风格,设置 文本颜色 到渐变(或经典的纯色)。选择第一个 颜色 和 第二种颜色的,并各自移动 地点 滑块可决定其中一个融入另一个的位置。 类型 线性之间的切换,带有 角度 (默认情况下180度从上到下运行), 和径向, 与a 位置 如中心中心。对于移动到整个部分后面而不是文本的梯度,请参阅 动画渐变 BG 扩展(专业版)。
- 正常和悬停选项卡: 设置访客悬停标题时出现的第二个梯度。
- 每个梯度使用两个颜色停止。对于三种或更多颜色,您需要自定义 CSS。
- 默认值从紫色 (#9929ea) 运行到红色 (#FB083E),因此请先将其更改为您的品牌颜色。
CSS 与渐变标题的元素标头
CSS 感到舒适,可以用 Elementor 自己的标题小部件制作渐变文本,以下是每个路线涉及的内容。
| 特点 | 元素标头 + CSS | 主插件渐变标题 |
|---|---|---|
| 设置 | 使用背景剪辑添加 CSS:WordPress 附加 CSS、Elementor Pro 自定义 CSS 或免费主插件中的文本 自定义 CSS 扩展 | 在面板中选择颜色 |
| 梯度类型 | CSS允许的任何东西,包括三种或更多种颜色 | 线性或径向,两个颜色停止 |
| 悬停梯度 | 额外的 CSS | 内置悬停选项卡 |
| 混合模式和阴影 | 额外的 CSS | 13种混合模式和一个文本阴影控制 |
| 价格 | CSS自己写的免费 | 使用主插件免费 |
CSS写, 如果需要两种以上的颜色或动画渐变, 当你想设置渐变标题时, 在一分钟内视觉相关免费小部件: 双头 並 动画头条.
版式、混合模式和文本阴影
每个选项卡都有自己的选项卡 版式因此,悬停时字体、大小和重量也会发生变化。 混合模式 提供 13 种选项,从普通选项、乘法选项和屏幕选项到差分选项和光度选项,将渐变与文本后面的图像或颜色混合在一起。 文本阴影 在繁忙的照片上添加颜色、模糊和偏移,以获得额外的深度或可读性。
- 梯度是纯 CSS,因此没有图像可以加载。
- 混合模式对标题后面的任何内容做出反应,因此请在真实背景上预览它们。
- 保持两种颜色和背景之间足够的对比度以提高可读性。
链接、标题标签和对齐
在"内容"选项卡中,添加 a 标题 URL 要使整个标题成为链接。选择 标题 HTML 标签 (H1 到 H6, div, span 或 p), 因此标题适合您的页面结构, 并设置 对齐 向左、居中或向右。
- 每页使用一个 H1,通常是英雄标题,部分标题使用 H2。
- 相连的梯度标题对于前往商店的销售横幅非常有效。
- 标题文本支持 Elementor 预览中的内联编辑。
梯度标题的常见问题
渐变标题小部件免费吗?
是的。它是免费 Master Addons 插件的一部分,适用于免费 Elementor,因此您不需要 Elementor Pro 来获取渐变文本。
我可以在渐变中使用两种以上的颜色吗?
No。每个渐变有两个颜色停止,第一个颜色和一个第二颜色。移动位置滑块会改变混合的锐利或柔软程度。对于三种或更多颜色,请将自己的 CSS 添加到常规标题中。
渐变文本会减慢我的网站速度吗?
No。的渐变是标题文字上的普通CSS,所以没有图像文件可以加载。
悬停时的梯度可以改变吗?
是渐变风格中的悬停选项卡有自己的颜色、位置、类型、角度或位置、排版、混合模式和文本阴影,因此当访客悬停时,标题可以切换到不同的渐变。
![Master Addons 元素的帖子/页面复制器扩展:WordPress 页面列表中的 MA 复制器行链接创建着陆页 - [Duplicated #128] 草案](https://d1asvmc6qcowgk.cloudfront.net/wp-content/uploads/2026/09/15102930/post-page-duplicator-768x403.webp)
