使用 Elementor Kits 和 Theme Builder 创建一个完整的网站

目标: 创建一个使用 Elementor 数字代理模板工具包和 Hello 主题的完整网站https://www.youtube.com/embed/w9cfA_l6oD0?feature=oembed&enablejsapi=1&origin=https%3A%2F%2Felementor.com


该网站将具有以下页面结构:

  • 家 
  • 关于我们
  • 服务
  • 社交媒体
  • 客户
  • 使用单个帖子存档
  • 联系我们
  • 页眉和页脚
  • 404页

第一步:选择一个主题 #

  1. 转到外观 > 主题
  2. 点击新增
  3. 搜索Hello Elementor
  4. 点击安装
  5. 点击激活

第二步:创建页面 #

  1. 转到页面 > 所有页面
  2. 将鼠标悬停在示例页面标题上,然后单击垃圾箱链接以删除默认 WordPress 安装附带的示例页面
  3. 点击新增
  4. 为新页面命名——在本例中为“主页”
  5. 单击使用 Elementor 编辑按钮
  6. 单击小部件面板左下角的页面设置齿轮
  7. 将页面布局更改为“Elementor Full Width”。请注意,标题不完整。您将在后面的步骤中处理此问题。
  8. 单击添加模板文件夹图标以打开模板库
  9. 在模板库的搜索框中,搜索“ Digital Agency Home ”。
  10. 单击插入以将模板加载到页面中。
  11. 单击 发布按钮。
  12. 点击“看一看”查看发布的页面。

对每个新页面重复这些步骤,确保添加关于、服务、社交媒体、客户和联系我们页面。 

提示:在 Mac 上按 CMD-E 或在 Windows 上按 CTRL-E 打开 Finder,然后键入“添加”并从搜索结果中选择“新页面”来创建新页面。这样,您就可以直接从 Elementor 的编辑器继续创建新页面,而无需返回仪表板。

注意:请注意,您尚未创建新闻页面。这是因为它不像其他页面那样是静态页面。这是一个包含动态内容的存档页面,您很快就会创建此页面。


第三步:告诉 WordPress 使用哪个页面作为主页 #

  1. 在 WordPress 仪表板中,转到设置 > 阅读并将选项“您的主页显示:”更改为“静态页面”,然后从主页下拉列表中选择您在上述步骤中创建的主页。
  2. 单击保存更改按钮。
  3. 转到页面 > 所有页面并验证您现在创建的主页旁边是否显示“首页”。

第四步:使用 Elementor 的 Theme Builder 插入标题 #

  1. 按 CMD-E (Mac) 或 CTRL-E (Windows) 打开 Finder 并搜索并选择“Theme Builder”
  2. 单击添加新按钮
  3. 从模板类型下拉列表中选择“标题”
  4. 为您的模板命名,例如站点标题
  5. 当图书馆打开标题模板时,搜索“数字代理
  6. 将鼠标悬停在数字代理标题上,然后单击插入链接。

注意:由于这是一个新站点,我们还没有创建菜单。这就是为什么您会在刚刚插入的标题模板中看到一个空的菜单小部件。接下来我们将创建我们的 WordPress 菜单。


第五步:创建菜单 #

  1. 按 CMD-E (Mac) 或 CTRL-E (Windows) 打开 Finder 并搜索并选择“菜单”以快速导航到 WordPress 菜单部分。
  2. Menu Structure下,为您的菜单输入一个名称,例如“Main Menu”
  3. 单击创建菜单按钮
  4. Add Menu Items > Pages下,在您创建的每个页面旁边放置复选标记,然后单击Add to Menu按钮。
  5. 通过向上或向下拖动它们,根据需要重新排列它们。 
  6. 通过将子页面稍微向右拖动,将任何项目作为子页面嵌套在父页面下,并且就在父页面下方。为社交媒体执行此操作,将其拖动到服务下方,稍微向右拖动。
  7. 单击保存菜单按钮。
  8. 按 CMD-E (Mac) 或 CTRL-E (Windows) 打开 Finder 并搜索并选择“主题生成器”以使用 Elementor 编辑标题
  9. 单击发布按钮。
  10. 单击 添加条件按钮
  11. 选择包含 > 整个站点作为条件,然后单击保存并关闭按钮。
  12. 请注意,菜单现在显示在标题中。

第六步:使用 Elementor 的主题生成器插入页脚 #

  1. 按 CMD-E (Mac) 或 CTRL-E (Windows) 打开 Finder 并搜索并选择“Theme Builder”
  2. 单击添加新按钮
  3. 从模板类型下拉列表中选择“页脚”
  4. 为您的模板命名,例如站点页脚
  5. 当图书馆打开页脚模板时,搜索“数字代理
  6. 将鼠标悬停在 Digital Agency 页脚上,然后单击插入链接。
  7. 请注意,虽然您会在编辑器中看到页眉,但实际上这里只有页脚是可编辑的。
  8. 单击发布按钮。
  9. 单击 添加条件按钮
  10. 选择Include > Entire Site作为条件,然后单击Save & Close按钮

