Elementor-更改链接颜色

您可以通过以下方式自定义网站链接的颜色:

  1. 网站设置–这将改变整个网站中链接的颜色
  2. CSS 代码 – 这将改变单个元素中链接的颜色

这两种方法并不相互排斥–您可以使用 “网站设置 ”将网站链接的颜色更改为紫色,同时使用代码将文本编辑器部件中链接的颜色更改为红色。

Elementor-更改链接颜色

使用 “网站设置 ”更改链接颜色

使用 “网站设置 ”更改链接颜色将改变整个网站的所有链接颜色。

选择链接颜色

1、在 Elementor 编辑器的顶部栏中,单击 “网站设置 ”图标。

Elementor-更改链接颜色

 

面板中将显示 “网站设置 ”选项。

Elementor-更改链接颜色

2、在面板中,单击 “Typography”。

Elementor-更改链接颜色

 

3、单击 “Normal”为链接设置默认颜色,或单击 “hover”选择用户鼠标移过链接时的颜色。

Elementor-更改链接颜色

 

4、在链接部分,选择一种颜色。有关详情,请参阅选择颜色。

整个网站的链接将显示为所选颜色

更改元素的链接颜色

您可以使用代码设置单个元素的链接颜色。这将覆盖在 “网站设置 ”中选择的颜色。颜色可以通过以下方式设置

  • 直接在元素中使用 HTML
  • 使用自定义 CSS

用 HTML 设置链接颜色
1、单击要更改链接颜色的元素。

d6

面板中将显示元素选项。

Elementor-更改链接颜色

2、在文本框中输入以下 HTML 代码:

<a style="color:purple;" href="#">My purple link</a>

注意事项
用您想使用的颜色代替紫色
用要链接的页面 URL 替换 #。
用您希望出现的文字代替 #我的紫色链接。

 

警告
您必须使用直引号,而不是卷曲引号。有时在剪切和粘贴时,直引号会变成卷曲引号,您可能需要手动输入引号。

使用自定义 CSS 设置链接颜色

1、单击要更改链接颜色的元素。

d6

面板中将显示元素选项。

d7

2、单击高级选项卡。

d8

3、在面板中,向下滚动并展开自定义 CSS 部分。

Elementor-更改链接颜色

 

4、在文本框中输入自定义代码,更改链接颜色。请参阅下面的代码示例。

.mygreenlink:link, .mygreenlink:visited,
.mygreenlink:active {
color:green;
text-decoration: none;
   }
.mygreenlink:hover {
color: red;
text-decoration: underline;
}

注释
这将创建一个名为 mygreenlink 的 CSS 类。它被定义为一个链接,将在链接处于活动状态和访问者已点击链接时应用。它包括一个悬停状态,当访问者鼠标移到链接上时,该状态就会生效。悬停状态会将链接变为红色并加上下划线。

Elementor-更改链接颜色

 

5、单击 “内容 ”选项卡。

Elementor-更改链接颜色

6、在内容区域,单击 “文本 ”选项卡。

Elementor-更改链接颜色

7、在文本框中输入代码,以触发 CSS 代码段。请参阅下面的代码示例:

<a class="mygreenlink" href="#">My green CSS link</a>

注释
将 # 替换为您希望链接到的页面的 URL。
将 #My green CSS link 替换为您希望出现的文本。

如果您想查看更多关于elementor建站相关的文章,可以查看:Elementor教程

郑州白帽子专业开发外贸独立站,如果您需要开发外贸独立站,想要找一家靠谱的建站公司,欢迎联系我们。

在领英上分享这篇文章
本篇文章内容
    Add a header to begin generating the table of contents

    联系我们

    郑州白帽子网络科技有限公司是一家专业做外贸网站建设,谷歌SEO优化、谷歌SEM推广公司。
    郑州白帽子网络科技微信图
    添加请说明需求
    郑州白帽子

    郑州白帽子

    郑州白帽子是一家提供外贸网站定制和白帽谷歌SEO优化的公司,我们会不定期的分享关于外贸的一些知识,以及如何进行外贸建站和谷歌SEO优化推广。我们的核心价值观是给客户提供价值,通过我们专业的服务让客户获得更多的询盘!了解更多关于外贸、外贸建站谷歌SEO优化推广的细节,欢迎联系我们!

    发表评论

    您的邮箱地址不会被公开。 必填项已用 * 标注

    更多文章
    Astra主题如何自定义footer (1)
    外贸建站

    Astra主题如何自定义footer

    使用 Astra Pro 提供的site builder网站构建器模块,您可以设计自定义footer。请参考文档,从自定义布局模块开始。…

    Foxmail邮件客户端设置教程
    外贸知识

    Foxmail邮件客户端设置教程

    Foxmail 邮件客户端如何设置? 这篇文章我们就用阿里云企业邮箱为例来带大家操作。按这个流程操作下来后,很快就可以设置好,再也不用头疼了。

    自定义标题 (1)
    外贸建站

    Astra主题如何自定义头部

    使用 Astra Pro 提供的网站生成器模块,您可以设计自定义页眉。请参考文档,从自定义布局模块开始。…

    网站生成器概述 (1)
    外贸建站

    Astra主题网站Site Builder概述

    在 Astra v4.5.0 中推出了增强型全新网站Site Builder,以满足您的网站定制需求。在保留之前自定义布局功能的同时,网站Site Builder提供了一个全新的…

    滚动至顶部

    登陆

    注册