How to Add Captions to Images in Webflow (3 Simple Ways)

An image without context can confuse more than it helps. Without proper captions, visitors miss context, and the visuals lose half their impact. It’s like when you’ve spent hours perfecting a gallery, yet it doesn’t serve the message you want to deliver.

Now you may ask, how to add a caption to an image in Webflow? Well, there are multiple ways using which you can do that.

In this blog, we’ll cover the three easy ways in Webflow for adding a caption to an image. Plus, we’ll cover how Webflow developers add captions using the CMS collection list. With that said, let’s get started!

Why Add Captions to Images in Webflow?

Sometimes an image just needs a little backup. You add a photo to your site, and it looks good, but something feels off. Like it’s missing a bit of context. That’s where captions come in. They’re small, but they do a lot.

Here’s why I use them in Webflow:

• They make things clearer: Not every image explains itself. A quick caption helps people get it without having to guess. It just makes the experience smoother.
• They support accessibility: If someone’s using a screen reader or has trouble seeing, captions can help. It’s a simple way to make sure everyone’s included.
• They add context for search engines: Captions don’t replace alt text, but together they give Google a better picture of what’s going on. I’ve noticed a difference when I use both.
• They make the layout feel simple: A clean little line of text under an image makes everything simple for the visitor. It shows you’ve thought things through, not just attached the images.
• They guide the viewer: Whether it’s a product, a team photo, or a portfolio piece, captions keep people on the same page. Literally.

In my opinion, captions are quick to add and make a real difference. I use them whenever I want an image to actually say something, without saying too much.

How to Add a Caption to an Image in Webflow?

There are three basic ways using which you can add a caption to an image. Let’s begin with the simplest one, using the rich text block element.

Method 1: Add Captions Using a Rich Text Block

Rich Text Blocks in Webflow make adding captions simple, especially if you want formatted text (like bold or links) right under your image. Here’s the fastest way to do it:

Step 1: Drag a Rich Text element by clicking on the + icon.

Step 2: Click inside the Rich Text and keep your cursor where you want the image.

Step 3: Use the + icon to insert an image into the content.

Step 4: Once the image appears, click the + icon to insert the Text Block, and write the caption.

Step 5: Webflow automatically wraps the image and caption in a semantic <figure> and <figcaption>.

Step 6: To style the caption, select it, then go to the Style panel and adjust font, spacing, or alignment.

Step 7: Optionally, give your Rich Text block a class (like .blog-content) to style captions globally.

That’s it. No code, just drop the image, write the caption, and style it however you want. It’s the simplest way I’ve found to add captions in Webflow.

Method 2: Add Captions Using Custom Code

Sometimes you need more control than Webflow’s visual editor offers. That’s where custom code comes in. Here are the steps you need to follow:

Step 1: First, open your project in Webflow and go to the page you want to edit.

Step 2: Drag and drop an image element onto your canvas by clicking on the + icon.

Step 3: Select the image you want to add a caption to.

Step 4: Drag a text block below the image where you want the caption to appear.

Step 5: Type your desired caption into the text block.

Step 6: Go to the page settings and find the Custom Code section.

Step 7: Add the following code snippet to create a caption effect. In this example, I used a simple CSS approach to style the caption:

<style>
  .caption {
    display: block;
    text-align: center;
    font-size: 14px;
    color: #666;
    margin-top: 10px;
  }
</style>

Step 8: Assign the class caption to your text block to apply the custom styles.

Step 9: Change the CSS properties to match your site’s design and layout.

Step 10: Use Preview mode to see how your image and caption look together.

Step 11: Once you’re satisfied, publish your site to make the changes live.

It might sound technical, but once you set it up, it’s easy to reuse. I’ve used this method when I wanted to automate captions from CMS content.

Method 3: Add Captions to Images in a Lightbox

Lightbox galleries look slick, but they’re even better when viewers can understand your images. Here’s how to add captions that appear when images are expanded.

Step 1: Drag a Lightbox component onto your page.

Step 2: Click into the Lightbox and select Replace Image to upload or choose your image.

Step 3: Open the Element Settings Panel on the right sidebar.

Step 4: In the Media section, click Add Media and choose the image again.

Step 5: Under that image, fill in the Caption field; this will show up in the pop-up.

Step 6: You can group Lightboxes together if you’re building a gallery.

Step 7: Preview the site and click the image to see the caption inside the lightbox.

Step 8: For more control, style the caption appearance using global or custom CSS.

I like this approach because it keeps the page minimal while still giving people more info when they need it.

All three methods are simple for adding a caption to an image in Webflow. You may choose based on what your requirements are. If you don’t want to do it yourself, consult with the Weflow development company. They have the right experts well-versed to build a custom website to your demand.

How to Add Captions to Images in a CMS Collection List?

Adding captions to images in a CMS Collection List can make your Webflow site more dynamic. It’s a great way to provide context to images. Here’s a simple process to help you do it:

Step 1: Start by creating a CMS Collection in Webflow if you haven’t already.

Step 2: Go to Pages > CMS Collection pages > Create a CMS Collection. This will automatically generate a CMS collection page.

Step 3: Drag a Collection List onto your page from the + icon and link it to your CMS Collection.

Step 4: Inside the Collection List, add an image element and a text block to display the image and caption, respectively.

Step 5: Bind the image element to the image field in your CMS Collection and the text block to the plain text field for captions.

Step 6: Use the Designer to style your image and text block. Adjust the font, size, color, and spacing to match your site’s design.

Step 7: Customize the layout settings of your Collection List to ensure images and captions are displayed neatly.

Step 8: Use Preview mode to see how your images and captions appear in the Collection List.

Step 9: Once you’re satisfied with the layout and styling, publish your site to make the changes live.

And that’s it. Once set up, this works automatically for every new CMS entry you add. It saves time and keeps everything consistent.

Styling Tips to Make Captions Look Good

Great captions don’t just inform, they enhance your design. Here’s how to make them look like they belong, not just an afterthought.

• Keep font size smaller than the body text: Captions should feel secondary. A slightly smaller font size helps them sit subtly beneath the image without grabbing too much attention.
• Use a muted or neutral color: Stick to greys or toned-down colors for captions. Bright colors compete with the image, and that’s not the goal.
• Add spacing between the image and caption: Give your caption some breathing room. A few pixels of margin create a nice visual break and improve readability.
• Center-align for single images, left-align for lists or grids: For a solo image, centered captions usually look clean. If you’re working in a grid or list, left-aligning keeps things tidy and aligned.
• Use italics or lighter weight fonts for style: I like to use italic or a lighter weight to set the caption apart from the main content. It signals that it’s supporting info.
• Don’t overdo the length: Short captions work best. If it’s more than a sentence, it starts to feel like a paragraph, not a caption.

The best captions feel invisible until needed. If someone notices your styling before the content, dial it back.

FAQs on Adding a Caption to an Image in Webflow

Final Thoughts

Adding captions to images in Webflow is easy once you know your options. You can add the caption to the image using Rich Text Block, Lightbox, and custom code. If you want to add a caption dynamically, you can use the CMS collection list.

You don’t need to overcomplicate it. Start with what works for your workflow, keep styling clean, and test how it looks on different screens. Small changes like caption placement or font choices can make a big difference in how your content is perceived.

If you want us to build a well-designed and robust Webflow website, connect with us today!