Diagram

Usage

Diagram puts a marker on each spot of an image you want to explain. When a visitor clicks a marker, a card beside the image (below it on phones) shows that point's headline, description, image and link. The first point's card shows when the page loads.

Choose the image, then choose Add Point in the block toolbar and click the image where the marker goes. Add the point's Headline, Description, Image and Link in the block sidebar under Points of Interest.

Drag a marker to move it. For fine adjustments, use X Coordinate and Y Coordinate in the point's settings. Click any marker in the editor to see its card and open its settings.

Each marker shows its point's number. Type a Label to show something else, such as a unit number or a letter.

When to use it

Use it for floor plans, site maps, product photos with callouts, equipment diagrams, or any image where different spots need their own explanation.

The image and its cards sit side by side on wide screens, so the block works best at the full width of a section.

Nothing shows on the live page until the diagram image is chosen.

Tips

• Keep labels to a few characters so markers stay small and don't cover the image.
• Points are numbered in the order they're listed. Move Up and Move Down change the order, and the first point is the one visitors see first.
• In Description, leave a blank line to start a new paragraph.
• A link shows Learn More unless you type your own Link Text.
• Visitors using a keyboard can Tab to each marker and press Enter or Space to open its card.
• Each image's description for screen readers comes from its Alt Text in the Media Library.