12 Hero Image & Header Examples In Elementor [Free Download]

We've just released 12 free hero image and header UI Kit templates. In this post, we go into details about the techniques we used to created each header.

elementor-hero-ui-kit

It takes 50 milliseconds for users to form an opinion about your website (That is only 0.05 of a second!) . We all want that impression to be something like: “Nice lookin’ site!” and not: “Yikes! that’s ugly.”

You can find an endless list of blog posts on the subject of improving the visitor’s first impression, advising you with tips like: create an emotional reaction, or: play around with colors… That kind of advice doesn’t work! Luckily for you, this article is not that sort of marketing dribble.

Instead, we’ve got 12 free winning examples of hero images and headers that you can replicate to create the right immediate impression on your visitor. In this article we will explain how we created these templates, so you too will be able to create such hero headers on your own.

One Thing Before We Start…

The UI kit is available for free, for a limited time, in Elementor’s template library right now.

If you don’t already see it in your predesigned templates, go to Elementor’s Settings Dashboard, and press the ‘Sync Library’ button. After doing this, edit any page with Elementor, press the ‘Add Template’ button and insert the Hero image Kit template that was added.

You are invited to log in, and add the hero template to your page. The link at the top of this page includes the PSD version of the templates, so you can open it and see exactly how our prototype looked like.

We want this guide to be as actionable as possible, so before we start, we suggest you create a new full width page with Elementor, and add the Hero template. Adding the template will allow you to edit each of the 12 hero headers. If you see a template you might want to customize and use, simply save that section to your library and use it on any other page.

What Is an Hero Image and an Image Header?

You might not be familiar with the name, but you are certainly familiar with them.

A hero image is a large image, usually a wide-screen image, that is placed above the fold at the top of the page. It’s goal is often to draw the attention of the visitor and intrigue the visitor to keep reading. 

Hero headers are the sections that appear above the fold of the page. These are essentially prominent blocks that reside in the most important area of every page. This is why the tips in this article can be so useful, and why you should keep them in mind as best practices whenever you create a new page design.

I am certain that each and every one of you can find at least one new thing you didn’t know how to do before.

hero-scene-09

1. Columns Widget: Create a Hero Image that Offers More Information

The Columns widget lets you add several columns that are positioned below a single colum, and inside the same section. This is perfect for the hero header, if you want to create one that describes the site’s service more elaborately.

Even though it’s hard to understand the use of the Columns widget at first, it actually comes in very handy in the day to day tasks. As you can see, it let us create a set of 4 columns under a single column, in one section that shares the same background image. We use this widget a lot in our own designs, and we recommend deciding on using it in the early stage when you plan out the pages layout.

How to do it: Drag the Columns widget onto the section, and use it as regular columns.

hero-scene-02

2. Percentage Sizing: Get The Right Fit for All Devices

Most WordPress design is done using pixels. Designers don’t give it much thought, until their client switches to mobile and sees padding and margin that are too large.

True, we’ve added Mobile Editing, letting you set different sizes per device, but there are still variants for computer screen sizes. The difference between an iMac screen and a small laptop is huge. This is why we set the left padding for this hero header to 20%, so it is always calculated as 20% and looks perfect no matter which computer you are viewing it with.

How to do it: Go to Column > Advanced > Padding and change the scale to the percentage icon.

hero-scene-11

3. Color Overlay: Correlate Any Image to Your Brand Colors

One rule of thumb that helps create a much more consistent and professional looking design is the proper use of brand colors. With tints and shadows, you are able to use practically any background image for the hero header, and transform it to be aligned with your brand colors by adding a background overlay.

With this hero section, we’ve streamlined the city image by adding a purple color overlay that is set at 50% opacity. This matches our own purple brand color, that also appears in the video screenshot.

How to do it: Go to Section > Style > Background Overlay and choose a color and opacity.

hero-scene-07

4. Image Overlay: Add Texture to the Background

In this hero header, apart from using a dark blue overlay, we have also added an image overlay with a texture image. This gives a unique washed effect to the whole section. You can experiment with various textures, available for free download at Transparent Textures.

How to do it: Go (again) to Section > Style > Background Overlay and choose a color, the texture image and opacity.

hero-scene-12

5. Mockup Image: Display Your Product Inside a Mockup

You can use mockups to display your product differently. For apps, software or plugins, the right way to go is usually mobile and desktop mockups. For other products, you can use picture frames, books, boxes etc. After choosing and downloading the relevant mockups, customize it and add your own product to the image. I recommend using a mockup from Pixeden, that update their collection frequently and have recently added mockups for iPhone 7.

Cut the image and have it appear as if it is popping up from the bottom of the screen (or from the side). This trick is most notably used by Apple, as in this page where the TV screen is cut at the top.

How to do it: To get this effect, you have to make sure there is no space beneath the image. Go to Section > Layout > Columns Gap > No Gap. Below this setting go to Column Position > Bottom. Make sure all padding and margin settings are set to zero.

