分享笔记:

Bricks Builder 的基础设置和介绍

又开始一个新系列,随意更新...

我这里就不详细介绍Bricks builder是什么了,就简单说下,因为之前的笔记有写过。你还可以看看砖块构建器和Elementor有什么区别

首先我们得很清楚的知道,Bricks不是插件,是一款自带页面构建器的主题,它是付费的(你要是去淘宝或者某些GPL网站下当我没说),不像Elementor有提供一个免费版使用。需要去到Bricks官方网站购买,之后进入个人中心就可以下载了。

它们是有提供一个免费试用Bricks主题,你购买前可以先上手试试。

Bricks用户后台
Bricks 用户后台

安装Bricks Builder

在Bricks的用户后台我们可以看到它提供两个文件下载,主题和子主题,我是建议你们两个都下载过来,然后启用子主题,防止你们可能在主题上的文件编辑里面加了什么代码更新后丢失的情况。

Bricks启用主题
Bricks 启用主题

至于安装方法就和普通的主题一样,就是自己上传而已。
外观 > 主题 > 上面的添加新主题 > 上传主题

上传主题

安装主题之后我们需要去激活它,左侧的Bricks > 许可证 license 输入自己的激活码就可以了,这个码在自己的Bricks用户中心能找到。不输入License的话,你是使用不了Bricks自带的模板和无法更新主题的。

bricks许可证激活

Bricks Builder 设置

Bricks是有提供中文的,我为了方便展示会使用中文,不过我是建议大家用英文,因为有些翻译它不准确,而且使用Bricks我们其实是会经常用到代码的,用英文对代码也有好处,不然根本看不懂。

1. 常规设置

大多数设置下面都带一小段介绍,所以其实不难理解,当然前提是翻译没毛病。

1.1. 文章类型

这个设置是在网站上哪些内容开启Bricks编辑。比如你关闭页面,那么你网站的页面就无法使用Bricks来编辑,而是使用古腾堡Gutenberg。这里默认出现的是文章和页面,这会随着你添加自定义页面(Custom post type)或插件添加,如果你添加WooCommerce,那么这里就会多个产品选项。

大多数情况下只需要开启页面,其他的内容都是套的模板。

1.2. 古腾堡数据

这个设置的介绍就很好的解释了,将古腾堡和Bricks的数据互相加载。你用Bricks做的东西切换回古腾堡时,还会在,反过来古腾堡换到Bricks也在。

1.3. SVG上传

“SVG文件以XML格式描述图像,因此可能包含恶意代码。启用这个功能后,Bricks将尝试在上传过程中对SVG文件进行消毒。”

翻译:容许网站什么用户可以上传SVG矢量图片,上传的过程中进行查杀病毒。我主要是通过SVG来上传一些装饰图和LOGO,它是一堆数学格式,所以无效放大缩小。WordPress本身是不能上传SVG文件的,你需要安装第三方插件像SVG SUPPORT

Bricks常规设置
Bricks 常规设置界面

1.4. 杂项 Miscellaneous

1.4.1 Disable global class manager

不建议关闭。Bricks的强大功能之一就是CSS管理器,而Global class manager可以帮助我们管理这些CSS:

  • 选择一个或多个类别过滤。
  • 选择一个或多个类进行编辑。
  • 按 CMD/CTRL 或 SHIFT 选择并编辑多个类别或类别。
  • 向上/向下拖动任何类别或类别即可对其进行排序。
  • 通过将类拖入特定类别或拖入“取消分类”来取消分类,对类进行分类。
GLOBAL CLASS MANAGER
全局 CSS 管理器
1.4.2 禁用砖块打开图形元标记 Graph meta tags

设置页面当分享到社交媒体时,像Facebook,的显示样式。关不关随便你,因为SEO插件也是带这个的。

bricks open graph
Graph meta tags 代码
图形元标记
页面图形元标记设置
1.4.3 Disable Bricks SEO meta tags

这里的中文翻译应该是错的,显示 “删除Bricks数据” 而英文是 Disable Bricks SEO meta tags。砖块是自带一个小SEO设置功能的,可以给页面设置标题,元描述,图片,关键词和Robots标签。

Disable Bricks SEO meta tags
中文界面
Disable Bricks SEO meta tags
英文界面
Bricks自带SEO设置
Bricks自带SEO设置
1.4.4 特色图片尺寸

开启之后图片尺寸会出现Bricks自带的尺寸。WordPress本身是自带3种尺寸的,在后台媒体可以看到,你要是装了WooCommerce,还会再生成几个尺寸。

Bricks额外图片尺寸
Bricks额外图片尺寸
1.4.5 禁用“跳过链接” Skip links

关闭直接跳到页面主要内容main。

1.4.6 平滑滚动 (CSS)

点击跳转锚链接时有个平滑的过程,而不是直接跳转到指定区域。点这里看看效果

1.4.7 启用"删除Bricks数据"按钮

开启后,网站上面的工具栏会出现一个“删除Bricks数据”,点击后当前页面全部用Bricks做的东西都会删除。

1.4.8 查询搜索结果中的砖块数据

让用Bricks创建的内容可以被WordPress的搜索功能找到,尤其你要打算在网站上加搜索功能的话。

1.4.9 Save form submissions in database

把用Bricks发的表单内容保存到数据库上。

1.5 Query filters

砖块构建器在1.9.6版本新添加的过滤功能。

1.6 自定义断点

给网站添加更多不同的设备断点。

Bricks添加自定义断点
Bricks添加自定义断点

1.7 转换

这个功能主要是给一些老网站的,把之前的一些元素转换成最新设置。

