如何在Weebly中选择页面和部分布局
Weebly建站提供多种页面布局供您选择,有趣的是您可以为网站上的不同页面选择不同的页面布局。 此外,您还可以为您的团队或联系页面选择现成的部分和标题模板,而不是从头开始构建它。 对于旧的非响应式主题和最新的响应式主题,可用选项完全不同。 在本文中,我们将讨论如何在 Weebly 中选择页面布局以及自定义页眉和部分布局。
推荐:如何修复Windows上System Call Failed错误
Weebly 中的布局选项
在这里,我们详细讨论以下三个主题:
- 您可以创建的页面类型
- 可用的页面布局类型
- 选择页面模板
- 选择和更改页面布局
- 添加您自己的页面布局
由于一切都取决于您使用的主题,我们建议您阅读有关在 Weebly 中使用响应式主题的文章以更好地理解。
Weebly 中的页面类型
您可以通过导航到编辑器中的“页面”选项卡在 Weebly 中创建一个新页面。 只需单击 + 图标并为您的站点选择以下页面类型之一。
- 标准页面
- 博客页面
- 类别页面
- 产品页面
- 外部页面
- 不可点击的菜单

如何在 Weebly 中选择页面布局?
Weebly 根据标题部分决定页面的布局。 选择页面类型后,您有以下两个选项来选择可用于您的主题的默认页面布局之一。
- 在“页面”选项卡下选择“标题类型”。
- 单击“构建”选项卡下页面内容区域的“添加部分”按钮或使用“部分”元素。
有哪些可用的页面布局?
根据您使用的主题,您可以在“页面”选项卡下找到不同的布局以满足您的要求。 大多数响应式主题提供页眉、无页眉和启动页面布局,而非响应式主题提供各种不同的布局。
1.登陆页面(非响应主题)
登陆页面由三个基本元素组成——文本、图像和按钮。 文本区域是添加内容的地方,基本上是您网站的目的以及您网站的有吸引力的标题或标题。 添加有关您网站的图像或幻灯片可以让访问者快速提取您的网站,您只需拖放元素即可在图像区域中进行操作。 最后一个元素是一个按钮,用于添加对诸如点击呼叫服务等操作的呼叫,或者您可以使用它连接到您的博客或论坛。 登陆页面布局更适合您网站的主页。

注意 在非响应主题上,您可以在标题中添加滑块作为 Weebly Pro 计划的一部分。 但是,免费用户可以通过修改源 HTML/CSS 添加标题幻灯片,了解更多关于如何在免费 Weebly 站点中添加标题幻灯片的信息。
推荐:如何修复Windows 10/11中邮件应用程序0x800713f错误
2.非响应主题的高标题页(响应主题的标题页)
此页面布局由一个扩展到您网站的整个宽度的图像组成,内容区域将显示在标题图像下方。 虽然没有地方可以在非响应主题的标题区域中添加任何文本,但您可以从侧边栏中拖放元素以响应主题。

3. 短页眉(非响应式主题)
这与 Tall Header Page 相同,不同之处在于图像高度更小。 在这种情况下,您也不能在非响应主题的标题区域中添加文本,而可以在响应主题的标题部分中拖动元素。

4. 无标题页(响应式和非响应式主题均可用)
此页面布局既没有图像也没有文本,并为您的内容提供了更多空间。

5. 启动页面(仅在选定主题中可用)
启动页面是吸引访问者注意力的理想选择。 启动页面的内容集中在页面的中心,可用于新闻订阅、欢迎页面、感谢页面或介绍页面。

6. 标题页(适用于选定的非响应主题)
标题页在导航栏下方有一个标题元素,您可以在其中输入标题和页面的小描述。

如何选择或更改页面布局或标题类型?
当您在“页面”选项卡下创建新页面时,您可以选择为该特定页面选择所需的布局(标题类型)。 早些时候,Weebly 提供了一个视觉选项来选择布局,如下所示。

但是,它已更改,现在您需要选择页面并单击“标题类型”下拉菜单以选择所需的页面标题布局。 稍后您可以随时返回并在此处更改页面布局。 正如您在下面的屏幕截图中看到的,该主题仅提供两种页眉类型——页眉和无页眉。

如果您使用的是非响应式主题,您还可以选择通过单击标题图像中的设置按钮来立即更改页面布局,如下所示。 如果您没有选择标题页或使用响应式主题,那么除了如上所述更改“页面”选项卡下的页面布局之外别无选择。

当您将标题布局与 Weebly 的响应式主题之一一起使用时,事情会容易得多。 您可以单击标题并选择“替换标题布局”按钮。 这将提示您删除当前布局,然后单击“删除”按钮继续进行。 您将看到所有可用标题布局的列表,然后选择您喜欢的。 Weebly 编辑器将立即显示预览,检查后您可以保存布局以应用于标题类型为“标题”的所有页面。 您还可以编辑背景以自定义标题外观并添加新元素。

如何添加您的自定义页面布局?
可以将您的自定义页面布局添加到您的 Weebly 网站。 这可以通过在“设计”选项卡下编辑源 HTML/CSS 选项来完成。 单击“标题类型”旁边的“+”图标,然后从下拉列表中选择“新标题类型”选项。 如果您已经设计了布局文件,那么只需通过选择“上传标题类型…”选项来上传它。

新的页眉类型将被创建,名称为“untitled.html”,并且正文、页眉和页脚的 HTML 代码最少,就像空白模板一样。 您可以重命名标题类型,添加所需的代码并在代码编辑器下方预览您的布局。 最好的选择是从 header 或 no-header.html 模板中复制内容并粘贴到新创建的模板中。 现在,您可以轻松更改要创建自定义模板的参数,而不是从头开始创建。
保存您的更改,新创建的页面布局将在“页面”选项卡下的页面布局选择期间显示。 例如,在新页面创建过程中将显示一个名为“No Button Landing Page”的新布局,如下图所示在旧的 Weebly 编辑器中。

目前,Weebly 编辑器将显示如下自定义模板(侧边栏是我们为在 Weebly 页面中添加自定义侧边栏而创建的自定义模板)。

请注意,如果您对现有页面布局的源代码进行了任何更改,则需要在所有页面布局中再次进行相同的更改。 例如,假设您选择了标题页并将其 HTML 源代码编辑为 隐藏免费页脚消息. 稍后将页面布局更改为无页眉页将再次显示免费页脚消息,您还需要编辑无页眉页的 HTML 以禁用页脚消息。
警告: 可以为标准和博客页面选择所有标题类型和页面模板。 个别博客文章无法选择标题类型或部分模板。 Weebly 高级计划有额外的页脚部分,用于插入部分布局。
默认部分模板
除了“页面”选项卡下的页面布局,Weebly 还提供以下页面模板。 您可以通过单击“添加部分”按钮或添加“部分”元素从页面的内容区域中选择布局。
- 画廊
- 接触
- 菜单
- 精选
- 团队
早些时候,Weebly 提供了不同类别下的全页部分布局,您可以选择您喜欢的。

但是,现在这已经完全改变为从“Section”元素中选择布局。 拖放内容区域中的“Section”元素,然后单击“Add Section”按钮。 这将显示可用模板列表供您选择并选择要插入的模板。 选择模板后,您将看到预览,并可以选择保存模板或取消模板并选择不同的布局。

注意 部分模板无需构建您自己的模板即可节省大量时间。 默认模板可以在许多页面上轻松重用,从而提高可重用性。