使用 Astra 主题,您始终可以依赖灵活性。自 3.0.0 版起,Astra 主题就附带了拖放式页眉页脚生成器。它提供了一系列功能,因此您可以比以往更轻松地构建页眉和页脚。
由于页眉和页脚是与内容分开的网站区域,因此可以单独编辑它们。因此,您可以使用 Astra 创建页眉和页脚,同时仍使用 Elementor 处理内容。另一方面,您可以仅使用 Elementor 设计整个网站,包括页眉和页脚。
无论您选择哪种方式,本文档都将向您展示如何充分利用 Astra 和 Elementor 组合。
为什么页眉和页脚很重要?
页眉和页脚是网站的第一部分和最后一部分,因此非常重要。页眉是访客在网站上看到的第一部分,而页脚通常是最后一部分。

它们位于所有(或大多数)网站页面和包含品牌、导航和其他重要信息的帖子上。
因此,精心设计的页眉和页脚对于出色的用户体验、品牌知名度和转化率至关重要。
Astra 主题如何与 Elementor 配合使用?
Astra 主题不仅与免费的 Elementor 完全兼容,还与 Elementor Pro 及其主题构建器完全兼容。此外,当您开始使用 Elementor 构建页面时,Astra 将自动为 Elementor 完美设置所有选项。
首先,重要的是要了解您使用 Elementor 来添加和设计页面或帖子内容。其次,主题是将您的网站连接在一起的“粘合剂”。WordPress 主题是您网站的画布 – 一个为其提供结构并设置基础的框架。
因此,Astra 主题将帮助您快速设置网站布局、字体、颜色、侧边栏、面包屑导航、特色图片等。此外,Astra 还将为您提供与您可能需要的一些第三方插件集成的选项,例如 WooCommerce。此外,它还将为您提供自定义 WordPress(例如,博客存档)或第三方插件页面(例如,商店)的选项。
此外,由于 Elementor 的免费版本不附带主题构建器,因此您只能编辑内容。同时,您可以免费使用 Astra 主题构建页眉和页脚,而无需额外的插件。
页眉页脚生成器和 Elementor
事实上,设计出色的页眉和页脚可以为您的网站带来真正的改变。因此,Astra Theme 附带了页眉页脚生成器,可供使用。
使用 Astra 创建的页眉和页脚将与您使用 Elementor 添加的内容完美集成。由于 Elementor 的免费版本没有页眉和页脚构建选项,因此这将是您的默认选项。
此外,我们所有的Elementor 入门模板都是这样创建的。导入任何 Elementor 入门模板时,您将获得一个仅使用 Elementor 创建内容的网站。页眉和页脚将使用 Astra 的页眉页脚构建器构建。

Astra 页眉和页脚生成器
步骤 1 – 要构建页眉,请导航至仪表板 > 外观 > 自定义 > 页眉生成器。同样,要开始构建页脚,请导航至页脚生成器选项;

第 2 步– 要构建页眉或页脚,只需添加、设置样式并将不同元素拖动到所需位置即可。此外,您可以单独设置添加的每个元素。所有其他定制器设置将自动应用;
步骤 3 – 接下来,通过切换视口(桌面、平板电脑和移动设备)并进行调整,以响应方式设计页眉和页脚。您可以使用不同的元素、以不同的方式定位它们,并修改每个视口的设置;

步骤 4 – 单击“发布”按钮保存更改。
创建页眉和页脚后,您可以使用 Elementor 向页面和帖子添加内容。
如何使用 Elementor 创建页眉和页脚(免费)?
或者,您可以选择使用 Elementor 构建页眉和页脚。
为此,您还需要安装“Elementor 页眉和页脚构建器”插件。然后,您可以将默认的 Astra 页眉和页脚替换为使用 Elementor 创建的页眉和页脚。为了说明这一点,我们将向您展示如何为整个网站添加 Elementor 页眉。
您可以通过导航到仪表板 > 插件 > 添加新插件来安装插件。在右上角的搜索栏中,输入“ Elementor Header & Footer Builder ”。单击“安装”按钮。
创建模板(页眉或页脚)
首先,您需要创建一个新模板(页眉或页脚)并使用 Elementor 进行设计。为此,您需要同时激活 Elementor 和 Elementor Header & Footer Builder 插件。
步骤 1 – 导航到仪表板 > 外观 > Elementor 页眉和页脚构建器,然后单击“添加新”按钮;

第 2 步– 为模板命名,然后单击“使用 Elementor 编辑”按钮开始设计模板。
第 3 步– 添加您的设计并单击“发布”按钮保存。单击 Elementor 菜单和“退出到仪表板”返回到您的模板设置。

将模板添加到您的网站
现在您的设计已经准备就绪,您需要设置模板以在前端显示它:
步骤 1 – 选择要创建的元素类型:页眉或页脚。在我们的示例中,我们选择创建页眉;
步骤 2 – 添加显示规则。对于“显示于”选择“整个网站”,对于“用户角色”选择“全部”。选择这些选项会将此页眉或页脚添加到您网站的所有页面和帖子;

步骤 3 – 单击“发布”/“更新”按钮保存更改。
现在您已设置 Elementor 页眉和页脚。请记住,在 Elementor 编辑器中添加单独的小部件设置将覆盖任何定制器设置。要更改此设置,您需要编辑元素。