hero-scene-06

6. Bottom Column Position: Play Around With the Text Position

Whereas beginner designers tend to overuse effects, and embellish their designs with tedious elements such as flying cat animations, top notch designers know that there are many possibilities to be original and creative simply by playing around with the layout. Aligning the column to the bottom of the section is one example where you can create a really original looking hero image easily.

How to do it: Go to Section > Layout > Column Position > Bottom

hero-scene-10-1

7. Postcard Column: Make Your Offer Stand Out

This is a simple trick, but a powerful one. By setting a margin on all sides of the column margin, and centering the content, we focus the attention of the visitor on our product. The eyes of your visitor get intuitively drawn to the protruding postcard column, so make sure the copy in that column is well written.

How to do it: Go to Column > Advanced > Margin and set the margin for the column. You should also center the content by going to Section > Content Position > Middle.

8. Background Fallback: Don't Leave Out Your Visitors on Mobile

We have been pumping our users to pay attention to responsive design, what with the release of Mobile Editing and all. Another important mobile issue we haven’t discussed is setting an image fallback option on mobile for videos. Because video backgrounds are not visible for mobile, we have made an option to add a fallback image, that will be used in any case the video doesn’t load. You can create a screenshot of the video, or use any other image to display for your visitors as an alternative to the video.

How to do it: Go to Section > Style > Background Fallback

hero-scene-04

9. Drop Shadow: A Great Looking Hero Image With a Simple Shadow

Sometimes, the best looking designs are the simplest. Here, we see the simplest and most common section, that includes a video, heading, text and button. What makes all the difference is the soft shadow that was added to the video.

How to do it: Go to the Video Widget > Advanced > Background & Border > Box Shadow > Yes, and set the color, blur, spread and other settings.

hero-scene-08

10. Background & Image: Use a Background and an Image That Relate

In this hero image, we have created a cool connection between the mockup and the video background, so it looks like someone sat down in the park and opened up their laptop. You can connect the background and the image in various ways, and get inspiration for backgrounds from the free background videos offered on Coverr.

How to do it: For this hero header, we have added a background overlay to darken the background, and have stuck the image to the bottom of the section with no gap, as I described in point 5.

hero-scene-05

11. Colored Column: A Split Screen of Beauty

By creating a split screen, one side with a video and the other with a strong background color, we can create a bold statement for our hero header, and present the hero image in an original way. The column’s color stretches to the full height of the section.

How to do it: Go to Column Position > Stretch

hero-scene-03

12. Fit to Screen: Make Sure the Hero Looks Great Across Screens

iMacs, laptops, tablets, smartphones… There are so many screens your visitors use, so many resolutions. Setting the hero header to fit to screen is certainly an important best practice, in order to make sure the entire above the fold section stays visible for all screens. It also displays the background image in the best way possible. This is a good chance to recommend using images from Unsplash, that over the years have remained on top of the charts with regards to free CC0 stock images.

How to do it: Go to Section > Layout > Height > Fit To Screen

Conclusion

This is your chance to get one of the best introductions to designing in Elementor. Create a new page, insert the hero image template, and start going over the sections.

By understanding how we set up each hero image, you’ll be able to get a better grasp of using Elementor to create your own beautiful and original hero headers. 

* Update – I also suggest you check out our recently published background image tutorial.

About the Author

Ben Pines

Ben Pines is Elementor's CMO. He has been in the online marketing industry for over 10 years, specializing in content marketing. WordPress has been Ben's platform of choice since the time it was used solely for blogging.

