beginner-wordpress-user/subtitles/Intro to the Site Editor.en.srt

1
00:00:00,000 --> 00:00:02,458
Let's explore the site editor,

2
00:00:02,458 --> 00:00:06,928
which will allow you to design everything on your site using blocks,

3
00:00:06,928 --> 00:00:10,280
from the header to the footer and everything in between.

4
00:00:10,280 --> 00:00:14,440
Let's make our way to Appearance and click on Editor.

5
00:00:14,440 --> 00:00:16,980
This will open the site editor.

6
00:00:16,980 --> 00:00:19,629
On the left, there's the Site View sidebar,

7
00:00:19,629 --> 00:00:24,927
and this nifty tool lets you dive into the key parts of your site,

8
00:00:24,927 --> 00:00:28,900
navigation, styles, pages, templates and patterns.

9
00:00:28,900 --> 00:00:33,780
This tutorial aims to gain a deeper understanding of these elements.

10
00:00:33,780 --> 00:00:37,060
Let's start at the top with navigation.

11
00:00:37,060 --> 00:00:40,428
Here you can quickly see and tweak all your menus,

12
00:00:40,428 --> 00:00:42,860
it's your command center for menu management.

13
00:00:42,860 --> 00:00:49,243
You can make simple edits directly, like reordering,

14
00:00:49,243 --> 00:00:55,961
and when you click on the three vertical dots next to the name of the menu item,

15
00:00:55,961 --> 00:01:02,680
you can rename, duplicate and delete the menu item as required.

16
00:01:02,680 --> 00:01:04,891
If opened in the editing mode,

17
00:01:04,891 --> 00:01:07,906
you can make certain changes without any distractions,

18
00:01:07,906 --> 00:01:10,720
and updates will sync across your site.

19
00:01:10,720 --> 00:01:17,486
When you click on the plus icon, you can add new pages or other menu items.

20
00:01:17,486 --> 00:01:22,560
You will notice that the navigation block is locked in this area.

21
00:01:22,560 --> 00:01:25,309
If you would like to style your navigation menu,

22
00:01:25,309 --> 00:01:29,040
you will need to open a template or the template part it is part of.

23
00:01:29,040 --> 00:01:32,400
Next, let's talk about styles.

24
00:01:32,400 --> 00:01:34,766
When you select styles,

25
00:01:34,766 --> 00:01:40,680
you will be able to browse through a variety of different style combinations that come with your theme.

26
00:01:40,680 --> 00:01:45,659
When you click on edit styles, you can browse your styles from year,

27
00:01:45,659 --> 00:01:49,280
and then change your site's typography, colors and layout.

28
00:01:49,280 --> 00:01:50,900
Let's see how it works.

29
00:01:50,900 --> 00:01:58,400
When you click on typography, you can manage the typography settings for text, links, headings, captions and buttons.

30
00:01:58,400 --> 00:02:04,260
A wonderful new feature is that you also now have access to a font library.

31
00:02:04,260 --> 00:02:09,200
Below fonts, we will currently see the fonts that have been added by our theme.

32
00:02:09,200 --> 00:02:11,312
But when we click on manage fonts,

33
00:02:11,312 --> 00:02:18,880
we will be able to install, remove and activate local and Google fonts across your site with any block theme.

34
00:02:18,880 --> 00:02:25,760
When you click on install fonts, you will be able to install any Google font on your website.

35
00:02:25,760 --> 00:02:30,020
And click on upload if you want to upload a font from your computer.

36
00:02:30,020 --> 00:02:35,280
Make sure you have the right to use any fonts you are uploading.

37
00:02:35,280 --> 00:02:37,800
Below typography, we will see colors.

38
00:02:37,800 --> 00:02:43,800
Here you can also change the colors for different global elements on your site.

39
00:02:43,800 --> 00:02:46,155
When we make our way to layout,

40
00:02:46,155 --> 00:02:52,960
we will notice you even have control of elements such as padding and block spacing.

41
00:02:52,960 --> 00:02:54,805
If you look down further below,

