目录
大纲
WP建站和运维

使用列块进行设计

简介

在本课程中,我们将探索如何利用列块创建不同的设计。列块是一个容器块,可用于创建各种自定义布局,为设计开启了无限可能。该区块允许您在最多六列中插入文本、媒体和其他类型的内容。当连续使用时,列块能创造出酷炫的网格效果。

添加和自定义列块

要添加列块,点击插入器并输入”columns”,或直接输入斜杠加columns后选择。您可以自由选择初始列数和列宽。列块的妙处在于每列都能嵌套其他区块——例如先创建列块搭建结构,再添加图像块、标题块和段落块。您还可以通过在每列添加封面块来实现这类设计。

区块工具栏

主列块与其子列之间存在父子层级关系。点击对齐图标可将区块对齐方式改为宽幅或全宽。您知道吗?列也可以复制!选中列块中的第三列,点击三个竖点图标即可复制,这能大幅节省设计时间。选中单列时,既可用工具栏箭头移动列位置,也可在列表视图中直接拖放。

侧边栏设置

如需新增列,只需在两列间点击插入器,或选择父区块后打开侧边栏设置。在”列”选项下可增减列数,下方还能设置移动端是否堆叠显示。在”样式”选项中,不仅可以修改父区块或单列的颜色,还能调整字体家族、外观、字间距等排版参数,甚至能改变整个列块的尺寸。通过”尺寸”设置可调节内边距、外边距以及列间距,最底部还能添加边框、圆角乃至投影效果。

将其他区块转换为列块

另一个强大功能是:您可以将其他区块转换为列块,甚至将列块转换为组合块。

结语

正如所见,通过列块能实现任何定制设计——无论是团队介绍、多媒体展示还是价格表制作。尽情使用列块来实现您的设计需求吧。

实践练习

使用WordPress Playground测试所学知识:

创建如下设计:

  • 使用默认颜色或自定义配色
  • 添加三栏等宽的列块
  • 左列设置:
    • 5像素边框
    • 自定义内边距
    • 首列内容:
      • 段落块1:01
        • 字号:75像素
        • 加粗
        • 行高:1.3
        • 居中对齐
      • 段落块2:咨询
        • 字号:大
        • 行高:4
        • 居中对齐
      • 段落块3:Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis.
        • 纯文本
        • 居中对齐
  • 将首列复制两次,删除空列并更新内容