This chapter outlines how to create your header using the full site editor. You should have a design before your try to create your header. 

Identify the header and header components

If you designed multiple pages, you might have different headers. Do this activity for each of your headers. Note that most websites only have one header. 

Once you have identify the header and its components, you will want to create and collect anything you need to build the header. In this case, you need to:

• Create your logo file. Logos appear small on your site. If your logo contains text, one way to keep the text clear is to use an .svg file, which allows your logo to be a small file and it to easily resize on your site. 
• Upload your logo as media into WordPress.
• Create a page for each item in the navigation menu. 
• Install fonts that your website requires. I use the plugin Fonts Plugin | Google Fonts Typography to add Google font functionality to my site.
• Collect color scheme. You will want to have your color scheme hex codes readily available (e.g. #6D8CB5)

Identify rows and columns

There are several ways to build your header using the Blocks editor. The simplest is to use the default blocks called row and stack. See the WordPress row and stack documentation for more details. 

Take your header and outline the rows and columns needed.

For Demystifying Instructional Design, I have two rows. The upper row has two columns, one containing the logo and the other containing the navigation menu. The second row has one column containing a thin line. 

Collecting Information and Assets

One final step before, beginning implementation, is to identify any fonts that are needed, color schemes, in particular, knowing the hex value for any colors required, any graphics required, and the list of pages needed to create the navigation menu. For example:

Color Scheme	Dark Blue #2E3559;  Medium Blue #6D8CB5;
Site Logo
Navigation Font	Barstow Condensed (Google Font)
Site Page list	About Me, Podcast, Blog, OER, Contact Me

Setting up WordPress

In WordPress, I setup the site by:

• adding the required graphics into the media library
• adding any required plug-ins, in this case, I'm using a Google font plug-in
• adding a page for each item in my menu

The Google Font plugin that I installed allows me to use the customizer to select the correct Google font. I use the customizer to change the navigation font to be Barstow condensed, to align with my design. 

Now that I've done all of the preparation, I'm ready to begin using the full site editor to create a custom template part that will be my custom header.

Implementing the Heading Template Part in WordPress

Now that I have my elements and I understand the structure of my design, I can move onto creating a new Template Part that will be my custom header.