链接在大多数现代网站中起着至关重要的作用,无论是帮助导航还是推动转化。但是,您可能会觉得主题的默认 URL 不够用,这就是为什么您可能想要更改 WordPress 中的链接颜色。
幸运的是,可以使用您选择的编辑器选项、插件或自定义代码更改 WordPress 中的链接颜色。通过应用您自己的自定义颜色,您可以使您的链接从背景中脱颖而出,或者与您设计的其余部分无缝融合。
在这篇文章中,我们将了解在 WordPress 中更改链接颜色的五种不同方法。无论您使用的是页面构建器插件还是 WordPress 定制器,您都应该找到适合自己的技术。
在 WordPress 中更改链接颜色的最简单方法
如果您想知道如何在 WordPress 中更改链接颜色,请阅读本教程。以下是我们接下来要介绍的内容:
- 自定义 CSS 代码 - 如果您愿意添加一些基本的 CSS 代码,这通常是最灵活且适用范围最广的方法。
- WordPress Customizer – 您的主题可能会提供一个专门的选项来更改链接颜色。
- Elementor – Elementor 页面构建器可以轻松更改整个站点的链接颜色。
- Beaver Builder – Beaver Builder 页面构建器插件和主题还包括一个更改链接颜色的选项。
- WordPress 编辑器(单个链接)- 如果您只想更改特定链接的颜色,您可以通过 WordPress 编辑器手动完成。
1.添加 CSS 代码
在 WordPress 中更改链接颜色的一种方法是编写一些自定义 CSS 代码。这需要您输入要在网站上使用的颜色的十六进制代码。您可以使用 color-hex 等服务来探索各种代码:
找到完美的十六进制代码后,登录到您的 WordPress 仪表板。然后导航到外观 > 自定义:
< p>在左侧菜单中,选择“附加 CSS”。您现在可以输入以下 CSS:
{Color: #0000FF;}
请务必将 color: 值替换为您之前确定的十六进制代码。要使更改生效,请单击“发布”:
您网站上所有链接的颜色现在应该会改变。如果您对这个新外观不满意,可以随时在 WordPress 自定义程序中输入不同的十六进制代码:
有时,您可能会改变主意并决定恢复主题的默认链接颜色。为此,只需删除定制器附加 CSS 部分中的所有代码,然后单击发布。
2.检查 WordPress 定制器
根据您选择的主题,您可以在 WordPress 定制器中修改您的链接。这意味着您不必编写任何 CSS。
在您的 WordPress 仪表板中,导航至外观 > 自定义并搜索任何标有颜色的选项。这些设置可能因主题而异。
例如,如果您使用我们自己的 Hestia WordPress 主题,请选择“外观设置”>“颜色”。然后您可以设置带有强调色的自定义链接:
或者,如果您有特定的十六进制代码,则可以将此值输入到随附的文本字段中。当您对自己的选择感到满意时,单击发布。
尝试各种颜色后,您可能会决定更喜欢默认颜色。如果是这种情况,您可以通过单击默认按钮恢复 Hestia 的原始强调色。
我们的 Neve 主题还可以让您直接在 WordPress 定制器中轻松定制您的链接。在左侧菜单中,选择颜色和背景:
/ p>
然后选择主要操作。您现在可以从颜色选择器中选择:
要使您的更改生效,请单击“发布”。
如果您改变主意,可以通过滚动到“颜色和背景”菜单的底部来恢复 Neve 的默认设置。然后选择全部重置为默认值。
3.使用 Elementor 页面构建器
Elementor 拥有超过 500 万的活跃安装量,是最受欢迎的 WordPress 页面构建器插件之一。如果您在网站上使用 Elementor,您可以通过在 Elementor 编辑器中打开任何页面或帖子来更改链接颜色:
在左上角,选择汉堡包图标。然后点击站点设置:
下一步, 选择排版。在随后的菜单中,您可以在默认未选中时更改链接的颜色。要进行此更改,请确保选择了普通选项卡:
接下来,单击颜色设置附带的任何图标。从左到右,这些图标启动主题的全局定义颜色列表或 WordPress 颜色选择器:
在自定义链接时,您可能还想更改各种印刷属性。这包括样式、字母间距和行高。您可以使用排版弹出窗口进行这些更改:
Elementor 还为您提供了定义不同悬停颜色的选项。这确认访问者已成功定向到特定链接,这对于具有多个 URL 的页面特别有用。它还提高了您的网站对有视力障碍的人的可访问性:
要进行此更改,请选择 Elementor 左侧菜单中的“悬停”选项卡。然后,您可以使用熟悉的弹出窗口颜色和排版来创建独特的悬停效果。
完成自定义 URL 后,请不要忘记点击“更新”按钮。 Elementor 现在会将这些更改应用于所有 Elementor 设计和模板中的每个链接。
4.使用 Beaver Builder 插件和主题
Beaver Builder 是一种直观的拖放式构建器,被近 400,000 个网站使用。如果您将这个流行的插件与 Beaver Builder 主题一起使用,那么您就可以访问一组预设。要更改 WordPress 中的链接颜色,您需要覆盖这些预设。
在您的 WordPress 仪表板中,导航至外观 > 主题。然后将鼠标悬停在 Beaver Builder Theme 上并选择 Customize。这将启动 Beaver Builder 编辑器:
在左侧菜单中,导航至“常规”>“强调色”。您现在可以点击“强调色”并使用随后的选择器选择一种新颜色:
如果您有特定的十六进制代码,您可以将该值键入随附的文本字段中。与 Elementor 类似,Beaver Builder 允许您在将鼠标悬停在链接上时定义不同的颜色:
编辑这些预设后,您可以通过单击发布来更新您的站点。您的链接现在将拥有全新的外观和感觉!如果您想在任何时候将 Beaver Builder 恢复为其默认设置,只需导航回此部分并单击“默认”按钮。
5.在 WordPress 编辑器中更改单个链接的颜色
到目前为止,我们介绍的所有方法都会更改整个站点的链接颜色。一致的设计通常对于呈现专业形象至关重要。它还可以帮助用户了解和浏览您的网站。
但是,有时您可能需要覆盖这些站点范围的设置。例如,您可能希望将注意力吸引到具有多个 URL 的页面上的特定链接。或者,您可以尝试通过创建与网站其余部分设计形成对比的登录页面来吸引访问者的注意力。
您可以使用标准的 WordPress 编辑器更改单个链接的颜色。首先,突出显示有问题的 URL。在出现的浮动工具栏中,选择向下箭头:
然后选择文字颜色。您现在可以选择预定义颜色或选择自定义颜色。后者激活WordPress的内置颜色选择器:
您可以重复这些步骤,将独特的颜色应用到此页面上的任何其他链接。如果您对结果满意,请照常更新或发布页面。
关于如何更改 WordPress 链接颜色的结论
在创建美观、专业设计的网站时,正确的 WordPress 主题至关重要。然而,每个站点都是独一无二的,即使找到了完美的主题,您可能仍需要进行一些调整。
让我们快速回顾一下在 WordPress 中更改默认链接颜色的五种方法:
- 添加 CSS 代码。
- 检查 WordPress 定制器。
- 使用 Elementor 页面构建器。
- 使用 Beaver Builder 插件和主题。
- 更改单个链接的颜色。
有关使用最佳颜色的一些提示,请查看我们关于为您的网站选择配色方案的帖子。
您对如何自定义 WordPress 链接颜色有任何疑问吗?让我们在下面的评论部分讨论它们!