如何使用Bricks Builder搭建WordPress网站

2024年 6月 25日 93.1k 0

如何使用Bricks Builder搭建WordPress网站-1

即使你是初学者,创建 WordPress 网站也并非难事。只要有正确的工具和指导,你就能快速创建并运行一个美观、功能齐全的网站。

本指南将向你展示如何使用 Bricks Builder 构建 WordPress 网站,这是一款功能强大的主题生成器,无需编写任何代码即可提供广泛的自定义功能。

Bricks Builder 概述

Bricks Builder 是一款可视化网站生成器,允许用户直接在 WordPress 环境中创建自定义的响应式网站。它与 WordPress 无缝集成,旨在增强用户体验,使初学者和有经验的开发人员都能通过拖放界面可视化地构建网站。

与 Elementor 和其他建站工具不同,Bricks 是一个主题,而不是插件。它几乎集成了所有功能,而其他建站工具需要使用额外的插件。

它具有实时前端编辑体验,这意味着你可以在调整设计元素和布局时实时看到自己的变化。

如何使用Bricks Builder搭建WordPress网站-2

Bricks 实时前端编辑界面

它提供了一个全面的工具包,包括预设计模板、大量设计元素和高级定制选项,可用于更详细的网站开发。

此外,Bricks Builder 还支持动态数据,允许用户轻松建立数据驱动型网站,并在模板中动态整合内容。

使用 WordPress Bricks 的好处

Bricks Builder 以其性能和灵活性脱颖而出。与其他生成器相比,它是一种更新但强大的替代方案,可提供以下功能:

  • 速度 – Bricks 的速度快得令人难以置信,而且非常轻便。
  • 易用性 – 界面直观,初学者和专业人士都能轻松使用。
  • 自定义 – Bricks 可通过自定义 CSS 和 JavaScript 提供广泛的自定义功能,并与各种 WordPress 插件兼容。

开始使用 Bricks

Bricks 是一款需要付费订阅的高级主题。要使用它,您需要购买其中一个计划。付款后,您可以在仪表板上下载一个 zip 文件,该文件可以上传到您的 WordPress 网站,同时还有一个许可证密钥,可以在您的 WordPress 安装中激活 Bricks。

如何使用Bricks Builder搭建WordPress网站-3

下载 Bricks 主题。

安装 Bricks 主题后,WordPress 面板上会出现一个新的 Bricks 菜单项。

要激活许可证,请进入仪表板,点击 Activate license,输入 Bricks 账户中的许可证密钥,然后点击 Activate。这将启用 Bricks 主题的全部功能。

如何使用Bricks Builder搭建WordPress网站-4

配置 Bricks 主题许可证以激活主题。

如果您想在购买前试用 Bricks,可以在 try.bricksbuilder.io 上建立试用账户。该平台提供了一个安装了 Bricks 的预配置 WordPress 网站,让您可以免费探索其特性和功能。

如何使用Bricks Builder搭建WordPress网站-5

欢迎来到 Bricks WordPress 仪表板界面。

如何启动 Bricks 页面生成器

要使用砖块页面生成器设计一个新页面,请导航至页面 > 新页面或单击现有页面。点击 “Edit with Bricks“,即可启动 Bricks 编辑器。

如何使用Bricks Builder搭建WordPress网站-6

单击 “Edit with Bricks” 启动 Bricks 页面生成器。

现在,你可以从 Elements panel(元素面板)拖动元素来设计页面。

了解 Bricks 界面

Bricks 界面与 WordPress 环境无缝集成。

如何使用Bricks Builder搭建WordPress网站-7

给 Bricks 界面贴上标签,了解每个部分的含义。

以下是其核心界面的细分:

  • Builder workspace(生成器工作区)– Bricks 的主要区域是生成器工作区,它是网站的可视化呈现。在这里,你可以直接与页面互动,拖动元素到位、调整大小和重新排列组件。
  • Toolbar(工具栏)– 在工作区的顶部,工具栏可以快速访问基本功能,如保存工作、预览网站、访问设置菜单和响应控件。
  • Elements panel(元素面板)– 在界面左侧,元素面板是你的工具箱。它包含了你可以在网站上使用的所有构件,如文本框、图片、按钮等。你可以将这些元素直接从面板拖到页面上。
  • Structure view(结构视图)– 结构视图通常位于元素面板旁边或作为元素面板内的一个切换项,它提供了页面的层次轮廓。该视图对于了解页面元素的布局和深度特别有用,可以让你轻松选择和编辑嵌套项。

在 Bricks 中使用自定义字体