1.8 Custom authentication pages

自定义登录,注册,忘记密码和重设密码页面。没错,这些页面可以自定义。

Bricks添加自定义断点

2. 创作者权限

主要是针对你网站有多个用户,允许哪种用户可以使用Bricks Builder。管理员肯定是默认有全部权限的。其他用户你可以设置可以“编辑内容”还是开启“全部限制”。

Bricks创作者权限
Bricks创作者权限

2.1 执行代码 Code Execution

这个翻译也错了。应该是执行代码,它翻译成“删除各模块”。给指定用户允许代码的权限或者是直接全部关闭。

Code Execution
代码执行
execute code 组件
代码执行

3. 模板 My templates

3.1 禁用默认模板

很好理解吧,把Bricks自带的默认模板都关掉。

3.2 公用模板

“允许其他网站从他们的模板库中浏览和插入你的模板。通过下面的 “白名单URLs “和 “密码保护 “设置限制模板访问。”

Bricks模板设置
Bricks模板设置

3.3 远程模板 Remote templates

输入网址访问其他Bricks模板,不管是免费的还是付费的。和刚刚上面的相反

4. 构建器 Builder

4.1 自动保存和保存间隙

这不难理解,也没有禁用的必要,可能就偶尔调整一下间隔吧。

Bricks builder构建器设置
Bricks模板设置

4.2 构建器模式

看你自己喜欢暗色还是浅色。默认是暗色。(浅色挺辣眼睛的) 你也可以选择自定义,可以通过css来编辑。

4.3 构建器语言

我们可以给Bricks设置和网站本身不同的语言(设置常规里换),网站可以是英语的,砖块构建器是中文的。我是建议使用英文的,刚刚也看到了,有很多中文翻译都是错误的。

4.4 工具栏标志链接

给Bricks操作界面左上角的LOGO设置一个跳转链接,我通常都是转到WordPress后台。

工具栏标志链接

4.5 控制面板

  • Disable auto-expand: 关闭在写代码和文本操作界面变大的效果。
  • 禁用global classes:不懂为什么要禁用…

4.6 画布 Canva

  • 禁用元素间隙: 把全部元素的间隙取消,主要就是全部元素都是贴在一起的,要自己之后设置。
  • 自动滚动元素进入视图:“在结构面板中选择一个元素,它就会在画布上滚动显示。 设置为 “50%”可将活动元素滚动到中心位置,设置为 “关闭 “可禁用自动滚动。”单纯用文字是蛮难懂的,看视频吧…

4.7 结构面板 Structure panel

四个选项都选上,不解释,对structure界面有好处。

bricks Structure panel

4.8 动态数据 Dynamic data

Render dymanic data text on canva 渲染动态数据文本选上,不然你在编辑的时候只能看到代码,没有真实内容。

开启bricks渲染动态数据文本
开启渲染动态数据文本
未开bricks渲染动态数据文本
未开bricks渲染动态数据文本

5. Bricks 性能 performance

这里的设置都是和优化网站速度有关的:

  • 禁用表情符号:网站上如果没有符号emoji啥的,可以关掉
  • 禁用嵌入:网站没有打算放视频也关掉
  • 禁用谷歌字体:关闭谷歌字体API,自己上传自定义字体
  • 延迟加载:根据用户观看的位子加载图片
  • 其他大多数情况下都不需要关闭

6. 维护模式 Maintenance

砖块构建器可以做一个单页模板套在维护模式或Coming soon模式下。

  • 维护模式的HTTP代码是 503,不会被抓取收录
  • Coming soon HTTP 是 200,可以被正常访问收录
bricks维护模式
Bricks维护模式

7. API keys

这就是对接各种第三方API的界面,目前支持:Adobe fonts,Unsplash,Google maps,recaptcha,hCaptcha,Cloudflare Turnstile,MailChimp,Sendgrid,Facebook App ID 和 Instagram Access Token

Bricks维护模式

8. 自定义代码 custom code

这就是放各种代码的地方,像Google analytics,Facebook ads,Search Console的代码…

  • 自定义 css
  • 页眉 <head>
  • 正文 <body>
  • 页脚 <footer>
Bricks自定义代码
Bricks自定义代码

9. WooCommerce

这个界面只有装了WooCommerce才会出现。

9.1 杂项 Miscellaneous

  • 禁用WooCommerce构建器
  • 启用Bricks WooCommerce “通知” 元素:这个后期要自己手动添加通知,因为它把自带的都删除了
  • 在产品Loop中显示数量输入字段:它仅适用于可购买且有库存的单一产品。
Bricks woocommerce设置
Bricks WooCommerce 设置

9.2 产品 products

  • 打折产品的显示:文本或百分比
  • 设置多少天以内算新产品
bricks产品sale百分比
折扣百分比显示
bricks产品sale文本
折扣文本显示

9.3 单一产品 Single product

  • 关闭图片放大镜功能
  • 关闭产品相册幻灯

9.3 添加到购物车 AJAX

  • 使用AJAX添加到购物车:不需要重新加载页面
  • 添加和与添加的文本设置

导出砖块构建器设置备用

这些设置你每个网站都操作一遍其实是挺麻烦的一件事,你可以就做一次然后导出备用,在需要的情况下导入JSON文件即可。

Bricks导出设置
Bricks导出设置

为笔记评分

平均评分 5 / 5. 摘星者: 1

1条评论

有疑问?留个言吧!

更多结果...

Generic selectors
Exact matches only
Search in title
Search in content
Post Type Selectors

更多结果...

Generic selectors
Exact matches only
Search in title
Search in content
Post Type Selectors