Elementor教程

Elementor全局设置指南:如何为整个网站使用 Elementor 站点设置

Elementor Pro全局风格设置是一个整体设置,只有安装了Elementor Pro才可以进行全局设置,类似主题的主题设置,它可以帮助你预设好整体的网站颜色风格,字体样式以及布局和元素预设等内容,这些将大大减少你后期网站制作的工作量。

比如,我们可以设置好几个全局的颜色,然后在设置内容颜色的时候就直接全责这些全局颜色

本篇教程将介绍Elementor网页编辑器的全局样式与设置的常用功能,譬如设置全局的字体、颜色、页面内容宽度、元素默认间距等等。

进入【站点设置】

安装激活好Elementor Pro之后,进入任意页面的Elementor编辑器窗口,点击左上角的按钮,然后点击下图中所示的site settings

Elementor的全局样式与设置

然后你便能看到如下的配置选项了。

Elementor的全局样式与设置

Design System/设计系统

对全局颜色和全局字体进行设置。

Global Colors全局颜色设置

设置全局颜色最大的好处是你可以快速切换网站的颜色风格,比如像我现在网站以绿色为主,如果我想更换成蓝色风格的只需要修改全局颜色里面的颜色设置就可以快速的将网站颜色风切换过来。这要求你在设计制作页面时所有的颜色都是通过全局颜色来配置的,如果是手动添加的颜色,那么还是需要手动去修改。

全局颜色设置和使用的方法如下:

你可以通过站点设置里面的全局颜色,设置几个常用全局颜色。

Elementor的全局样式与设置

全局里面的里面包含了系统颜色和自定义颜色,系统颜色只有四个,不可以删除,但是可以修改。

自定义颜色可以根据你的需求增加和重新命名。

Elementor全局设置指南:如何为整个网站使用 Elementor 站点设置
Elementor全局设置指南:如何为整个网站使用 Elementor 站点设置 7

设置全局颜色之后,你可以在Elementor 任意元素的颜色设置中调用设置好全局颜色。

Elementor全局设置指南:如何为整个网站使用 Elementor 站点设置
Elementor全局设置指南:如何为整个网站使用 Elementor 站点设置 8

Global Fonts全局字体设置

与全局颜色一样,全局字体可以自定义添加多个,当你设计页面时,按需选用全局字体能够提升效率、也方便后期统一更换。

Elementor全局设置指南:如何为整个网站使用 Elementor 站点设置
Elementor全局设置指南:如何为整个网站使用 Elementor 站点设置 9

全局字体有四个系统字体设置,不可以删除,但是可以修改。

同时你可以增加自定义的全局字体。

Elementor全局设置指南:如何为整个网站使用 Elementor 站点设置
Elementor全局设置指南:如何为整个网站使用 Elementor 站点设置 10

针对某一个全局字体,你可以设置字体,尺寸,重量,大小写转换,样式(斜体等),装饰(下划线、上划线等),行高,字母间距,单词间距这些内容。

Elementor全局设置指南:如何为整个网站使用 Elementor 站点设置
Elementor全局设置指南:如何为整个网站使用 Elementor 站点设置 11

Theme style全局主题样式设置

可设置字体、按钮、图片、表格字段的样式。

需要注意的是:通常主题本身都提供了类似的字体、配色功能,两者同时使用可能会令你混乱,需要你自己进行对比试验。

由于每个主题与elementor的兼容性有所不同,没有一概而论的方案,同时,见下图,elementor也提供了禁用本身的颜色与字体的功能,而选择继承主题的配置,通过这两个选项,也可以帮助你调试样式。

Elementor全局设置指南:如何为整个网站使用 Elementor 站点设置
Elementor全局设置指南:如何为整个网站使用 Elementor 站点设置 12

有时候,主题和Elementor的全局样式设置要搭配着使用。如果你用的是Hello Elementor主题,那就不需要担心这个问题,因为它是Elementor官方配套主题。

Typography/文本排版

在【排版】里面你可以设置网站的内容的文本颜色、字体风格、段落间距,链接的颜色、字体风格以及悬停效果,H1-H6标签的颜色字体风格。并且你可以直接使用全局设置里面的设置好的颜色和字体来设置这些排版风格。

Elementor的全局样式与设置

Button全局按钮设置

