Hi there, and welcome to LearnWordPress. In this session, we'll
explore the tools that come along aspart of the Full Site Editing
experience. We'll also compare thecapabilities of the Site Editor to the
existing page and post editor. And bythe end, we'll feel confident in using
both things together to create ourentire site layout. Without further ado,
let's begin. Full Site Editing allowsyou the freedom to build every aspect of
your WordPress site, from the header allthe way down to the footer using the
power of blocks within the Site Editorfeature. But what is the Site Editor?
How does it differ from the page andpost editor we're used to? How can we
use templates in the Site Editor tocreate our overall site structure? To
answer those burning questions, let'stake a trip through our dashboard and
compare the two. The page and posteditor are the foundation of your site
content. Let's first refresh ourselveson how to add page and post content. In
your dashboard, head to Pages if you'recreating a static page, or Posts for
your blog posts. From here, by clickingon Add New, you'll begin creating your
content for that individual page orpost. It doesn't repeat anywhere else
and belongs only to that page or post.Compared to this, what does the Site
Editor allow us to do exactly? Wherepages and posts are used to create
actual content just for that page usingblocks, the Site Editor also uses blocks
to create the overall look and feel ofyour site using templates. If you've
installed a block theme on your site,like Twenty Twenty-two for example, you
can access the Site Editor by visitingAppearance, and then Editor in your
dashboard. The site editor will thenload the front page of your site for you
to start editing. From here, you canclick on the WordPress icon in the top
left hand corner to open the List Viewon the left and switch between your
homepage, templates and template partsthat make up the structure of your site.
A quick note on template parts. Theseare reusable groups of blocks that you
can use to create repeated parts of yourtemplate, like the navigation menu for
instance, but we'll focus on thetemplate editor for this session. Before
diving into templates, let's take a lookat the top menu of the Site Editor now
and run through what these elementsallow you to do. The site icon allows
you to switch between templates andtemplate parts as we previously
mentioned. The plus icon block inserterbutton allows you to add a new block to
whichever template you're working oncurrently. With the pencil icon you can
choose between editing your currentblock and selecting a new block. Choose
the select tool to select individualblocks. Once the block is selected,
press the Enter key on your keyboard toreturn to editing. Undo will reverse the
most recent action taken while redorestores an action you reversed using
the undo button. Next is List View. Thisis a super useful tool that allows you
to see a list of all of the blocks thatare on your page.
This is great for seeing your page'sstructure and editing, moving and
removing blocks. In the middle is thename of the template you're editing.
Click this and then click Browse Alltemplates to view all of your sites
templates. Preview allows you to seewhat your site looks like with the
changes applied and Save allows you tosave your changes. Coming towards the
end here, Settings lets you display orhide the template and block setting
sidebar menu like this. Styles, this iswhere you can edit the style of your
entire site, including the fonts ortypography, overall colour scheme, and
even the appearance of individual blocksif you'd like, and finally, more
options. This opens additional settingsand tools like exporting your template
blocks. Now we've had a brief rundown ofthe menu options. Let's take a look at
templates. As we covered, templates alsouse blocks in order to create the
overall design of your site. Templatescan be applied to a single page or
multiple pages in order to create thestructure or layout of that page,
including the header and footer. Withthat in mind, let's say we want to add
the template that's applied to ourpages. In the Site Editor, click on the
site icon, and then templates. There area few options here. But let's choose the
page with a Large header. When thetemplate loads, you'll see an example of
what this template looks like withoutany content. Here's where the List View
comes in really handy. Go ahead andclick it, and the sidebar on the left
will show you how the blocks that makeup this template are structured. Here,
you can see the components that make upthis page template. The header is
clearly marked when you click on it, asis the footer. In the middle, you'll see
a Group block that contains a PostContent block within it. This is super
important. The Post Content block iswhat allows the content of your page or
post to appear in this template. Thinkof this block as the container for
whatever you wrote in your pages orposts section. Without a container, your
page content won't have anywhere to bedisplayed. Let's say you'd like to add a
navigation menu to the top of your siteand a site logo to the bottom. In the
List View, click on the parent block.Here that's called Header dark large.
Once it's selected, you can add a blockto your header by clicking the plus icon
at the top or in your template preview.Search for your navigation block, select
it and choose a menu for it to display.You'll see that the navigation block has
also been added to the List View, we canrepeat this process for the footer.
Click the parent footer group in theList View and add a new block. This
time, we're choosing the Logo block.Once you've added the blocks you'd like
to your header and your footer sections,you can preview how it will look on a
live page or save those changes whenyou're ready. Note that there's a
mention of header and footer templateparts here. Make sure those are both
checked since we've edited them both andclick Save again. Amazing, the page
template is saved but how do we add thistemplate to our pages? For that, we can
navigate back to our main dashboard,click on Dashboard and then Pages. Then
click on the page you'd like to applythis template to. In your sidebar to the
right, you'll see a template header. Goahead and click on that. This drop-down
menu lists all of the templates youcurrently have saved. In this case,
let's choose the page template with alarge header that we were just editing
and then update in the top right-handcorner.
Here's how the page looks with thedefault template, and here it is with
the page template applied. You canrepeat this for as many pages as you
like and the same applies for your poststoo.
So how can we best sum up the purpose ofthe Site Editor when we compare it to
our page and post editors? When you wantto edit your site's overall structure,
headers, footers, and the structuralappearance of your pages and posts, use
the Site Editor. When you want to editthe content of your pages, text, images,
embeds and more, you can edit thosepages individually by going to your
dashboard and selecting pages. When youwant to edit the content of your blog
posts, texts, images, embeds and more,edit those posts individually by going
to your posts section. So remember, theSite Editor is your structure and the
page and post editor is your content.You now have the power to use the Site
Editor tools to help build your entiresite. Have fun, and you can explore
learn.wordpress.org for more courses,social learning spaces and workshops.