Desktop · 1280px · shown at 0% · edit the text, images and colours in the panel
Alternating Feature Rows — Free Website Section Template
Features · v1.0.0 · Updated 2026-10-20 · Responsive · GSAP animation · HTML, React & Vue
What's included
Features
About this section
Alternating Feature Rows — Free Zig-Zag Section Template
Alternating Feature Rows is the zig-zag layout used on countless product pages: rows of text and image that swap sides as you scroll, so a long page keeps its rhythm. Each row has a small label, a heading, a paragraph, a checklist of benefits, an optional link and its own image.
Rows you control
Add up to eight rows, duplicate a row to start the next, and reorder them with the arrows; the sides alternate automatically, so you never have to set them. Bullet points are typed one per line and get brand-coloured check marks. Leave the label, bullets or link empty and they hide themselves.
Your screenshots
Upload a screenshot for every row (resized in your browser and saved on your device) or paste image URLs. Images sit on a soft tinted panel with a gentle shadow that works with any screenshot.
Responsive and animated
On tablets and phones each row stacks with the image on top. With GSAP, the section heading reveals word by word, the text in each row staggers in and the images rise into place once on scroll.
Fits with the rest
The shared theme keeps colours and fonts consistent with your hero and other sections. For a single topic with a point list, use Split Features With Image. Export HTML, a ZIP with all your images, React or Vue, or fork into My Code.
Why use it
Why Use the Alternating Feature Rows
How it’s different
How It’s Different From Other Free Section Templates
Step by step
How to Use
- 1Edit the contentFill in the heading and feature rows in the panel. Switch the heading on or off. Wrap words in *asterisks* to colour them.
- 2Add your imagesUpload your own images (resized in your browser and kept on your device) or paste a hosted image URL.
- 3Match 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.
- 4Animate and previewChoose a GSAP entrance effect and speed, press Play animation, and check the section on desktop, tablet and mobile.
- 5Save 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
Got questions?
Frequently Asked Questions
Every second row puts its image on the left, automatically, with the CSS selector :nth-child(even). Reordering or adding rows keeps the pattern without any settings.
Type them in the Bullet points box, one per line. Each line becomes a list item with a check mark in your brand colour. Leave the box empty to hide the list.
Each row stacks into one column with the image above the text, using container queries, so the section adapts to the width it has.
Yes. The single HTML file embeds uploaded images, and the ZIP puts them in an images folder next to index.html.
It saves an editable copy of your Alternating Feature Rows 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. It is free for personal and commercial websites, with no sign-up, no watermark and no attribution required. Everything runs in your browser and your edits are saved locally.