Having trouble creating a header in your WordPress website? do you need to create a slideshow header for your online store? whether you run a restaurant or a paintball club, you need a modern website with a slideshow header on top of all pages that will help you show your photos like a pro!
in this complete tutorial, I will show you how to create a powerful and Attractive header with Elementor. Then we will add it to your website to appear on all pages of your website.
Ready? Let’s get started.
What You’ll Need
In order to create a slideshow header for your WordPress website, you’ll need two things:
- Elementor Plugin
- Elementor Pro Plugin
Let me start by describing the installation process of Elementor Core and Elementor pro. As you may already know, the Elementor plugin has a pro version that adds more widgets to the Elementor core. Unfortunately, we need the pro version to access some features like Image Slider or carousel. In order to install the plugins, in WordPress left-hand menu, select Plugin > Add New and search for Elementor.
After you’ve installed and activated it, if you want to access to Slides block in Elementor’s sidebar, you need to upgrade the plugin to the pro version. Go ahead and submit Elementor > Go Pro.
However, if you want to stick with the free version, then you can use a simple image block instead of the Image Slider element in your header.
Creating top bar
So now that you have installed the pro version of the plugin, let’s begin this tutorial.
Step 1: Create a header template
Log in to your WordPress admin area and select Templates > Add New from the left-hand menu.
Then you’ll see a popup window. Now you can specify the type of template you want to create. So, open the dropdown and make sure it is set to Header. Give it a name and click Create Template.
Step 2: Select your topbar’s structure
Once you click the Create Template button, Elementor will take you to the editor screen. It is an easy to use editor designed to help you create your templates by drag and drop. Now click the + button and select 16,66,16 structure like the screenshot below.
Step 3: Add a logo to your topbar
In order to add an image to your topbar, you can use the Image block and Site Logo block. Easily pick the Image block from the sidebar and put it onto the left column of your topbar. Then in the left-hand settings panel, choose your logo and give it a custom link.
Step 4: Add a menu
Grap the Nav Menu element from the sidebar and drag it into your topbar.
Now open the dropdown and select your pre-build Menu. Then align it in the center. If you don’t know how to create a WordPress menu, read our complete guide about “Working with WordPress Menus – The Complete Guide For Beginners“.
Once you add the Nav Menu block to the top bar and select your menu, you’ll need to adjust its settings like the screenshot below.
Do the following:
- Make sure the Style tab is selected.
- Change the typography as you like.
- Pick a color for the text.
- Pick a color for the pointer.
- And adjust horizontal padding.
Now select the advanced tab and give it a padding of 12 pixels.
Step 5: Add a Search Form block
Every website on the internet needs a Search Form or Search Field in its header. So, let’s add the Search Form element to our top bar. Grap Search Field element and drop it onto the right column of your header.
When the edit section appears on the left-hand sidebar, align the Search Form to the right, select Full-Screen skin, and resize it as you want.
Now, select the advanced tab and set the padding-top to 12 pixels.
Well, by now you have created your topbar. Next, you need to add an Image Slider to your header.
Creating Image Slider
As I mentioned above, in order to create an Image Slider, you need to install Elementor pro on your WordPress website. I assume that you already installed Elementor pro.
Step 1: Add a new section
Let’s add a separate section to serve as our Image Slider. Click the + button below your topbar and select the default structure like the following screenshot.
Now, you need to make it full width. So in the setting section make sure the Layout tab is selected. Then set the Content Width Dropdown on Full Width and Column Gap Dropdown on No Gap.
Step 2: Add Slides block to your section
To create your Image Slider, scroll down in the sidebar and find Pro elements. Then select the Slides block and drop it onto your new section below the top bar.
It will provide you with 3 slides. You can also add more slides. Just easily click Add Item.
Step 3: Customize your Image Slider
Next, you should adjust the settings for each item in the sidebar. so select the background tab, choose an image, and turn the Ken Burns effect on.
If you want to edit content, make sure the content tab is selected. Then you can change the title, description, and button text as you wish.
Save and publish
In the end, you need to publish your header and replace it with the default one. Go ahead and click the publish button, add a condition, set the dropdown to “Entire Site”, and click Save & Close.
Congratulation! Your new header is now live. So head over to your website and take a look at it.
Elementor is a page builder plugin that will help you to create complex layouts and templates visually. As you already know, Elementor is a free plugin but If you want to unlock additional features like the slider above, you can get the pro version. So if you want to create beautiful headers, footers and pages, then you can use Elementor to create an original-looking complete website.
Did you find this tutorial helpful? If so, I’d be grateful if you’d help it spread by emailing it to a friend or sharing it on Twitter or Facebook.