你可以对按钮的文字排版、文字投影、常规颜色的背景色、hover悬停时的文字颜色、背景色、边框类型与颜色、边角半径、内距进行设置。

Elementor的全局样式与设置

Images全局图像设置

对图片,可以配置常规和悬停时的边框、边角半径、透明度、投影、css滤镜、以及从正常到悬停效果的过渡时间。

Elementor的全局样式与设置

Form Fileds全局表单字段设置

当网站使用表单时,譬如外贸网站常用的联系表单、询盘表单,可以使用此处配置表单字段的样式。

诸如字段标题的颜色、排版,字段本身的排版,常规以及输入情况下的字体颜色、背景色、投影、边框、边角半径,以及内距。

Elementor的全局样式与设置

相关教程:

Setting设置

Site Identity站点标识设置(LOGO及图标设置)

在这里可以上传网站的名称、描述、logo以及站点图标。

Elementor的全局样式与设置

相关教程:

Background全局的背景设置

此处可设置网页的背景色,纯色或渐变色均可,也可以设置背景图片,并且还能单独设置移动端的背景色。

Elementor的全局样式与设置

Layout默认布局设置(移动端断点)

  • content width/内容宽度:用于设置网页内容区域的默认宽度,默认值是1140px,当你想网站页面更宽一点或更窄一些,就调这里。
  • widget space/小工具间隔:可以理解为元素快之间的间距,默认是20px
  • Page title selector/页面标题选择器:这里是服务于隐藏页面标题功能的,如果你的主题的页面标题的样式选择器不是entry-title,那么你就需要更改此处了,如果你用的hello elementor主题,此处也不用改;只有当你发现使用隐藏标题功能不生效时,才需要考虑修改这里。
  • Stretched Section Fit To/拉伸部分以适用:在使用elementor的section时,有一个stretch setion的开关,用于拉伸对样setion到指定的宽度,此处就是用于指定宽度的,只是这里输入的是父元素选择器,拉伸的部分将与之相适应(例如#primary / .wrapper / main等)。留空以适应页面宽度。默认是body,基本不用改这里。
  • default page layout/页面默认布局:用于设置页面的默认布局,默认是全宽(elemlentor full width),它包含页头页脚,如果设置为elementor canvas,页面上就不会有页头页脚了,而是一张空白的画布。如果选择theme,则表示继承主题的设置。此外,不同主题还会提供不能的布局选项,请按需调试使用吧。
Elementor的全局样式与设置

breakpoints/断点,你可以人为添加断点,用于为网站适配不同分辨率的设备,也就是常说的响应式。

Elementor的全局样式与设置

Lightbox灯箱设置

可以理解为图片的弹出窗,Global Lightbox 选项卡使您能够调整以下设置:

  1. 图像灯箱:滑动开关以全局启用或禁用灯箱。
  2. 计数器:仅适用于多图像画廊。如果设置为是,则将图像计数添加到灯箱的左上角。例如,如果图库包含 6 张图片,则计数器将显示 1/6、2/6 等以指示“第 6 张图片”、“第 6 张图片中的第二张”等。
  3. Fullscreen:如果设置为Yes,添加一个可点击的图标以允许用户在全屏灯箱中打开图像。
  4. Zoom:如果设置为Yes,则添加一个可点击的图标以允许用户放大灯箱中的图像。放大图像后,您将能够平移视图并滚动图像的不同区域。
  5. 分享:如果设置为,分享功能将添加到灯箱,允许用户在 Twitter、Facebook 和 Pinterest 上分享图像,或将其下载到他们的计算机上。
  6. 标题:可选择在灯箱中的图像下方显示标题。从NoneTitleCaptionAltDescription中选择
  7. 描述:可选择在灯箱中的图像下方显示描述。从NoneTitleCaptionAltDescription中选择
  8. 背景颜色:选择灯箱的背景颜色和不透明度。
  9. UI 颜色:选择UI 颜色。这会影响灯箱箭头和点导航、关闭按钮等。
  10. UI 悬停颜色:选择UI 悬停颜色。当用户将鼠标悬停在每个按钮上时,这会影响灯箱箭头和点导航、关闭按钮等。

Custom CSS自定义CSS

当已有的设计配置都无法满足你的需求时,你可以额外添加css来定义样式,前提是:你得学会怎么写css

Elementor的全局样式与设置