Creating the “Home” Page (Front Page)
Like any website, your website needs a front-page, and Listable has a dedicated set of options to achieve this. Further below, there is a step-by-step guide.
Step 1 — Create a “Home” page
From your site, WP dashboard, add a new page and name it “Home” or similar. Then find the Page Attributes section in the right sidebar area and set the Template to Front Page. This template allows you to display a Search field inside the Hero Area.
Configure the Hero Area
After selecting the Front Page template, new options appear (example here), so you can manage the background or the highlighted categories.
- Hero Area (Background): This block displays a random background between a gallery of images and a list of videos (self-hosted). To ensure the high contrast for text over an image, we reduced the opacity to 50%.
- Highlighted Categories: this section will display a list of selected categories at the bottom of the Hero Area. Using their slugs, you can specify which one to highlight. Also, if their names are too long to fit into one row, you can use a placeholder to show an alternative, smaller version: e.g., category (Cat)
- Search Fields: to extend the search form, you can add the Categories and Location fields directly to the Hero Area (see screenshot). We were going with the single-field option for the demo as it has a better conversion rate, but depending on your situation, the other two fields might be more relevant to the user search.
Step 2 — Set a Static Front Page
Before going further, let’s put the above-created page on the front page. By default, WordPress displays the latest posts there — to change that and show your new static “Home” page, follow these easy steps:
- Launch the site Customizer and click on the Static Front Page tab on the left.
- Select the Static Page option, then choose your new page from the Front Page drop-down.
- Click on the Save & Publish button to save your static page settings.
Step 3 — Customize the “Home” Page Layout through Widgets
Beneath the Hero area, you can add new sections through a Widgetized area. Go to your site’s Home page, and on the top Admin bar, you will see a blue button called Customize Front Page Sections. This is a useful shortcut to the Appearance → Customizer → Widgets → Front Page area, where you can manage the content and order of the following widgets:
- Listing Categories — Display a list of listing categories based on different criteria (e.g. most popular, random) or specify which ones you want to show.
- Listing Cards — Display a list of listings based on various criteria (e.g. latest or featured listings from a specific category).
- Spotlights — Emphasize some features of your website or use it as a step-by-step explaining process (e.g. How it Works section).
- Recent Posts — A list of the latest posts from your Blog section.
Please note that if you plan to use a drag and drop plugin like Elementor, for instance, it’s not going to use to edit the homepage. You can use such a plugin on any other page.