beginner-wordpress-user/platform/Nesting and using blocks to create visually appealing content/bilibili/Nesting and using blocks to create visually appealing content.bcc

{
  "font_size": 0.4,
  "font_color": "#FFFFFF",
  "background_alpha": 0.5,
  "background_color": "#9C27B0",
  "Stroke": "none",
  "body": [
    {
      "from": 0.0,
      "to": 4.0,
      "location": 2,
      "content": "正如我们所了解的，区块是构建您在线家园的基石。"
    },
    {
      "from": 4.0,
      "to": 8.0,
      "location": 2,
      "content": "您可以将它们视为您网站的实际构建模块。"
    },
    {
      "from": 8.0,
      "to": 11.0,
      "location": 2,
      "content": "在本课中，我们将基于对区块的了解进行扩展。"
    },
    {
      "from": 11.0,
      "to": 18.0,
      "location": 2,
      "content": "探索使用各种类型的区块，以及嵌套和组合区块来创建各种布局。"
    },
    {
      "from": 18.0,
      "to": 24.0,
      "location": 2,
      "content": "嵌套区块通过在彼此内部添加多个区块，帮助您创建更复杂的布局。"
    },
    {
      "from": 24.0,
      "to": 29.04,
      "location": 2,
      "content": "我们通常使用容器区块，例如群组区块、分栏区块、封面区块、"
    },
    {
      "from": 29.04,
      "to": 33.0,
      "location": 2,
      "content": "媒体与文本区块或行区块，来将内容组合在一起。"
    },
    {
      "from": 33.0,
      "to": 36.281,
      "location": 2,
      "content": "提醒一下，当您打开列表视图时，"
    },
    {
      "from": 36.281,
      "to": 40.0,
      "location": 2,
      "content": "您可以在内容层和嵌套区块之间导航。"
    },
    {
      "from": 40.0,
      "to": 45.0,
      "location": 2,
      "content": "让我们查看此主页上的第二部分，看看实际效果。"
    },
    {
      "from": 45.0,
      "to": 48.0,
      "location": 2,
      "content": "那么我将继续并选择分栏区块。"
    },
    {
      "from": 48.0,
      "to": 55.0,
      "location": 2,
      "content": "当我们展开分栏区块时，我们将看到内部的所有区块。"
    },
    {
      "from": 55.0,
      "to": 64.0,
      "location": 2,
      "content": "在左栏中，我们会注意到一个标题区块、一个分隔符区块和一个段落区块。"
    },
    {
      "from": 64.0,
      "to": 71.0,
      "location": 2,
      "content": "而在右栏中，我们将看到一个包含四张不同图片的相册区块。"
    },
    {
      "from": 71.0,
      "to": 74.0,
      "location": 2,
      "content": "让我们一起来创建一些示例。"
    },
    {
      "from": 74.0,
      "to": 78.0,
      "location": 2,
      "content": "首先，我将使用一个群组区块将一些区块组合在一起。"
    },
    {
      "from": 78.0,
      "to": 84.0,
      "location": 2,
      "content": "但在此之前，我要先添加一个标题区块。"
    },
    {
      "from": 84.0,
      "to": 86.71,
      "location": 2,
      "content": "然后给它起个合适的名字。"
    },
    {
      "from": 86.71,
      "to": 91.0,
      "location": 2,
      "content": "在这个例子中，就叫“笑是最好的良药”。"
    },
    {
      "from": 91.0,
      "to": 97.0,
      "location": 2,
      "content": "然后我按回车键，添加一个分栏区块。"
    },
    {
      "from": 97.0,
      "to": 101.0,
      "location": 2,
      "content": "并选择两栏等宽。"
    },
    {
      "from": 101.0,
      "to": 109.0,
      "location": 2,
      "content": "然后在左栏和右栏里添加一些文字。"
    },
    {
      "from": 109.0,
      "to": 117.5,
      "location": 2,
      "content": "接着，我会在列表视图中按住 Shift 键并点击鼠标，来选中这两个区块，"
    },
    {
      "from": 117.5,
      "to": 126.0,
      "location": 2,
      "content": "这样就可以选中多个区块，然后使用区块工具栏将它们组合成一个群组区块。"
    },
    {
      "from": 126.0,
      "to": 130.0,
      "location": 2,
      "content": "接下来，我想把这个群组区块的宽度改为宽宽度。"
    },
    {
      "from": 130.0,
      "to": 137.0,
      "location": 2,
      "content": "但在我能这样做之前，我必须取消选中“内部区块使用内容宽度”这个选项。"
    },
    {
      "from": 137.0,
      "to": 143.75,
      "location": 2,
      "content": "只有在我取消选中这个选项后，嵌套的区块才能使用内容宽度选项，"
    },
    {
      "from": 143.75,
      "to": 146.0,
      "location": 2,
      "content": "比如宽宽度和全宽度。"
    },
    {
      "from": 146.0,
      "to": 149.355,
      "location": 2,
      "content": "如果我不取消选中这个选项，"
    },
    {
      "from": 149.355,
      "to": 154.0,
      "location": 2,
      "content": "我就无法将对齐方式改为全宽度。"
    },
    {
      "from": 154.0,
      "to": 158.0,
      "location": 2,
      "content": "如你所见，没有任何变化。"
    },
    {
      "from": 158.0,
      "to": 163.854,
      "location": 2,
      "content": "所以一旦取消选中，我就可以回到区块工具栏，将宽度改为宽宽度，"
    },
    {
      "from": 163.854,
      "to": 166.0,
      "location": 2,
      "content": "而不受主题设定的限制。"
    },
    {
      "from": 166.0,
      "to": 170.0,
      "location": 2,
      "content": "接下来，我们可以打开样式选项卡，进一步设计我们的区块。"
    },
    {
      "from": 170.0,
      "to": 175.0,
      "location": 2,
      "content": "我想做的第一件事是更改群组区块的背景颜色。"
    },
    {
      "from": 175.0,
      "to": 176.5,
      "location": 2,
      "content": "另外也请注意，"
    },
    {
      "from": 176.5,
      "to": 181.0,
      "location": 2,
      "content": "如果你愿意，也可以给群组区块添加背景图片。"
    },
    {
      "from": 181.0,
      "to": 188.0,
      "location": 2,
      "content": "然后点击排版旁边的三个垂直点，查看所有可用的选项。"
    },
    {
      "from": 188.0,
      "to": 192.235,
      "location": 2,
      "content": "接下来，我将继续添加一些内边距，"
    },
    {
      "from": 192.235,
      "to": 197.0,
      "location": 2,
      "content": "以便在我的区块内容周围创造更多空间。"
    },
    {
      "from": 197.0,
      "to": 204.0,
      "location": 2,
      "content": "这样就完成了。当然，您也可以决定进一步设置您的群组区块样式。"
    },
    {
      "from": 204.0,
      "to": 206.935,
      "location": 2,
      "content": "当您的页面上有多层内容时，"
    },
    {
      "from": 206.935,
      "to": 211.0,
      "location": 2,
      "content": "您可以使用群组区块来重命名各个部分。"
    },
    {
      "from": 211.0,
      "to": 216.25,
      "location": 2,
      "content": "所以在上面的例子中，我们看到第一部分叫做“我们的故事”，"
    },
    {
      "from": 216.25,
      "to": 220.0,
      "location": 2,
      "content": "现在我可以选择下面的群组区块并重命名它。"
    },
    {
      "from": 220.0,
      "to": 224.0,
      "location": 2,
      "content": "在这个例子中，重命名为“客户评价”。"
    },
    {
      "from": 224.0,
      "to": 231.0,
      "location": 2,
      "content": "因此，群组区块的这个功能将允许您构建和组织您的内容。"
    },
    {
      "from": 231.0,
      "to": 236.0,
      "location": 2,
      "content": "在下一个例子中，让我们使用媒体和文本区块来将区块组合在一起。"
    },
    {
      "from": 236.0,
      "to": 240.0,
      "location": 2,
      "content": "那么，让我们继续添加媒体和文本区块。"
    },
    {
      "from": 240.0,
      "to": 247.0,
      "location": 2,
      "content": "然后在左侧，我们可以从媒体库添加一张图片。"
    },
    {
      "from": 247.0,
      "to": 251.0,
      "location": 2,
      "content": "在右侧，我们可以开始添加内容。"
    },
    {
      "from": 251.0,
      "to": 258.0,
      "location": 2,
      "content": "在顶部，我将添加一个标题并将其命名为“寿司是艺术”。"
    },
    {
      "from": 258.0,
      "to": 262.0,
      "location": 2,
      "content": "按回车键，然后添加一些文本。"
    },
    {
      "from": 262.0,
      "to": 269.0,
      "location": 2,
      "content": "在底部，我想添加一个行动号召，或者在这个例子中是一个按钮区块。"
    },
    {
      "from": 269.0,
      "to": 273.0,
      "location": 2,
      "content": "然后我会写上“了解更多”。"
    },
    {
      "from": 273.0,
      "to": 277.8,
      "location": 2,
      "content": "我将使用区块工具栏将文本加粗，"
    },
    {
      "from": 277.8,
      "to": 281.0,
      "location": 2,
      "content": "并添加相关的网址。"
    },
    {
      "from": 281.0,
      "to": 290.0,
      "location": 2,
      "content": "然后我将在列表视图中选择父区块，并将对齐方式改为宽宽度。"
    },
    {
      "from": 290.0,
      "to": 293.111,
      "location": 2,
      "content": "你也可以使用区块工具栏，"
    },
    {
      "from": 293.111,
      "to": 297.0,
      "location": 2,
      "content": "如果你想更改并在右侧显示图像。"
    },
    {
      "from": 297.0,
      "to": 305.0,
      "location": 2,
      "content": "然后在下面的设置中，我会将媒体宽度改为 40。"
    },
    {
      "from": 306.0,
      "to": 313.0,
      "location": 2,
      "content": "然后我会打开样式选项卡，在内容周围添加一些内边距。"
    },
    {
      "from": 313.0,
      "to": 322.0,
      "location": 2,
      "content": "最后，我会将图像的垂直对齐方式改为行底部。"
    },
    {
      "from": 322.0,
      "to": 328.0,
      "location": 2,
      "content": "就这样，我们的媒体与文本区块就完成了。"
    },
    {
      "from": 328.0,
      "to": 331.0,
      "location": 2,
      "content": "在下一个例子中，我们将使用栏目区块。"
    },
    {
      "from": 331.0,
      "to": 333.333,
      "location": 2,
      "content": "栏目区块是最有效的区块之一，"
    },
    {
      "from": 333.333,
      "to": 336.0,
      "location": 2,
      "content": "可用于创建复杂的布局或各种设计。"
    },
    {
      "from": 336.0,
      "to": 344.0,
      "location": 2,
      "content": "那么，我们继续添加一个栏目区块，然后选择三个等宽的栏目。"
    },
    {
      "from": 344.0,
      "to": 352.0,
      "location": 2,
      "content": "然后在左栏中，我将继续添加一些文本，并将其命名为“拼盘”。"
    },
    {
      "from": 352.0,
      "to": 356.0,
      "location": 2,
      "content": "按回车键，然后添加一个段落。"
    },
    {
      "from": 356.0,
      "to": 367.0,
      "location": 2,
      "content": "在那下面，我将添加一个图像区块，并从我的媒体库中选择一张图片。"
    },
    {
      "from": 367.0,
      "to": 376.0,
      "location": 2,
      "content": "然后我会选中顶部的文本，将其加粗并放大字号。"
    },
    {
      "from": 376.0,
      "to": 382.0,
      "location": 2,
      "content": "接着将两个段落的文本都居中对齐。"
    },
    {
      "from": 382.0,
      "to": 391.0,
      "location": 2,
      "content": "一旦文本居中对齐后，我会选中图像区块，并将宽高比改为正方形。"
    },
    {
      "from": 391.0,
      "to": 395.571,
      "location": 2,
      "content": "然后，我会选择主列区块或父区块，"
    },
    {
      "from": 395.571,
      "to": 399.0,
      "location": 2,
      "content": "并将对齐方式改为宽对齐。"
    },
    {
      "from": 399.0,
      "to": 406.0,
      "location": 2,
      "content": "接着，我会转到样式设置，为区块内容添加一些内边距。"
    },
    {
      "from": 406.0,
      "to": 413.0,
      "location": 2,
      "content": "以及三个列之间的区块间距。"
    },
    {
      "from": 413.0,
      "to": 418.077,
      "location": 2,
      "content": "完成区块的样式设置后，"
    },
    {
      "from": 418.077,
      "to": 425.0,
      "location": 2,
      "content": "我将选择左侧列并将其复制两次。"
    },
    {
      "from": 425.0,
      "to": 433.0,
      "location": 2,
      "content": "复制完成后，我们就可以删除那些空列了。"
    },
    {
      "from": 433.0,
      "to": 440.0,
      "location": 2,
      "content": "然后，我们就可以继续按需修改内容了。"
    },
    {
      "from": 440.0,
      "to": 443.0,
      "location": 2,
      "content": "在最后一个例子中，我们将使用封面区块。"
    },
    {
      "from": 443.0,
      "to": 448.0,
      "location": 2,
      "content": "封面区块允许你在图片或视频上方显示文本和其他内容。"
    },
    {
      "from": 448.0,
      "to": 452.0,
      "location": 2,
      "content": "这是一个非常适合用于页眉和横幅样式显示的区块。"
    },
    {
      "from": 452.0,
      "to": 455.0,
      "location": 2,
      "content": "那么，我们继续添加封面区块吧。"
    },
    {
      "from": 455.0,
      "to": 461.0,
      "location": 2,
      "content": "然后你会看到，你可以选择一个颜色叠加层。"
    },
    {
      "from": 461.0,
      "to": 467.0,
      "location": 2,
      "content": "但我要继续操作，从我的媒体库添加一张图片作为背景。"
    },
    {
      "from": 467.0,
      "to": 476.0,
      "location": 2,
      "content": "接着，我会添加一些文本，后面再跟一个按钮区块。"
    },
    {
      "from": 476.0,
      "to": 480.0,
      "location": 2,
      "content": "我会写上“立即订购”。"
    },
    {
      "from": 480.0,
      "to": 490.0,
      "location": 2,
      "content": "然后，更改我的行动号召的背景颜色和文本颜色。"
    },
    {
      "from": 491.0,
      "to": 499.0,
      "location": 2,
      "content": "然后我将选中这两个区块，并使用堆叠区块将它们堆叠在一起。"
    },
    {
      "from": 499.0,
      "to": 503.0,
      "location": 2,
      "content": "这让我可以同时自定义这些区块。"
    },
    {
      "from": 503.0,
      "to": 508.029,
      "location": 2,
      "content": "接着，我会将堆叠区块对齐到中心，"
    },
    {
      "from": 508.029,
      "to": 514.0,
      "location": 2,
      "content": "选中封面区块，并将对齐方式改为宽宽度。"
    },
    {
      "from": 514.0,
      "to": 519.0,
      "location": 2,
      "content": "并且别忘了取消选中“内部区块使用内容宽度”。"
    },
    {
      "from": 519.0,
      "to": 521.0,
      "location": 2,
      "content": "现在我们可以进行进一步的修改。"
    },
    {
      "from": 521.0,
      "to": 529.0,
      "location": 2,
      "content": "我会放大文字“享受八折优惠”。"
    },
    {
      "from": 529.0,
      "to": 536.0,
      "location": 2,
      "content": "以及按钮区块。"
    },
    {
      "from": 536.0,
      "to": 539.769,
      "location": 2,
      "content": "我还想把按钮区块的文字加粗，"
    },
    {
      "from": 539.769,
      "to": 543.0,
      "location": 2,
      "content": "并且别忘了添加您的网址。"
    },
    {
      "from": 543.0,
      "to": 545.0,
      "location": 2,
      "content": "然后我将选中封面区块。"
    },
    {
      "from": 545.0,
      "to": 552.0,
      "location": 2,
      "content": "请注意，在区块工具栏中，您可以选择将区块切换为全高。"
    },
    {
      "from": 552.0,
      "to": 559.0,
      "location": 2,
      "content": "但我们也可以手动减小或增大尺寸。"
    },
    {
      "from": 559.0,
      "to": 567.667,
      "location": 2,
      "content": "接着，我会打开样式选项卡，将叠加层不透明度改为 30，"
    },
    {
      "from": 567.667,
      "to": 570.0,
      "location": 2,
      "content": "让它变得更亮。"
    },
    {
      "from": 570.0,
      "to": 575.0,
      "location": 2,
      "content": "然后我的封面区块就准备好了。"
    },
    {
      "from": 575.0,
      "to": 579.686,
      "location": 2,
      "content": "我相信您现在对嵌套和组合区块更有信心了。"
    }
  ]
}