55 Responses

  1. Excellent jumping off points for designers to create their own unique Hero headers. One question that I have is with regards to the use of video backgrounds. What is the best way to use these without using up excessive bandwidth and slowing up your site?

    1. Start with the templates named ‘homepage’. Choose according to the category that is most relevant for you: tourism, law, architect, restaurant…

  2. Elementor is a great and powerful tool. But I have some questions.
    I have three questions about creating sites of “zero” using Elementor.
    1 – How to create effect “Parallax” with Elementor?
    2 – How to create and customize “navigation menu” with Elementor?
    3 – How to create a “header” (top) of the site that contains the logo and navigation?

    1. 1 – Go to Section > Style > Background > Image > Attachment > Fixed
      2 – Elementor is a page builder and does not control the theme navigation menu. To add a sidebar menu to a specific page use the Sidebar Widget.
      3 – The theme is meant for this, and not the page builder. We recommend using our http://pojo.me themes.

  3. Great! Learning by the example is the best way. Thanks for this.
    Just one question. You write “You are invited to log in, and add the hero template to your page. The link at the top of this page includes the PSD version of the templates, so you can open it and see exactly how our prototype looked like.”
    What do you mean by log in? Where to log? I can add the template by I don’t understand where to log (and what for). More I can’t find the PSD version. Is it the preview?

      1. WordPress unpacker and installer will not install this HERO UI.

        Installing Plugin from uploaded file: Elementor Hero UI kit.zip
        Unpacking the package…

        Installing the plugin…

        The package could not be installed. No valid plugins were found.

        Plugin install failed.

    1. This is actually very easy to achieve. You have a two column section, on the left you place the ingredients, on the right you place the image and the recipe. I would also suggest you visit the Elementors community on Facebook and post it there. https://www.facebook.com/groups/Elementors/
      Let me know if you are still having difficulty getting the right result.

  4. Hi! Congrats! I just used Elementor! And so far is amazing! Great job guys!

    One question please:

    in a section, style>link video

    the placeholder says it “youtube video or video…”

    so it can’t be vimeo video for a section with a background video?

    how I put a vimeo video or a local video instead of an youtube video? I am having a lot of troubles with the related videos(I put the url with parameters and tested in others websites and it works but seems elementor doesn’t play well with them)

    Thanks!

  5. Thanks for that quick answer!

    for example: https://www.youtube.com/watch?v=pRi0K3jUhjw

    but in that way “recommended videos” shows up at the end(like for 0.5 seconds) is like a blink, then start the video again(which is fine), I saw in a video of the official channel on youtube that video background was working well, could be a bug in this version?

    Thanks in advance!

  6. I love this page builder!! It is the best available, and I have tried quite a few! Thanks so much for creating such a awesome tool!

    I have one question: Is it possible to align a column/section to the left of a page rather than centered? Content can be aligned but I can’t find anything that aligns the sections, or am I missing something?

    Many thanks in advance!

    1. This answer is a bit complex to understand, because you have to understand how Elementor is built. The basic layout is that the section takes up the entire width, or is centered to any width you choose.
      Having said that, you can make any customization to that section. For example, you can add a left padding of 50px, leaving a space on the left.

      Can you draw or explain which layout you are trying to get?

  7. Hi Ben,

    Thanks for your reply. The theme I’m using has a side column menu and the canvas has side margins of, let’s say 8%, so the content is contained (not full width). It’s fine on smaller screens, but on large screens, my main image is way too big (art site), so I wanted the content to be boxed at 900px and aligned to the left margin. I noticed that the content within the sections can be aligned, but the column is centered. I’m tying to align the column.

    If it can’t be done, it’s all good. I still love this builder and will work around it.

    Many thanks in advance!

  8. Sorry, I’m new at this. How do I add the UI kit to my wordpress site? I tried it by Import Template button but it doesn’t accept zip files.

    1. You can just have it at 100%, because different screens have different resolution. You can also go to your Google Analytics account and see which resolution is most popular.

  9. That doesn’t make any sense to me. To load an image that is say, 6400px wide makes no sense; and is not uncommon to have such sized images when photographed in RAW format. We ask our photographers to shot at highest resolution so we can optimize the images, and yes, for multiple screen sizes. Therefore, let me restate:
    If we had an image that is 6400 pixels in width and wish to process it for use in a hero header in Elementor, at what sizing would optimize the viewing?

    1. The maximum image size that i would recommend loading for a hero header is 1400 pixels wide. to make the site load faster (which is a big deal our days) I would say save it in a format on a tiny PNG.

  10. Hi, I’m brand new to Elementor and must say I am quite confused. I am trying to create a hero image effect in the Generate Press theme that is similar to what you see in the basic WordPress Twenty Seventeen theme. I’ve figured out how to insert a Hero template into a page but the first thing a visitor sees to my site is the Generate Press header bar with the site title on top and the hero image underneath. It appears from your video that there is a way to make the hero image the only thing that appears at the top of the page but I don’t see how to do this. Are you using another theme than Generate Press in your hero demo and if so which one? If you are using GP how did you get rid of their header?

    1. After I wrote the above post I found a YouTube video that answered my question. It suggested using the Blank Slate theme and gave some code on how to remove the header. That worked!

  11. I uploaded my video to my website and used the link instead of youtube’s link… It worked but instead of being aligned to the center and stretched, it was aligned left …

    I didn’t want to use a youtube link because it suggests other videos at the end… so it looks weird. The video is like a background banner.

    How can I align it properly?

  12. Sorry. I have just downloaded Elementor and installed it. I want to use it on my new website. Where can I download the free templates including the Hero UI. Thanks.

  13. Hi Ben, when I add the Hero UI kit from templates to my page, I get all 12 images on the page. Why I cannot get a single image only. And I am sorry to ask this question for a second time but the first question did not show on the discussion board here. Thank you!

    1. You can save each section of the hero UI kit as a section template and re-use it on any site you are creating.

    1. It’s not a problem removing specific elements. I would suggest you visit our Youtube channel, where you will be able to find many different tutorials that will help you improve your knowledge.

Leave a Reply