Adding a Caption
Last updated
Last updated
With Photo Block, captions are a fully developed feature with many customization options. Let's review what you can do with captions.
If you do not want a caption on your photo but want to hide the "Add Caption" button, you can click the "Hide Caption" icon from the block toolbar.
This will allow a better preview if the image doesn't warrant a caption.
To add a caption to the photo, click "Add Caption" at the bottom of the block. This will create a caption appended to the bottom of the image.
From there, you will see the caption toolbar and block sidebar options.
Let's go over the available options in the caption toolbar.
Alignment Options - Align the caption, left, center, or right.
Caption Positioning - Position the caption at the top, overlay, or bottom.
Caption Mode - Choose between single-line and multi-line captions.
Remove Caption - This will remove the caption from the photo.
Formatting Options - Add basic formatting to the caption.
You can position the caption at the top or bottom of the photo or over the photo, which we dub an overlay caption.
You can position the caption by interacting with the caption toolbar under Position.
Once you click on Position, you're presented with three options.
Top - Position the caption at the top of the photo.
Bottom - Position the caption at the bottom of the photo.
Overlay - Position the caption over the photo.
Positioning a caption at the top will move the caption above the photo.
Please visit the link below for overlay captions and how to create them.
Overlay CaptionsYou can switch between single-line captions and multi-line captions by adjusting the caption's mode.
Switching between modes does not transfer existing captions. The two modes provide separate caption inputs, so they can't be carried across.
You can use single-line captions if you have a basic caption and only need a line of text to describe the image.
You'll find formatting options for Single-line captions in the block sidebar.
You can adjust the font, background color, text color, link color, and link color on hover.
Switching to Multi-line captions allows you to add multiple lines to the caption. In fact, you can place any block from the block editor into your caption, which opens up the possibilities of advanced customization.
You'll see an option for multi-line captions in the block sidebar for Smart Styles.
Smart Styles provides formatting and styles for the multi-line innerblocks, so you don't have to worry about styling the innerblocks yourself.
You can set the font families, base font size, and colors for common elements.
If you plan to style the innerblocks yourself, you can disable Smart Styles.
In the block sidebar, you'll see an area to adjust the sizing and dimensions of the caption.
You can adjust per mobile breakpoint:
Padding
Margin
Border
Border Radius
These will be applied directly to the caption.
You're able to adjust the caption container. You can modify per breakpoint:
Width
Height
Min-Width
Min-Height
Max-Width
Max-Height
Click "Remove" in the caption block toolbar to remove a caption.
You'll be asked to confirm via a modal, and when approved, the caption will be removed.
In the Advanced panel in the block sidebar, you can:
Add CSS classes to the caption container
Add any custom data attributes you need for the caption
Hide on desktop, tablet, and mobile
You can also set global styles in the Advanced panel.
