Element capture

Element capture saves one part of a page, such as a card, a form, a chart or a table, cut exactly to its edges. Instead of dragging a rectangle by eye, you point at the element and InnoShot works out its outline for you.

Capture an element

1. Click the InnoShot icon and choose the element action, press Alt+Shift+E (Option+Shift+E on macOS), or use the right-click menu.
2. Move the pointer over the page. InnoShot outlines the element under the pointer and shows its size.
3. If the outline is too small or too large, use the Up arrow and Down arrow keys to adjust it (see below).
4. Click, or press Enter, to capture the outlined element.

Press Esc to cancel. After the capture, the editor opens in a new tab.

Move to the parent or a child

Web pages are built from boxes nested inside other boxes, and the element directly under the pointer is often only a piece of what you want, such as the heading inside a card.

• Up arrow moves the outline out to the parent: the element that contains the current one. Press it again to keep moving outwards.
• Down arrow moves the outline in to a child: an element inside the current one.

Watch the outline and the size readout until they match what you want. After using the arrow keys, pressing Enter captures exactly what is outlined.

Elements taller than the screen

If the element is taller than the window, such as a long article, a comment thread or a big table, InnoShot scrolls the page and stitches the element together, the same way as a full page capture. Chrome allows an extension at most two screen captures per second, so this takes roughly half a second for each screen the element covers.

When to use element capture

• Documenting a single component for a design review or a style guide.
• Sharing one chart or table from a dashboard without the rest of the page.
• Capturing a card or post with clean edges, ready to place on a background in the editor.

Limits

• Cross-origin iframes. Content embedded from another site, such as many video players, maps and payment forms, sits in a separate frame. Its pixels appear in captures, but the element picker cannot reach inside it, so you cannot pick an element within that frame. Use a selected area capture for it instead.
• Content that scrolls inside the element. Element capture saves the element as it appears on the page. If it has its own scrollbar and you need the hidden part too, use scrollable container capture.
• Restricted pages. Element capture is not available on pages Chrome reserves for itself, such as chrome:// pages and the Chrome Web Store.

Related

• Scrollable containers
• Capture issues
• Element screenshots
• How to capture a specific element on a webpage