FSE - Creating Your Landing Page

WordPressFull site editor

This chapter assumes you have read and viewed the demonstration on in the FSE - Creating a Customer Header chapter.

The page that your main URL goes to is known as your home page, landing page, cover page, or front page. The various ways this page is named makes the WordPress interface a little confusing. To avoid this confusion, I will call this your landing page. That is when someone types in your main URL (e.g. https://demystifyinginstructionaldesign.com), the page that displays is the landing page.

Landing Page Components

An page on your website can be broken down into three components - a header area, a content area, and a footer area. The header and footer areas are created as Content Parts in the Full Site Editor. See FSE - Creating a Customer Header.

The content area contains formatting and page content. The page content is added the same way any other page is within WordPress. Any special formatting is configured using the Full Site Editor with a specialized template called a Front Page template. 

Shows the header, content area, and footer of the landing page

Creating Page Content

Use the block editor to create a page that will be your landing page. It is a good idea to use the title of your website as the title for this page. See Adding Initial Content for tips on how to use the Block Editor.

Setting Page Content

The content area of your landing page is configured as a WordPress page. You then set this page as your landing page by selecting it as a static homepage. This is set using the Settings >> Reading menu. In the image below, I have set the landing page content to be the page with the title "Rebecca J Hogue". This page has to be created before it can be set as the landing page.

WordPress Reading pain showing the options to select a static home page or use the posts page as the home page.

Configuring the Page Template

In FSE, if you want a static landing page that is formatted in a different way than your other pages, then you need to have a "Front Page" template. Some themes will come with this template already created, while others will not. If your theme has a Front Page template, you will need to edit that template. If it does not, then when you click Add New from the template editor, Front Page is an option you can select. You can have only one Front Page template.

Shows the Add New menu with the Front Page option displayed

If your site does not have a Front Page template, then the site will use the "Home" template for the front page. The "Home" template is a template that displays a list of your blog posts. This is where their terminology gets confusing. To help, you can read the text under the title which provides a description of where that template is used. 

Adding Post Content

When configuring the formatting of your Front Page template, to get content from the page you have identified as your landing page content, you need to add the blog "Post Content" block. The blocks of your landing page template should be:

  1. Header template part
  2. If you wish your feature image to display, add the Feature image block
  3. Post Content block
  4. Footer template part

When you add the post content block, it will link to the page that you selected as your static landing page in the Settings >> Reading panel. You can edit the content of that page from either the page editor or the template editor. 

Implementing Your Landing Page

The procedure for implementing your landing page is as follows:

  1. Identify landing page components
  2. Create header and footer template parts
  3. Create a Page and add the page content
  4. Set your page to be the Static landing page
  5. Configure / Create your front page template
  6. Add the header part, post content block, and footer tempate part to the front page template

This content is provided to you freely by EdTech Books.

Access it online or download it at https://edtechbooks.org/professional_presence/fse_LandingPage.