Founded in 2012 with an aim to deliver the best web hosting solution that's crafted for unmatched speed, high security and 24/7 support.
Changing the content and appearance of your website will be the first step of improving the default design, which is usually applied to your site after the installation of WordPress. Of course, you should begin by changing the design of your header, which is the exact point of this tutorial – to show you how to effectively and quickly to improve its content. For this tutorial, we will be using WordPress 5.2.2 with the Twenty Seventeen theme.
Assuming that you are already logged into the admin area of your WordPress installation you should navigate to Appearance → Header.
Then you will be redirected to the Custom Header admin page where you will be able to perform basic modifications on your header.
We will begin with the Header Image section of that page.
The main field is called Current Header, and as the name suggests, it is for the preview of the changes which were already performed on the component.
We will begin with the Header Image section of that page. To add a custom header image, you will have to select the Add new image option, which will allow you to choose the corresponding image. Once you click on it, you can choose if you want to upload an image from your local machine or use an already uploaded image from your WordPress Media Library. Once you select your image, the option to crop it as much as you like and then to save and publish it will appear.
If you want to remove the current image header from your website, click on the Hide image button.
Note that further customization of the Header is usually done in the files of the particular theme which you are using. Due to this, you should check your theme’s documentation if you want to switch the dimensions, borders, and colors of the header placeholder space.
When all of the changes are performed, and you are satisfied with the result, please use the Save Changes button at the bottom of the page so you can save the changes and finish the editing of your website’s top position element.
Adding a video as a header can be very beneficial for charity organizations, travel agencies, and real estate brokers, to name a few. Video materials draw the attention of visitors stronger than images. Videos also win faster the trust of visitors that the footage shown is legitimate compared to images that are easier to manipulate.
In WordPress, there are two ways of adding videos on the top of your page:
The first is by uploading a video directly to your Media Library. Note that this method can only be used for files that are less than 8MB in size. Dimensions can also be restricted by the container size in your theme (in our case, this will be 2000×1200 pixels). If your video is within the limitations, access the header configuration options and click on the Select Video button.
Even just an 8MB video in your header can increase your bandwidth generation significantly as it will be auto-played on every page visit. To avoid excessive bandwidth usage, check the next substep in which we cover how to embed a video from YouTube.
You will see a small box preview of the video and will be able to play/pause it as part of the review process.
It is a great idea to add an image even though you already have a video in your header. If for some reason the visitor’s browser doesn’t load the video or is slowed down in loading that element, the user will see an empty space if there is no fallback image already set.
For higher resolution clips that will be above 8MB in size, you will need first to upload your video to YouTube. Then copy its link and paste it into the appropriate field in this section.
The video should start playing immediately in your preview. The layout will also provide a dedicated pause button and even suggest similar videos via YouTube.
Congratulations! You now know how to edit the header of your WordPress website. With this, you can pin the attention of your website’s visitors from the get-go. For more information on the rest of the elements which you will come across on the platform and how to configure them, check our tutorial navigation menu on the left.