渐变标题

Elementor让你设置渐变背景,但不能设置文本本身的渐变,标准的标题小部件只采用纯色,所以多色标题通常意味着用编写自己的CSS background-clip: text.这就是差距 渐变标题 小部件在 Elementor 的主插件 填充。

有了这个小部件,您可以选择两种颜色,选择线性或径向梯度,文本填充该梯度,无需代码。您还可以获得可选的文本阴影和 13 种混合模式,控制梯度如何与位于其后面的任何内容混合。本指南涵盖了每个设置,使用 Master Addons 免费提供的小部件。

以下是您将构建的渐变文本,该标题会在背景图像上从一种颜色淡化到另一种颜色:

在开始之前 #

• 安装元件并处于活动状态
• 已安装并激活的 Elementor 主插件 (安装指南)
• Elementor 编辑器中打开的页面或模板

步骤 1:添加渐变标题小部件 #

在 Elementor 编辑器中,搜索小部件面板 渐变标题 并拖到您的页面上。addons 主小部件带有“MA”徽章,因此很容易发现。编辑打开 编辑渐变标题 面板包含三个选项卡:内容、样式和高级。

2步:设置标题内容 #

上 内容 tab,将你的标题输入到 标题 field。这里的其余字段是基础知识:

• 标题 URL 将整个标题变成一个链接。
• 对齐 将其设置为左、中或右。
• 标题 HTML 标签 pick标签,h1到h6。使用h1作为页面的主标题,使用h2作为部分标题,因此页面保持干净的结构。

第 3 步:选择渐变颜色 #

切换到 风格 选项卡并打开 渐变风格。梯度运行在两种颜色之间:

• 颜色 是第一种颜色,带有 地点 滑块(百分比),设置其沿文本的位置。
• 第二种颜色 是结束色,有它自己的 地点 滑块。

将两种颜色设置为您的品牌调色板,然后轻推位置滑块以决定每种颜色覆盖多少文本。预览会随着拖动而更新。有一个单独的 正常 並 悬停 tab也是,所以当有人悬停标题时,梯度可以移动。

第 4 步:选择梯度类型、线性类型或径向类型 #

的 类型 dropdown 设置渐变形状, 每个选项都交换在其下方显示的额外控件:

• 径向 将颜色从中心点展开。选一个 位置 (如中心中心)来设置该点所在的位置。
• 线性 将颜色沿直线运行。设置 角度 要控制方向:180 将梯度直接向下指向,90 将其发送穿过。

Radial有利于从文本中间发光,线性是大多数人认为“梯度文本时,”从左到右或从上到下的干净褪色。

第 5 步:添加文本阴影(可选) #

的 文本阴影 control 在字母后面增加深度,点击铅笔可设置阴影颜色、模糊以及水平和垂直偏移,柔和的阴影有助于渐变文本在坐在繁忙的背景图像上时保持可读性。

第 6 步:尝试 13 种混合模式 #

的 混合模式 dropdown 决定渐变文本如何与它后面的任何东西混合, 如背景图像或颜色。有 13 种模式:

• 正常、乘法、屏幕、叠加
• 变暗、变亮、颜色闪避、饱和度
• 颜色、差异、排除、色调、光度

Normal保持渐变原样,其余的对背景做出反应: 相乘变暗,屏幕变亮,差异可以反转颜色,使外观引人注目,最快的选择方法是翻转它们并观看预览,因为结果取决于文本背后的颜色。

调 版式 如需字体和大小,请点击此处 发表 (或x),在2019年1月17日,在2019年1月1日,在 更新的)来保存页面。

渐变文本工作良好的地方 #

• 英雄头条的,其中渐变标题与照片或黑暗部分脱颖而出。
• 部分标题 这需要比平文本更多的个性。
• 着陆页 将渐变与品牌的配色方案相匹配。
• 过背景图像的,其中混合模式将文本绑定到场景中。

常见问题 #

相关阅读 #

• 所有主插件小部件和扩展
• Elementor 的渐变标题小部件
• 动画渐变 BG 扩展 (Pro), 用于一个截面后面的移动梯度
• 安装 Elementor 的主插件
• 主插件弹出生成器