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

1
00:00:00,000 --> 00:00:10,280
Let's explore the site editor, which will allow you to design everything on your site using blocks, from the header to the footer and everything in between.

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

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

4
00:00:16,980 --> 00:00:28,900
On the left, there's the Site View sidebar, and this nifty tool lets you dive into the key parts of your site, navigation, styles, pages, templates and patterns.

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

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

7
00:00:37,060 --> 00:00:42,860
Here you can quickly see and tweak all your menus, it's your command center for menu management.

8
00:00:42,860 --> 00:00:54,000
You can make simple edits directly, like reordering, and when you click on the three

9
00:00:54,000 --> 00:01:02,680
vertical dots next to the name of the menu item, you can rename, duplicate and delete the menu item as required.

10
00:01:02,680 --> 00:01:10,720
If opened in the editing mode, you can make certain changes without any distractions, and updates will sync across your site.

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

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

13
00:01:22,560 --> 00:01:29,040
If you would like to style your navigation menu, you will need to open a template or the template part it is part of.

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

15
00:01:32,400 --> 00:01:40,680
When you select styles, you will be able to browse through a variety of different style combinations that come with your theme.

16
00:01:40,680 --> 00:01:49,280
When you click on edit styles, you can browse your styles from year, and then change your site's typography, colors and layout.

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

18
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.

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

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

21
00:02:09,200 --> 00:02:18,880
But when we click on manage fonts, we will be able to install, remove and activate local and Google fonts across your site with any block theme.

22
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.

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

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

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

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

27
00:02:43,800 --> 00:02:52,960
When we make our way to layout, we will notice you even have control of elements such as padding and block spacing.

28
00:02:52,960 --> 00:02:59,880
If you look down further below, you also have the option to customize the appearance of specific blocks for your whole site.

29
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.

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

31
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.

32
00:03:14,920 --> 00:03:25,760
It gives you or provides you an adaglance preview of how global styles will affect any blocks display without the user inserting those blocks into a template.

33
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.

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

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

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

37
00:03:51,933 --> 00:03:56,920
Please also note that if you change an individual block in your style book, it takes precedence

38
00:03:56,920 --> 00:04:02,720
over the global styles you've set.

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

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

41
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.

42
00:04:14,920 --> 00:04:24,120
The styles revisions feature adds a visual way to browse changes to your styles over time and you can easily revert to a previous stage if you find a style you prefer or want

43
00:04:24,120 --> 00:04:26,560
to revert back to a previous version.

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

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

46
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.

47
00:04:46,660 --> 00:04:56,860
When you click on the three vertical dots next to styles, you will be able to reset styles as well as add additional CSS.

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

49
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.

50
00:05:07,300 --> 00:05:12,700
But you can also of course create a new page when you are in your dashboard or WP admin.

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

52
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.

53
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.

54
00:05:28,020 --> 00:05:35,540
The second thing to remember is that you can't customize your header and footer when editing a page, that's all part of managing templates.

55
00:05:35,540 --> 00:05:41,140
If you click on the header, you will get a message that says edit your template to edit this block.

56
00:05:41,140 --> 00:05:46,720
If you want to modify the template that has been assigned to this page, you can click on edit template.

57
00:05:46,720 --> 00:05:53,660
This will take you to your page template in this example and here you can modify your header and your footer.

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

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

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

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

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

63
00:06:11,580 --> 00:06:17,720
When you select templates, you will notice a range of templates that come with your theme, built in templates.

64
00:06:17,720 --> 00:06:29,840
For example, the page template that displays a single page, the index template that is a full back template, or the single post template that displays the layout of single posts.

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

66
00:06:33,760 --> 00:06:43,080
When you click on the plus icon next to templates, you can add a variety of new templates, even a custom template that can be applied to any post or page.

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

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

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

70
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.

71
00:07:00,800 --> 00:07:08,640
So a template is only used to modify the layout or design of the page, namely the header, footer and even sidebar.

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

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

74
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.

75
00:07:24,480 --> 00:07:33,440
Then you can replace your current header with one of your existing header template parts or header patterns that come with your theme.

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

77
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.

78
00:07:43,820 --> 00:07:55,400
To assign a new template to a page or post, open the relevant piece of content, in this case my about page, and then in your sidebar settings on the right, next to template, click

79
00:07:55,400 --> 00:08:03,460
on the name of the template, select swap template, and then you can choose a custom template

80
00:08:03,460 --> 00:08:06,223
to assign to your page or post.

81
00:08:06,223 --> 00:08:12,540
It is also worth mentioning that when you click on manage all templates, and then select

82
00:08:12,540 --> 00:08:21,020
bulk edit, you will be able to explore and filter through your templates via table view or grid view.

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

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

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

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

87
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.

88
00:08:48,820 --> 00:08:57,620
Below my patterns, we can view all our custom patterns as well as patterns that come with our theme in their relevant categories.

89
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.

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

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

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

93
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.

94
00:09:22,620 --> 00:09:30,740
After naming it, you can select to add it to a relevant category, and then decide to

95
00:09:30,740 --> 00:09:33,940
sync or not sync your pattern.

96
00:09:33,940 --> 00:09:44,340
A synced pattern will sync across your entire site, and that means if you make a change to your pattern in one place, it will update anywhere it is used.

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

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

99
00:09:56,700 --> 00:10:04,740
When you return to your custom pattern area, you will notice that synced patterns have a purple icon and non-synced patterns don't.

100
00:10:04,740 --> 00:10:12,660
Next, you will notice that the patterns that come with your theme are locked, and you are therefore not able to edit them.

101
00:10:12,660 --> 00:10:21,820
But, when you click on the three vertical dots below a pattern, you will be able to copy it to your my patterns area.

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

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

104
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.

105
00:10:36,580 --> 00:10:44,980
To create your own template part, click on the plus icon at the top next to patterns, and select create template part.

106
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.

107
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.

108
00:10:58,140 --> 00:11:08,740
When you open up a template part from year, you will be able to modify and edit your template part in template editing mode without any distractions.

109
00:11:08,740 --> 00:11:21,220
Or, you can open up the relevant template, and in this case, my custom template, and then you can modify your header or footer template part from within the template.

110
00:11:21,220 --> 00:11:32,660
And as shown earlier on, you can easily replace one of your headers or footers with a pattern or an existing template part from the library.

111
00:11:32,660 --> 00:11:42,660
To end off, I also want to highlight an extremely helpful feature called the command palette that will save you loads of time and help you move around your site editor more effectively.

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

113
00:11:49,020 --> 00:12:04,660
You can, for example, type in new to create a page or template, or just the name of the area where you want to go, for example, pattern, to manage all my patterns.

114
00:12:04,660 --> 00:12:11,980
You can access the command palette by using the shortcut command K on Mac or control K on Windows.

115
00:12:11,980 --> 00:12:22,140
You will also find it in the site view sidebar by clicking on the search icon, or you can

116
00:12:22,140 --> 00:12:26,380
merely click on the title bar.

117
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.