简介

在下面的教程中，你将学习使用容器制作自定义页脚模板。 在开始本教程之前，你应该对容器属性和用户界面有基本的了解，如果没有，请在继续学习之前花时间复习一下；

本教程将使用一个父容器和并排的子容器。 左边的子容器将使用行方向，宽度为 60%。 右侧子容器将使用列方向，宽度为 40%。 下面将放置一个单容器，其中包含动态版权声明。

开始

创建父容器布局

首先要在模板设计中添加一个新容器。 在本文档和其他相关文档中，这将被称为 “父容器”。

1. 单击 + 图标添加新容器。
2. 从预设布局中选择 “两个容器 “布局选项。
3. 在 “容器宽度 “选项中，选择 “全宽”。
4. 从 “最小高度 “选项中，选择 VH（视口高度）并输入数值（例如：40）。
5. 从 “样式 “选项卡，选择背景颜色选项，并选择所需的颜色（例如：使用网站设置中的全局颜色）。
6. 从 “高级 “选项卡> 填充，输入所需数值（例如：3%）。

设置子容器

在这一步中，您将定义子容器的宽度和方向。 子容器放置在父容器内，以便在需要时创建列。 请记住，为了优化页面性能，嵌套元素的总数应保持在所需的最低水平。

1. 选择并编辑左侧栏。
2. 在容器宽度属性中，输入 60% 的值。
3. 从 “项目 “选项卡选择 “行 “的方向。
4. 选择并编辑右侧列。
5. 在容器宽度属性中，输入 40% 的值。
6. 在 “项目 “选项卡中，选择 “列的方向”（可能是默认值）。

添加内容

添加公司链接

在这一步中，您将添加公司链接。 在本例中，您只需使用文本编辑器部件。 为了节省时间，你应该准备好这些内容，并将它们保存在 word 文档或注释中；

1. 在 widget 面板中，将文本编辑器 widget 拖到左侧子容器中。
2. 使用右键功能将文本编辑器部件复制三次。
3. 从准备好的资产中编辑文本编辑器部件。 每个小部件都应有一个标题（例如：H3）和下面的链接。

添加品牌和信息

在这个容器中，您将添加公司徽标、使命宣言、搜索框和社交媒体链接。 如果需要，搜索框可以改为订阅表单。

1. 在部件面板中，将网站徽标*部件拖放到右侧子容器中。 图片应左对齐。
2. 从 “部件面板 “中，拖放一个文本编辑器部件到网站徽标下方。 可对其进行编辑，以包含公司的使命声明或其他信息。
3. 从部件面板中，拖放一个搜索或表单部件到文本编辑器下方。
4. 然后，从部件面板中拖放一个标题部件到下面。 从 HTML 标记中选择 “p”。 编辑文本，邀请访客访问您的社交媒体页面。
5. 最后，从 “部件面板 “中将 “社交图标 “部件拖放到容器底部。 将其向左对齐。 在 “样式 “选项卡中，选择 “大小 “选项并输入所需的值（例如：16px）

*网站徽标必须有事先指定的图像。 这可在 “网站标识 “设置中完成。

添加版权容器

为了完成桌面设计，现在要添加一个动态版权容器。 如果您没有 Elementor Pro，可以直接将版权文本添加到所使用的标题部件中，而不是动态功能。

添加父容器

1. 单击 + 图标添加新容器。 选择单一容器布局选项。
2. 右击编辑容器属性。
3. 将 “容器宽度 “设为 “满”。
4. 从 “项目 “选项卡中选择 “项目居中对齐”。 可保留默认的 “列 “方向。
5. 从样式选项卡中选择背景颜色或使用全局样式设置。
6. 从 “高级 “选项卡> 填充，输入所需值（例如：1%）。

添加版权信息

1. 在 “部件面板 “中，将 “标题 “部件拖放到新的 “容器 “中。
2. 从 “样式 “选项卡，将颜色更改为所需值或全局颜色设置。
3. 返回 “内容 “选项卡。 从 HTML 标记中选择 “p “选项，将标题格式改为正文格式。
4. 接下来，单击动态图标*打开选项。 从显示的列表中选择当前日期和时间选项。
5. 要编辑动态文本，请单击小扳手图标。
6. 在时间选项下拉菜单中选择 “无”。
7. 在日期选项下拉菜单中，选择自定义选项。 在值中输入 “Y”，这将显示当前年份
8. 在高级选项中，在前值中输入 ©。 在后面的值中，您可以输入所需的文本。 记住在文本前加上空格，以便正确显示。

*如果您没有 Elementor Pro，可以跳过动态步骤，输入所需的版权文本。

响应式编辑

现在是检查页脚响应视图的时候了。 从编辑器面板底部选择响应工具。 在下面的示例中，我们将介绍移动视图；

1. 在父容器中打开 “项目 “选项卡并应用 “包裹 “选项。 这将允许子容器在平板电脑和手机等较小屏幕上堆叠。
2. 在每个子容器中，将容器宽度改为 100%。 这将在视口中堆叠子容器。
3. 如果需要，您可以在 “高级 “选项卡中更改每个容器的顺序。 .

完成

现在布局已经完成，您可以编辑任何需要的链接和文本。 您可能还会发现，为了在响应式视图中更好地对齐和填充，需要对一些单独的部件进行编辑