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)
355 lines
9.5 KiB
Text
355 lines
9.5 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:33,000
|
|
We typically use container blocks such as the group block, columns block, cover block, the media and text block or row block to group content together.
|
|
|
|
7
|
|
00:00:33,000 --> 00:00:40,000
|
|
As a reminder, when you open up the list view, you can navigate between layers of content and nested blocks.
|
|
|
|
8
|
|
00:00:40,000 --> 00:00:45,000
|
|
Let's look at the second section on this home page to see this in action.
|
|
|
|
9
|
|
00:00:45,000 --> 00:00:48,000
|
|
So I'll go ahead and select the columns block.
|
|
|
|
10
|
|
00:00:48,000 --> 00:00:55,000
|
|
And when we expand the columns block, we will see all the blocks inside.
|
|
|
|
11
|
|
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.
|
|
|
|
12
|
|
00:01:04,000 --> 00:01:11,000
|
|
And in the right column, we will see a gallery block with four different images.
|
|
|
|
13
|
|
00:01:11,000 --> 00:01:14,000
|
|
Let's go ahead and create some examples together.
|
|
|
|
14
|
|
00:01:14,000 --> 00:01:18,000
|
|
Firstly, I'm going to group some blocks together using a group block.
|
|
|
|
15
|
|
00:01:18,000 --> 00:01:24,000
|
|
But first, I'm going to add a heading block.
|
|
|
|
16
|
|
00:01:24,000 --> 00:01:31,000
|
|
And then name it appropriately. In this case, laughter is the best medicine.
|
|
|
|
17
|
|
00:01:31,000 --> 00:01:37,000
|
|
Then I'll press enter and add a columns block.
|
|
|
|
18
|
|
00:01:37,000 --> 00:01:41,000
|
|
And select two equal columns.
|
|
|
|
19
|
|
00:01:41,000 --> 00:01:49,000
|
|
And then add some text in the left column and in the right column.
|
|
|
|
20
|
|
00:01:49,000 --> 00:02:06,000
|
|
Then I will select both of these blocks in my list view by holding in shift and clicking on my mouse, which allows you to select multiple blocks and then use the block toolbar to group them together in a group block.
|
|
|
|
21
|
|
00:02:06,000 --> 00:02:10,000
|
|
Next, I would like to change the width of the group block to wide width.
|
|
|
|
22
|
|
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.
|
|
|
|
23
|
|
00:02:17,000 --> 00:02:26,000
|
|
Only once I've deselected this option, the nested blocks will be able to use the content width options such as wide width and full width.
|
|
|
|
24
|
|
00:02:26,000 --> 00:02:34,000
|
|
If I don't deselect this option, I won't be able to change the alignment to full width for example.
|
|
|
|
25
|
|
00:02:34,000 --> 00:02:38,000
|
|
As you can see, nothing happens.
|
|
|
|
26
|
|
00:02:38,000 --> 00:02:46,000
|
|
So once deselected, I can return to the block toolbar and change the width to wide width without the constraints set by the theme.
|
|
|
|
27
|
|
00:02:46,000 --> 00:02:50,000
|
|
Next, we can open up the styles tab to style our block further.
|
|
|
|
28
|
|
00:02:50,000 --> 00:02:55,000
|
|
The first thing I want to do is change the background color of the group block.
|
|
|
|
29
|
|
00:02:55,000 --> 00:03:01,000
|
|
And then please also note, you can add a background image to a group block if you wanted to.
|
|
|
|
30
|
|
00:03:01,000 --> 00:03:08,000
|
|
And click on the three vertical dots next to typography to see all the options available.
|
|
|
|
31
|
|
00:03:08,000 --> 00:03:17,000
|
|
Next, I will go ahead and add some padding to create more space around the content of my block.
|
|
|
|
32
|
|
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.
|
|
|
|
33
|
|
00:03:24,000 --> 00:03:31,000
|
|
When you have multiple layers of content on a page, you can use the group block to rename sections.
|
|
|
|
34
|
|
00:03:31,000 --> 00:03:40,000
|
|
So in the top example, we will see the first section is called our story and now I can select the group block below and rename it.
|
|
|
|
35
|
|
00:03:40,000 --> 00:03:44,000
|
|
In this case, testimonial.
|
|
|
|
36
|
|
00:03:44,000 --> 00:03:51,000
|
|
So this feature of the group block will allow you to structure and organize your content.
|
|
|
|
37
|
|
00:03:51,000 --> 00:03:56,000
|
|
In the next example, let's use the media and text block to group blocks together.
|
|
|
|
38
|
|
00:03:56,000 --> 00:04:00,000
|
|
So let's go ahead and add the media and text block.
|
|
|
|
39
|
|
00:04:00,000 --> 00:04:07,000
|
|
And then on the left, we can add an image from our media library.
|
|
|
|
40
|
|
00:04:07,000 --> 00:04:11,000
|
|
And on the right, we can start adding content.
|
|
|
|
41
|
|
00:04:11,000 --> 00:04:18,000
|
|
At the top, I will add a heading and name it sushi is art.
|
|
|
|
42
|
|
00:04:18,000 --> 00:04:22,000
|
|
Press enter and then add some text.
|
|
|
|
43
|
|
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.
|
|
|
|
44
|
|
00:04:29,000 --> 00:04:33,000
|
|
And then I'll say learn more.
|
|
|
|
45
|
|
00:04:33,000 --> 00:04:41,000
|
|
And I'll use the block toolbar to make the text bold and also to add the relevant URL.
|
|
|
|
46
|
|
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.
|
|
|
|
47
|
|
00:04:50,000 --> 00:04:57,000
|
|
You can also use the block toolbar if you wanted to change and show the image on the right.
|
|
|
|
48
|
|
00:04:57,000 --> 00:05:05,000
|
|
And then below settings, I will change the media width to 40.
|
|
|
|
49
|
|
00:05:06,000 --> 00:05:13,000
|
|
Then I will open up the styles tab and add some padding around the content.
|
|
|
|
50
|
|
00:05:13,000 --> 00:05:22,000
|
|
And then finally, I will change the vertical alignment of the image to a line bottom.
|
|
|
|
51
|
|
00:05:22,000 --> 00:05:28,000
|
|
And that's it. Our media and text block is done.
|
|
|
|
52
|
|
00:05:28,000 --> 00:05:31,000
|
|
In the next example, we are going to use the columns block.
|
|
|
|
53
|
|
00:05:31,000 --> 00:05:36,000
|
|
The columns block is one of the most effective blocks to use to create complex layouts or various designs.
|
|
|
|
54
|
|
00:05:36,000 --> 00:05:44,000
|
|
So let's go ahead and add a columns block and then select three equal columns.
|
|
|
|
55
|
|
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.
|
|
|
|
56
|
|
00:05:52,000 --> 00:05:56,000
|
|
Press enter and then add a paragraph.
|
|
|
|
57
|
|
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.
|
|
|
|
58
|
|
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.
|
|
|
|
59
|
|
00:06:16,000 --> 00:06:22,000
|
|
Followed by centering the text of both paragraphs.
|
|
|
|
60
|
|
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.
|
|
|
|
61
|
|
00:06:31,000 --> 00:06:39,000
|
|
Then I will select the main columns block or the parent block and change the alignment to wide width.
|
|
|
|
62
|
|
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.
|
|
|
|
63
|
|
00:06:46,000 --> 00:06:53,000
|
|
As well as block spacing between the three columns.
|
|
|
|
64
|
|
00:06:53,000 --> 00:07:05,000
|
|
When I'm done with styling the block, I'm going to select the left column and duplicate it twice.
|
|
|
|
65
|
|
00:07:05,000 --> 00:07:13,000
|
|
And once duplicated, we can delete the empty columns.
|
|
|
|
66
|
|
00:07:13,000 --> 00:07:20,000
|
|
And then we can go ahead and modify the content as we please.
|
|
|
|
67
|
|
00:07:20,000 --> 00:07:23,000
|
|
In the last example, we are going to use a cover block.
|
|
|
|
68
|
|
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.
|
|
|
|
69
|
|
00:07:28,000 --> 00:07:32,000
|
|
It is a great block to use for headers and banner style displays.
|
|
|
|
70
|
|
00:07:32,000 --> 00:07:35,000
|
|
So let's go ahead and add our cover block.
|
|
|
|
71
|
|
00:07:35,000 --> 00:07:41,000
|
|
Then you will see that you can select a color overlay.
|
|
|
|
72
|
|
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.
|
|
|
|
73
|
|
00:07:47,000 --> 00:07:56,000
|
|
Then I will add some text, followed by a buttons block.
|
|
|
|
74
|
|
00:07:56,000 --> 00:08:00,000
|
|
And I will write order now.
|
|
|
|
75
|
|
00:08:00,000 --> 00:08:10,000
|
|
And then change the background color and the text color of my call to action.
|
|
|
|
76
|
|
00:08:11,000 --> 00:08:19,000
|
|
Then I will select both of the blocks and stack them together using a stack block.
|
|
|
|
77
|
|
00:08:19,000 --> 00:08:23,000
|
|
This allows me to customize the blocks simultaneously.
|
|
|
|
78
|
|
00:08:23,000 --> 00:08:34,000
|
|
Then I will justify the stack block to center, select the cover block and change the alignment to wide width.
|
|
|
|
79
|
|
00:08:34,000 --> 00:08:39,000
|
|
And don't forget to deselect inner blocks use content width.
|
|
|
|
80
|
|
00:08:39,000 --> 00:08:41,000
|
|
Now we can make further modifications.
|
|
|
|
81
|
|
00:08:41,000 --> 00:08:49,000
|
|
I will enlarge the text, enjoy 20% off.
|
|
|
|
82
|
|
00:08:49,000 --> 00:08:56,000
|
|
As well as the buttons block.
|
|
|
|
83
|
|
00:08:56,000 --> 00:09:03,000
|
|
I also want to make the text of the buttons block bold and don't forget to add your URL.
|
|
|
|
84
|
|
00:09:03,000 --> 00:09:05,000
|
|
Then I will select the cover block.
|
|
|
|
85
|
|
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.
|
|
|
|
86
|
|
00:09:12,000 --> 00:09:19,000
|
|
But then we can also manually decrease or increase the size.
|
|
|
|
87
|
|
00:09:19,000 --> 00:09:30,000
|
|
Then I will open up the styles tab and change the overlay opacity to 30 to make it lighter.
|
|
|
|
88
|
|
00:09:30,000 --> 00:09:35,000
|
|
And then my cover block is ready to go.
|
|
|
|
89
|
|
00:09:35,000 --> 00:09:39,686
|
|
I trust you now feel more confident nesting and grouping blocks together.
|
