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
10 KiB
Text
431 lines
10 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
|
|
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
|
|
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
|
|
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.
|
