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)
411 lines
9.5 KiB
Text
411 lines
9.5 KiB
Text
1
|
|
00:00:00,000 --> 00:00:04,000
|
|
We have learned to use and group blocks to build our site.
|
|
|
|
2
|
|
00:00:04,000 --> 00:00:09,714
|
|
But do you know there is a shortcut to create custom content layouts faster,
|
|
|
|
3
|
|
00:00:09,714 --> 00:00:12,000
|
|
and that is using block patterns.
|
|
|
|
4
|
|
00:00:12,000 --> 00:00:16,000
|
|
We are not all designers and it is time consuming to create layouts.
|
|
|
|
5
|
|
00:00:16,000 --> 00:00:19,000
|
|
Block patterns provide a solution.
|
|
|
|
6
|
|
00:00:19,000 --> 00:00:24,750
|
|
The learning objectives for this lesson are using and modifying available pre-made block patterns,
|
|
|
|
7
|
|
00:00:24,750 --> 00:00:30,750
|
|
exploring the block pattern directory, creating your own synced and non-synced patterns,
|
|
|
|
8
|
|
00:00:30,750 --> 00:00:34,000
|
|
and lastly utilizing header and photo patterns.
|
|
|
|
9
|
|
00:00:34,000 --> 00:00:36,000
|
|
But what are patterns?
|
|
|
|
10
|
|
00:00:36,000 --> 00:00:39,912
|
|
Block patterns are pre-made designs or layouts of grouped blocks
|
|
|
|
11
|
|
00:00:39,912 --> 00:00:43,000
|
|
that are available to modify and change to meet your needs.
|
|
|
|
12
|
|
00:00:43,000 --> 00:00:48,000
|
|
It will essentially save you time, but also enhance creativity and design.
|
|
|
|
13
|
|
00:00:48,000 --> 00:00:53,000
|
|
Instead of nesting and grouping blocks together, patterns have already done that for you.
|
|
|
|
14
|
|
00:00:53,000 --> 00:00:57,513
|
|
And in one click, you will have access to beautiful and functional layouts
|
|
|
|
15
|
|
00:00:57,513 --> 00:01:01,000
|
|
from call to actions, headers, columns, galleries and more.
|
|
|
|
16
|
|
00:01:01,000 --> 00:01:07,136
|
|
To add a pattern, click on the plus icon on the top left, also called the insertor,
|
|
|
|
17
|
|
00:01:07,136 --> 00:01:11,000
|
|
and open up the patterns tab on the right next to blocks.
|
|
|
|
18
|
|
00:01:11,000 --> 00:01:14,000
|
|
At the top, you will see all patterns.
|
|
|
|
19
|
|
00:01:14,000 --> 00:01:21,000
|
|
And below that, all your synced and non-synced patterns you have created yourself.
|
|
|
|
20
|
|
00:01:21,000 --> 00:01:25,974
|
|
Synced patterns are marked with a purple icon and non-synced patterns don't have one,
|
|
|
|
21
|
|
00:01:25,974 --> 00:01:30,000
|
|
but more about synced and non-synced patterns in a moment.
|
|
|
|
22
|
|
00:01:30,000 --> 00:01:34,000
|
|
Below my patterns, you will see the patterns that come with your theme.
|
|
|
|
23
|
|
00:01:34,000 --> 00:01:39,000
|
|
They are organized into various categories to help you find what you need.
|
|
|
|
24
|
|
00:01:39,000 --> 00:01:41,333
|
|
Once you click on the category,
|
|
|
|
25
|
|
00:01:41,333 --> 00:01:46,000
|
|
you will see a preview of all the available patterns when you scroll down.
|
|
|
|
26
|
|
00:01:46,000 --> 00:01:50,645
|
|
You can also select explore all patterns at the bottom
|
|
|
|
27
|
|
00:01:50,645 --> 00:01:54,000
|
|
to get a bird's eye view of the patterns that come with your theme.
|
|
|
|
28
|
|
00:01:54,000 --> 00:01:59,000
|
|
You can also go through them category by category.
|
|
|
|
29
|
|
00:01:59,000 --> 00:02:02,000
|
|
Let's look at a quick example.
|
|
|
|
30
|
|
00:02:02,000 --> 00:02:06,381
|
|
When you select a pattern, in this case one from my featured category,
|
|
|
|
31
|
|
00:02:06,381 --> 00:02:10,000
|
|
you will be able to modify the pattern to meet your design requirements.
|
|
|
|
32
|
|
00:02:10,000 --> 00:02:15,000
|
|
It can easily be edited in the same way as any other block.
|
|
|
|
33
|
|
00:02:15,000 --> 00:02:20,000
|
|
You can change the alignment of the container block.
|
|
|
|
34
|
|
00:02:20,000 --> 00:02:23,000
|
|
You can edit the heading.
|
|
|
|
35
|
|
00:02:23,000 --> 00:02:26,000
|
|
Update the content.
|
|
|
|
36
|
|
00:02:26,000 --> 00:02:33,000
|
|
Replace the images.
|
|
|
|
37
|
|
00:02:33,000 --> 00:02:40,000
|
|
And for example, change the background color of your pattern as well as other styling options.
|
|
|
|
38
|
|
00:02:40,000 --> 00:02:44,000
|
|
But all the hard work and the layout has already been done for you.
|
|
|
|
39
|
|
00:02:44,000 --> 00:02:51,000
|
|
The only thing you have to do is select the pattern and modify it to meet your requirements.
|
|
|
|
40
|
|
00:02:51,000 --> 00:02:54,000
|
|
The patterns that come with your theme are limited.
|
|
|
|
41
|
|
00:02:54,000 --> 00:02:59,000
|
|
If you want more patterns to choose from, you can explore the block pattern directory.
|
|
|
|
42
|
|
00:02:59,000 --> 00:03:04,000
|
|
To do that, let's make our way to the WordPress.org website.
|
|
|
|
43
|
|
00:03:04,000 --> 00:03:10,000
|
|
Click on extend and then select patterns.
|
|
|
|
44
|
|
00:03:10,000 --> 00:03:15,000
|
|
Here you can search and find new patterns to use on your website.
|
|
|
|
45
|
|
00:03:15,000 --> 00:03:18,938
|
|
You will notice there is an option to only view curated patterns
|
|
|
|
46
|
|
00:03:18,938 --> 00:03:24,000
|
|
or hundreds of patterns that have been added by the WordPress community.
|
|
|
|
47
|
|
00:03:24,000 --> 00:03:28,610
|
|
You can type in the search block, search by category
|
|
|
|
48
|
|
00:03:28,610 --> 00:03:33,000
|
|
or browse through all the available options until you find what you're looking for.
|
|
|
|
49
|
|
00:03:33,000 --> 00:03:35,357
|
|
Once you find the pattern you are after,
|
|
|
|
50
|
|
00:03:35,357 --> 00:03:39,000
|
|
you can click on the star to add it to your favorites.
|
|
|
|
51
|
|
00:03:39,000 --> 00:03:49,909
|
|
When you are ready to add the pattern to your site, open the pattern, click on copy pattern,
|
|
|
|
52
|
|
00:03:49,909 --> 00:03:54,000
|
|
return to your website and then paste.
|
|
|
|
53
|
|
00:03:54,000 --> 00:04:00,000
|
|
And now you can start changing and modifying your pattern.
|
|
|
|
54
|
|
00:04:00,000 --> 00:04:06,000
|
|
And this is what my pattern looks like after altering it to meet my design needs.
|
|
|
|
55
|
|
00:04:06,000 --> 00:04:10,606
|
|
When you make your way to the site editor, and in this side view,
|
|
|
|
56
|
|
00:04:10,606 --> 00:04:14,000
|
|
you will see a patterns tab.
|
|
|
|
57
|
|
00:04:14,000 --> 00:04:20,105
|
|
And here you can manage, edit and create all of your patterns, synced or not,
|
|
|
|
58
|
|
00:04:20,105 --> 00:04:22,000
|
|
along with your template parts.
|
|
|
|
59
|
|
00:04:22,000 --> 00:04:26,000
|
|
When you click on my patterns, you will see all your custom patterns.
|
|
|
|
60
|
|
00:04:26,000 --> 00:04:31,000
|
|
The synced patterns have a purple icon and the unsynced patterns don't.
|
|
|
|
61
|
|
00:04:31,000 --> 00:04:33,927
|
|
If you hover over the purple icon,
|
|
|
|
62
|
|
00:04:33,927 --> 00:04:39,000
|
|
it clearly says editing this pattern will also update anywhere it is used.
|
|
|
|
63
|
|
00:04:39,000 --> 00:04:44,176
|
|
Below custom patterns, we will see all the available categories
|
|
|
|
64
|
|
00:04:44,176 --> 00:04:47,000
|
|
as well as the patterns that are provided by your theme.
|
|
|
|
65
|
|
00:04:47,000 --> 00:04:52,614
|
|
It is also worth noting when you click on the three vertical dots of a pattern that comes with your theme,
|
|
|
|
66
|
|
00:04:52,614 --> 00:04:57,000
|
|
you can also duplicate and add that pattern to your custom patterns area.
|
|
|
|
67
|
|
00:04:57,000 --> 00:05:02,000
|
|
And when you've saved it as a custom pattern, you can modify it as you please.
|
|
|
|
68
|
|
00:05:02,000 --> 00:05:08,000
|
|
And at the bottom, all your header, footer and general template part patterns.
|
|
|
|
69
|
|
00:05:08,000 --> 00:05:10,308
|
|
Let's start with your own patterns.
|
|
|
|
70
|
|
00:05:10,308 --> 00:05:13,513
|
|
If you click on the plus icon next to patterns,
|
|
|
|
71
|
|
00:05:13,513 --> 00:05:18,000
|
|
you can create your own custom synced or unsynced patterns.
|
|
|
|
72
|
|
00:05:18,000 --> 00:05:22,000
|
|
After naming it, you can add it to the relevant category.
|
|
|
|
73
|
|
00:05:22,000 --> 00:05:27,000
|
|
In this case, a call to action category.
|
|
|
|
74
|
|
00:05:27,000 --> 00:05:31,000
|
|
And then you can choose to sync it or not.
|
|
|
|
75
|
|
00:05:31,000 --> 00:05:35,000
|
|
In this example, I will choose to sync the pattern.
|
|
|
|
76
|
|
00:05:35,000 --> 00:05:41,000
|
|
And at the bottom, it says sync this pattern across multiple locations.
|
|
|
|
77
|
|
00:05:41,000 --> 00:05:44,000
|
|
And now you can start creating your synced pattern.
|
|
|
|
78
|
|
00:05:44,000 --> 00:05:48,286
|
|
And when it is ready, we can click save.
|
|
|
|
79
|
|
00:05:48,286 --> 00:05:54,471
|
|
To create a pattern in the block editor, merely select the design,
|
|
|
|
80
|
|
00:05:54,471 --> 00:06:02,000
|
|
then click on the three vertical dots of the block toolbar, and select create pattern.
|
|
|
|
81
|
|
00:06:02,000 --> 00:06:07,000
|
|
And then follow the same process as before.
|
|
|
|
82
|
|
00:06:07,000 --> 00:06:12,000
|
|
And I will once again select a synced pattern.
|
|
|
|
83
|
|
00:06:12,000 --> 00:06:15,188
|
|
So if you love a design, you can save it
|
|
|
|
84
|
|
00:06:15,188 --> 00:06:18,000
|
|
and reuse it as a synced or non-synced pattern.
|
|
|
|
85
|
|
00:06:18,000 --> 00:06:21,000
|
|
Lastly, let's talk about template parts.
|
|
|
|
86
|
|
00:06:21,000 --> 00:06:26,000
|
|
To manage your header and footer, you have template part patterns at your disposal.
|
|
|
|
87
|
|
00:06:26,000 --> 00:06:28,364
|
|
Templates create a design for a web page,
|
|
|
|
88
|
|
00:06:28,364 --> 00:06:32,000
|
|
and this is usually done by adding a header and footer template part.
|
|
|
|
89
|
|
00:06:32,000 --> 00:06:41,000
|
|
Let's look at an example and open up our page template.
|
|
|
|
90
|
|
00:06:41,000 --> 00:06:45,730
|
|
And when you open your page template, we can go ahead and select our current header,
|
|
|
|
91
|
|
00:06:45,730 --> 00:06:48,000
|
|
and then click on the three vertical dots.
|
|
|
|
92
|
|
00:06:48,000 --> 00:06:51,000
|
|
And now we can select replace header.
|
|
|
|
93
|
|
00:06:51,000 --> 00:06:55,900
|
|
And when you do this, you can select one of your existing template parts
|
|
|
|
94
|
|
00:06:55,900 --> 00:06:58,000
|
|
or patterns that come with your theme.
|
|
|
|
95
|
|
00:06:58,000 --> 00:07:05,000
|
|
And it works exactly the same way with your footer.
|
|
|
|
96
|
|
00:07:05,000 --> 00:07:09,000
|
|
Below patterns, you can manage and edit your existing template parts.
|
|
|
|
97
|
|
00:07:09,000 --> 00:07:12,818
|
|
To add a new template part, click on the plus icon next to patterns
|
|
|
|
98
|
|
00:07:12,818 --> 00:07:15,000
|
|
and select create template part.
|
|
|
|
99
|
|
00:07:15,000 --> 00:07:22,000
|
|
Here you will be able to select between creating a general footer or header template part.
|
|
|
|
100
|
|
00:07:22,000 --> 00:07:31,000
|
|
To create a new header template part, name it appropriately, select header, and then click create.
|
|
|
|
101
|
|
00:07:31,000 --> 00:07:37,000
|
|
And then you can start building your new header in template editing mode.
|
|
|
|
102
|
|
00:07:37,000 --> 00:07:38,800
|
|
I trust that patterns will also become
|
|
|
|
103
|
|
00:07:38,800 --> 00:07:41,000
|
|
one of your favorite new tools.
|
