Step 1: Home Page
You’ll see the home page is much like a landing page – not much text, and no visible widgets. The default installation includes a static photo on the home page but our demo shows the video header option to show you what it can do.
Scrolling down shows how each section is separated by a different background image occupying the full width of the viewing area.
Most of the customisations take place in the Twenty Seventeen customiser. While viewing the live site you’ll see in the black bar at the top the Customise label – when you hover over it, it turns blue. This is how to access the customiser.
The standard WordPress features in customiser are the menu and widget setup, but with the 2017 theme you can also set your own header image (or video), add content to each home page section, or switch to a different color scheme.
Step 2: Creating pages
You’ll need some pages to get started. So go ahead and create these 4 pages (you can change them later if you wish):
- “Welcome” will be your static home page (to be renamed on the menu – see step 5 below*)
- “Blog” posts page
- “About us” page
- “Contact us” page
Step 3: Add your featured images
A featured image for each page must be wide enough to fit your home page sections. Using too small images will mean they need to be stretched so will pixelate and look blurry. But using too big images can make your home page take too long to load.
The 2017 demo uses images that are 2000w x 1200h px
Note: You won’t need a featured image for the home page. There’s an area in the customiser for this.
For our demo pages we used different sizes to show you how they look:
Contact page:
For the Contact page we used photoshop to crop an image to the recommended 2000x1200px.
About page: (recommended image)
Whilst for the About page we used Canva’s desktop wallpaper template that is 1920x1080px.
You can see that although this image is smaller than the suggested size, if you do not have access to photo editing software (such as photoshop) then there is a free alternative available through Canva.
With this in mind, we would recommend this Canva Desktop Wallpaper template for your featured images; at 1920×1080 it is a smaller image template but it fits very nicely.
Step 4: Link both your static front page, and your posts page.
Again, open up the Customiser — Dashboard/Appearance/Customise or click Customise on the admin bar while viewing the live site.
Select Static Front Page menu item and make the following adjustments:
- Click the radio button for A static page. This will reveal further dropdown options:
- Set the Front page dropdown to your newly created welcome/home page. This specifies which page will appear as your home page.
- Set the Posts page dropdown menu to your newly created blog page. This means that all posts you publish will automatically appear here. Hence the reason we suggest you use it as your blog. You can change this though.
Click Save & Publish.
Step 5: Link your pages to the home page sections
This are the sections that you scroll through when landing on the home page. You can turn this on, or off so that only the first paragraph shows. This is your preference. To access these settings, click on the customise button in the admin bar and scroll down the ‘theme options’:
Open Customiser/Theme Options and use the drop-down menus to link each page to the home page sections. You can add as many as you wish here.
Note that you do not need to input the home page here, doing so will result in there being two “home” sections on the home page.
Click Save & Publish.
Step 5: Create your navigation menu
Open up the menu option from the customiser, or via Dashboard/Appearance /Menus and create your new menu. Add the pages you’ve just created then save it.
*Tip: Add the “welcome” page to the menu first but rename it to “home” so that “home” appears on the navigation, but the page title remains as “welcome”.
Then open up the Manage Locations tab and assign your new menu as the Top Menu.
Save changes.
Step 6: Adding a Video Header
We love this cute feature, having a video clip on your home page would work especially well if it was a video depicting your business. A baker baking cakes, a yoga instructor teaching a class. It only needs to be a few seconds long but can really show a professional image of you.
Go to the customiser and open up the Header Media tab where you’ll see the video option to add your MP4.
You can insert a YouTube URL, or upload directly for which you are advised to use a video with dimensions of 2000 x 1200 pixels. However *similar* sizing will work, you can trial and error here with your videos to see what works for you.
For this demo we downloaded a free commercial use video from Pixabay. We used the 1280×720 which you can see fits nicely.
Your 2017 home page is now complete!
You can continue to build your site with pages and posts as normal.