Bricks 提供了令人兴奋的功能,允许您将自定义字体上传到 WordPress 网站。为此,请导航至 Bricks > Custom Fonts。

如何使用Bricks Builder搭建WordPress网站-8

在 Bricks 中使用自定义字体。

本部分允许您上传各种格式的字体文件,包括 WOFF2、WOFF 或 TTF。您还可以上传不同的字体变体,例如细体、半粗体、正常字体和粗体。

要添加自定义字体,请单击 Add New。然后,在 Add title 字段中输入字体名称。接着,选择要上传的字体变体,选择字体样式,然后单击 Edit。

如何使用Bricks Builder搭建WordPress网站-9

添加字体详细信息并上传不同的字体变体。

将出现一个下拉菜单,提供用于上传字体文件的字段。选择字体文件并上传。您可以通过单击 Add a font variant 来重复此过程,以获得尽可能多的变体。最后,单击 “Publish“。

如何使用Bricks Builder搭建WordPress网站-10

Bricks 自定义字体页面。

要将新上传的自定义字体应用到 WordPress 网站上的文本,请按照以下步骤操作:

  • 转到要使用新字体的页面,然后单击 “Edit with Bricks“。
  • 单击要更改的文本。
  • 所选文本的相关信息将显示在左侧面板中。单击样式。
  • 展开 “TYPOGRAPHY” 下拉菜单,查看更多选项。
  • 在 Font family 字段中,浏览可用字体,包括 Google 字体和自定义上传字体。
  • 从列表中选择自定义字体,立即更新文本。
  • 现在,您的文本将使用自定义字体显示,为您的页面增添个性化气息。

    如何使用Bricks Builder搭建WordPress网站-11

    在 Bricks 界面中使用 Bricks 自定义字体。

    在 Bricks 中使用模板

    模板是 Bricks 中的一项基本功能,有多种类型,包括页眉、页脚和博客文章布局。这些模板的范围从单一部分(如网站页眉或英雄部分)到全页面内容(如博客文章布局、存档页面、搜索结果和错误页面)。

    创建模板

    要创建创建模板:

  • 导航至仪表板中的 “Bricks“>”Templates“。
  • 选择添加新模板或导入现有模板。
  • 单击Add New,选择模板类型,然后选择Edit with Bricks。如下图所示:为您的 Bricks Builder 创建新模板。
    如何使用Bricks Builder搭建WordPress网站-12
     
  • 应用模板

    将模板应用到页面:

  • 导航至要使用模板的页面。
  • 单击创建工具栏中的Templates (文件夹)图标,打开模板部分。如下图所示:将模板应用到 Bricks 页面。

    如何使用Bricks Builder搭建WordPress网站-13
     

  • 在这里,您可以访问自己创建的模板和社区模板。
  • 选择所需模板并预览。如下图所示:Bricks 模板商店 – 包含社区、本地和远程模板。 如何使用Bricks Builder搭建WordPress网站-14
     
  • 最后点击 Insert 即可应用。如下图所示:选择并使用选定的社区模板。  如何使用Bricks Builder搭建WordPress网站-15
  • 远程模板

    Bricks 的模板具有其他建站工具所不具备的独特功能。远程模板是指你想在自己的网站中使用其他网站创建和使用的模板。

    要允许其他网站使用你的 Bricks 模板,请进入 WordPress 面板中的 Bricks > Settings > Templates,然后启用 My Templates Access 复选框。

    使用 Whitelist URLs 和 Password Protection,限制知道正确密码的人员访问模板。

    如何使用Bricks Builder搭建WordPress网站-16

    允许其他网站使用你的 Bricks 模板作为远程模板。

    要使用其他网站的模板,请进入 Bricks > Settings > Templates,滚动到 Remote templates 部分,然后在 Remote template URL 字段中粘贴您要检索模板的 Bricks 网站的 URL。

    如何使用Bricks Builder搭建WordPress网站-17

    使用其他网站的远程模板。

    如果设置了密码,必须确保将密码写在远程模板 Password 下。然后单击 Save Settings。

    要使用这些模板,请导航到页面生成器,然后像以前一样单击 Templates;将出现一个新的 Remote templates 部分,其中包含来自远程站点的所有模板。

    在 Bricks 中使用动态数据

    Bricks 允许您在模板和页面中加入动态数据,使其成为构建动态网站的多功能工具。

    您可以加入各种动态元素,如特色图片、文章标题、发布日期、作者姓名、类别、标签、网站标题和所有自定义字段。

    在 Bricks 中创建特定模板(如博客文章模板或自定义文章类型模板,如单一房产列表)时,动态数据尤其有用。

    要添加动态数据,请在画布上开始键入 { 或单击设置面板中大多数字段旁边的 “螺栓” 图标。

    下面介绍如何使用 Bricks 动态数据创建单个文章模板:

  • 导航至 Bricks > Template,创建一个新模板。为模板指定标题,将其类型设为Single,然后Publish或Save as draft。
  • 单击 “Edit with Bricks“,开始配置模板以使用动态数据。
  • 根据需要设计页面样式。通常情况下,你需要将文章标题、特色图片、发布日期、作者姓名和文章内容等元素全部设置为动态显示。
  • 在空白页面上,通过在 Heading 元素中插入 {post_title} 来添加标题和内容,在 Basic text 元素中插入 {post_content} 来添加标题和内容。如下图所示:在 Bricks 中使用动态数据

    如何使用Bricks Builder搭建WordPress网站-18 

  • 要将此模板设置为所有帖子的默认模板,请:

  • 单击工具栏中的设置图标,转到 Template Settings > Conditions,然后单击 + ADD CONDITION 按钮。
  • 选择 Post type 并指定 Posts。如下图所示:将模板设置为所有文章的默认设置。
     

    如何使用Bricks Builder搭建WordPress网站-19
     

  • 确保保存并更新 WordPress 上的模板页面。然后,导航到 “文章” 页面,查看每个文章的新模板格式,无需额外样式。如下图所示:模板用于所有文章。
     

    如何使用Bricks Builder搭建WordPress网站-20 

  • 为简化该模板的样式,请添加一个默认文章作为动态元素的参考:

  • 单击工具栏上的设置图标,转到Template Settings > POPULATE CONTENT。
  • 选择 Single post/page 作为内容类型,然后选择一个特定的帖子作为模板内容。如果没有出现,请确保搜索一个,然后点击 APPLY PREVIEW。如下图所示:添加默认文章作为动态元素的参考。
     

    如何使用Bricks Builder搭建WordPress网站-21 

  • 现在您可以使用选定的模板文章轻松显示文章标题和内容等元素。如下图所示:使用动态数据定制页面时,会显示选定的默认文章。
    如何使用Bricks Builder搭建WordPress网站-22 
  • 此外,Bricks 还支持使用Advanced Custom Fields (ACF) 中的内容,从而增强了您创建详细的定制页面的能力。

    使用 Bricks 处理表单提交

    Bricks 1.9.2 引入了表单提交功能,允许您捕获表单提交。这允许您在数据库中创建一个名为 bricks_form_submissions 的自定义表(加上您的 WP 数据库前缀)。

    您可以在 Bricks > Settings > General > Miscellaneous 下启用新的 Save form submissions in database(在数据库中保存表单提交)设置。

    如何使用Bricks Builder搭建WordPress网站-23

    使用 Bricks 处理表单提交。

    然后点击 Save Settings。表单提交选项卡将出现(Bricks > Form Submissions),其中包含各种表单提交表。

    收集表单提交

    在 Bricks 中收集表单提交不需要额外的插件。你只需使用 Form 元素创建一个表单,并正确设置字段。

    如何使用Bricks Builder搭建WordPress网站-24

    在 Bricks 页面添加表单元素。

    在设置面板中单击 “Actions“,然后选择 “Save Submission” 操作。

    如何使用Bricks Builder搭建WordPress网站-25

    为 Bricks Form 元素设置保存提交操作。

    接下来,单击 Save Submission 设置,为表单命名。该名称将用于访问表单中的数据。

    如何使用Bricks Builder搭建WordPress网站-26

    为表单提交页面设置描述性表单名称。

    现在,当你保存并打开页面时。您可以完成表单,然后回到 Bricks > Form Submission 页面查看表单数据。

    如何使用Bricks Builder搭建WordPress网站-27

    Bricks Form Submission 页面可访问所有表单及其数据。

    您还可以下载各种表单提交的 CSV 文件。在您配置此功能的 Bricks > Settings > General > Miscellaneous 部分,您可以重置或删除数据库表。

    如何使用Bricks Builder搭建WordPress网站-28

    重置或删除表单数据库表。

    在 Bricks 中使用 WooCommerce

    WooCommerce 是一款免费插件,可增强 WordPress 网站的电子商务功能。它是全球公认的建立和管理网上商店的领先开源解决方案。

    Bricks 可与 WooCommerce 无缝集成,提供一个强大的主题生成器,用于创建从商店主页到单个产品页面、产品档案、购物车、结账和账户页面的整个商店。

    Bricks 为 WooCommerce 提供专门的元素和模板,让您可以设计店铺布局。

    如何使用Bricks Builder搭建WordPress网站-29

    用于 WooCommerce 网站的 Bricks 产品元素。

    要开始使用 Bricks 中的 WooCommerce 生成器,请安装并激活 WooCommerce 插件。激活后,您可以使用 Bricks 可视化地设计和定制各种 WooCommerce 模板,就像管理单个文章布局一样。

    创建一个简单的商店页面:

    1. 导航至页面并选择 Shop 页面。

    2. 单击 “Edit with Bricks“。元素面板包含各种产品元素。通过这些元素,您可以显示产品、标题、描述、价格等,从而方便创建动态模板。

    如何使用Bricks Builder搭建WordPress网站-30

    将 WooCommerce 与 Bricks Builder 结合使用。

    使用这些元素,你可以根据需要安排和设计页面样式。

    与创建单个文章模板一样,您也可以创建单个产品模板,并设置其适用于所有产品的条件。

    Bricks 中的查询循环

    查询循环创建器可让您根据查询参数查询数据库,并在循环中显示您希望显示的查询结果。它可用于容器、折叠式和滑块等布局元素。

    你可以查询文章类型、分类术语和用户。例如,你可以查询博客作者、社区成员和团队成员的列表。

    要使用查询循环,请在画布上添加一个容器元素。启用 “Use Query Loop” 设置,将容器变成循环项。

    启用 “Use Query Loop” 设置后,你会看到一个查询控件(无穷大图标)。单击该图标打开查询控件并设置查询参数,以便从数据库中检索内容。

    如何使用Bricks Builder搭建WordPress网站-31

    在用于文章的 Bricks 容器元素中使用查询循环。

    容器现在是你的重复项。只要有查询结果,容器内的所有元素就会重复出现。本教学指南将解释其工作原理。

    Bricks 定价

    Bricks 没有免费计划。他们只创建一个账户,让你试用他们的主题,但除非你付费,否则不能在你的网站上使用。

    Bricks 提供基本计划和终身计划。终身计划提供无限权限,但你可以决定自己想要什么。

    他们提供的便利是,在该平台上几乎可以提供你所需要的一切,有助于实现无缝、高效的工作流程,对于那些寻求强大、多功能网页设计解决方案的人来说,这是一项值得投资的项目。

    如何使用Bricks Builder搭建WordPress网站-32

    Bricks Builder 的定价结构。

    Bricks 值得一试吗?

    与 Elementor 不同,Bricks 不提供免费版本,这是一个潜在的缺点。不过,Bricks Builder 凭借其简洁性和强大功能的完美结合,在业内备受关注。

    2024 年,The Admin Bar 对 1,144 名 WordPress 专业人士进行了一项调查,结果显示 “Bricks 是唯一一款使用人数比去年有所增加的页面生成器,占总数的 32%”,具体数据如下表所示:

    如何使用Bricks Builder搭建WordPress网站-33

    显示WordPress专业人员最常用的页面生成器的统计数据。

    这表明,尽管页面生成器仍是市场上一个相对较新的产品,但有多少 WordPress 专业人士正在使用它。

    Bricks 作为一个完整的主题运行。这意味着你不能将其他主题的功能与它的页面生成器混搭使用。此外,就速度而言,作为一款专为高性能网站设计的较新页面生成器,Bricks Builder 被认为比 Elementor Pro 更快。

    仅使用专为速度而设计的页面生成器并不能保证最佳性能。无论您要创建什么类型的网站,您的托管服务提供商在网站性能方面都起着至关重要的作用。

    小结

    本文探讨了 Bricks 生成器、其工作原理、部分功能以及使用方法。我们研究了它基于主题的综合方法、定制功能和性能优势。

    虽然 Bricks 没有像 Elementor 那样的免费版本,但它的集成设计和频繁更新可以为优化网站性能提供卓越的效率。

    你对如何使用 WordPress Bricks 主题生成器有任何疑问吗?请在下面的评论区告诉我们!

    相关文章

    JavaScript2024新功能:Object.groupBy、正则表达式v标志
    PHP trim 函数对多字节字符的使用和限制
    新函数 json_validate() 、randomizer 类扩展…20 个PHP 8.3 新特性全面解析
    使用HTMX为WordPress增效:如何在不使用复杂框架的情况下增强平台功能
    为React 19做准备:WordPress 6.6用户指南
    如何删除WordPress中的所有评论

    发布评论