42
00:02:54,805 --> 00:02:59,880
you also have the option to customize the appearance of specific blocks for your whole site.

43
00:02:59,880 --> 00:03:04,980
To see how these blocks will change if you edit them, go to your site's style book.

44
00:03:04,980 --> 00:03:08,840
You will notice there's a little eye at the top.

45
00:03:08,840 --> 00:03:14,920
The style book allows a user to preview every block that can be inserted into your site.

46
00:03:14,920 --> 00:03:21,372
It gives you or provides you an adaglance preview of how global styles will affect any blocks display

47
00:03:21,372 --> 00:03:25,760
without the user inserting those blocks into a template.

48
00:03:25,760 --> 00:03:31,080
It is also important to note that a block styling can be adjusted within the style book.

49
00:03:31,080 --> 00:03:34,800
So let's update the buttons block for example.

50
00:03:34,800 --> 00:03:48,120
Just change the background color and then change the letter case to uppercase.

51
00:03:48,120 --> 00:03:51,933
If you like what you see, you can go ahead and click save.

52
00:03:51,933 --> 00:03:58,571
Please also note that if you change an individual block in your style book,

53
00:03:58,571 --> 00:04:02,720
it takes precedence over the global styles you've set.

54
00:04:02,720 --> 00:04:05,720
While we are here, we also need to talk about style revisions.

55
00:04:05,720 --> 00:04:10,540
So let's go ahead and click on style revisions next to the style book icon.

56
00:04:10,540 --> 00:04:14,920
Style revisions will open up when you're in the style book or when you are editing a template.

57
00:04:14,920 --> 00:04:20,241
The styles revisions feature adds a visual way to browse changes to your styles over time

58
00:04:20,241 --> 00:04:24,565
and you can easily revert to a previous stage if you find a style you prefer

59
00:04:24,565 --> 00:04:26,560
or want to revert back to a previous version.

60
00:04:26,560 --> 00:04:31,620
You merely have to select the version and then click on apply.

61
00:04:31,620 --> 00:04:35,620
In this example, I am editing a template and will follow the same process.

62
00:04:35,620 --> 00:04:46,660
I will open up style revisions, select a previous style and then click on apply to revert back.

63
00:04:46,660 --> 00:04:51,477
When you click on the three vertical dots next to styles,

64
00:04:51,477 --> 00:04:56,860
you will be able to reset styles as well as add additional CSS.

65
00:04:56,860 --> 00:05:02,100
With those styles, we can go to pages and create and publish pages from year.

66
00:05:02,100 --> 00:05:07,300
To add a new page, click on the plus icon next to pages and create a draft.

67
00:05:07,300 --> 00:05:09,676
But you can also of course create a new page

68
00:05:09,676 --> 00:05:12,700
when you are in your dashboard or WP admin.

69
00:05:12,700 --> 00:05:17,900
Next, let's open up one of our existing pages, my about page.

70
00:05:17,900 --> 00:05:22,980
When you open a page, it is important to remember to add content to the content block.

71
00:05:22,980 --> 00:05:28,020
To put it another way, the content block is the house or the container for all your content.

72
00:05:28,020 --> 00:05:31,505
The second thing to remember is that you can't customize your header and footer

73
00:05:31,505 --> 00:05:35,540
when editing a page, that's all part of managing templates.

74
00:05:35,540 --> 00:05:38,527
If you click on the header, you will get a message

75
00:05:38,527 --> 00:05:41,140
that says edit your template to edit this block.

76
00:05:41,140 --> 00:05:44,653
If you want to modify the template that has been assigned to this page,

77
00:05:44,653 --> 00:05:46,720
you can click on edit template.

78
00:05:46,720 --> 00:05:50,576
This will take you to your page template in this example

79
00:05:50,576 --> 00:05:53,660
and here you can modify your header and your footer.

80
00:05:53,660 --> 00:05:57,060
You will not be able to add content to a template.

81
00:05:57,060 --> 00:06:00,340
Content of course gets added to posts and pages.

