Docs pass: add widget screenshots and expand the user guides

Add 21 screenshots across the Elementor Tools docs and rework the pages
around them: clearer opening lines, settings tables that state defaults,
and callouts for the parts people trip over. Also refreshes the Pro
getting-started, Custom Product Tabs and Product Filter pages, plus the
matching marketing copy.

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>

docs/dotjuice-elementor-tools-pro/widgets/woo-custom-product-tabs.md

@@ -47,6 +47,18 @@ For a custom tab, choosing **Elementor Template** as the Content Type requires e
 2. Open the template you want to embed, or hover over it in the list.
 3. The number in the edit URL (`post=1234`) or shown in your browser's address bar is the Template ID — enter that number into the field.
 
+## Using shortcodes in a tab
+
+Custom tabs set to **Text Editor** run shortcodes, so anything available on your site as a shortcode can go straight into a tab's content.
+
+This is the practical way to give every product its own document without building a tab per product. Using the free plugin's Markdown shortcode:
+
+```
+[dj_markdown acf_field="changelog_url"]
+```
+
+Add a URL field to your products, drop that single line into a "Changelog" tab, and each product renders the file its own field points at. See the [Markdown Widget](../../dotjuice-elementor-tools/widgets/markdown-widget.md) documentation for the full list of shortcode options.
+
 ## Styling
 
 **Tab Navigation** — background, spacing, alignment, divider styling, and Normal/Hover/Active states for each tab button (including a separate colour control for the active tab's bottom border, useful for either blending it into the panel or removing the divider line entirely).