B.编辑器初级使用 Editor

Estimated reading: 1 minute 30 views

编辑器界面

Elementor 是一个所见即所得的页面构建器，其编辑器界面直观且功能强大。熟悉编辑器界面有助于您更高效地创建和编辑网页。

Panel（控制面板）

位置：编辑器左侧。

功能：

Elements（元素）：包含所有可用的 Widgets（小工具），分为 Basic、General、Pro 等类别。您可以将它们拖放到页面中。
Global Settings（全局设置）：
- Global Colors（全局颜色）：设置网站的主色调，确保色彩一致性。
- Global Fonts（全局字体）：定义网站的默认字体样式。
Page Settings（页面设置）：
- 页面属性：修改页面标题、状态、特色图片等。
- 样式设置：设置页面的背景、边框等全局样式。
- Advanced（高级）选项：添加自定义 CSS、调整响应式布局等。

使用方法：

拖放元素：选择一个 Widget（小工具），拖动到 Canvas（画布）中的指定位置。
搜索元素：使用搜索栏快速找到所需的 Widget。
Navigator（导航器）：使用 Navigator 来查看和管理页面结构。
History（历史记录）：查看或撤销更改。

Canvas（画布）

位置：编辑器右侧。

功能：

实时预览：所有更改都会立即在 Canvas 上显示，所见即所得。
添加 Section（部分）：点击“Add New Section”按钮，开始构建页面布局。
编辑元素：点击任何元素即可编辑其内容和样式。

使用方法：

调整布局：拖动 Column（列）和 Section（部分）的边缘，调整其宽度和高度。
多设备预览：使用底部的设备图标，切换查看 Desktop（桌面）、Tablet（平板）和 Mobile（移动端）的页面效果。

右键菜单选项

在 Canvas 中，右键点击元素，可以访问快捷菜单，提高编辑效率。

常用选项：

Edit（编辑）：快速进入元素的编辑模式。
Duplicate（复制）：复制选定的元素或样式。
Copy（复制）和 Paste（粘贴）：在指定位置复制和粘贴元素或样式。
Save as Template（保存为模板）：将元素或部分保存，供以后重复使用。
Delete（删除）：移除不需要的元素。

使用技巧：

Copy Style（复制样式）：右键选择“Copy Style”，然后在另一个元素上右键选择“Paste Style”。
Global Widget（全局小工具）：将常用的 Widget 保存为 Global Widget，便于在不同页面中统一更新。

使用 Sections、Columns 和 Widgets

Elementor 的核心是通过 Sections（部分）、Columns（列）和 Widgets（小工具）来构建页面布局。

构建页面布局

Sections（部分）：
- 作用：页面的主要容器，用于划分页面的不同区域。
- 添加方法：点击“Add New Section”按钮，选择预定义的列结构。
Columns（列）：
- 作用：位于 Section 内，用于排列 Widgets，支持调整宽度和位置。
- 调整方法：拖动列的边缘，改变其宽度比例。
Widgets（小工具）：
- 作用：实际的内容元素，如 Heading（标题）、Text Editor（文本编辑器）、Image（图片）、Video（视频）等。
- 添加方法：从 Panel 中拖放到 Column 中。

嵌套元素

Inner Section（内部部分）：

用途：在现有的 Sections 和 Columns 内创建更复杂的布局。
添加方法：在 Widgets 列表中，拖放“Inner Section”到 Canvas 中。

使用场景：

创建多层次的列布局。
在同一行内排列多个 Widgets。

复制和粘贴元素

复制元素：

步骤：右键点击元素，选择“Duplicate”。

复制和粘贴元素：

复制：右键点击元素，选择“Copy”。
粘贴：右键点击目标位置，选择“Paste”。

复制/粘贴样式：

用途：将一个元素的样式快速应用到另一个元素。
步骤：右键点击源元素，选择“Copy Style”，然后右键点击目标元素，选择“Paste Style”。

样式和布局

Elementor 提供丰富的样式选项，让您可以细致地控制页面的外观。

全局字体和颜色

Global Fonts（全局字体）：

设置方法：在 Panel 的“Global Settings”中，选择“Global Fonts”。
作用：定义网站的 Primary（主要）、Secondary（次要）、Text（正文）、Accent（强调）等字体样式。

Global Colors（全局颜色）：

设置方法：在 Panel 的“Global Settings”中，选择“Global Colors”。
作用：设定网站的主要颜色，如 Primary、Secondary、Text、Accent 等。

优势：

一致性：确保网站各部分的样式统一。
高效性：修改全局设置后，相关元素会自动更新，无需逐个调整。

使用 Style（样式）选项卡

每个 Widget 都有三个选项卡：Content（内容）、Style（样式）、Advanced（高级）。

Content（内容）：
- 设置 Widget 的基本内容，如文本、图像、链接等。
Style（样式）：
- Typography（排版）：字体、大小、颜色、行高、字间距等。
- Background（背景）：纯色、渐变、图片、视频背景等。
- Border（边框）：设置元素的边框类型、颜色和圆角程度。
- Box Shadow（盒子阴影）：添加阴影效果，提升视觉层次感。
Advanced（高级）：
- Margin（边距）和 Padding（内边距）：调整元素与其他元素之间的空间。
- Motion Effects（动态效果）：添加 Entrance Animation（进入动画）、Hover Animation（悬停动画）等动态效果。
- Custom CSS（自定义 CSS）（Pro 功能）：针对特定元素添加自定义样式。