How can I style images and their captions in a Rich Text Block on Webflow?
TL;DR
- Add a Rich Text Block with image and caption content to the page.
- Use the Style panel to target and style nested selectors: “All Images inside of Rich Text Block” and “All Figure Captions inside of Rich Text Block.”
- Apply desired image and caption styles, and preview across breakpoints for responsiveness.
To style images and their captions in a Webflow Rich Text Block, you need to use the “All Images” and “All Figure Captions” nested selectors within the Rich Text Element. Here’s how to find and style them effectively.
1. Add a Rich Text Element to the Page
- Drag a Rich Text Block onto your page from the Add panel.
- Add sample content including at least one image with a caption, or use temporary placeholder content to reveal the targeted elements.
2. Access Nested Selectors in Webflow
- Click inside the Rich Text Block, and then select the image or caption inside that block.
- The Style panel will show a selector like “All Images” inside of Rich Text Block or "All Figure Captions" inside of Rich Text Block.
- These are nested CSS selectors that allow styling only when the element is inside a Rich Text Block.
3. Style the Image
- After selecting “All Images inside of Rich Text Block”, apply styles like:
- Max width (e.g., 100%)
- Margins or padding
- Border radius or box shadows
- Display settings (e.g., block or inline-block)
4. Style the Caption
- Select the image caption (usually wrapped in a
<figcaption>tag). - Webflow will show “All Figure Captions inside of Rich Text Block”.
- Apply styles such as:
- Font size, weight, or style (e.g., italic)
- Text alignment
- Padding or margin
- Color and line height
5. Preview Across Breakpoints
- Use Webflow’s responsive controls to test and adjust styles for different screen sizes.
- Every Rich Text instance using the same class will inherit these nested styles.
Summary
To style images and captions in a Webflow Rich Text Block, use the nested selectors: “All Images inside of Rich Text Block” and “All Figure Captions inside of Rich Text Block.” This ensures your custom styles are applied only within Rich Text Blocks and remain consistent site-wide.
