[02] Elementor 编辑器基础知识
在上一课中,我们安装了 Hello 主题,为网站创建了页面,并添加了导航菜单。在本课中,我将向您介绍 Elementor Editor,并向您展示使用它的基础知识,这将是创建我们令人惊叹的网站的基石!
准备好?让我们直接进入。从 WordPress 仪表板,转到页面部分,然后单击我们在上一课中创建的主页。单击“使用 Elementor 编辑”。
欢迎使用 Elementor 编辑器!让我们熟悉一下界面。
右侧是页面的内容区域。您可以在此处添加和编辑构成页面布局和设计的元素。
左侧是 Elementor 面板。这里有创意工具,称为小部件。小部件用于向您的页面添加元素,例如标题、文本编辑器、图像、视频等。
您始终可以通过单击面板标题中右上角的小部件图标来访问此区域。
在面板标题的左侧,您有一个带有多个设置和导航选项的汉堡菜单按钮。
站点设置,顾名思义,允许您在全球范围内定义您的站点设置......所有这些都来自一个地方。我们稍后会在课程中回复他们。
Theme Builder 是 Pro 的一项功能,可让您从一个位置管理所有站点部分。我们不会在本课程中介绍它,但如果您想了解更多信息,可以查看我们的专业课程/我们关于 Theme Builder 的视频。
用户首选项,允许您自定义 Elementor 界面,例如切换到暗模式。
下面是查找器,您也可以使用键盘快捷键 Command 或 Control E 启动它。查找器是一个搜索栏,可让您快速访问整个站点。我们稍后会看到它的实际应用。
单击“查看页面”查看您的实时网站或“退出仪表板”返回您的 WordPress 仪表板。
底部面板
在底部,是带有一些更重要工具的面板工具栏。
在页面设置中,您可以编辑页面名称和布局。
在这里,我们将隐藏标题切换为是,以隐藏显示在页面顶部的标题。稍后我们将看到如何添加我们自己的标题。
单击此处获取导航器,或使用键盘快捷键 Command 或 Control I。导航器显示页面元素的组织视图。目前,它是空的,因为我们还没有添加任何内容。我们稍后会用到它。
单击此处查看您的编辑历史记录,查看最近的更改或恢复到以前的修订。
旁边是响应模式图标,用于在屏幕尺寸之间切换和进行响应式编辑。
我们可以预览我们的更改,当准备好将它们上线时,只需点击这个更新按钮。还有其他保存选项,我将在稍后的视频中讨论。
好的,现在让我们仔细看看页面是如何构建的。
您可以通过两种方式开始。您可以从头开始设计页面,也可以使用库中的模板。
让我们从图书馆开始吧。在这里,您可以预览 Elementor 的预制块和页面,以及您自己的模板,.. 并将它们插入到您的页面中。
通过选择类别或使用右侧的搜索栏来过滤块。您还可以将块和模板添加到您的收藏夹以便于访问。
我将继续插入这个块,这样你就可以看到它是如何工作的。
如果这是您第一次访问 Elementor 模板库,则需要使用您的 Elementor 帐户连接到它。您可以使用现有帐户,也可以创建一个新的免费帐户。
伟大的!
现在我们添加了第一个块,让我们了解 Elementor Edit 结构。Elementor 使用三个主要构建块:部分、列和小部件。
部分是最大的,可以通过它们的蓝色边框来识别,就像你在这里看到的那样。
它们里面是 Columns,在这种情况下有一个。您可以通过黑色虚线边框识别它们。这些列包含小部件,例如您在此处看到的文本和按钮
您可以使用句柄控制部分、列和小部件。
要编辑部分、列或小部件,只需右键单击它们的句柄即可。
您可以在其中进行编辑、复制、删除等操作。
您可以通过简单地拖放来移动部分、列和小部件。蓝线表示松开时它将放置的位置。
添加部分的另一种方法是单击此处的加号图标,然后只需选择这些预设结构中的一个,我们可以根据自己的喜好对其进行调整,或者直接删除它们。
Sections、Columns 和 Widgets 在左侧面板中有 3 个选项卡。部分和列有:布局、样式和高级选项卡。
而小部件有内容、样式和高级选项卡。很快我们就会看到如何使用这些设置来设计我们的页面。
我们的网站设计不需要此部分,因此我将继续并删除它。
Elementor Editor 概述到此结束。
在下一课中,我们将设置我们的设计系统以简化构建过程并确保整个网站的样式一致。所以继续看!