studio
4cfcf09a97
Sources: video-subtitle-pipeline artifacts/beginner-wordpress-user/ - subtitles/: en, zh, bilingual SRT/ASS (100 files) - platform/: youtube SRT + bilibili BCC per video (75 files) - manifests/: per-video manifest.json (25 files) - quality/: quality reports (50 files)
431 lines
9.9 KiB
Text
431 lines
9.9 KiB
Text
1
|
||
00:00:00,000 --> 00:00:04,000
|
||
正如我们所了解的，区块是构建您在线家园的基石。
|
||
|
||
2
|
||
00:00:04,000 --> 00:00:08,000
|
||
您可以将它们视为您网站的实际构建模块。
|
||
|
||
3
|
||
00:00:08,000 --> 00:00:11,000
|
||
在本课中，我们将基于对区块的了解进行扩展。
|
||
|
||
4
|
||
00:00:11,000 --> 00:00:18,000
|
||
探索使用各种类型的区块，以及嵌套和组合区块来创建各种布局。
|
||
|
||
5
|
||
00:00:18,000 --> 00:00:24,000
|
||
嵌套区块通过在彼此内部添加多个区块，帮助您创建更复杂的布局。
|
||
|
||
6
|
||
00:00:24,000 --> 00:00:29,040
|
||
我们通常使用容器区块，例如群组区块、分栏区块、封面区块、
|
||
|
||
7
|
||
00:00:29,040 --> 00:00:33,000
|
||
媒体与文本区块或行区块，来将内容组合在一起。
|
||
|
||
8
|
||
00:00:33,000 --> 00:00:36,281
|
||
提醒一下，当您打开列表视图时，
|
||
|
||
9
|
||
00:00:36,281 --> 00:00:40,000
|
||
您可以在内容层和嵌套区块之间导航。
|
||
|
||
10
|
||
00:00:40,000 --> 00:00:45,000
|
||
让我们查看此主页上的第二部分，看看实际效果。
|
||
|
||
11
|
||
00:00:45,000 --> 00:00:48,000
|
||
那么我将继续并选择分栏区块。
|
||
|
||
12
|
||
00:00:48,000 --> 00:00:55,000
|
||
当我们展开分栏区块时，我们将看到内部的所有区块。
|
||
|
||
13
|
||
00:00:55,000 --> 00:01:04,000
|
||
在左栏中，我们会注意到一个标题区块、一个分隔符区块和一个段落区块。
|
||
|
||
14
|
||
00:01:04,000 --> 00:01:11,000
|
||
而在右栏中，我们将看到一个包含四张不同图片的相册区块。
|
||
|
||
15
|
||
00:01:11,000 --> 00:01:14,000
|
||
让我们一起来创建一些示例。
|
||
|
||
16
|
||
00:01:14,000 --> 00:01:18,000
|
||
首先，我将使用一个群组区块将一些区块组合在一起。
|
||
|
||
17
|
||
00:01:18,000 --> 00:01:24,000
|
||
但在此之前，我要先添加一个标题区块。
|
||
|
||
18
|
||
00:01:24,000 --> 00:01:26,710
|
||
然后给它起个合适的名字。
|
||
|
||
19
|
||
00:01:26,710 --> 00:01:31,000
|
||
在这个例子中，就叫“笑是最好的良药”。
|
||
|
||
20
|
||
00:01:31,000 --> 00:01:37,000
|
||
然后我按回车键，添加一个分栏区块。
|
||
|
||
21
|
||
00:01:37,000 --> 00:01:41,000
|
||
并选择两栏等宽。
|
||
|
||
22
|
||
00:01:41,000 --> 00:01:49,000
|
||
然后在左栏和右栏里添加一些文字。
|
||
|
||
23
|
||
00:01:49,000 --> 00:01:57,500
|
||
接着，我会在列表视图中按住 Shift 键并点击鼠标，来选中这两个区块，
|
||
|
||
24
|
||
00:01:57,500 --> 00:02:06,000
|
||
这样就可以选中多个区块，然后使用区块工具栏将它们组合成一个群组区块。
|
||
|
||
25
|
||
00:02:06,000 --> 00:02:10,000
|
||
接下来，我想把这个群组区块的宽度改为宽宽度。
|
||
|
||
26
|
||
00:02:10,000 --> 00:02:17,000
|
||
但在我能这样做之前，我必须取消选中“内部区块使用内容宽度”这个选项。
|
||
|
||
27
|
||
00:02:17,000 --> 00:02:23,750
|
||
只有在我取消选中这个选项后，嵌套的区块才能使用内容宽度选项，
|
||
|
||
28
|
||
00:02:23,750 --> 00:02:26,000
|
||
比如宽宽度和全宽度。
|
||
|
||
29
|
||
00:02:26,000 --> 00:02:29,355
|
||
如果我不取消选中这个选项，
|
||
|
||
30
|
||
00:02:29,355 --> 00:02:34,000
|
||
我就无法将对齐方式改为全宽度。
|
||
|
||
31
|
||
00:02:34,000 --> 00:02:38,000
|
||
如你所见，没有任何变化。
|
||
|
||
32
|
||
00:02:38,000 --> 00:02:43,854
|
||
所以一旦取消选中，我就可以回到区块工具栏，将宽度改为宽宽度，
|
||
|
||
33
|
||
00:02:43,854 --> 00:02:46,000
|
||
而不受主题设定的限制。
|
||
|
||
34
|
||
00:02:46,000 --> 00:02:50,000
|
||
接下来，我们可以打开样式选项卡，进一步设计我们的区块。
|
||
|
||
35
|
||
00:02:50,000 --> 00:02:55,000
|
||
我想做的第一件事是更改群组区块的背景颜色。
|
||
|
||
36
|
||
00:02:55,000 --> 00:02:56,500
|
||
另外也请注意，
|
||
|
||
37
|
||
00:02:56,500 --> 00:03:01,000
|
||
如果你愿意，也可以给群组区块添加背景图片。
|
||
|
||
38
|
||
00:03:01,000 --> 00:03:08,000
|
||
然后点击排版旁边的三个垂直点，查看所有可用的选项。
|
||
|
||
39
|
||
00:03:08,000 --> 00:03:12,235
|
||
接下来，我将继续添加一些内边距，
|
||
|
||
40
|
||
00:03:12,235 --> 00:03:17,000
|
||
以便在我的区块内容周围创造更多空间。
|
||
|
||
41
|
||
00:03:17,000 --> 00:03:24,000
|
||
这样就完成了。当然，您也可以决定进一步设置您的群组区块样式。
|
||
|
||
42
|
||
00:03:24,000 --> 00:03:26,935
|
||
当您的页面上有多层内容时，
|
||
|
||
43
|
||
00:03:26,935 --> 00:03:31,000
|
||
您可以使用群组区块来重命名各个部分。
|
||
|
||
44
|
||
00:03:31,000 --> 00:03:36,250
|
||
所以在上面的例子中，我们看到第一部分叫做“我们的故事”，
|
||
|
||
45
|
||
00:03:36,250 --> 00:03:40,000
|
||
现在我可以选择下面的群组区块并重命名它。
|
||
|
||
46
|
||
00:03:40,000 --> 00:03:44,000
|
||
在这个例子中，重命名为“客户评价”。
|
||
|
||
47
|
||
00:03:44,000 --> 00:03:51,000
|
||
因此，群组区块的这个功能将允许您构建和组织您的内容。
|
||
|
||
48
|
||
00:03:51,000 --> 00:03:56,000
|
||
在下一个例子中，让我们使用媒体和文本区块来将区块组合在一起。
|
||
|
||
49
|
||
00:03:56,000 --> 00:04:00,000
|
||
那么，让我们继续添加媒体和文本区块。
|
||
|
||
50
|
||
00:04:00,000 --> 00:04:07,000
|
||
然后在左侧，我们可以从媒体库添加一张图片。
|
||
|
||
51
|
||
00:04:07,000 --> 00:04:11,000
|
||
在右侧，我们可以开始添加内容。
|
||
|
||
52
|
||
00:04:11,000 --> 00:04:18,000
|
||
在顶部，我将添加一个标题并将其命名为“寿司是艺术”。
|
||
|
||
53
|
||
00:04:18,000 --> 00:04:22,000
|
||
按回车键，然后添加一些文本。
|
||
|
||
54
|
||
00:04:22,000 --> 00:04:29,000
|
||
在底部，我想添加一个行动号召，或者在这个例子中是一个按钮区块。
|
||
|
||
55
|
||
00:04:29,000 --> 00:04:33,000
|
||
然后我会写上“了解更多”。
|
||
|
||
56
|
||
00:04:33,000 --> 00:04:37,800
|
||
我将使用区块工具栏将文本加粗，
|
||
|
||
57
|
||
00:04:37,800 --> 00:04:41,000
|
||
并添加相关的网址。
|
||
|
||
58
|
||
00:04:41,000 --> 00:04:50,000
|
||
然后我将在列表视图中选择父区块，并将对齐方式改为宽宽度。
|
||
|
||
59
|
||
00:04:50,000 --> 00:04:53,111
|
||
你也可以使用区块工具栏，
|
||
|
||
60
|
||
00:04:53,111 --> 00:04:57,000
|
||
如果你想更改并在右侧显示图像。
|
||
|
||
61
|
||
00:04:57,000 --> 00:05:05,000
|
||
然后在下面的设置中，我会将媒体宽度改为 40。
|
||
|
||
62
|
||
00:05:06,000 --> 00:05:13,000
|
||
然后我会打开样式选项卡，在内容周围添加一些内边距。
|
||
|
||
63
|
||
00:05:13,000 --> 00:05:22,000
|
||
最后，我会将图像的垂直对齐方式改为行底部。
|
||
|
||
64
|
||
00:05:22,000 --> 00:05:28,000
|
||
就这样，我们的媒体与文本区块就完成了。
|
||
|
||
65
|
||
00:05:28,000 --> 00:05:31,000
|
||
在下一个例子中，我们将使用栏目区块。
|
||
|
||
66
|
||
00:05:31,000 --> 00:05:33,333
|
||
栏目区块是最有效的区块之一，
|
||
|
||
67
|
||
00:05:33,333 --> 00:05:36,000
|
||
可用于创建复杂的布局或各种设计。
|
||
|
||
68
|
||
00:05:36,000 --> 00:05:44,000
|
||
那么，我们继续添加一个栏目区块，然后选择三个等宽的栏目。
|
||
|
||
69
|
||
00:05:44,000 --> 00:05:52,000
|
||
然后在左栏中，我将继续添加一些文本，并将其命名为“拼盘”。
|
||
|
||
70
|
||
00:05:52,000 --> 00:05:56,000
|
||
按回车键，然后添加一个段落。
|
||
|
||
71
|
||
00:05:56,000 --> 00:06:07,000
|
||
在那下面，我将添加一个图像区块，并从我的媒体库中选择一张图片。
|
||
|
||
72
|
||
00:06:07,000 --> 00:06:16,000
|
||
然后我会选中顶部的文本，将其加粗并放大字号。
|
||
|
||
73
|
||
00:06:16,000 --> 00:06:22,000
|
||
接着将两个段落的文本都居中对齐。
|
||
|
||
74
|
||
00:06:22,000 --> 00:06:31,000
|
||
一旦文本居中对齐后，我会选中图像区块，并将宽高比改为正方形。
|
||
|
||
75
|
||
00:06:31,000 --> 00:06:35,571
|
||
然后，我会选择主列区块或父区块，
|
||
|
||
76
|
||
00:06:35,571 --> 00:06:39,000
|
||
并将对齐方式改为宽对齐。
|
||
|
||
77
|
||
00:06:39,000 --> 00:06:46,000
|
||
接着，我会转到样式设置，为区块内容添加一些内边距。
|
||
|
||
78
|
||
00:06:46,000 --> 00:06:53,000
|
||
以及三个列之间的区块间距。
|
||
|
||
79
|
||
00:06:53,000 --> 00:06:58,077
|
||
完成区块的样式设置后，
|
||
|
||
80
|
||
00:06:58,077 --> 00:07:05,000
|
||
我将选择左侧列并将其复制两次。
|
||
|
||
81
|
||
00:07:05,000 --> 00:07:13,000
|
||
复制完成后，我们就可以删除那些空列了。
|
||
|
||
82
|
||
00:07:13,000 --> 00:07:20,000
|
||
然后，我们就可以继续按需修改内容了。
|
||
|
||
83
|
||
00:07:20,000 --> 00:07:23,000
|
||
在最后一个例子中，我们将使用封面区块。
|
||
|
||
84
|
||
00:07:23,000 --> 00:07:28,000
|
||
封面区块允许你在图片或视频上方显示文本和其他内容。
|
||
|
||
85
|
||
00:07:28,000 --> 00:07:32,000
|
||
这是一个非常适合用于页眉和横幅样式显示的区块。
|
||
|
||
86
|
||
00:07:32,000 --> 00:07:35,000
|
||
那么，我们继续添加封面区块吧。
|
||
|
||
87
|
||
00:07:35,000 --> 00:07:41,000
|
||
然后你会看到，你可以选择一个颜色叠加层。
|
||
|
||
88
|
||
00:07:41,000 --> 00:07:47,000
|
||
但我要继续操作，从我的媒体库添加一张图片作为背景。
|
||
|
||
89
|
||
00:07:47,000 --> 00:07:56,000
|
||
接着，我会添加一些文本，后面再跟一个按钮区块。
|
||
|
||
90
|
||
00:07:56,000 --> 00:08:00,000
|
||
我会写上“立即订购”。
|
||
|
||
91
|
||
00:08:00,000 --> 00:08:10,000
|
||
然后，更改我的行动号召的背景颜色和文本颜色。
|
||
|
||
92
|
||
00:08:11,000 --> 00:08:19,000
|
||
然后我将选中这两个区块，并使用堆叠区块将它们堆叠在一起。
|
||
|
||
93
|
||
00:08:19,000 --> 00:08:23,000
|
||
这让我可以同时自定义这些区块。
|
||
|
||
94
|
||
00:08:23,000 --> 00:08:28,029
|
||
接着，我会将堆叠区块对齐到中心，
|
||
|
||
95
|
||
00:08:28,029 --> 00:08:34,000
|
||
选中封面区块，并将对齐方式改为宽宽度。
|
||
|
||
96
|
||
00:08:34,000 --> 00:08:39,000
|
||
并且别忘了取消选中“内部区块使用内容宽度”。
|
||
|
||
97
|
||
00:08:39,000 --> 00:08:41,000
|
||
现在我们可以进行进一步的修改。
|
||
|
||
98
|
||
00:08:41,000 --> 00:08:49,000
|
||
我会放大文字“享受八折优惠”。
|
||
|
||
99
|
||
00:08:49,000 --> 00:08:56,000
|
||
以及按钮区块。
|
||
|
||
100
|
||
00:08:56,000 --> 00:08:59,769
|
||
我还想把按钮区块的文字加粗，
|
||
|
||
101
|
||
00:08:59,769 --> 00:09:03,000
|
||
并且别忘了添加您的网址。
|
||
|
||
102
|
||
00:09:03,000 --> 00:09:05,000
|
||
然后我将选中封面区块。
|
||
|
||
103
|
||
00:09:05,000 --> 00:09:12,000
|
||
请注意，在区块工具栏中，您可以选择将区块切换为全高。
|
||
|
||
104
|
||
00:09:12,000 --> 00:09:19,000
|
||
但我们也可以手动减小或增大尺寸。
|
||
|
||
105
|
||
00:09:19,000 --> 00:09:27,667
|
||
接着，我会打开样式选项卡，将叠加层不透明度改为 30，
|
||
|
||
106
|
||
00:09:27,667 --> 00:09:30,000
|
||
让它变得更亮。
|
||
|
||
107
|
||
00:09:30,000 --> 00:09:35,000
|
||
然后我的封面区块就准备好了。
|
||
|
||
108
|
||
00:09:35,000 --> 00:09:39,686
|
||
我相信您现在对嵌套和组合区块更有信心了。
|
