In this step by step guide, you will learn how to make WordPress Website Header with Elementor
If you are new to WordPress or don’t have technical expertise, and you want to learn how to create a header for your WordPress website, this guide is perfect for you. By following this tutorial, you will be able to construct a responsive and professional header for your website.
Make sure to read until the end and feel free to leave a comment if you have any suggestions, questions, or concerns about this guide. We will respond to each comment.
Let’s start building header
The header has a significant impact on your website as it acts as a central navigation hub, enabling users to effortlessly browse and navigate through your content. Ensuring that the header is responsive and capable of seamlessly adapting to diverse devices and screen sizes is essential.
To build wordpress website header with Elementor you need a Elementor Pro (premium version) or you can use elementor addon (Elementor Header Footer Builder) to build website header.
Build Website Header With Elementor Pro
Before you begin constructing the header for your website, it is essential to create a navigation menu. This step is necessary as the navigation links need to be added to the header, allowing users to navigate through your website easily.
Create Navigation Menu In WordPress Website
For create menu, hover over Appearance and click on Menu,
there you can create a navigation menu for your WordPress Website, First! set a name for your menu (example “Main Menu”) and select display location, in this case we a going to create a navigation menu for header , so choose “Primary Menu” and click on Save Menu.
Now you can add pages, categories or custom links to your navigation menu. If you have already created required pages or categories in your website, you can see them in your left side, and select those pages or categories and click on add to menu.
Or if you want to create a custom links for navigation menu you can create as well.
Here’s how you can create custom links for navigation menu.
Click on “Custom Links” in the “URL Tab” put URL where you want to redirect user, and in “Link Text” add Link name you want.
Now you have added Pages, Categories or Links in your menu and you are ready to design header with elementor for WordPress website.
Now let’s start creating header, in WordPress admin panel hover over Templates and click on Add New, in type of template choose “header” and give it a name to your header, example “Main Haider” and click create template.
Now you are in elementor editor page, click on (plus) “+” sign and choose how many columns you want in header, it’s totally depends on your requirements that which type of header you are going to design, if you want to design a simple header (only logo and navigation) then you need to choose 2 columns layout, or if you want Logo, Navigation and Button in your header then choose 3 columns layout.
We are going to take 2 columns layout ( 1 for Logo and 2nd for navigation) for this tutorial, but you can choose as per your requirements.
After choosing layout select section and set width and height of Header (if you want header to be full width, set the section width to full width, usually we set width of 1200px and 70 px of height for header)
After choosing section width and height, now select first column and drag “Logo” or image widget from elementor widget panel to first column.
If you are going to choose Logo widget, make sure first you have uploaded site logo in your theme customize option, but if you have not uploaded before, elementor also give you option to choose your logo.
Here’s how to upload Logo in your Theme Customize option.
In WordPress admin panel hover over Appearance and click on customize option, there you will see few options but you have to find Site Identity or Header option (depends on which theme you are using) there you will be able to upload site Logo (make sure logo in Png format, because we need a logo with transparent background)
After uploading logo in theme customize option, now in elementor editor page you can drag logo widget and set image width as per your needs.(Usually we set image width 160 pixels to 200pixles) depends on logo image size.
In 2nd column drag Navigation widget and set typography (Font Family, Color and Font Size) of your site navigation.
Make Header Sticky & Add Box Shadow
Now Select Header Section (Main Section) go to Style>Background add background color, then go to Style> Border> Box Shadow and add box shadow
Add these values in box shadow:
Color Opacity: 0.3
Horizontal: 0
Vertical: 4
Blur: 15
Spread: -8
To make your Sticky, Select Header Section (Main Section) go to Advance> Motion Effects> in sticky option choose Top
After these steps your site header is created and ready for desktop/laptop but it’s not responsive for other devices, so we have to customize it and make it responsive for other devices (Tablet and Mobile).
To customize and make header responsive on all across devices, click on Responsive Mode, Responsive Mode can be found in bottom left side of your elementor editor page.
When you click on Responsive Mode then you will see a small horizontal bar on top of your elementor editor page, there you will see 3 devices icon (Desktop, Tablet and Mobile)
click on tablet layout (Icon) and set logo image width (reduce image width few pixels, if its 180pixels for desktop, you can make it 160px for tablet and 150 pixels for mobile) and set navigation links typography “font size” if needed.
After tablet layout now choose Mobile layout and make your website header responsive for mobile devices.
For mobile devices customization, there is few more customizations you have to do compare to tablet layout.
For Mobile layout you need to set image (logo) width and typography of navigation, but also you need to set drop-down menu typography and hamburger (Menu toggle button) icon size, color and position.
To adjust drop-down menu spacing for mobile select navigation widget, go to Style> Dropdown there you will few options to adjust paddings, Divider and Distance.
after these settings, Click on Publish, when you publish the header, elementor will ask you to choose display conditions, select Entire Website if you want to display on all website, or you can exclude any page if you want.
By investing time and effort in crafting an impressive header, you can make a lasting impression on your audience and elevate the overall aesthetics and functionality of your WordPress website.
Feel free to implement the tips and techniques shared in this guide, and don’t hesitate to experiment and customize your header further. With practice and creativity, you can design a captivating header that truly represents your brand and engages your visitors.
I hope this guide has proven to be helpful for you in creating your WordPress website header. If you have any questions or require further assistance regarding your website, please don’t hesitate to leave a comment. I am here to provide any support you may need and address any inquiries you may have.
