Bricks 简介
个人体验下来,首先要知道怎么在 Bricks 中编辑、保存与预览。
基础编辑
在页面上新建基础的 section, container, 然后在左上角的 Add Elements 处,可以添加 layout, context, bottom 等内容,其中bottom 可以进行链接。对于 container, heading, context 等元素,可以在 layout 中设置 margin, padding 等样式,以及对齐方式,字体,颜色等等。
所有的元素应该都是放在 container 中,而 container 是放在 section 中的,而且 container 中也可以存放 container.
做完一个 section 之后,可以继续通过 add elements 的方式添加 section 进行制作。
image
image 元素中,在 content 部分选择图片,其中图片需要提前上传到 media library. Image 也可以添加 link.
图片居中
image 通常存放在一个 container 中,可以在 image 模块中调整其大小等属性。但是为了讲图片剧中,需要在他的上一级 container 中,在 content 页面选择居中对齐。
button
button 默认是一个带有背景和文字,可以进行链接操作的元素。在 style-layout 中可以调整文字和背景的 padding,而 margin 则是调整整个模块的外距。
保存
右上角 save draft.
预览
右上角 preview mode.
常用设计
双栏
在 section 中的 container 部分(中间部分),鼠标悬浮在其上方可以将其分成两个 columns. 点击 icon, 可以用第三个按钮直接进行拖移操作。此外也可以在 layout 的 sizing 部分调整数值。
CTAs
Call to Actions. 用于引导用户进行下一步动作,比如电商网页的购买、软件网页的下载等按钮。
Heading, button. 通常在 section 中调整 background.
Hero Section
用于吸引用户注意力,通常包括主标题、副标题,CTAs 和 视觉焦点。
Menu
神秘
templates
其中有 my tamplates, Wireframes and Design sets, 后面两个分别是草图和成品图模板。
Flex
Bricks 中的 container 使用的是 Flex 布局,简单理解,Flex 布局有两个轴:Main axis and Cross Axis。当选择 direction 为 row 时,main axis 水平而 cross axis 垂直。其中 align main axis 决定了 container 中元素的对齐位置(按照 outline 中的顺序)
将一个 section 固定在最顶端
选中 section, 在 Style-Layout 中找到 Position, 选择 sticky, 并且如果希望将其固定在最顶端,选择 top 的值为 0.
如果被其他元素遮挡(比如图片),需要检查 Z-index.(在 style-layout 下)