webdevpuneet.com

Split Features With Image

Desktop · 1280px · shown at 0% · edit the text, images and colours in the panel

Related Section Templates

5 sectionsView all →
Features

Split Features With Image

Responsive · Animated
Features

Alternating Feature Rows

Responsive · Animated
Features

Icon Grid Features

Responsive · Animated
Features

Bento Grid Features

Responsive · Animated
Features

How It Works Steps

Responsive · Animated

Split Features With Image — Free Website Section Template

Features · v1.0.0 · Updated 2026-10-20 · Responsive · GSAP animation · HTML, React & Vue

CategoryFeatures
Tagsfeaturessplitscreenshotchecklistsaasproductlight
Updated October 20, 2026

Extend with AI

Take This Section Further With AI

The AI prompt for this one is for Patreon supporters ($3 a month, 7 days free), along with a site with no ads. Supporters enter the passcode once and it is remembered in this browser.

· Become a supporter

What's included

Features

Two-column layout: heading, points and button beside a framed screenshot
Up to 6 feature points, each with an icon, title and text
Add, duplicate, reorder and remove points
Button with its own link, switchable on or off
Upload a screenshot or paste an image URL
Image moves above the text on narrow widths
GSAP headline text effect, staggered points and rising image
Shared theme tokens; export HTML, ZIP, React or Vue

About this section

Split Features With Image — Free Feature Section Template

Split Features With Image: A two-column feature section: an eyebrow, heading and intro above a short list of icon-led features and a button on one side, a framed product screenshot on the other. Ideal for explaining one product area in depth, and it stacks on narrow screens.

Split Features With Image explains one part of your product properly: a heading and intro, a short list of icon-led points and a button on one side, and a framed screenshot on the other. Where an icon grid gives the overview, this layout goes deep on a single topic, such as reporting, automation or security.

Points you can rearrange

The feature list is editable: up to six points, each with its own icon, title and sentence of detail. Add, duplicate, reorder or remove points, switch the button on or off, and upload your own screenshot, which is resized in your browser and never sent to a server.

Designed to stack

On wide screens the copy and image sit side by side; on tablets and phones the image moves above the text so visitors see the product first. It responds to its own width through container queries, so it also works inside narrower page layouts.

Animated with GSAP

The heading reveals with a SplitText effect, the points stagger in and the screenshot rises into place once as the section scrolls into view, with reduced-motion support built in.

Pairs with the rest of the library

The shared theme means it matches the heroes and other feature sections. Use several of them in a row, one per product area, or try the Alternating Feature Rows for a ready-made zig-zag. Export HTML, a ZIP, React or Vue, or fork into My Code.

Why use it

Why Use the Split Features With Image

⇆
Explain one thing well
A focused heading, three to five points and a screenshot sell a single feature better than a long list.
▤
Easy to repeat
Stack several, one per product area, with different screenshots and colours from the same theme.
📱
Image first on phones
On narrow screens the screenshot moves on top, so mobile visitors see the product before the copy.

How it’s different

How It’s Different From Other Free Section Templates

✎
Editable, not just copyable
Change text, links, images, colours and fonts in the browser before you export, instead of editing someone else’s code by hand.
◐
One theme for every section
Colours, fonts, radius and width are shared CSS variables, so every section you combine looks like one website.
⇲
Responsive by container
Container queries make each section adapt to its own width, in a full page, a column or a page builder.
✦
GSAP animation built in
Every section animates in with GSAP and ScrollTrigger, stays visible without JavaScript and respects reduced motion.
</>
HTML, React and Vue
Export a single HTML file, a ZIP with your images, a React component or a Vue component, or fork the code into My Code.
◍
Free, private, saved
No account and no watermark. Designs, uploaded images and fonts stay in your browser, with a backup file you can restore anywhere.

Step by step

How to Use

  1. 1
    Edit the contentFill in the heading, feature list, button and image in the panel. Switch the button on or off. Wrap words in *asterisks* to colour them.
  2. 2
    Add your imagesUpload your own images (resized in your browser and kept on your device) or paste a hosted image URL.
  3. 3
    Match your brandPick a colour preset or exact colours, choose heading and body fonts from Google Fonts or your own uploaded font, set the corner radius and width, or apply your brand kit.
  4. 4
    Animate and previewChoose a GSAP entrance effect and speed, press Play animation, and check the section on desktop, tablet and mobile.
  5. 5
    Save and exportSave it to My designs, then export a single HTML file, a ZIP with your images, a React or Vue component, or fork it into My Code.

Real-world uses

Common Use Cases

📊
Product area deep dive
Give reporting, automation or security its own section with a real screenshot and three concrete benefits, linking to the full feature page.
🧭
Feature landing page
Use it as the main body of a page built for one search term, such as "project reporting software", with a sign-up button below the points.
📱
Mobile app showcase
Swap the screenshot for an app screen, list the three things the app does best and point the button to your App Store page.
🧑‍💼
Service explainer
Agencies and consultants can show a deliverable, like a dashboard or report, next to the steps included in the service.

In real websites

Website Templates That Use the Split Features With Image Section

The Split Features With Image section is part of 1 complete website template in the free Website Builder, so you can see it in a full page before you use it on its own: Mobile App Landing Page. Open any of them in the builder to edit the whole page, or keep customising this section by itself.

Got questions?

Frequently Asked Questions

In the editor the image sits on the right on desktop and on top on phones. After exporting, add order:-1 to .fs-media in the CSS to move it to the left, or use the Alternating Feature Rows section, which alternates sides for you.

About 1200×900 px. Uploads are resized in your browser to a maximum of 1600 px wide and PNG transparency is kept, so screenshots stay sharp.

Up to six. Three to four usually reads best; use the arrows to put your strongest point first.

Yes. Export a React component (JSX with its CSS) or a Vue single-file component; the GSAP animation runs after the component mounts.

It saves an editable copy of your Split Features With Image in My Code, the UI Snippets code editor: the section markup goes in the HTML panel, its CSS (theme variables, base styles and layout) in the CSS panel, and the GSAP library is added as a CDN link, so you can keep refining the code and save your own versions.

Yes. Every section is free for personal and commercial work, with no account, no watermark and no attribution: export it on its own as HTML, React, Vue or Next.js from its page, or use it in a website you build and export in the Website Builder.