A.开始使用 Elementor

Elementor 简介

什么是 Elementor？

Elementor 是一个功能强大的 WordPress 页面构建器插件，允许您使用直观的 Drag-and-Drop（拖放） 界面创建精美的网页，而无需编写任何代码。它提供了丰富的 Widgets（小工具）、Templates（模板） 和 Theme Builder（主题构建器） 等功能，让您可以完全控制网站的设计和布局。

为什么使用 Elementor？

• 直观易用：通过 Drag-and-Drop（拖放） 编辑器，任何人都可以轻松创建专业的网页。
• 高度自定义：每个元素都有详细的 Style（样式） 和 Advanced（高级） 选项，可以精确地调整外观和布局。
• 丰富的功能：除了基本的设计工具，Elementor 还提供了 Theme Builder、Popup Builder、Form Builder 等高级功能。
• 响应式设计：内置的 Responsive Mode（响应模式），让您可以为不同设备优化页面。
• 大量模板和 Blocks：访问数百个预制的 Templates（模板） 和 Blocks（区块），加速设计过程。

免费版与专业版的区别

Elementor 提供免费版和专业版（Elementor Pro）。

免费版特点

• 基本 Widgets（小工具）：包括文本、标题、图像、视频、按钮、分隔线、间距等。
• 基本模板：有限数量的免费模板和 Blocks。
• 基本设计功能：可以创建简单的页面和布局。

Elementor Pro 额外功能

• 高级 Widgets：如 Posts（文章）、Portfolio（作品集）、Form（表单）、Slides（幻灯片）、WooCommerce Widgets 等。
• Theme Builder（主题构建器）：自定义网站的页眉、页脚、单篇文章、归档页面等。
• Popup Builder（弹窗构建器）：创建和管理网站弹窗。
• 动态内容：与 Advanced Custom Fields（ACF）、Toolset 等插件集成，显示动态数据。
• 专业模板：访问更多高质量的专业模板和 Blocks。
• 自定义 CSS：为元素添加自定义 CSS 代码。
• 全球支持：获得专业的客户支持和更新。

安装 Elementor

我们已免费为我们的建站客户安装Elementor, 也安装了Elementor Pro版本。

如果您需要安装 Elementor+Elementor Pro，请联系 草根外贸（安装费用500 元, 不包括使用支持）。

Elementor 界面概览

Elementor 编辑器界面

当您打开 Elementor 编辑器时，会看到一个直观的界面，主要分为以下几个部分：

• Panel（控制面板）：位于左侧，包含 Widgets（小工具）、Global（全局设置）、Navigator（导航器）、History（历史记录） 等。
• Canvas（画布）：位于右侧，显示实时页面预览，您可以在此拖放小工具并直接编辑内容。
• Toolbar（工具栏）：位于底部，包含 Responsive Mode（响应模式）、History（历史记录）、View Page（查看页面） 等选项。

了解控制面板

Widgets（小工具）

• Basic（基础）：标题、文本编辑器、图像、视频、按钮等。
• Pro（专业版）：表单、幻灯片、登录、价格表等（需要 Elementor Pro）。
• General（通用）：图标框、进度条、推荐语、手风琴等。

您可以在搜索栏中输入关键字，快速找到所需的小工具。

Global（全局设置）

• Global Colors（全局颜色）：设置网站的主色调，确保色彩一致性。
• Global Fonts（全局字体）：定义网站的默认字体样式。
• Site Settings（站点设置）：调整全局排版、按钮、图片、表单等的默认样式。

导航器（Navigator）

• 作用：显示页面的层次结构，方便在复杂布局中快速选择和编辑元素。
• 使用方法：点击左下角的 Navigator（导航器） 图标，打开导航器窗口。

历史记录（History）

• 作用：查看编辑过程中的操作记录，支持撤销和重做。
• 使用方法：点击左下角的 History（历史记录） 图标，查看 Actions（操作） 和 Revisions（修订版）。

响应模式（Responsive Mode）

• 作用：预览并编辑页面在不同设备（桌面、平板、移动设备）上的显示效果。
• 使用方法：点击底部的设备图标，切换到相应的设备模式。

创建您的第一个页面

如何创建新页面

