如何使用Bricks Builder搭建WordPress网站

wp-how-to-create-a-wordpress-site-using-bricks-the-ultimate-guide-1024x512-1.jpgo_

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

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

Bricks Builder 概述

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

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

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

bricks-editing-interface-1.pngo_

Bricks 实时前端编辑界面

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

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

使用 WordPress Bricks 的好处

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

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

开始使用 Bricks

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

bricks-dashboard.jpgo_

下载 Bricks 主题。

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

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

bricks-license-1.pngo_

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

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

welcome-bricks-1.pngo_

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

如何启动 Bricks 页面生成器

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

launch-bricks.pngo_

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

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

了解 Bricks 界面

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

bricks-interface-label.pngo_

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

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

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

在 Bricks 中使用自定义字体

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

custom-font-bricks.pngo_

在 Bricks 中使用自定义字体。

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

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

add-font-1.pngo_

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

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

fonts-page-1.pngo_

Bricks 自定义字体页面。

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

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

现在,您的文本将使用自定义字体显示,为您的页面增添个性化气息。

use-custom-font-1.pngo_

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

在 Bricks 中使用模板

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

创建模板

要创建创建模板:

  1. 导航至仪表板中的 “Bricks“>”Templates“。
  2. 选择添加新模板或导入现有模板。
  3. 单击Add New,选择模板类型,然后选择Edit with Bricks。如下图所示:为您的 Bricks Builder 创建新模板。
    new-template.pngo_

应用模板

将模板应用到页面:

  1. 导航至要使用模板的页面。
  2. 单击创建工具栏中的Templates (文件夹)图标,打开模板部分。如下图所示:将模板应用到 Bricks 页面。apply-template.pngo_
  3. 在这里,您可以访问自己创建的模板和社区模板。
  4. 选择所需模板并预览。如下图所示:Bricks 模板商店 – 包含社区、本地和远程模板。 templates-store.pngo_
  5. 最后点击 Insert 即可应用。如下图所示:选择并使用选定的社区模板。  use-template-from-community.pngo_

远程模板

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

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

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

remote-templates.pngo_

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

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

Use-remote-templates-1.pngo_

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

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

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

在 Bricks 中使用动态数据

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

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

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

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

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

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

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

  1. 单击工具栏中的设置图标,转到 Template Settings > Conditions,然后单击 + ADD CONDITION 按钮。
  2. 选择 Post type 并指定 Posts。如下图所示:将模板设置为所有文章的默认设置。
    default-post-template-1.pngo_
  3. 确保保存并更新 WordPress 上的模板页面。然后,导航到 “文章” 页面,查看每个文章的新模板格式,无需额外样式。如下图所示:模板用于所有文章。
    post-template.pngo_

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

  1. 单击工具栏上的设置图标,转到Template Settings > POPULATE CONTENT。
  2. 选择 Single post/page 作为内容类型,然后选择一个特定的帖子作为模板内容。如果没有出现,请确保搜索一个,然后点击 APPLY PREVIEW。如下图所示:添加默认文章作为动态元素的参考。
    defualt-post-1.pngo_
  3. 现在您可以使用选定的模板文章轻松显示文章标题和内容等元素。如下图所示:使用动态数据定制页面时,会显示选定的默认文章。
    customize-dynamic-page-1.pngo_

此外,Bricks 还支持使用Advanced Custom Fields (ACF) 中的内容,从而增强了您创建详细的定制页面的能力。

使用 Bricks 处理表单提交

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

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

form-submissions-bricks.pngo_

使用 Bricks 处理表单提交。

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

收集表单提交

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

form-element.pngo_

在 Bricks 页面添加表单元素。

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

save-submission-action.pngo_

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

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

form-name-1.pngo_

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

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

bricks-form-submission-page.pngo_

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

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

reset-delete-database-table.pngo_

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

在 Bricks 中使用 WooCommerce

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

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

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

product-elements.pngo_

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

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

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

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

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

bricks-wocommerce.pngo_

将 WooCommerce 与 Bricks Builder 结合使用。

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

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

Bricks 中的查询循环

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

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

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

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

query-loops-1.pngo_

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

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

Bricks 定价

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

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

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

biricks-pricing-1.pngo_

Bricks Builder 的定价结构。

Bricks 值得一试吗?

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

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

admin-bar-page-builder-statistics-1.pngo_

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

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

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

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

小结

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

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

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

文章网址:https://www.wpbull.com/jiqiao/2538.html