82
00:06:00,340 --> 00:06:04,600
The content block is merely a placeholder in this context.

83
00:06:04,600 --> 00:06:07,940
This brings us to our next topic, namely templates.

84
00:06:07,940 --> 00:06:11,580
Templates provide the structure for how your content is displayed.

85
00:06:11,580 --> 00:06:14,968
When you select templates, you will notice a range of templates

86
00:06:14,968 --> 00:06:17,720
that come with your theme, built in templates.

87
00:06:17,720 --> 00:06:21,760
For example, the page template that displays a single page,

88
00:06:21,760 --> 00:06:25,087
the index template that is a full back template,

89
00:06:25,087 --> 00:06:29,840
or the single post template that displays the layout of single posts.

90
00:06:29,840 --> 00:06:33,760
And right at the bottom, we will see any custom templates.

91
00:06:33,760 --> 00:06:36,673
When you click on the plus icon next to templates,

92
00:06:36,673 --> 00:06:38,808
you can add a variety of new templates,

93
00:06:38,808 --> 00:06:43,080
even a custom template that can be applied to any post or page.

94
00:06:43,080 --> 00:06:47,320
Let's open the page template to better understand how a template works.

95
00:06:47,320 --> 00:06:49,400
A template provides structure.

96
00:06:49,400 --> 00:06:54,440
A template usually includes a header template part and a footer template part.

97
00:06:54,440 --> 00:07:00,800
And the post content block pulls in the content from the page or post assigned to the template.

98
00:07:00,800 --> 00:07:05,765
So a template is only used to modify the layout or design of the page,

99
00:07:05,765 --> 00:07:08,640
namely the header, footer and even sidebar.

100
00:07:08,640 --> 00:07:14,560
The site editor therefore makes a clear distinction between editing the template and a page.

101
00:07:14,560 --> 00:07:18,440
You can modify your header and footer within the template.

102
00:07:18,440 --> 00:07:24,480
One of the options you also have is to click on the three vertical dots and select replace header.

103
00:07:24,480 --> 00:07:28,960
Then you can replace your current header with one of your existing header template parts

104
00:07:28,960 --> 00:07:33,440
or header patterns that come with your theme.

105
00:07:33,440 --> 00:07:37,120
Another option you have is to select your header and then click on edit.

106
00:07:37,120 --> 00:07:43,820
This will allow you to modify your header or footer within template editing mode without any other distractions.

107
00:07:43,820 --> 00:07:51,838
To assign a new template to a page or post, open the relevant piece of content, in this case my about page,

108
00:07:51,838 --> 00:07:58,441
and then in your sidebar settings on the right, next to template, click on the name of the template,

109
00:07:58,441 --> 00:08:06,223
select swap template, and then you can choose a custom template to assign to your page or post.

110
00:08:06,223 --> 00:08:14,150
It is also worth mentioning that when you click on manage all templates, and then select bulk edit,

111
00:08:14,150 --> 00:08:21,020
you will be able to explore and filter through your templates via table view or grid view.

112
00:08:21,020 --> 00:08:25,660
And when you select bulk edit again, there are more filtering options.

113
00:08:25,660 --> 00:08:32,620
Please note, you can explore and filter pages and template parts in exactly the same way.

114
00:08:32,620 --> 00:08:37,420
Finally, let's talk about patterns.

115
00:08:37,420 --> 00:08:41,900
At the top, you will be able to view all the available patterns.

116
00:08:41,900 --> 00:08:48,820
When you select my patterns, you can create and manage your own custom synced and non-synced patterns.

117
00:08:48,820 --> 00:08:53,322
Below my patterns, we can view all our custom patterns

118
00:08:53,322 --> 00:08:57,620
as well as patterns that come with our theme in their relevant categories.

119
00:08:57,620 --> 00:09:04,900
And below template parts, we can also create and manage our header, footer, and general template parts.

120
00:09:04,900 --> 00:09:07,700
Template parts are essentially patterns.

