One of the most time-consuming parts when designing a web page is to work on the hero section. This is the most crucial part because hero section is what visitors first see when the page is visited.

To save you time in creating a hero section of your web page design (and to give you some ideas), I have created editable hero section templates for Elementor.

You can download and import them and then you use them on your Elementor design. All hero sections are created with the native widgets of Elementor. Meaning that you don’t need to install a third-party add-on.

In case you are not familiar with the hero section yet, let’s get to know it first.

Shortcuts ⤵️

• What is a hero section?
• How to import the templates?
• The templates
• Summary

What is a Hero Section?

From top to bottom, every web page can be divided into several sections (sometimes called blocks). Usually, each section is used to host specific information about a business — which is represented by the website.

In the web design world, a hero section refers to the top section of a web page. This section plays a role as the cover where you can place the headline of your business.

The hero section is the most crucial part of a website because it is the most visible part — other than the header. This is why you need to design it carefully with the right approach according to your business type.

If needed, you can use a design tool like Figma or Sketch to design a hero section before executing it in Elementor. This gives you absolute control over the design layout and style.

Of course, using Figma is fully optional. You can execute your design idea directly in Elementor.

How to Import the Templates?

I put together the hero section templates I created into a single folder. The templates themselves are available in a JSON format.

This means, you can import them directly via the Elementor editor. No need to install an extra plugin. I made everything simple.

Before you import a template, you need to make sure that the Unable Unfiltered File Uploads setting option is enabled because I use custom icons from Bootstrap on some elements.

You can go to the Elementor settings page to enable it.

Also, make sure that you use Container instead of Section as the layout system.

You can still import the template if you use Section, but the template may not look how it is supposed to be.

Is Elementor Pro required?

Yes. That’s because I added CSS snippets to some elements to achieve a specific design style which is not possible with the default options that Elementor offers.

If you are new to Elementor, you can watch the following video to learn how to import an Elementor template:

Make sure to set the page layout before you import a template.

List of the Hero Section Templates

1. Shatterstar

Shatterstar is a hero section designed specifically for a beauty saloon website. So, if you are currently working on a website for this type of business, this template is for you.

I applied a dual-column layout for this template, with the right column filled with a photo stretched to screen. The image remains stretched even if you zoom out.

It takes a little CSS snippet to create a layout like this and I added it directly to the container.

I also added a rotating text in the middle of the right and left column. I set it as the point of interest to impress visitors.

Key Features of Shatterstar:

• Dual-column layout with a stretched image background
• Rotating text
• A sleek fill button hover effect

2. Cable

Cable is another hero section I created that has a dual-column layout. The background of the right column is also stretched to the right screen. But this time, I used a solid color instead of an image.

You also need a little CSS snippet to achieve this layout and again, I added the CSS snippet directly to the section so you need to have Elementor Pro installed to get the snippet loaded.

As a bonus, I also included a sleek button hover effect created with custom CSS.

I used an illustration on this template, but you can replace it with a photo if you want. If you want to use an illustration too, you can go to SVG Repo or Storyset to get editable illustrations for free.

Key Features of Cable:

• Dual-column layout with a stretched solid background
• Highlighted text (custom CSS)
• A push button hover effect (custom CSS)

3. Zeitgeist

You can add user testimonials anywhere in your website. Including the hero section. I applied this idea to Zeitgeist.

I will be honest here. The design of this hero section is inspired by the Kit’s homepage where it displays user testimonials in a slide style. Elementor has a native widget — the Slides widget — which you can use to display user testimonials in such style.

I used orange as the base color of this hero template. You can replace it with any color according to your brand’s color system.

Key Features of Zeitgeist:

• Testimonial sliders
• Custom button hover effect

4. Bedlam

If you are working on a travel website, Bedlam can be a nice solution to kickstart your design when you are running out of ideas.

I used a video slideshow as the background of the section, which is achievable using Elementor’s default feature. The video is set in a full-width style.

You can go to Pexels to get short videos for free. To create a slideshow, you can use any video editor you like.

I myself use Filmora. It is an affordable video editor that you can get with a one-time payment option instead of subscription.

