Elementor Pro 全局风格设置指南

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

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

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

进入【站点设置】

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

设计系统

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

全局颜色设置

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

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

1. 进入站点设置中的全局颜色。
2. 设置几个常用的全局颜色。
3. 在设计页面时，使用这些全局颜色进行配置。

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

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

全局字体设置

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

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

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

Theme style/全局主题样式设置

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

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

Typography/文本排版

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

Button/全局按钮设置

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

Images/全局图像设置

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

Form Fileds/全局表单字段设置

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

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

Setting设置

站点标识设置（Site Identity）

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

Background全局的背景设置

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

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、.wrapper、main 等），拉伸部分将适应该选择器。默认是 body，通常无需更改。
5. 页面默认布局 (default page layout)：设置页面的默认布局，默认是全宽 (Elementor full width)，包含页头和页脚。如果设置为 Elementor canvas，页面将没有页头和页脚，而是一张空白画布。如果选择 theme，则继承主题的设置。不同主题可能提供不同的布局选项，请按需调试使用。

Breakpoints/断点

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

Lightbox/灯箱设置

灯箱可以理解为图片的弹出窗口，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 悬停颜色。当用户将鼠标悬停在每个按钮上时，这会影响灯箱箭头、点导航、关闭按钮等。

Custom CSS/自定义 CSS

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

总结：

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