Elementor Hero Section Templates

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. Human Torch: Elementor Hero Section Template with Background Reveal Effect

If you want to create an Elementor website for a design agency firm or other agencies in the creative field, Human Torch is a perfect hero section for the website. It has a clean design with a creative hover effect.

When you hover your cursor over any area on the hero section, the background image will be revealed at a certain portion in a circular shape. This effect is created using a little JavaScript snippet and CSS.

This hero section template also comes with a super creative button hover effect where the phone icon will vibrate when you hover your cursor over. This effect is also created with a little custom CSS.

No need to install an extra plugin to get the two effects mentioned.

Key Features of Human Torch:

• Background reveal hover effect
• Vibration button hover effect
• Clean, responsive design

2. X-Fest: Elementor Hero Section Template with Rotating Text Effect

This hero section template is inspired by the hero section of Magnific (formerly Freepik). On the hero section of the Magnific homepage, you will find a rotating text effect similar to movie credit titles.

You can create this type of effect in Elementor without installing an extra plugin. A little JavaScript and CSS snippets are enough to create it.

To make the design of the hero section look more dynamic (and to match the rotating text effect), I used a video background instead of an image which will make the design look static.

As a bonus, you will also get a creative hover effect for the button.

Key Features of X-Fest:

• Rotating text effect
• Creative button hover effect
• Video background

3. Ayo: Elementor Hero Section Template with Sliding Effect

Ayo is another Elementor hero section template that comes with a creative animation effect. This time, the animation effect is applied to the testimonial section to showcase the collected testimonials creatively.

The testimonials will be displayed interchangeably using a slide effect. The testimonial content is made of the Image and Text Editor widgets so they are completely editable. You can even populate this section with dynamic content using ACF and the similar plugins.

The slide effect itself is created with, once again, a simple custom JavaScript. No need to install an extra plugin to get the effect.

Key Features of Ayo:

• Slide effect to showcase testimonials
• Glass effect
• Fully responsive design

4. Quill: Elementor Hero Section Template with Running Text in the Background

The design of this hero section template looks simple at a glance. But when you take a closer look at the background, you will find a text moving horizontally infinitely. It is not an image. It's a real text so that you can edit it more effortlessly.

The effect itself is created using CSS (keyframes). No third-party Elementor involved in the template.

Apart from this cool effect, you will also find another cool effect when you hover your cursor over one of the buttons. Again, this effect is also created with custom CSS.

This hero template is perfect to create a portfolio website.

Key Features of Quill:

• Horizontal running text
• Custom button hover effect
• Clean, responsive design

5. Courset: Elementor Hero Template Section with Vertical Accordion

Courset is a hero section for Elementor that is designed specifically for course websites and similar websites. But of course, you can also use it regardless of the website type you want to create.

This hero section template comes with a super cool vertical accordion, which is made of the native Elementor widget. The accordion items will automatically expand when you hover your cursor over them.

Custom hover effects are added to the buttons and menu items to add a premium vibe to the template.

Key Features of Courset:

• Vertical accordion
• Accordion items automatically expand on hover
• Custom hover effects on buttons and menu items

6. Sentry: Elementor Hero Section Template with a Notch

If you want to create a website with a unique header, you can try Sentry. As you can see on the above screenshot, the header of the hero section template has a notch, similar to Apple's MacBook.

This notch is created with a super simple CSS.

Sentry has a dynamic background created with Elementor native slideshow feature. You can easily replace the images from the settings panel once you have imported the template.

When you hover your cursor over the button on the header, you will find a super creative hover effect, which is also included in the template.

Key Features of Sentry:

• Curved header created with custom CSS
• Custom button hover effect
• Slideshow background

7. Yelena: Elementor Hero Section Template with a Creative Image Gallery

Yelena is a great hero section template if you want to create an Elementor website to showcase your visual works. From photos, illustrations, arts and so on.

It has an image gallery section dedicated to showcasing your works. It is not a generic image gallery created with the Gallery widget. Instead, the image gallery is created manually by placing the Image widgets horizontally using a flexbox setting.

