Elementor has long been the go-to page builder plugin for WordPress. If you want to build your own website and customize it to your liking, Elementor can be an invaluable tool to help you achieve your vision and do so with relative ease. In this article, we’ll look at how to create a header using Elementor, an easy process that can be done within minutes. You’ll learn how to pick the best header images, create the perfect spacing between your logo and primary navigation menu, add custom elements such as text or social media icons, and more!
What is a header?
A header is a block of text, images, and/or other content that you can use in any page or post. The same way WordPress has different styles for default text, you can use multiple types of headers in Elementor. For example, in some pages, you may want an introduction-style header (in which case you will probably only display one image) while in others it might be more appropriate to include several social media links and categories that are relevant to your website. The following steps will show how easy it is to create different kinds of headers using Elementor Page Builder.
3 Tips to Create an Amazing Header
Creating an amazing header using Elementor is easier than you think. In fact, if you’re familiar with WordPress, then you’re well on your way to creating one of your own. Let me show you how I created my most recent header in just 3 steps: 1. Start by uploading an image, gradient or solid color background 2. Add text and images that pop 3. Play around with different styles and features…and voila! An amazing header done right in minutes!
Step 1 – Choose your color scheme and fonts
Selecting your header color scheme can be intimidating, especially if you don’t have much experience working with colors. The trick is to keep it simple and stick with two or three colors that fit together well. For example, bright red and blue-green make for an eye-catching combination of colors, but they can be tricky to work into your content in a way that doesn’t feel unnatural. To get started, choose one neutral color such as black or white and one vivid color such as red or green.
Step 2 – Add your logo or slogan
This can be done from your website’s dashboard, although it’s important to have your logo and slogan in place before you launch. A good idea is to spend time looking for inspiration and options as you write your company name. You don’t need to stick with your business name as a slogan, but it can be an easy way of showing off who you are without much effort. How are we different? Why should people choose us? What makes us special? These questions should all be asked when creating a logo or slogan. It will help keep things streamlined, clean and easily recognizable when writing a professional post by providing people that first glimpse into what you do.
Step 3 – Pick your social media icons
We’ve created some header options for you, which includes icons for Facebook, Twitter, and Google Plus. These are added in edit mode (step 5). You can also add your own icon or use our no icon option. The social media icons display on both mobile and desktop devices.
Step 4 – Set your column size and elements position
Open Columns section, set number of columns and column size. In Design tab, select which elements are you going to use for your header. These can be different options such as images or text elements (Heading1, Heading2). Choose also if you want transparent backgrounds for these elements. Click Apply changes button on top right corner and here you go! You have created your first WordPress element by Elementor.
Step 5 – Make your header responsive
In order for your header images and elements to work properly on mobile devices, you will need to edit them in one more way. In Elementor, open up your header module and go back into editing mode. Look for where it says Responsive on the left side of your screen. This option is used for most other page elements as well but it is not always necessary. However, since our main goal here is keeping mobile visitors happy (who are more likely to look at our site’s content than desktop users), we need to ensure that our header stays at a fixed width and height so that it does not get stretched out when viewed on an iPhone or any other mobile device.
Step 6 – Add elements to make it unique
Now that you have all your keywords, it’s time to take it one step further and make your posts unique. To do so, we’ll be using Google Image Search for Step 5: Add elements to make it unique. With some of these pictures, you can use a Creative Commons image. This will give you more freedom over how you use them. Let’s get started!
Step 7 – Set condition and publish your header
The last step is to publish the header. What you need to do is just simply hit the publish button in the bottom right. It will show a popup. Here you need to set up a condition where do you want to show your header exactly. Setup the condition and you are all done! Your desired header is ready to show.