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

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

页眉和页脚由用户在 WordPress 上的当前主题提供。 这些通常设计良好并且足以满足大多数用途。 但是,如果您想自定义主题,则必须更改代码; 这就是页面生成器plugin派上用场的时候。 您可以使用它们来创建和更改网页组件,而无需了解任何代码。

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

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

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

Elementor 是一个可视化页面构建器,允许用户无需切换模式即可查看其页面的显示方式。

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

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

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

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

您可以从各种标题部分中进行选择; 最常见且外观现代的标题在最左角有一个网站徽标,中间有一个导航栏,右侧有一个搜索栏部分。

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

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

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

我们开始这个派对吧。

什么是标头及其作用?

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

您的标题设计将给您的用户带来对您网站的第一印象,无论他们是到达您的主页、关于页面还是其他单独内容。 而且,如果设计得当,它会吸引用户的注意力并吸引他们继续滚动和阅读。

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

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

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

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

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

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

如何制作标题

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

开发标题模板

在 WordPress 管理面板上,将鼠标悬停在模板,然后单击“添加新内容”来构建我们的标题。

一旦您被路由,将会弹出一个模式窗口。 选择标题,命名标题,然后单击“创建模板”:

这将启动 Elementor 编辑器。 之后,您将看到一个可供选择的模板列表。 因此,选择一个对您有吸引力的:

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

创建徽标:第一步是创建徽标。 在网站的实时编辑器中设置徽标,将其放入页眉中。 单击“站点标识”选择徽标。

决定徽标后,单击“发布”

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

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

更改标题菜单

我们接下来要做的就是更改菜单。 如果您已生成菜单,模板将自动合并它:

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

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

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

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

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

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

标题发布

现在,您可以在完成更改后发布标头。 amp中在整个网站上使用标头,因此我们将在选择“添加条件”后选择该选项:

这是我们实时网站的页面amp:

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

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

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

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

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

完成后发布页脚:

完成的产品

最终结果如下。 页眉和页脚现在都在我们的网站上使用:

这是最重要的阶段,您必须确保页眉和页脚部分具有响应能力。 由于全角菜单通常不适合移动视图,因此您必须知道您的设计将如何显示在移动屏幕上。 Elementor 侧边栏部分底部的响应式开关可以更改移动设备和选项卡版本。

您可以通过多种方式测试页眉和页脚的响应能力。 amp,您可以使用 Browserstack、跨浏览器测试和 Google Resizer 等工具来确保您的网页尽可能具有响应能力。 您也可以通过尝试不同的设备来手动完成此操作。

结束事情

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

汉森·F.

最近的帖子

WordPress 主题比较:Astra 与 OceanWP

市场上最受欢迎的两个 WordPress 主题是 Astra 和 OceanWP。 专业的…

2022 年 1 月 2 日

WordPress 新闻主题比较:报纸与报纸 阿斯特拉

创建一个优秀的新闻网站并不需要您成为一名网页设计师。 我们…

2021 年 10 月 25 日

创建一个以报纸为主题的新闻相关网站

报纸主题是由 tagDiv 设计的最重要的 WordPress 主题之一,...

2021 年 10 月 18 日

如何使用 Avada WooCommerce 构建器构建电子商务

在建立在线商店时,WooCommerce 是首选plugin。 它…

2021 年 10 月 4 日

如何通过 Elementor 使用粘性标题和滚动效果

标题通常是人们访问您的网站时首先看到的东西,...

2021 年 9 月 21 日

如何使用 Avada 页眉、页脚和列布局生成器

我们自己的页面构建器 Avada Builder 现在有两个界面:Avada…

2021 年 9 月 16 日