1. 添加新页面：在 WordPress 仪表盘，导航到 Pages（页面） > Add New（添加新页面）。
2. 输入页面标题：为您的页面命名，如 “主页” 或 “联系我们”。
3. 切换到 Elementor 编辑器：点击 Edit with Elementor（使用 Elementor 编辑） 按钮，进入 Elementor 编辑界面。

添加 Sections 和 Columns

添加 Section（部分）

• 方法：在画布上点击 Add New Section（添加新部分），或点击中间的加号图标。
• 选择结构：弹出布局选择器，选择您需要的列结构（如一列、两列、三列等）。

编辑 Section 设置

• 编辑方法：点击 Section 上方的蓝色编辑图标，进入编辑模式。
• 设置选项：
  • Layout（布局）：宽度、间距、高度、内容位置等。
  • Style（样式）：背景、边框、形状分隔符等。
  • Advanced（高级）：边距、内边距、响应式设置、自定义 CSS 等。

添加和编辑 Widgets

添加 Widgets（小工具）

• 方法：从左侧 Widgets（小工具） 面板，拖放所需的小工具到画布中的 Column（列）内。

编辑 Widgets

• 内容（Content）：设置小工具的主要内容，如文本、图片、链接等。
• 样式（Style）：自定义小工具的外观，如颜色、字体、背景、边框等。
• 高级（Advanced）：设置边距、内边距、定位、响应式、动画等高级选项。

示例：添加标题和文本

• 添加标题：
  1. 拖放 Heading（标题） 小工具到画布中。
  2. 在 Content（内容） 选项卡，输入标题文本。
  3. 在 Style（样式） 选项卡，设置字体、大小、颜色等。
• 添加文本编辑器：
  1. 拖放 Text Editor（文本编辑器） 小工具到标题下方。
  2. 输入段落文本，使用格式工具调整样式。

保存和发布页面

保存草稿

• 方法：点击左下角的箭头旁边，选择 Save Draft（保存草稿），以保存未完成的工作。

预览页面

• 方法：点击左下角的 Preview Changes（预览更改） 按钮，在新窗口中查看页面效果。

发布页面

• 方法：完成设计后，点击左下角的 Publish（发布） 按钮。
• 设置可见性：在发布时，可以设置页面的可见性（公开、私密、受密码保护）。

通过以上步骤，您已经成功使用 Elementor 创建了第一个页面。您可以继续添加更多的 Sections 和 Widgets，丰富页面内容和布局。

使用模板和 Blocks

插入模板

• 方法：点击画布上的 Add Template（添加模板） 图标（文件夹状）。
• 选择模板：在弹出的模板库中，浏览 Pages（页面模板），选择合适的模板。
• 插入模板：点击模板上的 Insert（插入） 按钮，将其添加到您的页面中。

插入 Blocks

• 方法：在模板库中，切换到 Blocks（区块） 选项卡。
• 选择 Blocks：按照类别（如 Hero、Services、Testimonials 等）浏览 Blocks。
• 插入 Blocks：点击 Insert（插入） 按钮，将其添加到页面。

保存自定义模板

• 方法：在页面设计完成后，点击左下角的箭头，选择 Save as Template（保存为模板）。
• 命名模板：为模板输入名称，方便日后使用。

提示和最佳实践

利用全局设置

• Global Colors（全局颜色）：设置并应用全局颜色，确保网站色彩一致。
• Global Fonts（全局字体）：定义全局字体样式，提高设计效率。

响应式设计

• 切换设备模式：在设计过程中，随时切换到平板和移动设备模式，调整布局和样式。
• 隐藏元素：在 Advanced（高级） > Responsive（响应式） 设置中，可以选择在特定设备上隐藏元素。

使用历史记录

• 撤销更改：如果对某个编辑步骤不满意，可以使用 History（历史记录） 面板，撤销到之前的状态。

保持设计简洁

• 一致性：保持字体、颜色、间距等设计元素的一致性，提升网站专业性。
• 优化性能：避免过多使用动画和大型图片，确保页面加载速度。

获取帮助

• Elementor 文档：访问 Elementor 官方文档，获取更多教程和指南。
• 社区支持：加入 Elementor 社区，与其他用户交流经验和问题。

通过以上指南，您应该对 Elementor 有了初步的了解，并能够开始创建自己的网页。随着实践的深入，您将发现更多高级功能，进一步提升您的网站设计水平。