跳到主要内容

Weebly - 主题与布局

  • 主题与布局
  • 添加内容
  • 设置与发布

随着我们升级客户门户至优化且易用的设计，您可能会发现某些托管产品和/或服务不再提供。由于此次更新，HostGator 不再为新用户提供 Weebly 服务。如果您当前已有该服务，您的产品或服务将不会有任何变化。

Weebly 主题与内容布局指南​

使用 HostGator Weebly 拖放构建器设计出色网站的第一步是选择一个与您的内容相匹配且体现整体“外观和感觉”的主题。通过对每个模板和页面布局的多种配置选项，您可以使用 Weebly 构建器创建独特且非凡的网站。 本文将介绍有关 HostGator Weebly 拖放构建器主题和页面布局的以下关键步骤。

  • 搜索与筛选主题 ⤵
  • 预览主题 ⤵
  • 更换为其他主题 ⤵
  • 自定义主题 ⤵
  • 编辑 HTML/CSS ⤵
  • Weebly 内容布局选项 ⤵
  • 页面页眉设置 ⤵
  • 编辑区块 ⤵
  • 区块布局模板 ⤵

Weebly 拖放主题​

在 Weebly 拖放构建器中，您可以从超过一百个 Weebly 主题中选择。它们包含多种颜色选择、设计和分类。所有主题均支持进一步自定义，并且根据主题不同，您可以选择适合网站需求的色彩方案、样式和布局。 如果您在 Weebly 中设置新网站，启动编辑器前会提示您选择主题。如果您已添加主题，请在顶部菜单中选择 主题 标签，然后点击左侧菜单中的 更换主题。 HostGator Weebly 顶部菜单栏，已选择主题

搜索与筛选主题​

为缩小选择范围，您可以尝试对主题进行筛选和排序。主题可通过 主题库 页面顶部列出的分类选项进行排序。目前，主题可按商务、作品集、个人、活动、博客、其他和在线商店（仅商务 Weebly 计划支持商店功能）分类排序。 HostGator Weebly 主题分类

预览主题​

在 主题库 中浏览主题时，您可以将鼠标悬停在主题缩略图上并选择 预览。进入预览模式后，点击不同页面以更好地了解该主题下图片和内容的展示效果。 HostGator Weebly 主题缩略图选项

  • 选择主题 – 如果喜欢该主题，可以点击预览屏幕顶部工具栏中的 选择；否则点击 取消，继续浏览其他主题。

更换为其他主题​

设计过程中如果想更换网站主题，您可以随时更改。 更换主题步骤：

  1. 在 Weebly 控制面板中，选择 主题 标签。
  2. 点击左侧菜单中的 更换主题 按钮。
  3. 浏览各种主题并预览，查看网站内容在该主题下的展示效果。
  4. 点击 选择 以应用该主题到您的 Weebly 网站。

若需恢复之前使用过的主题，您可以使用 主题库 页面顶部的 最近使用 按钮。您曾选择的所有主题都会列在该部分。 HostGator Weebly 最近使用的主题

自定义主题​

选定喜欢的主题后，您可以利用各种主题选项对主题进行微调。有些主题允许选择不同的配色方案。根据所选配色方案，可能会更改主题中相关元素的主色和强调色。这些元素可能包括按钮、菜单、超链接、背景色等。部分主题则提供 浅色 和 深色 配色方案供网站应用。 HostGator Weebly 主题缩略图选项 Weebly 主题选项 通过 更改字体 按钮，您可以修改主题字体的多个组成部分。虽然这些更改是可选的，但它们对网站最终外观影响显著。您可以调整以下项目的字体系列、样式、颜色、大小、粗细、大写设置、字间距和行高：

  • 标题
  • 菜单
  • 电话号码
  • 主标题与副标题
  • 段落标题与正文
  • 链接
  • 按钮
  • 引用块
  • 图片说明
  • 画廊说明
  • 幻灯片说明
  • 产品（商务计划专用） HostGator Weebly 主题缩略图选项

编辑 HTML/CSS​

为了让主题更具个性化，您可以编辑模板的 HTML 和 CSS。

  1. 在 主题 标签中，点击左下角的 编辑 HTML/CSS 按钮，在代码编辑器中打开。
  2. 默认情况下，代码编辑器会加载主 CSS 页面。完成修改后，点击 保存。
  3. 输入主题名称。
  4. 完成后，您可以根据需要在更新后的主题和其他主题之间切换。 HostGator Weebly 主题编辑 HTML 和 CSS 界面

Weebly 内容布局选项​

除了选择主题外，Weebly 还提供多种页眉类型和区块布局供选择。这些选项和布局让您可以自定义网站的外观和感觉。

页面页眉设置​

页面页眉通常作为“行动号召”，告知访客网站的目的并引导其采取行动，如“立即致电”、“立即订购”、“查看更多”等。 创建新页面或在 页面 标签中点击页面名称时，左侧菜单会出现一个区域供您选择该页面的 页眉类型。页眉类型下方有一个下拉菜单供选择设置。选项包括页眉、无页眉和全屏页眉。

  • 页眉 ：页面顶部的全宽区块，提供多种页眉模板
  • 无页眉 ：移除顶部页眉区块
  • 全屏页眉 ：顶部区块填满整个页面视图 HostGator Weebly 页面页眉选项截图

选择页眉类型后，页面布局将更新，您可以编辑页面内容。 有关 Weebly 页眉的更具体信息，请参阅文章《在 Weebly 中使用布局/页眉》。

编辑区块​

编辑页面内容时，内容会被划分为多个区块。例如，页眉、页脚和正文内容分别位于不同区块。有时内容会分布在多个区块中，以支持更多设计选项，并可上下移动各区块。 点击区块以选中并显示管理按钮。根据区块不同，选项包括 编辑背景 、移动 和 删除。

  1. 选择 编辑背景 按钮，可将区块背景更改为图片、颜色、渐变或视频（视频需升级计划）。
  2. 默认情况下，编辑背景 显示当前背景选项的设置。点击背景选项标题（图片、颜色、渐变或视频）可折叠该设置并显示其他背景选项。 编辑背景

调整区块高度：

  1. 点击选中该区块。
  2. 将鼠标悬停在区块底部边界线上，光标会变为上下箭头。
  3. 按住鼠标拖动该线向上或向下调整区块高度。

区块布局模板​

Weebly 为特定区块提供布局模板。编辑页眉区块时，会出现 替换页眉布局 按钮。添加新区块时，会出现选择区块布局的选项。替换布局时，内容会被删除，需先选择新模板。 添加新区块或编辑空白区块时，您可以从不同模板类别中选择。类别包括画廊、联系、菜单、特色和团队。点击类别展开显示可用模板，再点击模板选择并应用到该区块。若想浏览其他类别，点击类别标题可折叠模板列表，方便选择其他类别。