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

Elementor Pro 全局风格设置指南

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

Elementor Pro 提供全局风格设置功能,只需安装 Elementor Pro,就可以进行全局设置,类似于主题的主题设置。这可以帮助你预设网站的整体颜色风格、字体样式、布局和元素预设,大大减少后期网站制作的工作量。

例如,我们可以设置几个全局颜色,在设置内容颜色时直接选择这些全局颜色。

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

进入【站点设置】

安装并激活 Elementor Pro 后,进入任意页面的 Elementor 编辑器窗口,然后点击下图所示的“站点设置”,你便能看到如下的配置选项了。

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

设计系统

通过设计系统,可以对全局颜色和全局字体进行设置。

全局颜色设置

设置全局颜色的最大好处是能够快速更改网站的颜色风格。例如,如果你的网站目前以绿色为主,只需修改全局颜色设置中的颜色,就能迅速切换到蓝色风格。这要求你在设计页面时,所有颜色都使用全局颜色配置。如果是手动添加的颜色,则需要手动修改。

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

  1. 进入站点设置中的全局颜色。
  2. 设置几个常用的全局颜色。
  3. 在设计页面时,使用这些全局颜色进行配置。
Elementor全局设置指南:如何为整个网站使用 Elementor 站点设置

在全局设置中,包含系统颜色和自定义颜色。系统颜色有四个,不能删除,但可以修改。自定义颜色可以根据你的需求添加和重新命名。

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

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

全局字体设置

与全局颜色类似,全局字体也可以自定义添加多个。在设计页面时,使用全局字体可以提升效率,并且方便后期进行统一更换。

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

全局字体有四个系统字体设置,不可以删除,但是可以修改。同时你可以增加自定义的全局字体。

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

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

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

Theme style/全局主题样式设置

在全局主题样式中,你可以设置字体、按钮、图片和表格字段的样式。

由于每个主题与 Elementor 的兼容性不同,没有统一的解决方案。如下面的图片所示,Elementor 提供了禁用自身颜色和字体功能,选择继承主题配置。通过这两个选项,可以帮助你调试样式。

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

Typography/文本排版

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

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

Button/全局按钮设置

在全局按钮设置中,你可以对按钮的以下属性进行设置:文字排版、文字投影、常规颜色和背景色、悬停时的文字颜色和背景色、边框类型和颜色、边角半径以及内距。

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

Images/全局图像设置

在全局图像设置中,你可以配置图片的以下属性:常规和悬停时的边框、边角半径、透明度、投影、CSS 滤镜,以及从正常状态到悬停状态的过渡时间。

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

Form Fileds/全局表单字段设置

当网站使用表单时,如联系表单和询盘表单,可以在这里配置表单字段的样式。

你可以设置字段标题的颜色和排版、字段本身的排版、常规和输入时的字体颜色、背景色、投影、边框、边角半径以及内距。

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

Setting设置

站点标识设置(Site Identity)

在这里,你可以上传和设置网站的名称、描述、Logo 以及站点图标。

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

Background全局的背景设置

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

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

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

  1. 内容宽度 (content width):设置网页内容区域的默认宽度,默认值为 1140px。如果你希望页面更宽或更窄,可以在这里调整。
  2. 小工具间隔 (widget space):设置元素块之间的间距,默认值为 20px。
  3. 页面标题选择器 (Page title selector):用于隐藏页面标题。如果主题的页面标题选择器不是 entry-title,需要在这里更改。如果使用的是 Hello Elementor 主题,无需修改。只有隐藏标题功能无效时才需要考虑更改此设置。
  4. 拉伸部分适用 (Stretched Section Fit To):在使用 Elementor 的 section 时,可以开启 “stretch section” 功能以拉伸 section 到指定宽度。在此处输入父元素选择器(例如 #primary.wrappermain 等),拉伸部分将适应该选择器。默认是 body,通常无需更改。
  5. 页面默认布局 (default page layout):设置页面的默认布局,默认是全宽 (Elementor full width),包含页头和页脚。如果设置为 Elementor canvas,页面将没有页头和页脚,而是一张空白画布。如果选择 theme,则继承主题的设置。不同主题可能提供不同的布局选项,请按需调试使用。
Elementor全局设置指南:如何为整个网站使用 Elementor 站点设置

Breakpoints/断点

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

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

Lightbox/灯箱设置

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

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

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

Custom CSS/自定义 CSS

当现有的设计配置无法满足你的需求时,你可以通过添加自定义 CSS 来定义样式。不过,前提是你需要掌握 CSS 的写法。

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

总结:

通过 Elementor Pro 的全局风格设置功能,可以轻松预设和调整网站的整体颜色风格、字体样式、布局和元素预设。这不仅提高了设计效率,还能确保网站风格的一致性。无论是设置全局颜色、字体,还是调整按钮、图片、表单字段等元素的样式,都能大幅减少后期的维护工作。此外,Elementor Pro 还提供了强大的自定义 CSS 功能,让用户实现更精细的设计需求,充分提升网站的用户体验和视觉效果。


联系我们
文章看不懂?联系我们为您免费解答!免费助力个人,小企站点!
电话:020-2206-9892
QQ咨询:1025174874
邮件:info@361sale.com
工作时间:周一至周五,9:30-18:30,节假日休息
发布者:光子波动,转转请注明出处:https://www.361sale.com/10652/

(0)
上一篇 2024年 5月 31日 上午11:17
下一篇 2024年 6月 1日 下午6:25

相关推荐

发表回复

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

联系我们

020-2206-9892

QQ咨询:1025174874

邮件:info@361sale.com

工作时间:周一至周五,9:30-18:30,节假日休息

客服微信
购买我们的托管服务器,享受免费运维!