第七步:创建新闻档案页面模板 #

  1. 按 CMD-E (Mac) 或 CTRL-E (Windows) 打开 Finder 并搜索并选择“Theme Builder”
  2. 单击添加新按钮
  3. 从模板类型下拉列表中选择“存档”
  4. 为您的模板命名,例如News Archive
  5. 当图书馆打开档案模板时,搜索“数字代理
  6. 将鼠标悬停在 Digital Agency 存档模板上,然后单击插入链接。
  7. 点击发布按钮
  8. 单击添加条件按钮
  9. 选择Include > All Archives作为条件,然后单击Save & Close按钮

注意:由于这是一个新站点,我们只有默认的“Hello World”帖子。您需要在名为“新闻”的类别中创建新帖子(对于本示例,根据需要使用您自己的类别),并将它们设置为使用此模板。我们接下来会这样做。


第八步:在新闻类别中创建新帖子 #

  1. 转到帖子>所有帖子
  2. 将鼠标悬停在 Hello World 标题上,然后单击垃圾箱链接以删除默认 WordPress 安装附带的 Hello World 帖子
  3. 点击新增
  4. 给它一个名字并像往常一样创建你的帖子。
  5. 如果您愿意,可以添加特色图片和摘录。
  6. 在 Category 下,单击Add New Category,并为其命名,例如News
  7. 点击发布按钮
  8. 对需要添加到新闻类别的每个帖子重复步骤 3 到 7 。
  9. 按 CMD-E (Mac) 或 CTRL-E (Windows) 打开 Finder 并搜索“新闻”(或任何您称之为类别的名称)。单击搜索结果中显示的类别以查看类别页面验证您的新帖子是否在“新闻存档”页面上很好地显示。
  10. 单击“新闻档案”页面中任何帖子的标题。
  11. 请注意,样式并不理想。这是因为您需要创建一个Single Post Template,接下来您将执行此操作。

第九步:创建单个帖子模板 #

  1. 按 CMD-E (Mac) 或 CTRL-E (Windows) 打开 Finder 并搜索并选择“Theme Builder”
  2. 单击添加新按钮
  3. 从模板类型下拉列表中选择“ Single ”
  4. 从帖子类型下拉列表中选择“帖子”
  5. 为您的模板命名,例如Single Posts
  6. 当图书馆打开单个帖子模板时,搜索“ Digital Agenc y”
  7. 将鼠标悬停在 Digital Agency 单个帖子模板上,然后单击插入链接。
  8. 点击发布按钮
  9. 单击添加条件按钮
  10. 选择Include > in Category > News(或任何您的类别名称)作为条件,然后单击Save & Close按钮
  11. 单击“查看”以使用单个帖子模板设计查看帖子。

第十步:将新闻存档页面添加到菜单 #

  1. 按 CMD-E (Mac) 或 CTRL-E (Windows) 打开 Finder 并搜索“菜单”以返回菜单进行编辑。
  2. 在“添加菜单项 > 类别”下,勾选新闻类别(或您创建的任何类别)旁边的复选标记,然后单击添加到菜单
  3. 将新菜单项拖动到您想要的任何位置。
  4. 点击保存菜单

第 11 步:创建 404 页面 #

  1. 按 CMD-E (Mac) 或 CTRL-E (Windows) 打开 Finder 并搜索并选择“Theme Builder”
  2. 单击添加新按钮
  3. 从模板类型下拉列表中选择“ Single ”
  4. 从帖子类型下拉列表中选择“ 404 页面”
  5. 为您的模板命名,例如404
  6. 图书馆打开404模板后,搜索“ Digital Agency ”
  7. 将鼠标悬停在 Digital Agency 404 模板上,然后单击插入链接
  8. 点击发布按钮
  9. 单击添加条件按钮
  10. 选择Include > 404 Page作为条件,然后单击Save & Close按钮
  11. 在浏览器中输入您网站上不存在的页面的 URL,以查看新的 404 页面。

第十二步:编辑内容以满足您的需求 #

就是这样!您已经使用 Elementor 的 Digital Agency 主题工具包创建了一个全新的网站。现在您拥有完整的网站结构,您可以编辑页面上的内容以包含您自己的所有信息。

Powered by BetterDocs

发表回复

您的电子邮箱地址不会被公开。 必填项已用*标注

Scroll to Top