To save your hosting bandwidth, you can place your video to YouTube or Vimeo .

Key Features of Bedlam:

• Full-width video slideshow background
• Background overlay
• Transparent header

5. Rocket

Rocket is a hero section template I designed specifically for a marketing agency site. But of course, you can use it for other site types by editing the default content and assets.

One feature on this template that I want to highlight is the logo carousel that plays infinitely. I used the Elementor’s Image Carousel widget to create the feature, which uses a little CSS snippet to smoothen the transition.

Another feature you will get is a transparent header. The template template itself is included as a bonus.

Key Features of Rocket:

• Infinite logo carousel
• Transparent header (template included)
• Background overlay

6. Beast

Are you a content creator looking to create a website with WordPress? If you plan to use Elementor, then you can use Beast as the hero section of your homepage.

This hero section has an email opt-in form which you can use to collect the email addresses of your visitors to build your audience. You can connect the form with platforms like Kit, MailerLite and so on.

The Beast hero section has a unique background. If you take a look at the background carefully, you will find 5 different colors interchangeably every 8 seconds.

Key Features of Beast:

• Interchange background colors (5 colors)
• Email opt-in form
• Testimonial slider

7. Cyclops

Want to create a website with a dark design? You can use Cyclops, then. I designed this template for a website that sells web templates. That’s why the default headline is “Build Websites in Hours, Not Days”.

But again. It’s totally up to you how you will use it. If you want to use the hero section on a blog, for instance, that’s great too.

One feature I want to highlight is the scrolling effects in the background.

If you take a look at the background carefully, you will find scrolling images in four different columns in two directions: downward and upward.

No, I didn’t use a third-party add-on to create the scrolling image background. I only added a little CSS snippet to achieve that scrolling background.

Key Features of Cyclops:

• Scrolling Image Background
• Star rating

8. Sprite

Sprite is a hero section I designed specifically for a business that sells beauty makeup. So, if you are working on a website project in this business field, this hero section template is for you.

I added glass effects to some elements of this section, including the card elements that host texts and images.

The menu button also has a glass effect. I intended this button to call the off-canvas menu. Elementor has a built-in feature to create an off-canvas menu. You can pair it with this button.

Key Features of Sprite:

• Glass effect
• Full-width background
• Custom hover effect

9. Gilgamesh

Want to create a website for an SEO agency business? Gilgamesh is a perfect hero section to kickstart the project. It is particularly a suited option if you want to add a little animation to your website.

For the animation itself, I use the Lottie widget of Elementor. You can go to the LottieFiles website to get both free and premium Lottie animations to replace the default animation.

To make the hero section be more alive, I also added a little hover effect. An image will show up when you hover your cursor over one of the texts on the left column.

Gilgamesh has an intro section in the form of video, but it is only visible when you click the play button. This is great to save space on your design.

Key Features of Gilgamesh:

• Custom hover effect
• Lottie animation
• Video lightbox

10. Druig

Druig is a hero section template I designed for a productivity site (like ClickUp, Monday.com, etc.). Sure, you can use it on other site types.

The main feature of this hero section template is a curved image slider, which is created with JavaScript and CSS. No need to install an add-on to make the feature work, but you need to use Elementor Pro.

Key Features of Druig:

• Curved image slider
• Custom button icon

11. Thena

If you are a freelancer and want to create a portfolio website with Elementor, Thena is a great template to get started.

I designed this template specifically for freelance designers, but you can modify it to make it match your freelancing area.

You can simply replace the default texts and color.

I added two hover effects to this template. The first one is on the button. The second one is on the texts on the left column and right column.

This hero section is great to be paired with an off-canvas menu.

Key Features of Thena:

• Custom hover effects
• Creative text layout

12. Sersi

Sersi is another hero section template I designed specifically for a freelancer. More specifically, I designed it for freelancers in the interior design area.

The hero section has a full-width background, which you can replace with your photo or a photo of your client.

Beneath the hero section, I added an extra section to showcase the clients you have worked with, which are displayed in a carousel mode. This section is created with Elementor’s Image Carousel widget.

