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