121
00:09:07,700 --> 00:09:12,900
They are synced reusable components that can be used across your site.

122
00:09:12,900 --> 00:09:15,220
Let's start with my patterns.

123
00:09:15,220 --> 00:09:22,620
To create your own custom pattern, click on the insertter next to patterns, and then select create pattern.

124
00:09:22,620 --> 00:09:29,612
After naming it, you can select to add it to a relevant category,

125
00:09:29,612 --> 00:09:33,940
and then decide to sync or not sync your pattern.

126
00:09:33,940 --> 00:09:37,268
A synced pattern will sync across your entire site,

127
00:09:37,268 --> 00:09:44,340
and that means if you make a change to your pattern in one place, it will update anywhere it is used.

128
00:09:44,340 --> 00:09:50,860
You can also toggle this off if you prefer to have a non-synced pattern.

129
00:09:50,860 --> 00:09:56,700
Non-synced patterns are just regular patterns that can be edited independently.

130
00:09:56,700 --> 00:09:59,514
When you return to your custom pattern area,

131
00:09:59,514 --> 00:10:04,740
you will notice that synced patterns have a purple icon and non-synced patterns don't.

132
00:10:04,740 --> 00:10:10,105
Next, you will notice that the patterns that come with your theme are locked,

133
00:10:10,105 --> 00:10:12,660
and you are therefore not able to edit them.

134
00:10:12,660 --> 00:10:17,481
But, when you click on the three vertical dots below a pattern,

135
00:10:17,481 --> 00:10:21,820
you will be able to copy it to your my patterns area.

136
00:10:21,820 --> 00:10:28,380
At the bottom, we can also create and manage our header, footer, and general template parts.

137
00:10:28,380 --> 00:10:30,100
You have two options here.

138
00:10:30,100 --> 00:10:36,580
You can create custom headers and footers, or customize template part patterns that come with your theme.

139
00:10:36,580 --> 00:10:42,250
To create your own template part, click on the plus icon at the top next to patterns,

140
00:10:42,250 --> 00:10:44,980
and select create template part.

141
00:10:44,980 --> 00:10:50,840
When you add a new template part, you have an option between general header and footer template parts.

142
00:10:50,840 --> 00:10:58,140
General template parts are not tied to any particular area, and remember to give them a descriptive name.

143
00:10:58,140 --> 00:11:02,144
When you open up a template part from year,

144
00:11:02,144 --> 00:11:08,740
you will be able to modify and edit your template part in template editing mode without any distractions.

145
00:11:08,740 --> 00:11:15,333
Or, you can open up the relevant template, and in this case, my custom template,

146
00:11:15,333 --> 00:11:21,220
and then you can modify your header or footer template part from within the template.

147
00:11:21,220 --> 00:11:27,967
And as shown earlier on, you can easily replace one of your headers or footers

148
00:11:27,967 --> 00:11:32,660
with a pattern or an existing template part from the library.

149
00:11:32,660 --> 00:11:37,290
To end off, I also want to highlight an extremely helpful feature called the command palette

150
00:11:37,290 --> 00:11:42,660
that will save you loads of time and help you move around your site editor more effectively.

151
00:11:42,660 --> 00:11:49,020
The command palette allows you to swiftly complete tasks and navigate within the site editor.

152
00:11:49,020 --> 00:11:54,952
You can, for example, type in new to create a page or template,

153
00:11:54,952 --> 00:12:01,963
or just the name of the area where you want to go, for example, pattern,

154
00:12:01,963 --> 00:12:04,660
to manage all my patterns.

155
00:12:04,660 --> 00:12:09,024
You can access the command palette by using the shortcut command K on Mac

156
00:12:09,024 --> 00:12:11,980
or control K on Windows.

157
00:12:11,980 --> 00:12:20,780
You will also find it in the site view sidebar by clicking on the search icon,

158
00:12:20,780 --> 00:12:26,380
or you can merely click on the title bar.

159
00:12:26,380 --> 00:12:30,980
And that is our brief overview of what you are able to achieve using the site editor.