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)
540 lines
17 KiB
Text
540 lines
17 KiB
Text
1
|
||
00:00:00,000 --> 00:00:04,000
|
||
正如我们所了解的，区块是构建您在线家园的基石。
|
||
As we have learned, blocks form the cornerstone of building your online home.
|
||
|
||
2
|
||
00:00:04,000 --> 00:00:08,000
|
||
您可以将它们视为您网站的实际构建模块。
|
||
You can think of them as the literal building blocks of your website.
|
||
|
||
3
|
||
00:00:08,000 --> 00:00:11,000
|
||
在本课中，我们将基于对区块的了解进行扩展。
|
||
In this lesson, we are going to build on our knowledge of blocks.
|
||
|
||
4
|
||
00:00:11,000 --> 00:00:18,000
|
||
探索使用各种类型的区块，以及嵌套和组合区块来创建各种布局。
|
||
Explore using various types of blocks, as well as nest and group blocks together to create various layouts.
|
||
|
||
5
|
||
00:00:18,000 --> 00:00:24,000
|
||
嵌套区块通过在彼此内部添加多个区块，帮助您创建更复杂的布局。
|
||
Nested blocks help you create more complex layouts by adding multiple blocks inside each other.
|
||
|
||
6
|
||
00:00:24,000 --> 00:00:29,040
|
||
我们通常使用容器区块，例如群组区块、分栏区块、封面区块、
|
||
We typically use container blocks such as the group block, columns block, cover block,
|
||
|
||
7
|
||
00:00:29,040 --> 00:00:33,000
|
||
媒体与文本区块或行区块，来将内容组合在一起。
|
||
the media and text block or row block to group content together.
|
||
|
||
8
|
||
00:00:33,000 --> 00:00:36,281
|
||
提醒一下，当您打开列表视图时，
|
||
As a reminder, when you open up the list view,
|
||
|
||
9
|
||
00:00:36,281 --> 00:00:40,000
|
||
您可以在内容层和嵌套区块之间导航。
|
||
you can navigate between layers of content and nested blocks.
|
||
|
||
10
|
||
00:00:40,000 --> 00:00:45,000
|
||
让我们查看此主页上的第二部分，看看实际效果。
|
||
Let's look at the second section on this home page to see this in action.
|
||
|
||
11
|
||
00:00:45,000 --> 00:00:48,000
|
||
那么我将继续并选择分栏区块。
|
||
So I'll go ahead and select the columns block.
|
||
|
||
12
|
||
00:00:48,000 --> 00:00:55,000
|
||
当我们展开分栏区块时，我们将看到内部的所有区块。
|
||
And when we expand the columns block, we will see all the blocks inside.
|
||
|
||
13
|
||
00:00:55,000 --> 00:01:04,000
|
||
在左栏中，我们会注意到一个标题区块、一个分隔符区块和一个段落区块。
|
||
In the left column, we will notice a heading block, a separator block and a paragraph block.
|
||
|
||
14
|
||
00:01:04,000 --> 00:01:11,000
|
||
而在右栏中，我们将看到一个包含四张不同图片的相册区块。
|
||
And in the right column, we will see a gallery block with four different images.
|
||
|
||
15
|
||
00:01:11,000 --> 00:01:14,000
|
||
让我们一起来创建一些示例。
|
||
Let's go ahead and create some examples together.
|
||
|
||
16
|
||
00:01:14,000 --> 00:01:18,000
|
||
首先，我将使用一个群组区块将一些区块组合在一起。
|
||
Firstly, I'm going to group some blocks together using a group block.
|
||
|
||
17
|
||
00:01:18,000 --> 00:01:24,000
|
||
但在此之前，我要先添加一个标题区块。
|
||
But first, I'm going to add a heading block.
|
||
|
||
18
|
||
00:01:24,000 --> 00:01:26,710
|
||
然后给它起个合适的名字。
|
||
And then name it appropriately.
|
||
|
||
19
|
||
00:01:26,710 --> 00:01:31,000
|
||
在这个例子中，就叫“笑是最好的良药”。
|
||
In this case, laughter is the best medicine.
|
||
|
||
20
|
||
00:01:31,000 --> 00:01:37,000
|
||
然后我按回车键，添加一个分栏区块。
|
||
Then I'll press enter and add a columns block.
|
||
|
||
21
|
||
00:01:37,000 --> 00:01:41,000
|
||
并选择两栏等宽。
|
||
And select two equal columns.
|
||
|
||
22
|
||
00:01:41,000 --> 00:01:49,000
|
||
然后在左栏和右栏里添加一些文字。
|
||
And then add some text in the left column and in the right column.
|
||
|
||
23
|
||
00:01:49,000 --> 00:01:57,500
|
||
接着，我会在列表视图中按住 Shift 键并点击鼠标，来选中这两个区块，
|
||
Then I will select both of these blocks in my list view by holding in shift and clicking on my mouse,
|
||
|
||
24
|
||
00:01:57,500 --> 00:02:06,000
|
||
这样就可以选中多个区块，然后使用区块工具栏将它们组合成一个群组区块。
|
||
which allows you to select multiple blocks and then use the block toolbar to group them together in a group block.
|
||
|
||
25
|
||
00:02:06,000 --> 00:02:10,000
|
||
接下来，我想把这个群组区块的宽度改为宽宽度。
|
||
Next, I would like to change the width of the group block to wide width.
|
||
|
||
26
|
||
00:02:10,000 --> 00:02:17,000
|
||
但在我能这样做之前，我必须取消选中“内部区块使用内容宽度”这个选项。
|
||
But before I will be able to do that, I have to deselect inner blocks use content width.
|
||
|
||
27
|
||
00:02:17,000 --> 00:02:23,750
|
||
只有在我取消选中这个选项后，嵌套的区块才能使用内容宽度选项，
|
||
Only once I've deselected this option, the nested blocks will be able to use the content width options
|
||
|
||
28
|
||
00:02:23,750 --> 00:02:26,000
|
||
比如宽宽度和全宽度。
|
||
such as wide width and full width.
|
||
|
||
29
|
||
00:02:26,000 --> 00:02:29,355
|
||
如果我不取消选中这个选项，
|
||
If I don't deselect this option, I won't be able to change the alignment to full width for example.
|
||
|
||
30
|
||
00:02:29,355 --> 00:02:34,000
|
||
我就无法将对齐方式改为全宽度。
|
||
I won't be able to change the alignment to full width for example.
|
||
|
||
31
|
||
00:02:34,000 --> 00:02:38,000
|
||
如你所见，没有任何变化。
|
||
As you can see, nothing happens.
|
||
|
||
32
|
||
00:02:38,000 --> 00:02:43,854
|
||
所以一旦取消选中，我就可以回到区块工具栏，将宽度改为宽宽度，
|
||
So once deselected, I can return to the block toolbar and change the width to wide width
|
||
|
||
33
|
||
00:02:43,854 --> 00:02:46,000
|
||
而不受主题设定的限制。
|
||
without the constraints set by the theme.
|
||
|
||
34
|
||
00:02:46,000 --> 00:02:50,000
|
||
接下来，我们可以打开样式选项卡，进一步设计我们的区块。
|
||
Next, we can open up the styles tab to style our block further.
|
||
|
||
35
|
||
00:02:50,000 --> 00:02:55,000
|
||
我想做的第一件事是更改群组区块的背景颜色。
|
||
The first thing I want to do is change the background color of the group block.
|
||
|
||
36
|
||
00:02:55,000 --> 00:02:56,500
|
||
另外也请注意，
|
||
And then please also note, you can add a background image to a group block if you wanted to.
|
||
|
||
37
|
||
00:02:56,500 --> 00:03:01,000
|
||
如果你愿意，也可以给群组区块添加背景图片。
|
||
you can add a background image to a group block if you wanted to.
|
||
|
||
38
|
||
00:03:01,000 --> 00:03:08,000
|
||
然后点击排版旁边的三个垂直点，查看所有可用的选项。
|
||
And click on the three vertical dots next to typography to see all the options available.
|
||
|
||
39
|
||
00:03:08,000 --> 00:03:12,235
|
||
接下来，我将继续添加一些内边距，
|
||
Next, I will go ahead and add some padding
|
||
|
||
40
|
||
00:03:12,235 --> 00:03:17,000
|
||
以便在我的区块内容周围创造更多空间。
|
||
to create more space around the content of my block.
|
||
|
||
41
|
||
00:03:17,000 --> 00:03:24,000
|
||
这样就完成了。当然，您也可以决定进一步设置您的群组区块样式。
|
||
And there you have it. And of course you may decide to style your group block even further.
|
||
|
||
42
|
||
00:03:24,000 --> 00:03:26,935
|
||
当您的页面上有多层内容时，
|
||
When you have multiple layers of content on a page,
|
||
|
||
43
|
||
00:03:26,935 --> 00:03:31,000
|
||
您可以使用群组区块来重命名各个部分。
|
||
you can use the group block to rename sections.
|
||
|
||
44
|
||
00:03:31,000 --> 00:03:36,250
|
||
所以在上面的例子中，我们看到第一部分叫做“我们的故事”，
|
||
So in the top example, we will see the first section is called our story
|
||
|
||
45
|
||
00:03:36,250 --> 00:03:40,000
|
||
现在我可以选择下面的群组区块并重命名它。
|
||
and now I can select the group block below and rename it.
|
||
|
||
46
|
||
00:03:40,000 --> 00:03:44,000
|
||
在这个例子中，重命名为“客户评价”。
|
||
In this case, testimonial.
|
||
|
||
47
|
||
00:03:44,000 --> 00:03:51,000
|
||
因此，群组区块的这个功能将允许您构建和组织您的内容。
|
||
So this feature of the group block will allow you to structure and organize your content.
|
||
|
||
48
|
||
00:03:51,000 --> 00:03:56,000
|
||
在下一个例子中，让我们使用媒体和文本区块来将区块组合在一起。
|
||
In the next example, let's use the media and text block to group blocks together.
|
||
|
||
49
|
||
00:03:56,000 --> 00:04:00,000
|
||
那么，让我们继续添加媒体和文本区块。
|
||
So let's go ahead and add the media and text block.
|
||
|
||
50
|
||
00:04:00,000 --> 00:04:07,000
|
||
然后在左侧，我们可以从媒体库添加一张图片。
|
||
And then on the left, we can add an image from our media library.
|
||
|
||
51
|
||
00:04:07,000 --> 00:04:11,000
|
||
在右侧，我们可以开始添加内容。
|
||
And on the right, we can start adding content.
|
||
|
||
52
|
||
00:04:11,000 --> 00:04:18,000
|
||
在顶部，我将添加一个标题并将其命名为“寿司是艺术”。
|
||
At the top, I will add a heading and name it sushi is art.
|
||
|
||
53
|
||
00:04:18,000 --> 00:04:22,000
|
||
按回车键，然后添加一些文本。
|
||
Press enter and then add some text.
|
||
|
||
54
|
||
00:04:22,000 --> 00:04:29,000
|
||
在底部，我想添加一个行动号召，或者在这个例子中是一个按钮区块。
|
||
At the bottom, I want to add a call to action or in this case a buttons block.
|
||
|
||
55
|
||
00:04:29,000 --> 00:04:33,000
|
||
然后我会写上“了解更多”。
|
||
And then I'll say learn more.
|
||
|
||
56
|
||
00:04:33,000 --> 00:04:37,800
|
||
我将使用区块工具栏将文本加粗，
|
||
And I'll use the block toolbar to make the text bold
|
||
|
||
57
|
||
00:04:37,800 --> 00:04:41,000
|
||
并添加相关的网址。
|
||
and also to add the relevant URL.
|
||
|
||
58
|
||
00:04:41,000 --> 00:04:50,000
|
||
然后我将在列表视图中选择父区块，并将对齐方式改为宽宽度。
|
||
Then I will select the parent block in the list view and change the alignment to wide width.
|
||
|
||
59
|
||
00:04:50,000 --> 00:04:53,111
|
||
你也可以使用区块工具栏，
|
||
You can also use the block toolbar
|
||
|
||
60
|
||
00:04:53,111 --> 00:04:57,000
|
||
如果你想更改并在右侧显示图像。
|
||
if you wanted to change and show the image on the right.
|
||
|
||
61
|
||
00:04:57,000 --> 00:05:05,000
|
||
然后在下面的设置中，我会将媒体宽度改为 40。
|
||
And then below settings, I will change the media width to 40.
|
||
|
||
62
|
||
00:05:06,000 --> 00:05:13,000
|
||
然后我会打开样式选项卡，在内容周围添加一些内边距。
|
||
Then I will open up the styles tab and add some padding around the content.
|
||
|
||
63
|
||
00:05:13,000 --> 00:05:22,000
|
||
最后，我会将图像的垂直对齐方式改为行底部。
|
||
And then finally, I will change the vertical alignment of the image to a line bottom.
|
||
|
||
64
|
||
00:05:22,000 --> 00:05:28,000
|
||
就这样，我们的媒体与文本区块就完成了。
|
||
And that's it. Our media and text block is done.
|
||
|
||
65
|
||
00:05:28,000 --> 00:05:31,000
|
||
在下一个例子中，我们将使用栏目区块。
|
||
In the next example, we are going to use the columns block.
|
||
|
||
66
|
||
00:05:31,000 --> 00:05:33,333
|
||
栏目区块是最有效的区块之一，
|
||
The columns block is one of the most effective blocks to use
|
||
|
||
67
|
||
00:05:33,333 --> 00:05:36,000
|
||
可用于创建复杂的布局或各种设计。
|
||
to create complex layouts or various designs.
|
||
|
||
68
|
||
00:05:36,000 --> 00:05:44,000
|
||
那么，我们继续添加一个栏目区块，然后选择三个等宽的栏目。
|
||
So let's go ahead and add a columns block and then select three equal columns.
|
||
|
||
69
|
||
00:05:44,000 --> 00:05:52,000
|
||
然后在左栏中，我将继续添加一些文本，并将其命名为“拼盘”。
|
||
And then in the left column, I'm going to go ahead and add some text and name it platters.
|
||
|
||
70
|
||
00:05:52,000 --> 00:05:56,000
|
||
按回车键，然后添加一个段落。
|
||
Press enter and then add a paragraph.
|
||
|
||
71
|
||
00:05:56,000 --> 00:06:07,000
|
||
在那下面，我将添加一个图像区块，并从我的媒体库中选择一张图片。
|
||
Below that, I'm going to add an image block and select an image from my media library.
|
||
|
||
72
|
||
00:06:07,000 --> 00:06:16,000
|
||
然后我会选中顶部的文本，将其加粗并放大字号。
|
||
Then I will select the text at the top, make it bold and also enlarge the size.
|
||
|
||
73
|
||
00:06:16,000 --> 00:06:22,000
|
||
接着将两个段落的文本都居中对齐。
|
||
Followed by centering the text of both paragraphs.
|
||
|
||
74
|
||
00:06:22,000 --> 00:06:31,000
|
||
一旦文本居中对齐后，我会选中图像区块，并将宽高比改为正方形。
|
||
And once it's aligned center, I will select the image block and change the aspect ratio to square.
|
||
|
||
75
|
||
00:06:31,000 --> 00:06:35,571
|
||
然后，我会选择主列区块或父区块，
|
||
Then I will select the main columns block or the parent block
|
||
|
||
76
|
||
00:06:35,571 --> 00:06:39,000
|
||
并将对齐方式改为宽对齐。
|
||
and change the alignment to wide width.
|
||
|
||
77
|
||
00:06:39,000 --> 00:06:46,000
|
||
接着，我会转到样式设置，为区块内容添加一些内边距。
|
||
Then I will make my way to styles and add some padding around the content of the block.
|
||
|
||
78
|
||
00:06:46,000 --> 00:06:53,000
|
||
以及三个列之间的区块间距。
|
||
As well as block spacing between the three columns.
|
||
|
||
79
|
||
00:06:53,000 --> 00:06:58,077
|
||
完成区块的样式设置后，
|
||
When I'm done with styling the block,
|
||
|
||
80
|
||
00:06:58,077 --> 00:07:05,000
|
||
我将选择左侧列并将其复制两次。
|
||
I'm going to select the left column and duplicate it twice.
|
||
|
||
81
|
||
00:07:05,000 --> 00:07:13,000
|
||
复制完成后，我们就可以删除那些空列了。
|
||
And once duplicated, we can delete the empty columns.
|
||
|
||
82
|
||
00:07:13,000 --> 00:07:20,000
|
||
然后，我们就可以继续按需修改内容了。
|
||
And then we can go ahead and modify the content as we please.
|
||
|
||
83
|
||
00:07:20,000 --> 00:07:23,000
|
||
在最后一个例子中，我们将使用封面区块。
|
||
In the last example, we are going to use a cover block.
|
||
|
||
84
|
||
00:07:23,000 --> 00:07:28,000
|
||
封面区块允许你在图片或视频上方显示文本和其他内容。
|
||
The cover block allows you to display text and other content on top of an image or video.
|
||
|
||
85
|
||
00:07:28,000 --> 00:07:32,000
|
||
这是一个非常适合用于页眉和横幅样式显示的区块。
|
||
It is a great block to use for headers and banner style displays.
|
||
|
||
86
|
||
00:07:32,000 --> 00:07:35,000
|
||
那么，我们继续添加封面区块吧。
|
||
So let's go ahead and add our cover block.
|
||
|
||
87
|
||
00:07:35,000 --> 00:07:41,000
|
||
然后你会看到，你可以选择一个颜色叠加层。
|
||
Then you will see that you can select a color overlay.
|
||
|
||
88
|
||
00:07:41,000 --> 00:07:47,000
|
||
但我要继续操作，从我的媒体库添加一张图片作为背景。
|
||
But I'm going to go ahead and add an image from my media library as background.
|
||
|
||
89
|
||
00:07:47,000 --> 00:07:56,000
|
||
接着，我会添加一些文本，后面再跟一个按钮区块。
|
||
Then I will add some text, followed by a buttons block.
|
||
|
||
90
|
||
00:07:56,000 --> 00:08:00,000
|
||
我会写上“立即订购”。
|
||
And I will write order now.
|
||
|
||
91
|
||
00:08:00,000 --> 00:08:10,000
|
||
然后，更改我的行动号召的背景颜色和文本颜色。
|
||
And then change the background color and the text color of my call to action.
|
||
|
||
92
|
||
00:08:11,000 --> 00:08:19,000
|
||
然后我将选中这两个区块，并使用堆叠区块将它们堆叠在一起。
|
||
Then I will select both of the blocks and stack them together using a stack block.
|
||
|
||
93
|
||
00:08:19,000 --> 00:08:23,000
|
||
这让我可以同时自定义这些区块。
|
||
This allows me to customize the blocks simultaneously.
|
||
|
||
94
|
||
00:08:23,000 --> 00:08:28,029
|
||
接着，我会将堆叠区块对齐到中心，
|
||
Then I will justify the stack block to center,
|
||
|
||
95
|
||
00:08:28,029 --> 00:08:34,000
|
||
选中封面区块，并将对齐方式改为宽宽度。
|
||
select the cover block and change the alignment to wide width.
|
||
|
||
96
|
||
00:08:34,000 --> 00:08:39,000
|
||
并且别忘了取消选中“内部区块使用内容宽度”。
|
||
And don't forget to deselect inner blocks use content width.
|
||
|
||
97
|
||
00:08:39,000 --> 00:08:41,000
|
||
现在我们可以进行进一步的修改。
|
||
Now we can make further modifications.
|
||
|
||
98
|
||
00:08:41,000 --> 00:08:49,000
|
||
我会放大文字“享受八折优惠”。
|
||
I will enlarge the text, enjoy 20% off.
|
||
|
||
99
|
||
00:08:49,000 --> 00:08:56,000
|
||
以及按钮区块。
|
||
As well as the buttons block.
|
||
|
||
100
|
||
00:08:56,000 --> 00:08:59,769
|
||
我还想把按钮区块的文字加粗，
|
||
I also want to make the text of the buttons block bold
|
||
|
||
101
|
||
00:08:59,769 --> 00:09:03,000
|
||
并且别忘了添加您的网址。
|
||
and don't forget to add your URL.
|
||
|
||
102
|
||
00:09:03,000 --> 00:09:05,000
|
||
然后我将选中封面区块。
|
||
Then I will select the cover block.
|
||
|
||
103
|
||
00:09:05,000 --> 00:09:12,000
|
||
请注意，在区块工具栏中，您可以选择将区块切换为全高。
|
||
And please note in the block toolbar you have the option to toggle the block to full height.
|
||
|
||
104
|
||
00:09:12,000 --> 00:09:19,000
|
||
但我们也可以手动减小或增大尺寸。
|
||
But then we can also manually decrease or increase the size.
|
||
|
||
105
|
||
00:09:19,000 --> 00:09:27,667
|
||
接着，我会打开样式选项卡，将叠加层不透明度改为 30，
|
||
Then I will open up the styles tab and change the overlay opacity to 30
|
||
|
||
106
|
||
00:09:27,667 --> 00:09:30,000
|
||
让它变得更亮。
|
||
to make it lighter.
|
||
|
||
107
|
||
00:09:30,000 --> 00:09:35,000
|
||
然后我的封面区块就准备好了。
|
||
And then my cover block is ready to go.
|
||
|
||
108
|
||
00:09:35,000 --> 00:09:39,686
|
||
我相信您现在对嵌套和组合区块更有信心了。
|
||
I trust you now feel more confident nesting and grouping blocks together.
|
||
|
