Carousel Step Slide — Free Carousel Slides Social Post Template
Carousel Slides · v1.0.0 · Updated 2026-10-16 · Instagram, Facebook & X · HTML + CSS
What's included
Features
About this template
Carousel Step Slide — Free Numbered Tutorial Slide Template
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.
Extend with AI
Take This Post Further With AI
Use an AI assistant to split an article into carousel steps with titles and one-sentence explanations, then paste each into this template.
Prompt to recreate it
Copy this into your AI assistant of choice to build the effect from scratch, or as a jumping-off point for your own variant:
Design a 1080×1350 numbered carousel step slide in HTML and CSS.
- Light violet background with a thick accent stripe down the left edge.
- A huge outlined step number ("02") using -webkit-text-stroke in the accent with a transparent fill.
- Middle: the step title (Poppins 800) and a one-sentence explanation below it.
- Footer row: the handle on the left and an accent progress indicator ("2 / 7") on the right.
- Use --u (1% of the shorter side) for sizing.Want to tighten it up first? Run this prompt through the AI Prompt Studio to score it across 8 quality dimensions, catch anti-patterns, and tune the wording for Claude, ChatGPT, or Gemini before you paste it in.
Why use it
Why Use the Carousel Step Slide Template
How it’s different
How It’s Different From Canva-Style Templates
Step by step
How to Use
- 1Pick the sizeChoose Portrait 4:5 (the Instagram feed default), Square, Story / Reel, Landscape 16:9 for X, a 1200×627 LinkedIn image or a 1000×1500 Pinterest pin. Carousel Step Slide opens at 1080×1350.
- 2Edit 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.
- 3Add your imagesClick a photo area in the preview or use Images to upload your logo. Images stay in your browser.
- 4Match your brandApply your saved brand kit or one of 12 palettes, set exact colours, and choose heading and body fonts from any Google Font or your own uploaded font.
- 5Preview it in the feedSwitch the preview to Instagram, Story, X or LinkedIn to see the post with your name, handle and caption, and fix anything the quality checks flag.
- 6Download, save or bulk createDownload PNG, JPG or PDF, every size as a ZIP, or copy the HTML. Save it to My designs to reuse later, or turn a CSV into dozens of posts with Bulk create.
Real-world uses
Common Use Cases
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 and LinkedIn feeds, X portrait. Square post 1080×1080 (1:1): Instagram, Facebook, LinkedIn 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. LinkedIn image 1200×627 (1.91:1): LinkedIn shared image and link posts, Facebook link images. Pinterest pin 1000×1500 (2:3): Pinterest standard pin (the recommended 2:3 ratio). Switch sizes in the editor and the layout adapts, or click "All sizes (ZIP)" to download every size at once.
Press Play in the editor to watch the animation for free. Downloading it as an animated MP4 (or WebM) for Reels, Stories and WhatsApp Status is for Patreon supporters, who enter the supporter passcode once. PNG, JPG, PDF and HTML exports are free.
Yes, for Patreon supporters. Choose Export, then "Bulk create from CSV", and paste rows from a spreadsheet or upload a CSV whose column names match the Carousel Step Slide fields. Every row becomes one post, and you download them all as a ZIP.
Yes. The preview switches between the plain design and mock-ups of an Instagram feed post, an Instagram Story, an X post and a LinkedIn post, using the name, handle and logo from your brand kit and the caption you type.
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.