Elementor Split Hero Section with Image

This Elementor split hero section places a headline, a paragraph, and two buttons on the left half and a full-height image panel on the right half. Hero Split with Image is a free, responsive block shared as a JSON file and built only with native Elementor widgets.

What's Inside the Block

• Two equal halves in a row. The left half holds the text, and the right half is a gray panel (#F9FAFB) meant for a background image.
• A small rounded pill ("Free delivery on first orders above fifty dollars." and a green "Learn how" link) above the headline.
• An H1 headline at 4.5 rem, a gray paragraph, a green button, and a plain text button.
• The text block is up to 32 rem wide and sits against the center line, with 10 rem of space above and 12 rem below on desktop.
• A white background and the Inter font. The image panel has no spacing, so it touches the edges of the section.

Tip: Choose a photo with the main subject near the center, because the panel is cropped to fit its height and width. A tall, calm image works well next to a large headline.

Requirements

• A recent version of Elementor with Flexbox Container available.
• No Elementor Pro required.
• The Inter font available on your site (otherwise a fallback font is used).
• One photo of your own for the right half.

Note: The right panel has no image yet, so it shows a flat gray color. You add the photo as the container's background, not through an Image widget. The pill at the top is hidden on mobile. All links point to #, and the copy is sample text. Back up your page before importing a template into an existing layout.

Download Elementor Template (JSON)

Widgets Used

Element	Purpose	Pro?
Flexbox Container	Section wrapper, text block, button row, and image frames (7 in total)	No
Heading	Headline, paragraph, and pill or badge text (4 in total)	No
Button	Primary and secondary buttons (2 in total)	No

Frequently Asked Questions

How do I import this Elementor JSON template?

First, download the JSON file using the button above and don't unzip or edit it. Second, open your WordPress dashboard, go to Templates, and choose Saved Templates. Third, click Import Templates, select the JSON file, and wait until the template appears in the list.

Fourth, open the page you want to edit with Elementor and click the folder icon to open the template library. Fifth, open the My Templates tab, choose this template, and click Insert. The block is added to your page and can be edited like any other Elementor container.

How do I change the text and the button links?

Click the headline or the paragraph and type your own text. For a button, select it, then change the text and the Link in the Content tab. To change colors or sizes, select the widget and open the Style tab.

How do I add the image to the right side?

Select the right container, open its Style tab, and set the Background to Classic with your image. Choose Cover for the size so the photo fills the panel at every screen width.

Why is the right side only gray?

The panel is an empty container with a light gray color, so you can drop in any photo. Until you add one, the gray color shows.

How tall is the image panel?

On desktop it matches the height of the text half, which depends on your text length and the section padding. On tablet and mobile it uses a minimum height of 66.667vw. Change the minimum height of the right container if you want a taller or shorter image.

How do I remove the small pill above the headline?

Select the pill container and delete it, then change the top margin of the headline if you want less space. You can also keep it and edit the two texts.

How does the layout change on tablet and mobile?

On tablet and mobile the two halves stack, with the text first and the image panel below it. The panel gets a minimum height equal to 66.667% of the screen width, which gives it a 3 to 2 shape. The text area padding is reduced to 8 rem on tablet and 6 rem on mobile, and the pill is hidden on mobile.

Where should I place this hero section?

Place it as the first section of a home page or a landing page when you want a strong photo next to a short message.

Do I need Elementor Pro?

No. The block only uses native widgets inside Flexbox containers.

Why won't the file import?

Make sure the file has a .json extension and hasn't been unzipped or edited. If it still fails, check your hosting upload size limit or any security plugin that may block file uploads.

Why do the Flexbox settings look different or missing?

Update Elementor to the latest version. On older versions, the Flexbox Container feature may need to be enabled first in Elementor's feature settings.

Why does the font look different?

The block uses the Inter font. If it isn't available on your site, change the font family in the Style tab of each widget.

Looking for more hero sections? Browse all Elementor hero section templates, or see every free block in Elementor Templates.