Meet Our New Innovation

Grab It at Flat 50% OFF

Elementor Tutorial

How to Create a Stunning Sticky Header Using Elementor (Elementor Tutorial)

You may already know that Elementor is an amazing page builder. Because Elementor page builder allows a non-coder designer to create 100% unique WordPress pages. This Elementor Tutorial will show you how to create a header using the Elementor page builder.

The Elementor page builder is gaining trust among WordPress users for its flexibility, visuality, easy drop-and-drag, and user-friendly facilities.

In other words, over 1,283,275 live websites are using Elementor.

Maybe you do not like your current WordPress theme header. In that case, you can choose the Elementor page builder to customize your website’s header or footer part with ease.

The header and footer section is the most important part of any website. Because a visitor or customer will see these sections first and then navigate other web pages.

So you have to design these two sections carefully. And you must provide some information like social icons, search buttons, contact numbers, and menu widgets.

To be Noted: This is not the tutorial on designing a footer. Learn how to build a footer with the Elementor.

Why Should You Choose Elementor

Elementor Tutorial

If you don’t have any idea of coding, then the Elementor page builder will be the best option for you. Because you can create amazing and effective designs with the Elementor.

Additionally, most WordPress users prefer Elementor to customize web pages. It is one of the best tools to edit, customize, design, and more on the webpage.

Again, Elementor includes essential add-ons to customize your website with ease. With the Elementor Pro, you will get more 30+ widgets to improve your design workflow. So you will get all of these facilities at large with the Elementor page builder.

You can pick the Elementor page builder for the following reasons:

  • Easy to use
  • You can design with the live site
  • Essential widgets to customize webpages
  • Mobile editing facility
  • Undo/redo and revision history
  • Visual and inborn form builder
  • Custom fonts, Global widgets
  • And more

What Do You Need To Create a Header With Elementor

Both Elementor Free and Pro are stacked with exceptionally valuable highlights. If you are running a WordPress website and develop websites all the time, then Elementor Pro will be an extraordinary expansion to your toolbox.

Elementor Tutorial
Custom Header with Elementor

Before thinking about creating a header, you must keep the two following things:

  • You have to install the Elementor page builder-free version
  • And then upgrade to Elementor pro

Creating a Stunning Header With Elementor (7 Easy Steps)

This section will show step-by-step instructions on how you can design or create an amazing header for your website.

Install The Elementor Free And Pro Version

The installation process of Elementor Free is the same as some other plugins:

  • Navigate wp-admin
  • Click Plugins→Add New Plugins
  • Type “Elementor” and click on Install Now
Elementor tutorial
The installation process of Elementor

5. Now “Activate” the plugin

Elementor tutorial
The installation process of Elementor

Facts You Should Consider Before Starting This Elementor Tutorial

You will get lots of free photos, blocks, and templates with the Envato elements plugin. So you can enjoy an amazing experience with Envato and the Elementor page builder plugin together.

Step One: Create a Blank Header

Go to Template > Theme Builder > Select Header

  • A pop-up will appear. You will be given some options to choose the template type you want.
Elementor Header Templates
  • Select the header you want to create. After clicking on the “Create Template” button.

Elementor will show you many free templates and blocks. And you can also save your favorite template.

Select the header template for your web design

Step Two: Setting Up The General Layout

To create a custom header, you have to decide what type of layout you need.

  • To start with, click on the main customization button of your header part to edit the Layout section in the sidebar:
Elementor Layout
Selecting Layout
  • And then pick up the structure you want
Page layout
Selecting Structure

Note: We used the marked layout in the above image to create the header.

This is a very simple step. You can add a logo very easily. You can do it in two ways.

  1. Go to Dasboard>Appearance>Customize>Site Identity
adding logo for elementor
Adding logo
  • After that, you can choose the logo and set it on the header.
How to add logo
Adding logo on the header

02. Select the Site Logo block in the sidebar. Drag it where you want to use it.

Adding logo to Elementor header
  • Finally, it will fetch your actual logo automatically after dragging ‘Site Logo‘ to the dotted area.
How to adjust logo
Adjusting logo
  • In this setting, you can choose how the logo should look when you click, and you can also adjust its size and alignment here.
  • You can do a lot of things using Style and Advanced option.
How to configure logo
Configuration of site logo widget

Step Four: Adding a Menu

  • Select the ‘Nav Menu‘ widget from the left sidebar. Drag it to the header area as in step four.
