如何在Elementor中使用页眉和页脚

网站的页眉和页脚是必不可少的元素。 在大多数情况下,标题提供导航链接,可简化导航到网站不同部分的过程。 在另一方面,页脚包含重要信息的网站访客可能需要,如企业地址或联系人信息,仅举几例前amp莱。

页眉和页脚由用户在 WordPress 上的当前主题提供。 这些通常设计良好,足以满足大多数用途。 但是,如果要自定义主题,则必须更改代码; 这是 Page Builderplugin派上用场的时候。 您可以使用它们在不知道任何代码的情况下创建和更改网页组件。

本教程将教我们如何制作网站页眉和页脚。 将使用 Elementor Pro(因为 Elementor 的基本版本不包括创建这些组件最重要的功能)。 因此,下载 Elementor Pro 并确保它已打开。

为什么要选择 Elementor 作为页面构建器?

Elementor 是最先进的页面构建器,允许用户使用高级元素来创建华丽的设计和布局。 对于没有编码先验知识的新手来说,这是非常有益的。 Elementor 中的拖放编辑器允许用户移动小部件和项目。

Elementor 是一个可视化页面构建器,允许用户在不切换模式的情况下查看其页面的显示方式。

使用 Elementor 的另一个引人注目的论据是,大多数工作都可以免费完成。 他们的免费版本能够提供足够的站点编辑功能。 但是,我们将介绍免费和付费版本,以便您可以选择最适合您需求的版本。

以下是 Elementor 值得的一些重要方面:

  • 支持拖放功能。
  • 它有大量的模板。
  • 总共有超过 90 个小部件。
  • 响应式支持不需要编码。
  • 重做和撤消选项可用。
  • 自动保存可用。

如果您在开发独特的页眉之前决定了所需页眉和页脚部分的总体安排,这将有所帮助。 查看预先制作的标题部分布局可能会为您提供许多选择。

您可以从各种标题部分中进行选择; 最常见和最现代的 Header 在最左角有一个站点标志,中间有一个导航栏,右边有一个搜索栏部分。

有无限的可能性,您可以构建您想要的任何布局。

我选择了 7 号预制页眉模板; 这是在 WordPress 网站上使用标题的最常见和最简单的方法。 将标题模板名称复制并粘贴到Templates > Header > search template > 粘贴复制的标题名称

找到所需的标题模板后,选择“使用 Elementor 编辑”,您将进入 Elementor Pro 标题构建器部分。

让我们开始这场派对。

什么是标题,它有什么作用?

网页的顶部称为“网站标题”。 整个网站的标题通常是相同的。 但是,某些网站对网站的不同部分使用不同的标头。

您的页眉设计将为您的用户提供对您网站的第一印象,无论他们是访问了您的主页、关于页面还是其他个人内容。 而且,如果它设计得很好,它会吸引用户的注意力并吸引他们继续滚动和阅读。

标题还可以帮助提升贵公司的品牌形象。

我正在使用公司的标志、字体、颜色和整体品牌语言等功能。

站点导航、站点搜索、购物车(用于销售站点)、号召性用语 (CTA) 按钮以及其他改善用户体验和提高转化率的功能都可以在标题中找到。

页脚是显示在页面底部的网页的一部分。 它们通常在整个网站的所有页面和帖子上不断显示,类似于标题。

页脚经常被忽视,这是一种潜力的浪费,因为它们出现在网站的每个页面上。 他们对头球同样重要。

您的页脚设计可以显示有用和重要的信息,例如时事通讯注册、版权信息、使用条款和隐私、站点地图、联系信息、地图、网站导航等等,具体取决于您选择的设置。

如何制作标题

我们将在本节中创建一个自定义标题。 如果这看起来令人生畏,请不要担心; 我们不会从头开始。 相反,我们将使用由 Elementor 设计团队设计的 Elementór Pro 模板。

开发标题模板

在 WordPress 管理面板上,将鼠标悬停在Templates 上,然后单击Add New以构建我们的 Header。

一旦您被路由,将弹出一个模式窗口。 下拉菜单中选择创建模板”:

创建模板

这将启动 Elementor 编辑器。 之后,您将看到一个可供选择的模板列表。 所以选择一个吸引你的:

选择模板后,它应该显示在 Elementor 编辑部分的顶部:

创建徽标:第一步是创建徽标。 在站点的实时编辑器中设置徽标以将其放在页眉中。 通过单击站点标识选择一个徽标。

确定徽标后,单击Publish

如果您刷新 Elementor 界面,您网站的徽标现在应该位于标题中:

之后,您可以进行任何您想要的更改。

更改标题菜单

我们应该做的下一件事是更改菜单。 如果您生成了菜单,模板将自动合并它:

这是我们的菜单结构,您可以在标题模板中看到它:

如果您有多个菜单,您可以根据需要更新内容。

您可以像编辑任何其他小部件一样编辑其属性。

如果我们需要添加更多项目,我们可以在 Header 中添加更多部分:

让我们首先添加一个标题和一些社交媒体图标:

之后,您可以进行任何您喜欢的更改。 这是我们的编辑结果:

标题发布

完成更改后,您现在可以发布标题。 amp在整个站点上使用 Header ,因此我们将在选择Add Condition 后选择该选项:

这里还有一个前amp从我们的活动网站页面的文件:

制作页脚的过程与构造页眉的过程非常相似。 要制作一个,请创建一个新的页脚模板,如下所示:

然后决定一个模板。 页脚有多种形状和大小。 有些包括公司信息,而另一些则有联系表格。 选择适合您要求的模板。

我们为我们的网站选择的模板如下:

一旦开始编辑,您就会看到标题(如果您设置了它出现在所有页面上的条件)。

根据需要更改页脚; 这是我们的修订版的样子:

完成后发布页脚:

完成的产品

这是完成的结果的样子。 现在我们的网站上同时使用了页眉和页脚:

这是最重要的阶段,您必须确保页眉和页脚部分具有响应性。 因为全角菜单通常不适合移动视图,所以您必须知道您的设计将如何出现在移动屏幕上。 Elementor 侧边栏部分底部的响应式开关可以更改移动和标签版本。

您可以通过各种方式测试页眉和页脚的响应能力。 对于前amp文件,你可以像使用Browserstack,跨浏览器测试,和谷歌调整器工具,以确保您的网页是为响应越好。 您也可以通过尝试不同的设备来手动完成。

结束事情

我希望本指南能帮助您使用 Elementor Pro 快速开发您独特的页眉和页脚部分。 WordPress 有很多功能,但它只允许对页眉和页脚部分进行一些修改,最终通过 Elementor Pro 页面构建器修复。 通过更好地控制站点元素,您现在可以更好地展示站点的愿景。 此外,Elementor 的功能通过使用免费插件得到了改进,允许用户使用更高级的功能自定义他们的网站。

发表评论

您的电子邮件地址不会被公开。 必填字段已标记为*