简介

在本教程中，您将学习使用容器来设计单页面模板。 我们将创建一个传统的 WordPress 布局，在容器中使用页面标题 (H1) 和侧边栏。

虽然许多现代设计可能不使用侧边栏，但许多客户仍然要求使用侧边栏，它是放置广告和其他希望在所有页面上都能看到的内容的有用位置。 在移动设备上，边栏一般应堆叠在内容下方。

什么是单页模板

单页模板取代了 WordPress 主题中的 single.php 或 singular.php。 您可以在本文档中了解更多相关信息。

重要： 创建或编辑单页模板时，必须在模板中使用 “帖子内容 “小工具。 这也是您在 Elementor 中尝试创建或编辑页面时可能会看到 “抱歉，在您的页面中找不到内容区域”错误信息的原因之一。

主题用户您好

虽然许多 WordPress 主题可能会在自定义器中使用一个或多个侧边栏部件选项，但 Hello 主题默认情况下并不使用传统的 WordPress 侧边栏模板。 使用这种方法添加侧边栏小部件最不复杂，因为它不需要在主题中添加代码。

开始使用

从主题生成器的左侧面板中选择单页链接。 然后单击 “添加新内容 “按钮开始创建新模板。

添加页面标题容器

1. 在主编辑器窗口中，单击 + 图标添加新容器
2. 在容器属性中，本教程使用盒状宽度属性
3. 最小高度属性调整为 100px，以允许一些填充
4. 点击打开项目属性手风琴
5. 方向属性将设置为行
6. 使用 “对齐项目 “图标将所有项目垂直居中
7. 将 “内容对齐 “属性设置为 “间距”。 这将使内容位于容器的边缘。
8. 然后，您可以在样式选项卡中设置容器的背景颜色。 使用全局颜色可以节省时间，并保持品牌形象的一致性

页面标题 容器内容

1. 在部件面板中，将 “帖子标题 “部件拖放到容器中。 这将从最近添加的页面中动态抽取一个随机的页面标题（我们将很快进行更改）
2. 在 “文章标题 “部件的 “样式 “选项卡中，颜色将被设置为与容器背景形成对比。
3. 添加其他部件。 本例中使用的是 “共享图标 “部件。 该部件将继承对齐内容属性，并与容器的对边对齐。

添加正文布局容器

1. 在主编辑器窗口中，点击 “+”图标添加新的容器布局
2. 本教程选择两个容器布局来创建 “侧边栏”。
3. 选择并编辑新创建的父容器。 在高级选项卡中应用上下边距（例如：34px）
4. 根据需要选择并编辑子容器的宽度（例如：25%/75）
5. 然后就可以在导航器中反转子容器了。

添加内容

虽然步骤不多，但这却是单页模板最重要的部分。 现在，您将在设计中添加 “内容”；

1. 在主编辑器窗口中选择并编辑大的子容器
2. 在 HTML 标记下拉菜单中，选择 “Main “标记。 这将在本教程稍后的目录部件中使用。
3. 从部件面板中将 “帖子内容 “部件拖放到大的子容器中。 这将自动填充网站上最新创建的页面内容。
4. 要在预览中应用不同的页面，请单击屏幕下角的齿轮图标
   1. 在预览设置中，您可以通过在输入框中输入几个字母来选择网站上的任何发布页面
   2. 一旦选定，请单击应用和预览按钮。 然后，页面将刷新，您的 “帖子内容 “和 “页面标题 “部件将显示所选页面的预览。

添加侧边栏小部件

目录部件

1. 从部件面板中，将目录部件拖放到侧边栏容器中
2. 在标签锚点选项中，只选择了 H2 和 H3 标签。 如果设计需要，您可以选择使用更多标签。
3. 在 “容器 “字段中，您可以为 TOC 指定一个特定的容器。 这有助于防止显示其他模板标题。 在前面定义的字段中输入 “main”（主要）。
4. 样式选项卡可用于进行其他自定义设置

小贴士 有关 TOC widget 的更多信息，请访问 这篇文章。

附加部件

现在，您可以在侧边栏中添加其他小部件。 这是使用 “行动呼吁 “部件或表单收集线索的好机会。 在本教程中，之前已创建并使用了这两个 Global widget；

WordPress 小工具

WordPress 在仪表盘侧边栏使用小工具已有多年。 包括 WooCommerce 在内的一些旧插件仍在使用这些小工具来显示数据。 这些小部件仍可在模板中使用。 它们都位于 Widget 面板的最底部。 Elementor 无法编辑这些部件的样式表选项。 一般需要自定义 CSS。

响应式设置

由于 Container widget 使用 Flexbox CSS 来完成大部分 “繁重的工作”，因此您可能只需要对设计稍作修改，就可以实现响应式视图  通过使用 Container 的方向和宽度属性，您可以在平板电脑或移动设备上堆叠侧边栏，使其显示在内容下方 ；

设置显示条件

一旦对模板的设计感到满意，就可以发布更改并设置显示条件。 从下拉列表中选择 “页面”。

注：如果您的网站使用帖子，或者您希望为帖子使用相同的模板，您可以使用 “全部单数 “选项。 Singular模板是WordPress中的顶级层次模板。 页面和帖子是 Singular.  的子模板；