Customising WordPress Theme Twenty Seventeen
Every year, WordPress comes out a default WordPress theme. This year 2017, WordPress came out with – your guess is right – Twenty Seventeen. What follows are tips or guide on how to customise WordPress theme Twenty Seventeen.
What’s New With 2017
The main feature of WordPress Twenty Seventeen is the use of a header video on the front page of your website. The featured image is immersive that it occupies the entire width of your screen (referred to as hero images).
WordPress 2017 focuses more on business sites. It features multiple sections on the front page which you can use to showcase your portfolio, featured items, etc. Twenty Seventeen works on any device.
This site – 2017.wordpress.net – shows an example of a site built with WordPress Twenty Seventeen.
Customising WordPress Twenty Seventeen
The following sections assume you already know how to use WordPress at backend. For beginners, WPMU DEV has written a detailed tutorial on how to customize your site with WordPress theme 2017.
What I have written below are some tips.
- Title and tagline
- Logo with the title and tagline
- Logo only
On my website, I opted to show my logo only.
You have only three options: either dark or light or custom. With custom you can see in the live preview the changes in text colours. If you wish to be specific about your colour theme, use CSS.
A video on the front page of your site is a good way to attract viewers because of motion. Use a header video that is related to your site or a product. Use subtle and soft music. Some viewers do not like loud sounds because they annoy them. With WordPress Twenty Seventeen, you have no problem with that because it mutes the audio.
WordPress Twenty Seventeen recommends a video size of 2000 x 1200 pixels. In order not to confuse you how is that set, most video editors have a default of 1080p, which means 1920 (width) x 1080 (height) pixels. If it is not the default, usually it is among the choices asked upon creating a new video, so just select 1080p. Settle on this size and you are already safe. Moreover, that’s the maximum dimension that YouTube can accommodate.
The header video is responsive that it covers the entire screen of any device or computer display. However, in order not to distort (video stretched ugly) its aspect ratio, the video produces pillar boxes, if the screen is too wide for its height, or letter boxes if the screen is too tall for its width. Pillar boxes are black vertical bars that appear on the sides of the video. Letter boxes are black horizontal bars that appear at the top and bottom of the video.
Most preferably, upload your video via YouTube and enter its URL in the customizer header settings rather than upload it natively on your site. Your video loads faster via YouTube compared to a video that you uploaded directly on your site. For now, WordPress 2017 accommodates only YouTube videos.
Native Video vs YouTube Video
The recommended video dimension is 2000 x 1200 pixels in order for the video to cover the entire with of the screen. YouTube accommodates only up to 1920 x 1080 (1080p). As a result, if you are going to use a video header via YouTube, your video header will show pillar boxes (black empty space on both sides of the video). Even if you tweak the YouTube URL by specifying the width and height to 2000 x 1200, the settings are ignored. In some cases, maximizing your browser to full screen may do the trick. However, you cannot expect all users to do that for you.
As a remedy, or to take advantage of a 2000 x 1200 video, you must upload it to your site via WordPress media library, however —
- Your video must be less than 8 MB. This is the maximum size that WordPress can allow you to upload.
- Your host server must be able to stream your video.
- Not all bandwidths are created equal. Internet users with low bandwidth might not be able to see your video. I tried a 5 MB video but it couldn’t play. So keep your video as light as possible. The video used for the demo site 2017.wordpress.net was only 3.9 MB and 17 seconds long.
- Your video editor must allow a customized 2000 x 1200 aspect ratio settings if you want to adhere to this recommended size. iMovie, for example, cannot create a 2000 x 1200 video. However, a 1080p video is just good enough.
- Adding an audio to your video makes it size heavier.
Here’s the video that I originally made for my site.
You may want to read an article I wrote on how I made and edited this video with YouTube editor and learn some tips on video editing.
If you do not like to use a video header on your front page, you have the option to use a header image. Likewise, WordPress Twenty Seventeen recommends a header image that is 2000 x 1200 pixels in dimension. This is to maintain the good quality of your image even if viewed on larger screens; however, limit the weight of your image to 500 kb or lower. Upload images that are exactly 2000 x 1200 pixels. It makes your images lightweight and saves space on your web host server. There are software, that you can download for free, to crop and resize images such as Fotor for Mac and FastStone for Windows.
If you want to use multiple images for your header, give your photos a common character or attribute by using filters. For example, you can make all your header images all sepia or retro. Multiple header images are displayed randomly.
You can have both a video header and an image header so that while the video loads up, your viewer can see your image header. Otherwise, your viewer is going to see a blank black space before the video starts to load.
Header Image vs Featured Image
If your header image is enabled, and you used a featured image on your post, you will see a horizontal crop of your header image above the navigation menu; and below it, you will see your hero (featured) image. With the two together, your page can look unappealing.
Either you disable your header image or not use a featured image. A featured image, however, is helpful especially when sharing your post on social media sites. If you disable your header image, your viewer will see a blank screen before your header video starts to load.
- WordPress Twenty Seventeen demo site
- Customising WordPress Twenty Seventeen by Design Bombs
- Creating parallax sections on Twenty Seventeen home page by wpmudev