Introduction
In this blog post, I’m going to help you create your own custom header design for your website. When you created your website, you already have a default header installed based on the website theme you’ve selected. Maybe you want to create your own header version for your specific business/company/blog? Then continue reading this post, I will show you exactly how to do it! Choose your own font, colors, upload your own logo, upload your navigation menu. Let’s get started!
Install 2 Plugins
We are going to use wordpress and 2 plugins to create our own custom header. Once we are logged in to our wordpress dashboard, come to the left-hand side where the navigation is (colored in grey), select plugins and then ”add new plugin.” We are going to install & activate 2 plugins – elementor and elementor header & footer builder. Once completed, come back to navigation to the left, select appearance – ”elementor header & footer builder.” Click on ”add new.” Name your header.
Edit Your Header
Click on ”edit with elementor.” You will be automatically redirected to the page where you can start creating your header ”from the ground up.” In this elementor header tutorial, we’re going to create header style with a logo to the left and navigation menu to the right. Click on the plus icon, select structure accordingly (2 column structure) and then come to the top left corner where all the widgets are and search for ”site logo.” Drag & drop it to the left column and then select custom image so you can upload your own logo (or leave it as it is if you’re fine with the default logo of your selected website theme). You can increase/decrease the size of your logo by selecting style – ”width.” Choose your ideal size. Now we need to drag & drop navigation menu widget to the right column next to the logo. Again, on the left-hand side, search for ”navigation menu.” Style of navigation menu is going to be typical, containing these sections – About Services Projects Contact Us. ”Bone structure” of your header is now all set. If you want to change the background color, click on 6 dots, select style – ”background” on the search widgets section to the left and choose your background type. I’m going to use hover type containing 2 different colors. You can choose classic type of background with 1 color if you prefer. Once you’re done, click on ”publish” to save changes you’ve made to your new header.
Display On Your Website
Now we need to add our new header to all the pages of our website we choose to. Come back to your wordpress dashboard, select appearance – click on ”elementor header & footer builder.” Then click on ”edit.” Choose header under ”Type of template.” Under ”Display on”, select all the pages of your website you wish to display it on. Scroll back up and click on ”update” on the right. Congrats, your new header is now live! One last step before we are ready to use our new header, in order to avoid error showing up when trying to edit it again, we need to change permalinks structure. On your wordpress dashboard, come to settings – select ”permalinks” and under permalinks structure, make sure to select ”plain.” Scroll down and click on ”save changes.” Your new header website design is now ready for use!
Bottom Line
Purpose of this blog post was to learn how to create your new custom header design for your website using your own logo and navigation menu. You know how to select your desired background color as well. Once you’ve finished designing your header, you uploaded it to all of the pages of your website you selected. Thank you for reading this quick elementor header tutorial and have fun using your new header!
Leave a Reply