Elementor 通用教程 1 - 全局颜色和全局字体的设置方法

2023-11-26
Elementor 通用教程
喜欢(0)
Elementor basic 78 quanjuyanse quanjuziti.webp

Elementor全局字体和颜色是Elementor页面构建插件的预设功能。

这个设置允许你为整个网站快速设定统一的字体和配色方案,便于创建具有整体性的设计。

如果需要为多个页面或帖子使用相同的字体和颜色,这个功能非常有用,可确保网站所有页面的颜色和字体一致。

在接下来的教程中,将详细介绍如何设置和使用全局颜色和全局字体。

Elementor 全局颜色和字体

全局颜色和全局字体是网站上使用的颜色和文本字体,大小,粗细,行高等信息的预设。

为了方便说明,我们将使用文本编辑器小工具来进行。

将文本编辑器小工具拖放到编辑区域的编辑栏内后,你会看到如下画面。

然后点击样式标签按钮,你会看到如下画面。

画面中,我们可以看到文本颜色和排版都带有地球仪图标,而这个地球仪图标就是全局颜色全局字体的选择按钮

在这个画面中,我们可以看到文本颜色和排版都带有地球仪图标,而这个地球仪图标就是全局颜色和全局字体的选择按钮。

  • 文本颜色的地球仪图标:全局颜色
  • 排版的地球仪图标:全局字体

需要注意的是,当地球仪图标变成蓝色时,说明正在使用全局颜色或全局字体。

1.全局颜色

点击文本颜色的地球仪图标,我们可以看到如下画面。

点击地球仪图标,就可以选择全局颜色。

在上图中,文本的选项已打勾,这说明文本颜色正在使用全局颜色。

Elementor默认的预设颜色只有4种。

  • 主要
  • 次要
  • 文本
  • 摘要

如果你安装了除了Wordpress自带的主题模板以外的主题模板,Elementor的全局颜色也会反映安装主题的默认颜色。

如果你想要使用全局颜色来选择颜色,只需点击地球仪图标,在弹出的全局颜色选择框中选择即可。如下图。

1-1 全局颜色设置界面

如果你想在全局颜色和全局字体中设置颜色和字体,你需要进入设置界面。

进入全局颜色和全局字体设置页面的方法主要有两种,其进入方式相同。

● 1-1-1进入设置界面方式 1

点击地球仪图标,弹出全局颜色选项窗口后,点击右上方的齿轮图标即可进入全局颜色界面。

● 1-1-2进入设置界面方式 2

点击页面左上方的汉堡包按钮,然后在下一个界面中选择站点设置,最后在弹出的界面中选择全局颜色,就可以进入颜色设置页面。

1-2 全局颜色的设置方法

进入全局颜色设置页面,你可以看到如下画面。

上部红框区域是Elementor默认设定的全局颜色,下方红框部分是添加全局颜色的区域。

在上图中,我对摘要的文本和颜色进行了调整。

所以,虽然是系统默认的颜色,但颜色的命名和颜色本身都可以更改。

1-3 追加全局颜色

首先,点击添加颜色按钮,添加一个颜色设置选项。如下图。

添加颜色设置选项后,设置颜色名称和自定义颜色。如下图。

设置完成后,页面将变成如下图的样子。

图中将颜色名称更改为自定义颜色,设置的颜色为绿色(颜色代码#31EA54)。

最后一定要记得点击更新并保存设置。

1-4 确认全局颜色是否添加

在全局颜色设置框添加了自定义颜色后,返回文本编辑器小工具的样式标签页面。

从上图中可以看到,自定义颜色已经添加到全局颜色中,并且可以正常使用。

2. 全局字体

全局字体的设置方式与全局颜色的设置方式相同。

区别在于,点击全站设置后,选择全局颜色是点击全局颜色,而选择全局字体则需点击全局字体按钮

全局字体设置界面如下图所示。

上半部分的主要,次要,文本,摘要是Elementor系统默认的字体设置。

与全局颜色相同,尽管这是系统默认的设置,但可以更改字体的名称、大小、粗细和行高等设置。

点击文本的字体设置选项(文本旁边的铅笔按钮),将弹出以下窗口。

如上图所示,添加各种字体设置参数后,点击下方的更新保存设置。

关于排版设置的详细说明,请参考《Elementor基础教程 – 文本编辑器 小工具的设置和使用方法》。

※在全局字体中设置参数并保存设置前,所有的参数设置将不会影响现有的设置。

因此,我们会发现,在全局设置界面进行设置时,旁边编辑栏中的文本内容不会有任何变化。

2-1 添加自定义字体

添加自定义字体的方式与添加自定义颜色的方式相同。

区别在于,自定义字体的设置项是排版设置,而自定义颜色的设置项是颜色选择器。

按照上述步骤,设置了一个自定义字体,如下图所示。

设置好一个自定义字体后,务必要更新并保存设置。

2-2 确认全局字体是否添加

在全局字体中设置好自定义字体后,需要确认小工具内的字体是否已添加。

回到文本编辑小工具的样式标签,确认排版的全局字体选项中是否有自定义设置的字体,如下图所示。

2-3 退回字体系列

全局字体设置界面中,最后的退回字体系列是当自定义字体或所选字体无法使用时,

将字体更改为特定指定字体的设置选项。

如果需要改变默认的字体系列设置,可以删除原有的字体系列,更换为自定义的字体系列。

以上就是全局颜色和全局字体的功能设置和使用方法。

希望本篇内容能对您使用Elementor有所帮助。

用户评论
{{ reviewsTotal }}{{ options.labels.singularReviewCountLabel }}
{{ reviewsTotal }}{{ options.labels.pluralReviewCountLabel }}
{{ options.labels.newReviewButton }}
{{ userData.canReview.message }}
fuyeshidai

做点副业,为生活加点料

快速搜索
站长推荐
相关文章
Elementor General 80 yangshibiaoqian.webp
Elementor 通用教程 3 - 小工具样式标签的通用设置和使用方法
Jetengine jiaocheng 2 Custom taxonomies tumnail
JetEngine 使用教程 2 - Custom Taxonomies的制作和设置以及使用方法
understanding-gutenberg-block-editor-in-wordpress
WordPress古腾堡编辑器:新手小白也能轻松驾驭的排版利器
Elementor basic 6 anniu.webp
Elementor 基础教程 6 - 按钮小工具的设置和使用方法
Elementor basic 14 tuxianghuandengqi.webp
Elementor 基础教程 14 – 图像幻灯器小工具的设置和使用方法
Elementor pro Gallery widget
Elementor 专业教程 4 – Gallery小工具的设置和使用方法
Elementor pro Testimonial Carousel widget
Elementor 专业教程 16 – Testimonial Carousel小工具的设置和使用方法
Elementor basic 30 yuedugengduo.webp
Elementor 基础教程 30 – 阅读更多小工具的设置和使用方法
Elementor25-SoundCloud
Elementor 基础教程 25 – SoundCloud小工具的设置和使用方法
Elementor General 80 yangshibiaoqian.webp
Elementor 专业教程 2 – Post小工具的设置和使用方法 样式标签篇