简介

在本教程中，您将学习如何使用容器创建响应式标题模板。 本教程将使用四个不同的部件，以最好地演示弹性属性如何帮助您创建适用于所有设备的标题，而无需像过去那样复制和隐藏。

本教程将使用几种高级柔性属性，如顺序和大小。 在开始本教程之前，您应该掌握容器属性的基本知识。 Site 徽标和 菜单也应已分配和创建。

入门

您应首先在主题生成器中创建一个新的标题模板。 您可以关闭库选项，从零开始。

本示例使用了网站徽标、导航菜单、搜索表单和菜单购物车部件。 如果没有安装 WooCommerce，可以使用 Social Icons 部件而不是菜单购物车。

添加父容器

现在，您将添加一个容器，为标题奠定基础。 本教程将使用盒式宽度，但如果设计需要，也可以在完成后改为全宽。

1. 单击 + 图标添加新容器
2. 在 “容器布局 “选项卡中，本教程将使用默认布局
3. 展开项目属性手风琴
4. 将方向属性设置为行
5. 将 “对齐项目 “属性设置为 “居中
6. 将 “内容对齐 “设置为 “柔性结束”。
7. 在样式选项卡中，将选择背景颜色。 使用全局颜色可以节省时间，改善工作流程
8. 在 “高级 “选项卡中应用上下填充（例如：10PX）

添加部件

现在将把部件添加到容器中。 我们将使用四个部件来演示 “订购 “和 “增长 “的 Flex 属性。

为什么要倒序？ 将 “内容正当化 “属性设置为 “柔性结束 “后，按相反顺序拖动部件会更容易。 在后面的步骤中，网站徽标部件还将使用 “增长 “和 “自定义宽度 “属性来填充剩余空间。 了解这些属性后，您可以根据需要调整工作流程。

菜单购物车小工具

本教程将使用菜单购物车小工具，因为这是许多网站的共同需求。 如果你没有使用 WooCommerce，也可以用 Social Icons（社交图标）小部件代替。

1. 从部件面板中将菜单购物车（或社交图标）部件拖放到容器中。 它将使用容器的 Flex-End 属性右对齐。
2. 在菜单购物车的 “内容 “选项卡中，通过切换应用 “隐藏空 “和 “隐藏小计”。
3. 将窗口小部件的对齐方式设置为居中
4. 在样式选项卡中，将边框设置为 0%。 这将继承自按钮的全局样式。
5. 在 “高级 “选项卡中，导航到 “顺序属性”。 单击自定义订单选项并输入 4 的值。

搜索表单部件

标题是保留搜索选项的好地方。 您可以使用搜索表单的全屏选项，为访客创建一个功能强大但设计简约的搜索功能；

1. 从 “部件面板 “中，将 “搜索表单 “部件拖放到 “菜单购物车 “的左侧
2. 在内容选项卡中，从下拉菜单中选择全屏皮肤选项
3. 在 “样式 “选项卡中，设置 “切换图标 “背景颜色，使其与您的设计最匹配。 全局颜色用于改进工作流程
4. 在 “高级 “选项卡中，将 “顺序 “属性设置为三。

导航菜单部件

现在可以使用导航菜单部件添加网站导航。 您的菜单应该已经在 WordPress 中创建。

1. 在部件面板中，将导航菜单部件拖放到搜索表单的左侧
2. 从 “内容 “选项卡，使用图标将 “对齐方式 “属性设置为右侧
3. 在菜单下拉选项中，使用切换按钮选择 “全宽 “选项
4. 在 “高级 “选项卡中，将自定义顺序属性设置为 “2”。

网站徽标部件

现在，您要将网站徽标部件添加到容器中。 之前应在 “网站设置 “中对其进行了分配。 如果没有，则应现在分配，然后返回编辑器。

1. 从部件面板将网站徽标部件拖放到导航菜单左侧
2. 选择 “左对齐 “图标，选择 “左对齐 “属性。
3. 在 “高级 “选项卡中，将 “自定义顺序 “属性设置为 “一”。
4. 现在使用 “大小 “属性。 选择增长选项。 这将使网站徽标自动填满容器的剩余空间，并通过继承第二步中的值左对齐。

响应模式

现在，您将学习使用之前在部件中设置的自定义顺序属性。 这样，您就可以更改每个部件的顺序，使其最适合您的设计。 与之前的反向功能相比，这是一项重大改进。 它可以让你避免为每个设备创建单独的标题；

平板电脑视图

在表格视图中，导航菜单和菜单购物车的订单属性将使用自定义订单属性进行重置。 要使用这些属性，必须先在桌面视图中进行设置。 如果尚未将部件的顺序设置为自定义值，请在切换设备视图前进行设置。

1. 从 “容器布局 “选项卡，调整盒式内容的宽度（例如：90%）。
2. 选择导航菜单部件。 在 “高级 “选项卡中，将自定义 “顺序 “属性更改为 “四”。 由于其他项目继承了它们的桌面视图，因此可能还不会显示在适当的位置。 这是正常现象
3. 接下来选择菜单购物车（或社交图标）部件。 将自定义订单属性设置为三
4. 最后选择 “搜索表单 “图标，并将自定义订单属性设置为 “二”（可能已在正确位置）
5. 网站徽标小工具将保留继承的订单值 One；

移动视图

对于移动断点，我们将使用容器的 “Wrap（包边）”和 “Justify Content（内容正当化）”属性。 自定义宽度属性应用于网站徽标，使其居中高于其他三个部件。

1. 从 “容器 “的 “布局 “选项卡，展开 “项目 “手风琴
2. 单击图标应用 “包边 “属性
3. 将 “内容对齐 “属性更改为 “间距 “属性
4. 调整 “容器宽度 “属性，留出一定的左右边距（例如：95）
5. 最后，选择网站徽标部件
6. 在 “内容 “选项卡中，使用图标将 “对齐方式 “更改为 “居中”。
7. 在 “高级 “选项卡中，使用下拉菜单将 “宽度 “属性更改为 “自定义
8. 将网站徽标窗口小部件的宽度调整为 100%

恭喜您

您现在应该能够使用容器创建响应式标题模板了。 现在，您可以尝试使用不同的部件组合和顺序，让访客惊叹不已。

可选社交图标

这里展示了上述教程中提到的可选社交图标部件。

下一步

现在您已经了解了如何创建页眉模板，请查看如何为页脚创建模板，该模板将显示在网站页面的底部