Bricks builder教程04 – 主题风格设置Theme Style

本篇文章教你如何设置编辑器的全局主题风格即theme style,很多设置比如字体,容器大小在这里设置好就不用每一次编辑重新设置了。

Bricks builder theme style settings

关于这个主题的设置我在第一篇教程里面多少也有提及,这篇专门来讲讲。主题风格(样式)的设置说白了就是把那些通用会全局复用的一些参数一次性在这里设置好,而不用每一次都在去单独设置。我看到有些刚入门bricks的人做的网站,每一个段落的字体都在ID下设置了字体大小比如17px,这其实就是完全多余也不对的操作。

在哪里设置bricks的主题风格?

bricks主题风格的设置你需要进入到bricks编辑器的界面。如下图,在任意一个页面下编辑的后面你会看到edit with bricks的选项,点击即可进入到bricks的编辑界面。

如果你没有edit with bricks的选项,回到bricks – setting – general – post types里面选中你所要的post类型保存。

点击左上角的齿轮,进入setting – theme style。

初始进入这里主题是空的,他会提示你选择一个主题或者创建一个新的主题,这里我们点击加号创建一个新的主题。主题的命名完全看你自己的喜好,你可以写你自己的名字,公司的名字或者任何你觉得有意义的东西,我一般写Global。

主题风格Theme style设置

创建好属于你自己的主题之后你就能看到所有能全局设置的选项,但并不是所有的选项都需要设置。下面说一下必要的一些设置和我自己的习惯。

  • Conditions条件 – 一般没有特别要求设置成全站entire website.
  • Colors颜色 – 设置各种颜色包括主色调,备选颜色,浅色,深色等等。可以是hex数值,可以是hsl数值。也可以是我之前教程里面设置好的variable自定义变量,比如primary输入设置好的var(--color-primary),以此类推。
  • Links链接
    • Typography链接字体 – 设置链接字体的颜色,字体,样式等等。
  • Typography字体
    • HTML: font-size. 默认的是62.5%,在这个状态下1rem=10px,这样在使用rem单位时候方便换算,比如3rem一看就知道是30px。你也可以设置成100%,这时候1rem=16px。
    • Body,普通段落的字体
      • Color默认段落的颜色。
      • Font size字体大小,可以是定值比如1rem,可以是之前设置的variable自定义变量,比如var(--text-m)。注意:字体尽量避免使用px。
      • Font family字体样式,如果你是英文字体,一定使用自定义的字体而不是在线的谷歌字体,避免额外的加载而影响速度。
    • Heading H1 – Heading H6标题,设置不同级别标题大小。
    • Focus outline,如果你不想要显示点击链接之后出现的虚线,可以在这里设置成none,但是不是很建议这样做,你可以设置其他的focus样式,因为这是给无障碍访问设置的。
  • Element – Section
    • Padding, 设置上下边距,左右边距。你可以设置一个固定数值,也可以设置上个教程一下设置的变体如左右边距 var(--section-padding-x),上下边距 var(--section-padding-),从而实现在不同分辨率下大小自适应的效果。很多人的网站内容在屏幕上左右两边都紧紧贴着屏幕就是这个地方没有合理的设置。
  • Element – Container
    • Width,这里设置网站内容的宽度。默认不设置的话是1100px,但是说实话这个在目前的屏幕上来说是偏小了。通常我们可以设置大一点,比如1250px,1280px,1366px,1400px。。。具体看你自己喜欢窄一点还是宽一点的风格。
  • 上面列出了我自己用bricks必须的一些设置,其他的设置也是按具体需要来设置。记住,只要是那些可以全局设置的都可以在这里提前设置好,这样就不用你每一次添加内容再单独去设置。

在设置好主题之后,点击保存当前编辑的页面。至此,主题风格theme style的设置完成了。