Elementor-更改链接颜色

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

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

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

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

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

选择链接颜色

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

 

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

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

 

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

 

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

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

更改元素的链接颜色

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

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

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

d6

面板中将显示元素选项。

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

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

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

 

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

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

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

d6

面板中将显示元素选项。

d7

2、单击高级选项卡。

d8

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

 

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

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

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

 

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

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

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优化推广的细节,欢迎联系我们!

    发表评论

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

    更多文章
    woocommercode1
    外贸建站

    26个WooCommerce 简码: 它们是什么以及如何使用它们

    WooCommerce 简码提供了一种灵活便捷的方式来扩展您网店的功能和用户体验。它们可以帮助您轻松添加和显示内容与功能,是任何 WooCommerce 商店的宝贵资产。它们还可用于为您的网店创建自定义布局和设计,因为您可以使用简码控制内容和功能的位置和外观。让我们阅读本文,进一步了解 WooCommerce 短代码。

    elementor网格容器
    外贸建站

    Elementor网格容器

    轻松实现网页布局对齐和对称设计!网格容器让你摆脱繁琐调整,在文章中学会从基础到进阶的实用方法,提升设计效率,打造专业效果。快速掌握网格容器,展现你的设计天赋,助你轻松打造精美网页!

    elementor-动态内容
    外贸建站

    Elementor动态标签

    Elementor的动态标签功能提供丰富多样的选项,可以从帖子、档案、网站、媒体、用户信息等不同数据源中提取内容,动态更新页面元素。通过动态标签,您可以轻松实现标题、图片、链接等内容的自动化更新,还支持WooCommerce产品数据和自定义字段,为电子商务、博客等场景带来更高效的个性化设计。

    滚动至顶部

    登陆

    注册