If you are an Elementor user and are looking for hero section templates to kickstart your design, I have a collection of cool items you can download and import instantly without installing an extra plugin.
As you know, hero section is arguably the most crucial section of a webpage. The reason is that it is the most visible part, other than header.
When the hero section has a good design, a good first-impression earned. And when good first-impression earned, the goal is likely to be achieved. Whether to generate conversions or to convey a message.
Oftentimes, web designers spend hours staring at the monitor screen only to create the hero section of the webpage they are working on. With the templates below, you can skip this time-consuming part of your web design process.
How are the Hero Sections Created and How to Import Them
I created the hero section templates below with one main goal: to help fellow Elementor users to skip the most time-consuming part when designing a webpage. That is to create the hero section.
Usually, once the hero section is done, other sections will be easier and faster to create because you already have a clear design concept in mind.
I used only the native Elementor widgets to create the templates. This means, you don’t need to install a third-party add-on in order to get the widgets loaded in the editor when you import the template.
For the layout system itself, I used Container instead of Section. So, make sure to enable Container before you import a template (already enabled by default).
Importing the Templates
I offer the hero section templates in JSON files. After downloading and extracting the ZIP file, you will find a folder containing JSON files of the templates.
Since the templates are available in JSON files, you can import them directly from the Elementor editor. No need to create a cloud account.
I have uploaded the following video on YouTube to make it easy for you to learn how to import a template from the Elementor editor.
List of the Elementor Hero Section Templates
1. Druig – Elementor Hero Section Template for a Productivity Site
If you have a productivity tool and plan to create a website with WordPress (Elementor more precisely), then Druig is a perfect hero section to start from.
Of course, you can also use it for other website types if you love the design.
I used a pastel background for this hero section, which you can change according to your preference.
The main feature I want to highlight on this hero section is rotating image gallery in a curved shape. This feature is created using custom code (JavaScript and CSS). No third-party add-on is involved.
Key Features of Druig:
- Curved rotating image gallery
- Pastel background
- Custom button style created with custom CSS
2. Thena – Elementor Hero Section Template for Freelancer Web Developer
If you are a freelance web developer or web designer, Thena is the perfect hero section you can use.
While I designed this hero section for freelance web developer, you can also use it on your website regardless of the freelancing area you serve.
I also used a soft background color for this template, which is completely editable. As a bonus, I added custom button hover effects on this template. The hover effects are created with custom CSS.
You can find the hover effects on the middle column (CTA button), left column and right column.
Key Features of Thena:
- Creative text layout
- Custom button hover effects
- Ready-to-use hamburger menu
3. Shatterstar – Elementor Hero Section Template for a Beauty Salon Site
Shatterstar is a hero section template I designed specifically for a beauty salon website. It has a two-column layout with the right column is filled with a photo of a woman’s face in a close-up mode.
The photo is stretched to the right side of the screen. A little CSS snippet is required to create this type of layout.
As the point of interest, I added a rotating text placed between the columns.
Key Features of Shatterstar:
- Stretched image background
- Rotating text
- Custom button hover effect
4. Cable – Elementor Hero Section Template for Email Marketing Specialist
Are you an email marketing specialist and plan to create a website with Elementor? You can use the Cable hero section to kickstart your website design. This hero section has a similar layout as Shatterstar above — with a stretched background.
But this time, I used a solid color instead of an image. You can try to zoom out your screen to preview the stretched background.
I also added a marker effect to a part of the heading in which the color is completely editable. As a bonus, I also included a custom hover effect for the button element.
Key Features of Cable:
- Stretched dual-column layout
- Marker text effect
- Custom button hover effect
5. Mimic – Elementor Hero Section Template for a Desktop App
Mimic is a hero section I designed specifically for a website of a desktop app. So, if you are a desktop app developer and want to create website for your app, then you can use this hero section.
I added two download buttons set in an inline style. One button is for Mac and the other one is for Windows.
At a glance, nothing special with this hero section template. The layout looks common. But if you pay close attention to the background, you will find something different. It has an animated gradient. This is the main feature I wanted to offer on this template.
Key Features of Mimic:
- Animated gradient
- Inline download buttons
6. Ikaris – Elementor Hero Section Template for Marketing Agency
Ikaris is a hero section I designed specifically for a marketing agency site. But again, there is no obligation to use it for this business type. You have absolute option to use it regardless of the website type you want to create.
What makes this template unique is its inverted radius. I used little custom CSS to create inverted border radius for this template.
Key Features of Ikaris:
- Inverted border radius
- Video background
- Glass effect
7. Nebula – Elementor Hero Section Template for Freelance Designer
Nebula is a great hero section if you are a freelancer who serves the design area. I used a headshot as the background of the section, with a large text in front of it. If you want to use this template and have no proper headshot, you can use a certain AI tool to generate one.
I used white texts for this section. To make them visible, I added an overlay to the background. The background overlay gives you more flexibility to try different text colors as they will remain visible no matter the color you try to use.
On the header section, I addd a button which you can use to call an off-canvas menu.
Key Features of Nebula:
- Headshot background
- Large text
8. Zeitgeist – Elementor Hero Section Template for a CRM Platform
Testimonial is a crucial element that most websites need. You can add a testimonial section anywhere on your webpage. In the Zeitgeist hero section, I added the testimonial to the hero section in a slide style.
I used the Slides widget for this section. To make it look more alive, I also added a little zoom effect to background, which filled with the photos of the customers.
As a bonus, I also added a custom hover effect to the button where the icon rotates when you hover your cursor over the button.
Key Features of Zeitgeist:
- Testimonial slider
- Custom button hover
- Text label
9. Bedlam – Elementor Hero Section Template for Travel Agency
Want to create a travel agency website? Why not add a video as the background? This is a cool idea to showcase the destinations offered by your travel agency.
Bedlam is a hero section that adopts this design idea. I used a super shot video as the background of the hero section.
If you create the website for a client and they provide no video yet, you can download free footage on Pexels.
To make all parts of the video visible, I used a transparent header on this section.
Key Features of Bedlam:
- Full-width video background
- Transparent header
- Background overlay
10. Rocket – Elementor Hero Section Template for Marketing Agency
Rocket is another hero section I designed for a marketing agency website. If you like the design and want to use it for other website types, that’s great too.
This template has a full-width image background coupled with a transparent header. If you have a team, it’s a great idea to use the photo of your team as the background.
I added a logo carousel which you can use to showcase the companies you have worked with.
Key Features of Rocket:
- Full-width background
- Transparent header
- Logo carousel
11. Polaris – Another Elementor Hero Section Template for Marketing Agency
Polaris is another hero section template I designed specifically for marketing agency websites. I added some custom hover effects to add an interactive vibe to this section.
The first hover effect is on the right column lower row. When you hover your cursor over a text on this column, an image will reveal from the left direction. I intended this image to be a preview of the service you offer.
The text is clickable. You can redirect your visitors to another section on your homepage when it is clicked.
Another hover section can be found on the buttons where I used CSS transform to add a rotating effect to the icons.
Key Features of Polaris:
- Text hover effect
- Button hover effect
- Animated gradient headline
12. Beast – Elementor Hero Section Template for Content Creators
If you are a content creator and want to create a website with Elementor, you can use Beast as the hero section of your homepage. The hero section is especially great if you want to grow your email list.
A ready-to-use email opt-in form is available on this hero template, which you can connect with Kit, MailerLite, and other email marketing platforms.
If you don’t pay close attention to this template, you will be fooled. It has a unique where consisting of five different colors, which interchangeably every 8 seconds. The colors are completely editable.
You can edit them by simply replacing the hex code.
Key Features of Beast:
- Interchange background colors
- Ready-to-use email opt-in form
- Testimonial slider
13. Cyclops – Elementor Hero Section Template for Web Template Creator
If you want to create a website to sell web templates (Elementor, Divi, etc), then Cyclops is a perfect hero for your site. I designed this template to have a social proof at the top to convince your prospective buyers.
I added a little animation effect to the background. If you take a look at it carefully, you will see images that automatically scroll up and down in four columns. I used custom CSS to create this effect as Elementor has no built-in feature to create it.
Key Features of Cyclops:
- Social proof
- Scrolling image background
- Background overlay
14. Sprite – Elementor Hero Section Template for Beauty Product Store
Want to create a website for a beauty product store? Sprite is a perfect hero for the project. I designed this hero section specifically for this project type although, once again, you can also use it on other website types if the design suits you.
I added a glass effect to this hero section to make it look unique. You can find the glass effects on both the cards section and the menu button on the header.
Sprite has a fluid layout thanks to CSS grid. On desktop and tablet, the cards appear in a single row (inline). When you view the page on mobile (smartphone), the cards appear in two rows with each row hosting two cards.
Key Features of Sprite:
- CSS grid
- Glass effect
- Custom hover effect
15. Gilgamesh – Elemetor Hero Section Template for SEO Agency
As you can see above, I created several hero section templates for marketing agencies. Gilgamesh is another one. This section has a different focus, though.
I designed this hero section specifically for SEO agencies. That’s why you will find SEO-related copy on this hero section.
Gilgamesh has one thing in common as Polaris where it has an hover effect that reveals an image when you hover your cursor over a text. The difference is that the image is placed above the next instead of next to it.
I added a little animation to this hero section using the Lottie widget. If you want to replace the animation, you can download Lottie files on LottieFiles.com.
Key Features of Gilgamesh:
- Lottie animation
- Image reveal hover effect
- Video lightbox
Summary
You need to design the hero section of your webpage carefully because it is the most crucial section. What visitors see on this section determines what they will do next. Whether to leave your website right away or to stay longer.
If you are running out of design ideas for the hero section, then you can use one of the templates I created above.
Every hero section template is designed specifically for a specific niche, but you can use them on any niche if you love the design.
All templates are available in JSON files. You can import them directly via the Elementor editor.
