f4838865c9
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>
80 lines
5.4 KiB
Markdown
Executable File
80 lines
5.4 KiB
Markdown
Executable File
# Getting Started
|
|
|
|
Dotjuice Tools for Elementor adds ten widgets to the Elementor editor, plus three settings pages for the features that need configuration outside the page builder.
|
|
|
|
|
|
*Screenshot: the Elementor editor with the widgets panel open and the **Dotjuice** category expanded, showing the full widget list.*
|
|
|
|
## Requirements
|
|
|
|
| | |
|
|
|---|---|
|
|
| **Required** | [Elementor](https://wordpress.org/plugins/elementor/) (the free page builder) installed and active |
|
|
| **Optional** | WooCommerce — unlocks the six Woo widgets and the WooCommerce Hacks settings page |
|
|
| **Optional** | Advanced Custom Fields — lets the Markdown shortcode read its URL from an ACF field |
|
|
|
|
The plugin does nothing on its own without Elementor: its widgets are registered on Elementor's own widget-registration hook, so if Elementor is inactive the Dotjuice category simply won't exist.
|
|
|
|
## Finding your widgets
|
|
|
|
Open any page in the Elementor editor and look for the **Dotjuice** category in the widgets panel. Every widget from this plugin lives there.
|
|
|
|
If a widget you expect is missing, it's almost always the WooCommerce dependency. These six only register when WooCommerce is active:
|
|
|
|
- Woo Products Transform
|
|
- Woo Add To Cart transform
|
|
- Woo Categories Transform
|
|
- Woo My Account Transform
|
|
- Woo Page Numbers
|
|
- Woo Taxonomy List
|
|
|
|
**Woo Taxonomy List is in that list even though it isn't shop-specific.** It can drive non-shop content such as blog categories, but it still only appears when WooCommerce is present. On a site without WooCommerce it won't be available.
|
|
|
|
The remaining four have no dependencies beyond Elementor: Screenshot Capture, Dark Mode Toggle, Keyword Linker, and Markdown.
|
|
|
|
## Where the plugin's settings live
|
|
|
|
Settings sit under the shared **Dotjuice** menu in your WordPress admin sidebar. That menu is shared by all Dotjuice plugins — whichever one loads first creates it, so if you also run Dotjuice Performance you'll see both listed under the same parent.
|
|
|
|
|
|
*Screenshot: the WordPress admin sidebar with the **Dotjuice** menu expanded, showing its submenu items.*
|
|
|
|
| Menu item | What it's for |
|
|
|---|---|
|
|
| **Tools for Elementor** | The plugin's own dashboard — widget overview, system status, and support links. |
|
|
| **Integrations** | A tabbed page for widgets that talk to outside services. Screenshot API settings are the first tab — see [Screenshot API Settings](screenshot-api-settings.md). |
|
|
| **WooCommerce Hacks** | Account page tweaks and product attribute colours. Only appears when WooCommerce is active — see [WooCommerce Account Settings](woocommerce-account-settings.md) and [Product Attribute Colours](product-attribute-colours.md). |
|
|
|
|
:::note
|
|
Older versions of this plugin had a standalone **Screenshot API** menu item. It's now the first tab of **Integrations**, which exists so future API-backed widgets can add their own tabs rather than each adding a menu entry.
|
|
:::
|
|
|
|
## Recommended first steps
|
|
|
|
1. **Setting up Screenshot Capture?** Configure your API key first under **Dotjuice → Integrations**. The widget renders nothing at all without a key — see [Screenshot API Settings](screenshot-api-settings.md).
|
|
2. **Running a WooCommerce store?** Look through [WooCommerce Account Settings](woocommerce-account-settings.md). Most stores want at least one of these — hiding unused My Account tabs, or keeping a category off the main shop page.
|
|
3. **Using colour swatches anywhere?** Assign your colours once under [Product Attribute Colours](product-attribute-colours.md); every widget that shows swatches reads from that single list.
|
|
4. Browse the widget guides below for whatever your build needs.
|
|
|
|
## Widget guides
|
|
|
|
**General purpose**
|
|
|
|
- [Screenshot Capture](widgets/screenshot-capture.md) — live screenshots of any website, captured through an API
|
|
- [Dark Mode Toggle](widgets/dark-mode-toggle.md) — a front-end light/dark switch driven by Elementor's global colours
|
|
- [Keyword Linker](widgets/keyword-linker.md) — turn chosen words into links across a page automatically
|
|
- [Markdown](widgets/markdown-widget.md) — render a live Markdown file, with a shortcode for per-post documents
|
|
|
|
**WooCommerce** (require WooCommerce active)
|
|
|
|
- [Woo Products Transform](widgets/woo-products-transform.md) — an attribute-aware product grid with hover and rollover effects
|
|
- [Woo Add to Cart Transform](widgets/woo-add-to-cart-transform.md) — variation dropdowns rebuilt as clickable buttons or colour swatches
|
|
- [Woo Categories Transform](widgets/woo-categories-transform.md) — styled, animated category tiles
|
|
- [Woo My Account Transform](widgets/woo-my-account-transform.md) — full styling control over the My Account area
|
|
- [Woo Page Numbers](widgets/woo-page-numbers.md) — styleable product pagination that co-operates with AJAX filtering
|
|
- [Woo Taxonomy List](widgets/woo-taxonomy-list.md) — cascading term lists from any taxonomy
|
|
|
|
## Upgrading to Pro
|
|
|
|
Several widgets have controls that are visible but inert in the free version — colour swatches on Woo Add to Cart Transform are the usual one people hit. Where that applies it's called out in that widget's guide. [Dotjuice Tools for Elementor Pro](../dotjuice-elementor-tools-pro/getting-started.md) is an add-on rather than a replacement: the free plugin must stay installed and active.
|