The skew transform setting is applied to each image to achieve a unique shape like you can see above. To make the images stacked between each other, the negative margin is applied to each image.

This template is created purely using Elementor native setting options. No custom CSS or custom JavaScript.

This hero section template has a ready-to-use menu button on the header which you can pair with Elementor Off-Canvas widget.

Key Features of Yelena:

• Unique, creative image gallery
• Hover effect on client avatars
• Ready-to-use menu button

8. Domino: Elementor Hero Section Template with Inverted Border Radius

Domino is another hero section template that has a unique header like Sentry. The menu items and the site logo are placed at the top-left corner with a unique border radius.

At the bottom-right corner, you will also find a similar border-radius with a Button widget which you use to link to any page on your website.

Domino also comes with a super unique, creative button style complete with the hover effect.

Key Features of Domino:

• Inverted border radius
• Creative button style with a unique hover effect
• Unique slider

9. Ajak: Elementor Hero Section Template with Sticky Column

Ajak is an Elementor hero section template that has a unique behavior. On scroll down, the right column remains in its original position. This effect is created with Elementor native sticky feature.

It's not a common thing to find a hero section with this kind of behavior. That's why I call it a unique hero section template.

The button of this template is also unique. Instead of a solid or gradient background, the button has an image as the background. Another unique, creative style in web design.

Key Features of Ajak:

• Sticky column
• Custom hover effect
• Unique button style

10. Murdock: Elementor Hero Section Template with a Unique Hover Effect

Murdock is a hero section template that adopts a dual-column layout. What makes this hero section great is the menu items placement, which overlaps the image on the right column.

On the left column, you will find the list section which is designed to place features or services, depending on the business you want to create the website for. This section has a unique hover effect created with a simple custom CSS.

This hero section also has a unique button style.

Key Features of Murdock:

• Unique dual-column layout
• Unique button style
• Custom hover effect

11. Bane: Elementor Hero Section Template with a Vertical Video

Button style is another highlight of this hero section template. Bane has two button styles, each with a different hover effect.

The first button has a similar hover effect as Murdock's button where the text and icon switch their position on hover. But this time, the icon switches its position while also rolling.

For the second button, you will find text disappears on hover and then show up again from the bottom. These two button hover effects are created with custom CSS.

Bane itself is a hero section template with a dual-column layout. The right column is designed to showcase a vertical video while the left column is designed to place the headline.

Key Features of Bane:

• Two unique button hover effects
• Vertical video
• Dual-color heading

12. Shatterstar: Elementor Hero Section Template with a Circular Rotating Text

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

13. Cable: Elementor Hero Section Template with a Stretched Solid Background

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.

Key Features of Cable:

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

14. Zeitgeist: Elementor Hero Section Template with Testimonial Sliders

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

15. Bedlam: Elementor Hero Section Template with Full-width Video Slideshow Background

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

16. Rocket: Elementor Hero Section Template with Infinite Logo Carousel

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

17. Beast: Elementor Hero Section Template with Interchange Background Colors

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

18. Cyclops: Elementor Hero Section Template with Scrolling Image Background

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

19. Sprite: Elementor Hero Section Template with Glass Effect

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

20. Gilgamesh: Elementor Hero Section Template with Lottie Animation

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

21. Druig: Elementor Hero Section Template with Curved Image Slider

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

22. Thena: Elementor Hero Section Template with Creative Text Placements

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

23. Sersi: Elementor Hero Section Template with Full-width Image Background

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

24. Ikaris: Elementor Hero Section Template with Transparent Header

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

25. Warlock: Elementor Hero Section Template with Beautiful CSS Gradients

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

26. Nebula: Elementor Hero Section Template a Creative Large Text

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

27. Drax: Elementor Hero Section Template with an Animated Button

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

28. Mimic: Elementor Hero Section Template with Animated Gradient

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

29. Polaris: Elementor Hero Section Template with Image Reveal Effect

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

30. Banshee: Elementor Hero Section Template with a Creative Badge

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

31. Sunfire: Elementor Hero Section Template with Blurry Hover Effect

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.