Key Features of Sersi:

• Logo carousel
• Full-width image background

13. Ikaris

I personally love the design of this hero section because it has a unique layout. I placed the social proof and CTA on the right column, which is smaller than the main column (the left column).

On the main column itself, I added a video background that automatically plays when the page is loaded.

What makes this hero section even more unique is the implementation of inverted radius. I implemented the inverted radius nearly on every part of the layout.

As a bonus, I also included a header section with a glass effect.

Key Features of Ikaris:

• Inverted border radius
• Header template with glass effect
• Video background

14. Warlock

If you love pastel colors, then this hero section is for you. On this template, I combined a pastel color with gradients. The gradients themselves are created with CSS instead of images so your website will load faster.

If you want to replace them, you can use tools like CSS Gradient, Coolors or Codioful.

This hero section itself is designed specifically for a headshot generator site. That’s why you will find some headshots beneath the CTA buttons. But again, you can use it on any website type.

Key Features of Warlock

• CSS gradients
• Inline buttons

15. Nebula

If you are a freelance designer and plan to create a portfolio with Elementor, this hero section is for you. Well, you can also use it if you are not a designer. A photographer, for instance.

To be honest, the layout of this hero section is a bit similar to Sersi where it uses your photo as the main attention center. The difference is that the photo is not set to be full-width.

I added a button on the header section, which you can pair with off-canvas of full-width menu.

Key Features of Nebula:

• Large text
• Background overlay

16. Drax

Drax is a hero section I designed for an agency business. You can use it whether you are a social media agency, SEO agency, or even a design agency.

The design of this hero section looks simple yet elegant. I used a solid background on this hero section, but you can replace it with a gradient if you want.

There are two animation effects you can find on this template: the rotating text and the button.

The rotating text is created with the Elementor’s Animated Headline widget, while the animated button is created with custom HTML and CSS.

Key Features of Drax:

• Rotating text
• Animated button

17. Mimic

Want to create a website for a desktop app? Mimic is a great hero section for the project. I added two buttons in an inline layout.

The first button is designed to be a download button for Mac and the second button is designed to be a download button for Windows.

The hero section has a common layout, honestly. But I added an animated gradient on the background to make it unique. The animated gradient is created with CSS. You can change the default colors by simply replacing the hex code.

Key Features of Mimic:

• Animated gradient
• Custom hover effect
• Inline buttons

18. Polaris

I designed Polaris to be a hero section of a marketing agency website, but you can use it on any project, of course.

There are two main features I want to highlight: hover effect and animated gradient text. These features are created with custom CSS.

You will find the hover effect on the texts on the right column. When you hover your cursor over a text on this column, you will find a revealed image. This image is intended to give site visitors a better glance of the feature you offer.

For the animated gradient text, you can see it on the second line of the headline. This gradient consists only of two colors, but you can add more colors if you want.

Key Features of Polaris:

• Animated gradient text
• Image revealed on hover
• Custom button hover effect
• Smooth background image

19. Banshee

Banshee is a hero section I intended for a moving company but feel free to use it for other business types. This hero section has a simple layout, with a hover effect to make it more alive.

I added a badge above the headline to give a creative vibe. This badge is created with custom CSS.

Key Features of Banshee:

• Badge
• Image hover effect

20. Sunfire

Sunfire is another hero section that has a simple layout. I designed it for an agency business. But again, you can use it to create a website of any business type if you love the design.

To add a more creative vibe, I added a blurry hover effect to the cards. When you hover your cursor over an image on a card, the blurry effect will take place, with text content in front of it.

You can link each card to a section on the page if you want.

Key Features of Sunfire:

• Blurry hover effect
• Creative large text

Summary

Hero section is the cover of a website. What visitors see on this section will determine what they will do next. Whether they will leave right away or stay longer on your website.

Due to the cruciality of the hero section, you need to design it carefully. Usually, working on other sections will become a lot easier once you are done with the hero section.

I created the hero section templates above to save you time and to give you some inspirations. You can import them directly via the Elementor editor. No need to install a third-party to import them.