Carousel Builder

v1.0.0Slide 2 of 5 · Step1080×1350

Click any text to edit it · drag a photo to reposition it, scroll to zoom, click to replace

Related Social Post Templates

3 in Carousel Slides categoryView all →
Carousel Step Slide template preview
Carousel Slides

Carousel Step Slide

v1.0.0 · 4 sizes
Carousel Cover Slide template preview
Carousel Slides

Carousel Cover Slide

v1.0.0 · 4 sizes
Carousel Final Slide template preview
Carousel Slides

Carousel Final Slide

v1.0.0 · 4 sizes

Carousel Step Slide — Free Carousel Slides Social Post Template

Carousel Slides · v1.0.0 · Updated 2026-10-16 · Instagram, Facebook & X · HTML + CSS

CategoryCarousel Slides
Tagscarouselstepnumberedtutoriallight
Sizes4:5 · 1080×13501:1 · 1080×10809:16 · 1080×192016:9 · 1600×900
Updated October 16, 2026

What's included

Features

Huge outlined step number (CSS text-stroke)
Step title and explanation with *asterisk* highlights
Progress indicator such as "2 / 7"
Accent stripe down the left edge for continuity
Title and explanation shrink together when long
Light violet default palette, matching the carousel set
Edits are saved, so every slide stays consistent
PNG, JPEG, ZIP or HTML export

About this template

Carousel Step Slide — Free Numbered Tutorial Slide Template

Carousel Step Slide social post template: A middle carousel slide with a large outlined step number, the step title, a short explanation and progress dots, so every slide in a series matches.

Carousel Step Slide is the middle-slide template of the free carousel set. Each slide carries one step: a large outlined number ("02"), the step title, a short explanation, your handle and a progress indicator ("2 / 7").

One idea per slide

The best carousels give each slide one clear point. The step title is set in Poppins at 800 weight, with the explanation in a lighter, smaller paragraph underneath. Readers get the point from the title and the detail from the paragraph. Highlight a key term like *clamp()* with asterisks.

Outlined numbers keep the order clear

The step number is huge and drawn as an outline only, using CSS -webkit-text-stroke in the accent colour with a transparent fill. It shows where you are in the sequence without overpowering the content. A thick accent stripe down the left edge ties the slides together as you swipe.

Progress keeps people swiping

The "2 / 7" indicator in the bottom-right corner tells readers how far they've come and how much is left, which helps keep them swiping to the end.

Make a whole carousel quickly

Edit the number, title, explanation and progress for each step, download, and repeat. Your colours and fonts are saved, so every slide matches. Start with Carousel Cover Slide and finish with Carousel Final Slide.

Showing code in a step? Use Code Tip for that slide.

Why use it

Why Use the Carousel Step Slide Template

①
One idea per slide
An outlined step number, a title and one explanation keep each slide focused, which keeps people swiping.
▬
Visible progress
A "2 / 7" indicator shows readers how far they have come and how much is left, helping more of them reach the end.
↺
Consistent slides, fast
Your colours and fonts are saved, so making the next step is just new text and another download.

How it’s different

How It’s Different From Canva-Style Templates

</>
Real HTML and CSS, not a locked image
Canva-style templates only give you an image. These are plain HTML and CSS you can copy, download as a .html file or fork into My Code, then reuse on a website, in an email or in your own design system.
◍
Private by design
Text and photos never leave your browser. Images are drawn locally on a canvas, so client photos and unreleased product screenshots stay on your device.
⇲
Every size from one design
Layouts use relative units, so one design exports as an Instagram portrait post, a square, a Story and a 16:9 X post, or all four at once as a ZIP.
✓
Free, with no account or watermark
No sign-up, no premium-only templates, no watermark and no download limits. Edits are saved in your browser for next time.
Aa
Text that always fits
Long headlines shrink step by step instead of overflowing, and Story layouts keep text clear of Instagram’s buttons. Most template editors leave both to you.
v1
Versioned templates
Each template has a version number and an update date, and the exported HTML records which version you used, so you can tell when a design changes.

Step by step

How to Use

  1. 1
    Pick the sizeChoose Portrait 4:5 (the Instagram feed default), Square, Story / Reel or Landscape 16:9 for X. Carousel Step Slide opens at 1080×1350.
  2. 2
    Edit the textClick any text in the preview, or use the fields on the left (step number, step title, explanation, progress and more). Wrap words in *asterisks* to colour them.
  3. 3
    Match your brandApply one of 12 palettes or set exact colours with the pickers, then choose heading and body fonts.
  4. 4
    Download or take the codeDownload a PNG or JPEG at full size, download every size as a ZIP, copy the HTML, or fork it into My Code to keep editing.

Real-world uses

Common Use Cases

🪜
Step-by-step tutorials
Teach a process one step per slide, numbering each one and keeping explanations to a sentence or two so the carousel stays quick to read.
📝
Numbered list posts
Turn a list article ("10 VS Code extensions") into slides, with each item's name as the title and a one-line reason why.
🧩
Frameworks and processes
Explain a framework or method one stage at a time, with the stage name in the title and the progress indicator showing the full sequence.
✅
Checklists
Break a launch, SEO or onboarding checklist into numbered slides that followers can save and work through later, one item per slide.

Got questions?

Frequently Asked Questions

Edit the number, title, explanation and progress for the first step, download it, then change the text for the next step and download again. Colours and fonts stay the same because your edits are saved.

Yes. The number field is free text, so "A", "B", "Q1" or a symbol all work.

Keep the title under about 50 characters and the explanation to one or two sentences. Longer text shrinks to fit.

Yes. It shares the Poppins type and violet palette of the Carousel Cover and Final slides. If you change colours, apply the same palette to all three.

Portrait post 1080×1350 (4:5): Instagram feed (recommended), Facebook feed, X portrait. Square post 1080×1080 (1:1): Instagram, Facebook and X feeds. Story / Reel 1080×1920 (9:16): Instagram and Facebook Stories, Reel covers. Landscape post 1600×900 (16:9): X feed image, Facebook landscape. Switch sizes in the editor and the layout adapts, or click "All sizes (ZIP)" to download every size at once.

Yes. "Copy HTML" and "Download .html" give you one self-contained file: the markup, all the CSS and links to the Google Fonts it uses. "Fork to My Code" saves an editable copy in the UI Snippets editor. The file records the template name and version (v1.0.0).

Yes. It is free for personal and commercial posts, with no sign-up and no watermark. Everything runs in your browser and nothing you type or upload is sent to a server.