Elementor CTA Section on Dark Panel

This Elementor CTA section places a centered headline, a short supporting text, and two buttons on a dark gradient panel. CTA Centered on Dark Panel is a free, responsive block shared as a JSON file and built only with native Elementor widgets.

What's Inside the Block

• A rounded dark panel with a radial gradient from deep teal (#0B5048) to near-black navy (#101828) and a soft shadow.
• A centered white headline (H2), 3 rem on desktop and 2.25 rem on mobile.
• A supporting paragraph in light gray, limited to 36 rem wide.
• Two buttons: a white filled primary button and a white text-style secondary link with an arrow.
• Inter font on a white section background. On mobile, the panel runs edge to edge with square corners.

Tip: Keep one clear main action. Let the primary button carry the action you most want, and use the secondary link for a lower-commitment option such as contacting you. Replace both # links with real destinations.

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 has an H2 headline, so place it after your page's H1 and main content, usually near the end of the page. 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, dark panel, and button row	No
Heading	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 the headline, 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 each button, set the destination in the Link field of the Content tab. Both buttons point to # until you change them.

How do I change the panel background?

Select the dark rounded container inside the white section and open its Style tab. The radial gradient runs from deep teal to near-black navy under Background. Change the two colors, or switch to a solid color. Keep enough contrast with the white headline and light gray text.

Why is the panel edge to edge on mobile?

On mobile, the white wrapper has no side padding and the panel's corner radius is set to zero, so the panel fills the screen width. To keep rounded corners and side spacing on mobile, switch Elementor to the mobile view and set the wrapper's left and right padding and the panel's border radius.

Do I need Elementor Pro?

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

Why a dark panel with a white primary button?

A light button stands out most on a dark background, so the main action is the first thing visitors see. The second action is a plain text link, which leaves one clear primary choice. The supporting text is limited to 36 rem so lines stay short, and the radial gradient adds depth without needing an image.

Where should I place this CTA section?

Place it near the end of a page, after the content that explains your offer, such as features, pricing, or testimonials, and before the footer. Because its headline is an H2, use it after the page's H1 and main content.

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 CTA sections? Browse all Elementor CTA section templates, or see every free block in Elementor Templates.