How to add custom menu
Adding Menu
  • And it will adjust the menu that you have created.
How to add menu in elementor
Adding customer menu

Here are the important things you should know about.

Edit header menu
  • Menu: Select the menu you want to feature. You can choose from Appearance → Menus
  • Layout: You will get Horizontal, Vertical, or Dropdown
  • Align: Left, center, right, or stretch to fill the entire available area
  • Pointer – How you like to mark the active link
  • Animation – How you like the pointer to look like

Step Five: Adding a Search Field

To add the search field in the header you just need to select the search widget and drag where you want to set it.

Elementor Tutorial
Adding search widget

In this section, you will get:

  • Skin – You will get Classic, Minimal, and Full Screen for the
  • Placeholder – You can leave this section or keep something like “search” there
  • AlignmentSize – You align the search box from here
Edit place and alignment for Elementor header

Step Six: Add other Extra Elements

To make your header lucrative, you can add a widget from the left side of your screen. You can experiment with these widgets to get the amazing effect you like.

Here is a screenshot of the widgets. You can search for whatever you want.

Extra elements for header customization

Using widgets, you can add social icons, page header text, and more.

Step Seven: Publish your header

Moreover, this is the most important part. After designing your header, you have to be very careful.

  • To apply this, click on the PUBLISH button on the left side of the footer. You’ll see a popup asking where you like to show your new header.
How to add condition in elementor
Applying condition
  • The basic condition for this section is to select “Entire Site” and then hit the Save and Close button.
Elementor Tutorial
Adding Condition

Finally, your header part is ready. Hurray!!!

Elementor Tutorial
Elementor Tutorial

So, by following these steps, you can easily design your own header for your website.

Check the video below to create a website header in WordPress:

Top 5 Sites Build with Elementor

At the very outside of creation, the Elementor has turned into a leading WordPress Page Builder and a useful asset, giving a compact solution for website developers.

As a result, many designers are using Elementor, which results in adding new users every month. Here, we are going to share the top 5 websites that have designed and developed their website through the Elementor page builder.

Elementor reached approximately 2 million active installs

Bringing the web

Elementor Tutorial

Bringing The Web is a specialist co-op for a wide scope of online arrangements. It exhibits a well-combined structure language, just as a delicate sea green/blue topic shading.

MO SCHALKX

MO SCHALKX

MO SCHALKX is a commercial photography and film website. The owner of this website is a dutch. And he develops his website with Elementor. This is a portfolio website. On this website, he uploads all his current projects.

CASA DA COMIDA

CASA DA COMIDA

CASA Da Comida is a Lisbon-based eatery that exhibits everything a cooking site needs to incorporate. The site figures out how to pass on the high quality of the restaurant.

Most importantly, it includes full-screen HD video and images. You will also find an impressive review section for Google, Facebook, and Tripadvisor scores.

CREATER

Elementor Tutorial

CREATER is a web solution service provider from Malaysia. The visitors will be surprised to see the black and green mixture background at first sight.

The predictable dark and green background shows up on all pages and is likewise dominant in the diverse custom illustrations on the site.

HEXAGON WEB

HEXAGON WEB

HEXAGON WEB is a french development website. Their website is colorful, with trendy illustrations and a fine beehive design in the background.

Additionally, they used shape dividers and curve illustrations on their website, as a result, they achieved a fluid layout effect.

Looking forward to Elementor

Above all, you can assume that the Elementor page builder is becoming the first choice for the web developer. People from all around are using the Elementor page builder to design their websites.

Every month the Elementor team releases a showcase. In this showcase, you will get the top 10 websites that are using the Elementor page builder. Therefore, our list is according to the showcase of the month from the Elementor website.

To power up your site built with Elementor or customize your web pages, we developed HappyAddons, and almost all of our widgets are completely free for you. Don’t forget to give it a try to HappyAddons- the ultimate widget collection for Elementor.

Are You Ready To Create Your Stunning Header With Elementor?

We believe that you have learned something useful from this Elementor tutorial blog. And you will be able to design any header for your website, blog, or business website.

However, if you have anything to say or questions, feel free to ask in the comment section. We will be glad to reply to you.

Share this post

Related Post

Day
Hrs
Mins
Secs

are you Sure?

Price increases in… 👇

Days
HOUR
MIN
SEC