Hello! And welcome another InMotion Hosting video tutorial!
My name is Arnel Custodio and today we will be demonstrating how to use the new WordPress full site editor to edit headers.
The full site editor is currently available in WordPress 5.9
and comes with the new Twenty Twenty-two theme. This theme will be used in this tutorial.
We’ll begin by first logging into WordPress as an administrator.
You can navigate to the editor by clicking on Appearance in the main menu and selecting Editor.
You can also go to Themes, select the theme, and click on Customize - though it would take longer.
Or, you can click on visit Site, in the top left-hand corner, then select Edit site in the menu at the top of the screen.
Headers are generally predefined within themes for WordPress.
o, the options and appearance of the header will vary as you work with different themes.
The Twenty Twenty-two theme header is located at the top of the page.
Using the drop-down arrow next to the headers label at the top of the screen,
you can see the options for the header.
Click on Browse All Templates. Then on the left-hand menu, click on Template parts.
The Twenty twenty-two theme has 3 pre-defined header options: small, large, and plain (which is non-formatted for the theme).
By default, it is set to small.
You can also see the header structure by clicking on the list view option
The header is composed of a group block. Each block within the group can be edited to meet your needs.
You can also add additional elements to the group if needed.
To show how you can edit the header with the full site editor, we’re going to add a company logo,
change the title name, then add a page to the header menu.
We’re going to keep the same header size for this tutorial. But remember that you can change it based on the theme’s pre-defined options.
On the left side of the header, you can see an outline for a logo.
Click on this outline, then click on the arrow to upload a logo.
I have a graphic prepared for the logo, so we’ll upload that image, then we’ll change the title to Example Company, Inc.
Next we’re going to the right side of the header and we’re going to add a page.
Before we can get to the page, we’ll need to save our work first.
Click on save in the top right corner. Then in the menu at left, click on Dashboard.
In this case, I have an About Page already set up.
Currently, the page is in draft mode. Notice that when I publish it, you will see it automatically added to the menu.
You can edit this block, but you will see a warning that the block will need to be converted to links.
When the conversion occurs, then pages will no longer be added automatically.
We’re going to go ahead and add one more element to the header - social icons.
Click on the + sign in the middle of the header, then select Social Icons from the block menu
We’re going to add 2 simple icons for Facebook and Instagram.
You can click on the + sign or go to browse all the options available for the social icons.
Once you’re done editing the header, click on the SAVE button in the top right corner to save all your changes!
Review the site with your changes in place to make sure that they appear the way that you wanted.
Thanks again for watching and listening to our demonstration on how to use the new WordPress full site editor to edit headers.
If you liked our video, please make sure to give us a thumbs up below and subscribe to our channel so that you can see our current and future tutorials!
Thanks again for watching and have a great day!