How can I style images and their captions in a Rich Text Block on Webflow?

To style images and their captions in a Rich Text Block on Webflow, you'll need to use Webflow’s built-in Rich Text Elements and customize them using nested element targeting via a Rich Text wrapper with a class.

1. Add and Class the Rich Text Block

• Drag a Rich Text block onto the canvas.
• Assign a class to the Rich Text block (e.g., “Article Body”). This lets you style elements within it.

2. Add Image and Caption in the CMS (or Inside Designer)

• In your CMS Rich Text field (if using CMS), insert your image and add a caption below it.
• Webflow automatically wraps the image and caption in a <figure> and <figcaption>.

3. Target and Style the Image within Rich Text

• Select a Rich Text block on the page with content filled in (you must do this to access inner elements like images and captions).
• Inside the Rich Text block, select the image. It will show as “All Images inside [Class]” in the selector.
• Style the image:
• Max width, margin, padding, border-radius, etc.
• Example: Set max-width: 100% and margin: 24px auto for centered images.

4. Style the Caption (figcaption)

• Select the caption text directly under the image inside the Rich Text block.
• The selector should read “All Fig Captions inside [Class]”.
• Style as needed:
• Adjust font size, color, alignment, or padding.
• To center the caption, set text-align: center.

5. Preview and Test

• Use Preview mode to see styled images and captions in real layout.
• If using CMS content, test with several entries to ensure consistent styling.

Summary

To style images and captions in a Rich Text block in Webflow, assign a class to the Rich Text element, select and style nested images and captions using Webflow’s targeted selectors, and adjust properties like alignment, margins, and font styling.