Every year, WordPress comes out with 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.
Customising WordPress Twenty Seventeen
- 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.
A video on the front page of your site is a good way to attract viewers because of motion. Use a header video that introduces your site or promote a product. Keep the audio of your video soft and subtle. 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 to 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.
Here’s the video that I 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