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)
327 lines
7.6 KiB
Text
327 lines
7.6 KiB
Text
1
|
|
00:00:00,000 --> 00:00:04,000
|
|
In this lesson, we will create and customize a header and footer.
|
|
|
|
2
|
|
00:00:04,000 --> 00:00:12,000
|
|
Block themes allow us to build our entire site using blocks, including pages, posts, templates and template parts.
|
|
|
|
3
|
|
00:00:12,000 --> 00:00:16,000
|
|
We have already explored nesting blocks and using block patterns.
|
|
|
|
4
|
|
00:00:16,000 --> 00:00:20,800
|
|
In this session, I'm going to create and customize the header and footer of my site
|
|
|
|
5
|
|
00:00:20,800 --> 00:00:23,000
|
|
using patterns that come with my theme.
|
|
|
|
6
|
|
00:00:23,000 --> 00:00:27,571
|
|
Header and footer patterns provide a strong foundation to work from
|
|
|
|
7
|
|
00:00:27,571 --> 00:00:31,000
|
|
and most of the layout has already been done for you.
|
|
|
|
8
|
|
00:00:31,000 --> 00:00:37,000
|
|
Before we start, I wanted to highlight that I am using the 2024 block theme.
|
|
|
|
9
|
|
00:00:37,000 --> 00:00:40,333
|
|
And if I go to settings, reading,
|
|
|
|
10
|
|
00:00:40,333 --> 00:00:47,000
|
|
you will notice I have set a static homepage and posts page.
|
|
|
|
11
|
|
00:00:47,000 --> 00:00:52,805
|
|
And because I've done this, if we make our way to pages and open up our homepage,
|
|
|
|
12
|
|
00:00:52,805 --> 00:00:57,941
|
|
we will notice that our homepage has been assigned to the default page template.
|
|
|
|
13
|
|
00:00:57,941 --> 00:01:03,000
|
|
This same as the other pages in my navigation menu.
|
|
|
|
14
|
|
00:01:03,000 --> 00:01:05,200
|
|
Let's go ahead and get started.
|
|
|
|
15
|
|
00:01:05,200 --> 00:01:11,000
|
|
We will make our way to the site editor, where we can edit and update our templates.
|
|
|
|
16
|
|
00:01:11,000 --> 00:01:16,000
|
|
Please note, at this stage, all of our templates share the same header and footer.
|
|
|
|
17
|
|
00:01:16,000 --> 00:01:19,132
|
|
So if we open up our pages template for example,
|
|
|
|
18
|
|
00:01:19,132 --> 00:01:23,000
|
|
we will notice it is the same as our 404 template.
|
|
|
|
19
|
|
00:01:23,000 --> 00:01:31,000
|
|
And single posts template for example.
|
|
|
|
20
|
|
00:01:31,000 --> 00:01:32,579
|
|
But what does that mean?
|
|
|
|
21
|
|
00:01:32,579 --> 00:01:36,646
|
|
It means if we customize the current header and footer template part,
|
|
|
|
22
|
|
00:01:36,646 --> 00:01:39,526
|
|
it will update automatically on all the templates it's on.
|
|
|
|
23
|
|
00:01:39,526 --> 00:01:43,465
|
|
But if I replace the header or footer on a template
|
|
|
|
24
|
|
00:01:43,465 --> 00:01:49,154
|
|
I will need to manually replace it on all the other templates I am going to use it as well.
|
|
|
|
25
|
|
00:01:49,154 --> 00:01:52,360
|
|
Without further ado, I am going to open up my page template
|
|
|
|
26
|
|
00:01:52,360 --> 00:01:55,000
|
|
and start customizing my header and footer.
|
|
|
|
27
|
|
00:01:55,000 --> 00:01:59,000
|
|
Let's start with the header and open up the list view.
|
|
|
|
28
|
|
00:01:59,000 --> 00:02:03,571
|
|
I want to replace this header, so I will click on the three vertical dots
|
|
|
|
29
|
|
00:02:03,571 --> 00:02:05,857
|
|
and then select replace header.
|
|
|
|
30
|
|
00:02:05,857 --> 00:02:11,000
|
|
And now I can select from a range of patterns that come with my theme.
|
|
|
|
31
|
|
00:02:11,000 --> 00:02:15,000
|
|
I am going to select header inside full width background image.
|
|
|
|
32
|
|
00:02:15,000 --> 00:02:19,000
|
|
And once selected, I am going to start modifying.
|
|
|
|
33
|
|
00:02:19,000 --> 00:02:25,923
|
|
I will make sure I select the cover block and then replace the background image.
|
|
|
|
34
|
|
00:02:25,923 --> 00:02:31,000
|
|
With an image I have already uploaded to my media library.
|
|
|
|
35
|
|
00:02:31,000 --> 00:02:37,400
|
|
Next, I will select the site logo block and upload a transparent image
|
|
|
|
36
|
|
00:02:37,400 --> 00:02:42,520
|
|
that I have saved as a logo in my media library.
|
|
|
|
37
|
|
00:02:42,520 --> 00:02:48,244
|
|
Then I will select the cover block again, open styles and change the opacity to zero
|
|
|
|
38
|
|
00:02:48,244 --> 00:02:51,000
|
|
as I have selected a light image.
|
|
|
|
39
|
|
00:02:51,000 --> 00:02:59,000
|
|
Once I have done that, I will select my site title block and choose a darker text color.
|
|
|
|
40
|
|
00:02:59,000 --> 00:03:03,364
|
|
Then I will click on the three vertical dots next to typography
|
|
|
|
41
|
|
00:03:03,364 --> 00:03:07,000
|
|
select font family and choose a new font.
|
|
|
|
42
|
|
00:03:07,000 --> 00:03:18,368
|
|
I also want to enlarge the site title so I will go ahead and set a custom size.
|
|
|
|
43
|
|
00:03:18,368 --> 00:03:22,556
|
|
Then we can move on to our navigation block.
|
|
|
|
44
|
|
00:03:22,556 --> 00:03:29,649
|
|
Once the navigation block is selected, I will open styles,
|
|
|
|
45
|
|
00:03:29,649 --> 00:03:34,656
|
|
change the color of the text, change the font family
|
|
|
|
46
|
|
00:03:34,656 --> 00:03:43,000
|
|
and also enlarge my navigation menu by setting a custom size.
|
|
|
|
47
|
|
00:03:43,000 --> 00:03:48,486
|
|
The last step I want to take is to add some padding around my row block.
|
|
|
|
48
|
|
00:03:48,486 --> 00:03:55,743
|
|
So I will open up my styles and below dimensions, add some more padding
|
|
|
|
49
|
|
00:03:55,743 --> 00:03:59,226
|
|
to create some more space around the text.
|
|
|
|
50
|
|
00:03:59,226 --> 00:04:03,000
|
|
And then our new header is done.
|
|
|
|
51
|
|
00:04:03,000 --> 00:04:06,086
|
|
The next step of course is to save
|
|
|
|
52
|
|
00:04:06,086 --> 00:04:15,000
|
|
and then to update my other templates with this new header that I have created using patterns.
|
|
|
|
53
|
|
00:04:15,000 --> 00:04:23,000
|
|
So for example, let's go ahead and open up our 404 template and replace the header.
|
|
|
|
54
|
|
00:04:23,000 --> 00:04:31,000
|
|
And now you will see it below existing template parts.
|
|
|
|
55
|
|
00:04:31,000 --> 00:04:39,000
|
|
We can save and then follow the same process for all the other relevant templates.
|
|
|
|
56
|
|
00:04:39,000 --> 00:04:43,941
|
|
Now we can return to our page template and move on to our footer.
|
|
|
|
57
|
|
00:04:43,941 --> 00:04:47,975
|
|
In this case I am not going to replace the footer
|
|
|
|
58
|
|
00:04:47,975 --> 00:04:51,000
|
|
I am merely going to update the existing pattern.
|
|
|
|
59
|
|
00:04:51,000 --> 00:04:55,000
|
|
And then it will automatically update on all the other templates.
|
|
|
|
60
|
|
00:04:55,000 --> 00:05:00,209
|
|
Firstly I will enlarge the site logo block
|
|
|
|
61
|
|
00:05:00,209 --> 00:05:11,000
|
|
and then I will add my site tagline to the site tagline block below the site title.
|
|
|
|
62
|
|
00:05:11,000 --> 00:05:15,000
|
|
Now we can move on to the three columns on the right.
|
|
|
|
63
|
|
00:05:15,000 --> 00:05:23,000
|
|
I will select the title of the middle block and change it to quick links.
|
|
|
|
64
|
|
00:05:23,000 --> 00:05:31,000
|
|
Then I will select the navigation block which has been added with dummy content.
|
|
|
|
65
|
|
00:05:31,000 --> 00:05:37,545
|
|
And in the sidebar settings next to menu I will click on the three vertical dots
|
|
|
|
66
|
|
00:05:37,545 --> 00:05:40,000
|
|
and select the header navigation.
|
|
|
|
67
|
|
00:05:40,000 --> 00:05:47,000
|
|
I will also open the settings tab and double check that the orientation is vertical.
|
|
|
|
68
|
|
00:05:47,000 --> 00:05:50,409
|
|
Now we can move on to the next column
|
|
|
|
69
|
|
00:05:50,409 --> 00:05:56,091
|
|
and this time I am going to replace the dummy content with a new navigation menu.
|
|
|
|
70
|
|
00:05:56,091 --> 00:06:02,062
|
|
So I will click on create new menu
|
|
|
|
71
|
|
00:06:02,062 --> 00:06:10,024
|
|
and then select the privacy policy page which I have already created
|
|
|
|
72
|
|
00:06:10,024 --> 00:06:15,000
|
|
as well as the terms and conditions page.
|
|
|
|
73
|
|
00:06:15,000 --> 00:06:19,872
|
|
And in the last column I will make sure that I update the links
|
|
|
|
74
|
|
00:06:19,872 --> 00:06:23,444
|
|
to my social media platforms.
|
|
|
|
75
|
|
00:06:23,444 --> 00:06:26,421
|
|
So at the moment there is dummy content
|
|
|
|
76
|
|
00:06:26,421 --> 00:06:31,000
|
|
and therefore I will replace the hashtag with the correct link.
|
|
|
|
77
|
|
00:06:31,000 --> 00:06:37,720
|
|
And now my footer is done but I can of course make further modifications.
|
|
|
|
78
|
|
00:06:37,720 --> 00:06:43,000
|
|
After saving we can make our way to our other templates.
|
|
|
|
79
|
|
00:06:43,000 --> 00:06:51,000
|
|
For example the 404 template and we will see that the footer updated automatically.
|
|
|
|
80
|
|
00:06:51,000 --> 00:06:55,000
|
|
And here is a view on the front end when I visit my contact page.
|
|
|
|
81
|
|
00:06:55,000 --> 00:07:02,368
|
|
I trust header and footer patterns will give you a boost
|
|
|
|
82
|
|
00:07:02,368 --> 00:07:07,990
|
|
and provide you a strong foundation for your header and footer design.
|
