Elementor Feature Section with Screenshot

This Elementor feature section with screenshot puts a short pitch and three benefits on the left and a large product image on the right. Feature Section with Product Screenshot is a free, responsive block shared as a JSON file and built only with native Elementor widgets.

What's Inside the Block

• A label, a headline, and an intro paragraph in the left column.
• A list of three benefits, each with a small icon and a bold title followed by a short description.
• A large image widget with rounded corners, a thin border, and a soft shadow in the right column.
• A Grid Container layout: 2 columns on desktop, 1 column on tablet and mobile.
• Inter font, an emerald accent color (#007A55), and a white background.

Tip: The screenshot is set wider than its column, so the right edge can be cropped by the section. Keep the important part of your screenshot toward the left, and check it in the editor.

Requirements

• A recent version of Elementor with Flexbox Container and Grid Container available.
• No Elementor Pro required.
• Your own screenshot: the block does not include an image, so the Image widget shows Elementor's default placeholder.
• The icons are loaded from Heroicons on GitHub. For reliability, upload the SVGs to your Media Library.

Note: In this block, the small label uses an H2 tag and the large headline uses a paragraph tag. For a cleaner heading structure, switch the label to a paragraph and the headline to H2 in each widget's HTML tag setting. 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 column, and benefit rows	No
Grid Container	Two-column layout	No
Heading	Label, headline, and intro paragraph	No
Icon	Icon for each benefit	No
Text Editor	Benefit title and description	No
Image	Product screenshot	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 replace the placeholder with my own screenshot?

The block does not include an image, so the Image widget shows Elementor's default placeholder. Select the Image widget, open the Content tab, and choose or upload your screenshot.

How do I change the text, colors, and icons?

To change the text, click the label, headline, or paragraph and type the new copy. Each benefit is a Text Editor widget with a bold title followed by a short description, so edit both parts in place. To change colors, select a widget, open the Style tab, and adjust the color options. To change an icon, select an Icon widget, open the Content tab, and pick a new icon or upload your own SVG file.

How do I add a fourth benefit?

Duplicate one benefit row, which is the container holding an Icon widget and a Text Editor widget, inside the list container. Then edit the new icon and text.

Why does the screenshot extend past its column?

The Image widget is set to 912 px wide, which is wider than its half of the grid, and the outer section hides any overflow. The result is a screenshot that bleeds off the right edge of the section. Keep the important part of your screenshot toward the left side, and check the result in the editor. If you prefer a contained image, set the Image widget width to 100% in the Style tab.

How do I move the screenshot to the left?

Open the Navigator and drag the Image widget above the text column inside the Grid Container. The two cells swap places.

Do I need Elementor Pro?

No. The block only uses native Heading, Icon, Text Editor, and Image widgets inside Flexbox and Grid containers.

Why use a two-column layout with a large screenshot?

Showing the product beside the pitch lets visitors connect each benefit to the real interface. The text column is limited to 32 rem so lines stay short, and the benefits are written as a short list of bold titles with one-sentence descriptions that are easy to scan. On tablet and mobile, the grid becomes a single column with the text above the screenshot, and the headline shrinks from 3 rem to 2.25 rem to fit narrow screens.

Where should I place this section?

It works well right below a hero section, as the first place where you explain how the product works. Use it once per page, or alternate it with other feature blocks to keep a long page varied.

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 doesn't the layout show two columns, or why are the Grid settings missing?

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

Why don't the icons appear?

The icons load from GitHub, so they can fail if that server is unreachable. Re-select the icon in each Icon widget, or upload SVG files to your Media Library if your site allows SVG uploads.

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