Centered Elementor Hero Section Template

This Elementor hero section template pairs a centered headline with a short supporting line, an announcement pill, and two buttons. Hero Simple Centered is a free, responsive block shared as a JSON file and built only with native Elementor widgets.

What's Inside the Block

• An announcement pill with a short message and a link, hidden on mobile.
• A centered headline (H1), 4.5 rem on desktop and 3 rem on mobile.
• A supporting paragraph and two buttons: a filled primary button and a text-style secondary link.
• A soft radial gradient background in light mint green, with Inter font and an emerald accent color (#007A55).

Tip: Keep the headline short and lead with the benefit to the visitor. Replace the sample text and set real links on the pill and both buttons, because they all point to # by default.

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).

Note: This block contains an H1. If your page already has an H1, change the headline's HTML tag to H2 in the widget settings so the page keeps a single H1. Back up your page before importing a template into an existing layout.

Download Elementor Template (JSON)

Widgets Used

Element	Purpose	Pro?
Flexbox Container	Hero wrapper, text column, announcement pill, and button row	No
Heading	Pill text, headline, and supporting paragraph	No
Button	Primary and secondary actions	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, colors, and links?

To change the text, click a heading, the paragraph, or a button and type the new copy. To change colors, select a widget, open the Style tab, and adjust the color options. For the buttons, set the destination in the Link field of the Content tab. The announcement pill is a container with a link, so set its link in the container settings.

How do I change the background gradient?

Select the outer container and open its Style tab. The light mint gradient is set under Background, and the soft glow in the bottom-right corner is set under Background Overlay. Change the colors there or switch both to a solid color.

Can I remove the announcement pill?

Yes. Select the pill container and delete it. The headline and buttons keep their spacing.

Why is the announcement pill missing on mobile?

It is hidden on mobile by design, because the long message takes a lot of space on small screens. To show it, select the pill container, open the Advanced tab, go to Responsive, and turn off Hide On Mobile.

Do I need Elementor Pro?

No. The block only uses native Heading and Button widgets inside Flexbox containers.

Why use a centered hero with a narrow text column?

The text column is limited to 42 rem so lines stay short and easy to scan. A centered layout suits a short headline and a single main action. The primary button is filled while the second action is a plain text link, so visitors see one clear first choice. On tablet and mobile, the vertical padding shrinks from 14 rem to 12 rem and then 8 rem, and the headline drops from 4.5 rem to 3 rem so it fits narrow screens.

Where should I place this hero section?

Place it at the very top of a homepage or landing page. Because it contains the page's H1, use it only once per page.

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.