首页 » elementor » academy » Build a Blog in Elementor » Elementor Pro制作博客网站 [05] 使用 Theme Builder 管理站点部分

Elementor Pro制作博客网站 [05] 使用 Theme Builder 管理站点部分

在上一课中,我们熟悉了 Elementor Editor 并学习了如何使用全局样式自定义我们的网站。

在本课中,我们将熟悉 Elementor Theme Builder,这是一个以直观直观的方式管理所有站点部分的单一位置。

通过单击菜单图标并选择主题生成器,从使用 Elementor 编辑的任何页面访问主题生成器。

主题构建器显示我们网站的所有部分,并允许我们编辑页眉、页脚、帖子模板、页面模板等。模板名称旁边的绿点表示此模板处于活动状态,可供访问者访问。通过每个网站部分的预览,它让我们可以鸟瞰整个网站。由于我们为我们的网站使用了一个工具包,因此所有这些模板都已与其一起导入。凉爽的!

左侧的面板让我们快速了解各种类型的站点部分。
单击特定模板,将向我们展示包含更多信息的更大预览。

例如,让我们看一下存档模板。
我们可以通过单击此处编辑模板,这将直接带我们进入 Elementor Editor。

一些工具包包括针对相同网站部分的多个选项,让我们可以自由地设计我们认为合适的网站样式。我们的工具包包含多个存档模板,我们可以使用它们来显示不同类型的存档,例如一个存档模板用于类别,另一个用于标签。

由于 Xander 计划在一个类别下发布他的所有文章,我们将继续删除任何不需要的模板。单击此处删除此模板。伟大的!

要为特定站点部分添加新模板,请单击此处的加号图标,这会将我们直接带到编辑器。

或者,我们可以单击右上角的加号图标,这将提示我们选择站点部分模板。
单击“i”图标会显示有关该部分的更多具体信息,包括专门的视频和帮助文章。

使用我们学到的知识,我们将继续对我们网站的不同部分进行一些调整,从标题开始。

让我们看看这里需要更改什么。Xander 的徽标看起来有点小,因此我们需要更改其大小。我们还需要连接菜单弹出窗口。

让我们从徽标开始。单击徽标小部件,对其进行编辑。从这里的图标我们可以看出它是动态的,并显示我们之前设置的图像作为我们的网站标志。

转到样式,我们将在其中更改徽标的宽度。接下来,我们将切换到响应式视图以确保徽标在不同设备上看起来不错。

我们将从平板电脑视图开始。如果我们不为响应式设置输入值,它将获取我们在更大的设备视图中输入的值。
这是因为在大多数情况下, Elementor 中的响应式编辑是从较大的视口或屏幕尺寸继承到较小的视口。

所以,正如我们在这里看到的,Tablet 视图继承了 Desktop 视图的值,显示为灰色。

接下来,我们将切换到移动视图。使用顶部的响应栏在设备之间轻松导航,或使用键盘快捷键 Command 或 Control +Shift+M。

这个值不同于 Desktop 和继承的 Tablet 宽度,因为它已经由 Kit 的创建者手动预设。我们将更改宽度值,但正如我们所见,这里没有太大差异。这是因为 logo 大小受列宽的限制,这在 Kit 中也已预先设置。所以让我们调整列,通过单击它,并增加列宽值。

现在我们改变了这一列的大小,标志有空间扩展到它的全宽,但是为了显示给定的宽度,剩下的列被压低了。通过单击剩余的列并更新其宽度来解决此问题。

接下来我们将编辑菜单。单击菜单图标。您会注意到此图标还使用动态链接,这次链接到现有的弹出窗口。让我们通过单击扳手图标确保它连接到正确的弹出窗口,然后在弹出窗口下键入“菜单”并选择正确的弹出窗口。再次单击扳手图标将其关闭。

单击更新以保存我们的更改。现在标题已经完成,让我们看一下菜单弹出模板,看看它是否需要任何更改。

使用 Finder 可以轻松访问它,而无需退出 Elementor Editor。正如我们所见,该模板还使用了徽标小部件。在右侧,我们会找到导航菜单小部件,它从我们在课程前面创建的菜单中提取链接。

这个菜单看起来很棒,让我们继续浏览网站的页脚。我们将再次使用 Finder,这次是导航到“页脚”。向下滚动一点,让我们看看我们需要在此处更改的内容。

我们需要用 Xander 的副本更新标题……和文本编辑器小部件,并更改此图像。我们还将了解如何将表单小部件连接到电子邮件营销服务。然后在底部,我们将更新标题小部件中的信用额度,并添加我们的社交媒体链接。

因此,我们将从选择标题开始,然后更改标题……和文本编辑器小部件内容。接下来我们将选择另一张照片。如您所见,我们这里没有图像小部件,所以让我们看看这个图像是如何显示的。选择它,我们可以看到它在一个列中。我们将单击“样式”选项,从这里我们可以看到该列使用图像作为背景,因此我们需要做的就是单击图像并选择不同的照片。伟大的!

接下来,我们将选择表单小部件。在提交后的操作下,我们可以选择将此表单链接到不同的时事通讯服务,例如 Mailchimp 或 MailerLite。要了解有关将您的电子邮件营销服务集成到 Elementor 表单中的更多信息,请查看说明中的链接。

选择标题小部件以更新信用额度。与链接一样,标题字段也可以使用动态标签。它设置为显示当前日期,通过单击扳手图标,我们可以看到它显示当前年份,由字母 Y 表示。酷。

我们将展开“高级”部分,并更改出现在版权符号之后的文本。最后但同样重要的是,我们不要忘记在更新之前添加我们的社交媒体链接!

就是这样!现在您知道如何使用 Elementor 的一种主题生成器,在一个地方设计和管理您的所有站点部分。在我们继续之前,请花一些时间探索工具包中包含的 Theme Builder 和模板。然后继续并删除任何非活动模板,由灰色状态点指示。
在下一课中,我们将介绍博客的本质:创建和管理新帖子!所以点击继续观看。到时候那里见!

发表评论

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

Scroll to Top