The hero section is the first thing visitors see when they land on your page. Get it wrong and they bounce. Get it right and they keep scrolling.
The problem is most Elementor users spend far too long building hero sections from scratch. Dragging widgets, tweaking spacing, fighting with responsive settings – the time spent doing this adds up fast.
What Makes a Hero Section Work
Before opening Elementor, it helps to understand what a hero section actually needs to do.
Clear headline. Your headline communicates the value proposition in one sentence. It should answer the question every visitor is asking: “What is this and why should I care?”
Supporting subheadline. The subheadline expands on the headline with a bit more detail. Keep it to one or two sentences.
Call-to-action. One primary CTA button tells visitors what to do next. You can add a secondary CTA if needed, but the primary action should be obvious.
Visual element. An image, video, illustration, or background supports the message. It should reinforce what you’re saying, not distract from it.
Clean layout. Plenty of whitespace, clear visual hierarchy, and a design that works just as well on mobile as it does on desktop.
With those principles in mind, let’s build one.
How to Create an Elementor Hero Section Step by Step
This tutorial uses Elementor’s Flexbox containers. If you’re still using the old sections and columns, now is a good time to switch. Containers are lighter, faster, and give you more control.
Step 1: Add a Flexbox Container
Open your page in Elementor and add a new container to the canvas.
Set the container direction to horizontal. This gives you a side-by-side layout with content on the left and an image on the right. If you want a centred, stacked layout instead, set the direction to vertical.
Adjust these settings on your container:
- Content Width: Set this to boxed width (1140px is a common choice)
- Min Height: 80vh or around 800px – enough to fill most of the screen without scrolling
- Padding: 120px top and bottom, or whatever fits your spacing system
- Gaps: Usually something around 100-120px is good, depending on your content.
You now have the outer wrapper for your hero section.
Step 2: Create Two Inner Containers
Add two things inside your main container. These will hold your content:
- Left container: Headline, subheadline, and CTA button
- Right container: Image or visual element
Set 50% width for each container for good balance.
Step 3: Add Your Headline, text and button
Click into the left container and add a Heading widget. Set the HTML tag to H1. This is important for SEO – every page should have exactly one H1, and the hero headline is usually the right place for it.
Write a clear, benefit-focused headline. Focus on what the visitor gets, not what you do. Style the heading with a larger font size. For desktop, something between 48px and 80px works well. Use a bold weight so it stands out.
Example: “Build Professional Elementor Websites 10x Faster”
Step 4: Add Your Text
Below the heading, add a Text Editor widget. Keep this short. One or two sentences that expand on the headline and add a bit more context.
Style it with a lighter visual weight than the headline. Smaller font size, regular weight, and optionally a muted colour like grey #707070 instead of black.
Example: “Build websites 10x faster with expertly created Elementor components ready to copy and paste into your next project.”
Step 5: Add Your Call-to-Action
Add a Button widget below the subheadline.
Write clear action text that tells visitors exactly what happens when they click. “Get Started Free”, “Browse Components”, or “Start Your Free Trial” all work. Avoid vague labels like “Learn More” or “Click Here”.
Style the button with a contrasting background colour so it stands out from the rest of the section. Add enough padding so it feels clickable, and make sure the text is readable.
If you need a secondary action, add a second button or a simple text link next to the primary CTA. Keep the primary button visually dominant.
Step 7: Adjust Responsive Settings
Click the responsive mode icon in Elementor and switch to Tablet view, then Mobile view. Hero sections almost always need adjustments for smaller screens. Here’s what to check:
Stack the layout. Change the parent container’s direction from horizontal to vertical so the content stacks on top of the image instead of sitting beside it.
Reduce the headline size. 48-64px is too large for mobile. Bring it down to 32-44px.
Centre the text. Left-aligned text often looks awkward on narrow screens. So switching to centre alignment on mobile often looks great.
Adjust spacing. Reduce padding and margins so you’re not wasting precious screen space.
Handle the image. Decide whether to keep, resize, or hide the image on mobile.
Preview your changes and tweak until the hero looks good across all breakpoints.
Hero Section Best Practices
Keep it focused. One message, one primary CTA. The hero isn’t the place to cram multiple offers or navigation options. Save that for further down the page.
Prioritise speed. The hero image is often the largest element on your page and directly impacts your Largest Contentful Paint score. Optimise images before uploading, compress them, use WebP format, and size them appropriately. A 4000px wide image for a 600px container is wasted bandwidth.
Use your global styles. Connect your headline, subheadline, and button to your global typography and color settings. This keeps your site consistent and makes future updates much easier. Change a global color once and it updates everywhere.
Design for mobile first. More than half of web traffic comes from mobile devices. Take time to optimize your hero to work well on small screens. If your CTA isn’t visible unless you scroll on mobile, this will directly affect conversion rates.
Don’t bury the call-to-action. The button should be visible immediately when the page loads, on any device. If visitors have to scroll to find out what to do next, you’ll lose them.
Skip the Work: Copy a Ready-Made Hero Component
Building a hero section from scratch is a useful skill. But when you’re working on a real project with a real deadline, you don’t need to start from zero every time.
Element UI has a library of free hero components you can copy and paste directly into Elementor.
Here’s how it works:
- Browse Hero components in the Element UI library
- Find a layout that fits your project
- Click copy
- Open Elementor and right-click on the canvas
- Select “Paste from other site”
- Apply your global styles and swap in your content
The structure, spacing, and responsive behaviour are already done. You just add your headline, text, image, and CTA. What takes 30 minutes to build from scratch takes 30 seconds to paste.
