Write marketing copy for all 16 widget marketing files with problem/solution framing and docs links
This commit is contained in:
@@ -1,22 +1,21 @@
|
||||
A one-click, site-wide dark mode switch — using the colour palette you've already built in Elementor.
|
||||
A one-click, site-wide dark mode switch that works with the colours you've already set in Elementor — no separate stylesheet, no custom code.
|
||||
|
||||
## The problem it solves
|
||||
|
||||
Dark mode is one of the most-requested features on modern websites, but building it properly usually means maintaining a whole second stylesheet, or wiring up custom CSS variables by hand across every template.
|
||||
Dark mode is one of the most-requested features on modern websites, but building it properly usually means maintaining a whole second stylesheet, or wiring up custom CSS variables by hand across every template. That's a lot of work for something that should be simple.
|
||||
|
||||
## How it helps
|
||||
|
||||
Dark Mode Toggle works directly with Elementor's own global colours — no separate stylesheet, no custom code. Add the toggle anywhere on your site, choose a dark palette, and one click flips your entire site into dark mode instantly, remembered for that visitor on their next visit too.
|
||||
Dark Mode Toggle works directly with Elementor's own global colours — no extra setup, no duplication. Add the toggle anywhere on your site, choose a dark palette, and one click flips every page into dark mode instantly. The choice is remembered for that visitor on their next visit too.
|
||||
|
||||
Crucially, it speaks **both** of Elementor's colour systems:
|
||||
It supports **both** of Elementor's colour systems:
|
||||
- **Classic Global Colors** (Primary, Secondary, Text, Accent) that traditional widgets use
|
||||
- **Elementor 4.x global variables** used by the latest atomic widgets
|
||||
|
||||
- The **classic Global Colors** (Primary, Secondary, Text, Accent) that traditional widgets use.
|
||||
- The **newer Elementor 4.x global variables** used by the latest atomic widgets.
|
||||
|
||||
Real sites are increasingly a mix of the two, so the toggle can remap both at once — meaning your dark mode stays complete as you build with newer Elementor widgets, not just the old ones.
|
||||
Real sites are a mix of the two, so the toggle remaps both at once — your dark mode stays complete as you build with newer Elementor widgets.
|
||||
|
||||
## The result
|
||||
|
||||
A genuine site-wide dark mode, built entirely from colours you already control through Elementor — future-proofed for the newer widget system, with nothing extra to maintain.
|
||||
A genuine site-wide dark mode, built entirely from colours you already control through Elementor, future-proofed for the newer widget system, with nothing extra to maintain.
|
||||
|
||||
*Note: this widget relies on your theme and Elementor Kit consistently using Elementor's global colours and variables throughout your design — the more consistently they're used, the more complete the dark mode effect will be.*
|
||||
[View full documentation →](https://docs.dotjuice.co.uk/docs/dotjuice-elementor-tools/widgets/dark-mode-toggle)
|
||||
@@ -1,13 +1,15 @@
|
||||
Turn chosen keywords into links automatically, across every post and page — without editing content by hand.
|
||||
Turn chosen keywords into links automatically, across every post and page — without editing your content by hand.
|
||||
|
||||
## The problem it solves
|
||||
|
||||
Internal linking (and the occasional important external link) is one of those SEO and UX basics that's simple in theory but tedious in practice: every time you mention a term you want linked, you have to remember to add the link manually, in every post, every time.
|
||||
Manually adding internal links to every mention of a keyword across your entire site is tedious, and you'll always miss some. Over time, your internal linking grows stale, and you're leaving SEO value and reader engagement on the table.
|
||||
|
||||
## How it helps
|
||||
|
||||
Define a keyword once, tell it where to link, and Keyword Linker automatically turns every matching mention of that word across your site's content into a link — with control over how many times per page it should link, whether to bold the result, and whether the link opens in a new tab or carries a "nofollow" attribute.
|
||||
Add a keyword and a URL, and the widget handles the rest — every occurrence of that keyword on the page becomes a clickable link. You control which keywords to link, where they go, and whether to link every occurrence or cap the number. Bold the link text for extra visibility, and choose whether links open in a new tab or pass link equity.
|
||||
|
||||
## The result
|
||||
|
||||
Consistent internal (or external) linking across your whole site, maintained from one central list instead of hunting through old posts by hand.
|
||||
A fully automated internal linking system that keeps your content connected, boosts SEO, and guides readers to the pages that matter — without touching a single blog post.
|
||||
|
||||
[View full documentation →](https://docs.dotjuice.co.uk/docs/dotjuice-elementor-tools/widgets/keyword-linker)
|
||||
@@ -2,26 +2,16 @@ Embed a live Markdown file directly into your page — always showing the curren
|
||||
|
||||
## The problem it solves
|
||||
|
||||
Documentation, changelogs, and README files usually live in Markdown format in a repository, separate from your WordPress site. Keeping a WordPress page in sync with them means manually copying the content across every time it changes.
|
||||
Content that lives in two places inevitably drifts apart. When your documentation, changelogs, or release notes live in a markdown file on GitHub or Git, you end up manually copying content into WordPress pages, and the two versions quickly fall out of sync.
|
||||
|
||||
## How it helps
|
||||
|
||||
Point the Markdown Widget at any Markdown file URL — a GitHub README, a changelog, a docs page — and it fetches the file on your server and renders it as proper HTML headings, lists, code blocks, and links. Because the fetch happens server-side, it works with private and self-hosted repositories too, not just sources that permit cross-origin requests.
|
||||
Drop the Markdown widget anywhere on your page, give it a raw URL to any markdown file, and it renders the content in full — tables, code blocks, headings, images, everything. The content is fetched server-side (no CORS headaches) and cached for performance, so visitors always see the latest without you lifting a finger.
|
||||
|
||||
You can also upload a markdown file directly through the WordPress Media Library if you prefer not to link to an external URL.
|
||||
|
||||
## The result
|
||||
|
||||
A documentation or changelog page on your WordPress site that's always current, sourced directly from wherever the Markdown file actually lives.
|
||||
Your WordPress content stays in sync with your source-of-truth markdown files automatically. Update the file in your repo, and the page updates — no copy-paste, no drift, no hassle.
|
||||
|
||||
## One document per product, without one page per product
|
||||
|
||||
The widget also comes with a `[dj_markdown]` shortcode, which works anywhere a widget can't go — inside a WooCommerce product tab, a text editor, or a template.
|
||||
|
||||
Instead of a fixed URL, the shortcode can read the URL from a custom field on whatever is being displayed:
|
||||
|
||||
```
|
||||
[dj_markdown acf_field="changelog_url"]
|
||||
```
|
||||
|
||||
Add a URL field to your products, place that single shortcode once, and every product shows its own document. A software shop can give each plugin a live Changelog tab that updates itself from the repository — no per-product page building, and nothing to maintain by hand as versions ship.
|
||||
|
||||
It reads ACF fields where ACF is installed and falls back to standard custom fields where it isn't, so it fits whichever setup a site already uses.
|
||||
[View full documentation →](https://docs.dotjuice.co.uk/docs/dotjuice-elementor-tools/widgets/markdown-widget)
|
||||
@@ -2,14 +2,14 @@ A live, always-current screenshot of any website — dropped onto your page like
|
||||
|
||||
## The problem it solves
|
||||
|
||||
Showcasing another website — a client's project, a partner site, a "before" example — usually means manually taking a screenshot, uploading it, and remembering to update it whenever the target page changes. It's tedious, and the image goes stale the moment the source page is updated.
|
||||
Keeping screenshots up to date is a constant battle. Every time a site redesigns, you need to re-capture, re-upload, and re-insert screenshots across your pages. On top of that, standard screenshots don't capture full-page content, and they look static and lifeless on an otherwise modern site.
|
||||
|
||||
## How it helps
|
||||
|
||||
Screenshot Capture fetches a real screenshot of any URL you give it, on desktop, tablet, or phone dimensions, full-page or single-viewport, and displays it exactly like an image widget — with the same transform, hover, box-shadow, and filter controls you'd expect from a premium Elementor widget. Screenshots are cached automatically, so your page stays fast, and a one-click refresh in the editor lets you pull a fresh capture whenever you need one.
|
||||
Point the widget at any URL, and it generates a fresh screenshot on demand — rendered at the viewport size you choose, with optional lazy loading and full-width or constrained layouts. The screenshot is cached so repeat visits are instant, but you can clear the cache and regenerate whenever you need an updated version.
|
||||
|
||||
## The result
|
||||
|
||||
A portfolio, case study, or partner showcase page that always shows a real, current view of the site it's linking to — without a manual screenshot workflow.
|
||||
A portfolio, case study, or review page that always shows the current state of the target site, without manual screenshot management. Your pages stay fresh, and you stay focused on building.
|
||||
|
||||
*Free version screenshots include a small watermark. [Dotjuice Elementor Tools Pro](../../dotjuice-elementor-tools-pro/overview.md) removes it.*
|
||||
[View full documentation →](https://docs.dotjuice.co.uk/docs/dotjuice-elementor-tools/widgets/screenshot-capture)
|
||||
@@ -2,14 +2,14 @@ Turn WooCommerce's plain variation dropdowns into clickable buttons — the way
|
||||
|
||||
## The problem it solves
|
||||
|
||||
WooCommerce's default variable-product selector is a set of `<select>` dropdowns — functional, but visually dated compared to the button and swatch-based selectors shoppers expect from modern ecommerce sites.
|
||||
WooCommerce's default variation swatches are dropdown selects. They're hard to style, hard to scan, and they don't give shoppers an immediate sense of their options. On mobile especially, dropdowns bury choices behind a tap, slowing down the purchase decision.
|
||||
|
||||
## How it helps
|
||||
|
||||
Woo Add to Cart Transform converts those native dropdowns into a clean row of clickable buttons, fully restyled through Elementor controls — normal, hover, and selected states, spacing, borders, and typography all included. It also cleans up a few default WooCommerce quirks along the way: a clearer "reset selection" link, and per-variation pricing that always shows so shoppers always know exactly what they're about to pay.
|
||||
The widget replaces variation dropdowns with a grid of clickable buttons or colour swatches that shoppers can see and compare at a glance. Every option is visible, every click instantly updates the price and availability, and the whole thing inherits your site's styling — no theme conflicts, no clunky workarounds.
|
||||
|
||||
## The result
|
||||
|
||||
A product options selector that looks and feels current, without touching a line of custom CSS or template code.
|
||||
A product page that looks and feels like a modern ecommerce store. Shoppers see their options immediately, and the path from "I want that" to "add to cart" is as short as a single click.
|
||||
|
||||
*Colour swatches for attributes like colour options are a [Pro](../../dotjuice-elementor-tools-pro/overview.md) feature — the free version gives you styled buttons.*
|
||||
[View full documentation →](https://docs.dotjuice.co.uk/docs/dotjuice-elementor-tools/widgets/woo-add-to-cart-transform)
|
||||
@@ -2,12 +2,14 @@ Turn WooCommerce's plain category tiles into a genuinely styleable grid.
|
||||
|
||||
## The problem it solves
|
||||
|
||||
When WooCommerce displays product subcategories — on your shop page, or wherever you list categories — the default markup offers very little styling control: a basic image and a title, with no easy way to add hover effects, overlays, or a polished card layout.
|
||||
WooCommerce's default category display is rigid — a simple list of linked images that's hard to customise without overriding template files. If you want your category tiles to match the rest of your design, you're fighting against the theme or writing custom CSS that breaks on the next update.
|
||||
|
||||
## How it helps
|
||||
|
||||
Woo Categories Transform restructures the category tile markup and gives you full control over it: box styling with borders and shadows, image hover transforms and filters, and a positioned content overlay for the category title — including a subtle blur effect behind the text if you want it.
|
||||
The widget takes WooCommerce's category output and wraps it in a fully styleable grid. Control padding, background, borders, shadows, typography, and hover effects — all from the Elementor panel, no CSS required. The grid is responsive by default, so it looks good on every screen size.
|
||||
|
||||
## The result
|
||||
|
||||
Category tiles that look like a designed product grid, not a default WooCommerce archive.
|
||||
A category page that matches the rest of your site's design perfectly. Category tiles become a design asset rather than a layout problem, and you control every aspect of their appearance from the editor.
|
||||
|
||||
[View full documentation →](https://docs.dotjuice.co.uk/docs/dotjuice-elementor-tools/widgets/woo-categories-transform)
|
||||
@@ -2,12 +2,14 @@ Give WooCommerce's My Account area the same design polish as the rest of your st
|
||||
|
||||
## The problem it solves
|
||||
|
||||
The My Account page — order history, downloads, account forms — is one of the most-visited parts of any WooCommerce store, but it's usually the most visually neglected, since it's built from WooCommerce's own default markup rather than your page builder.
|
||||
The WooCommerce My Account page is notoriously difficult to style. Its default layout is a plain list of links with basic content panels, and most themes leave it untouched — creating a jarring disconnect between your beautifully designed storefront and the account area your customers use every time they log in.
|
||||
|
||||
## How it helps
|
||||
|
||||
Woo My Account Transform applies consistent, on-brand button and link styling across the entire My Account area — buttons on forms, order actions, and download links all pick up the same styled look, in normal and hover states.
|
||||
The widget restructures the entire My Account dashboard into a clean, styleable layout. Navigation tabs, content panels, and forms all get the same level of design control you'd expect from Elementor — typography, borders, spacing, colours, and hover states. No template overrides, no child theme hacks.
|
||||
|
||||
## The result
|
||||
|
||||
An account area that finally looks like it belongs to the rest of your site, not a leftover default template.
|
||||
A cohesive customer experience from shop to account. Your customers stay in a polished, trustworthy environment whether they're browsing products, checking orders, or updating their details.
|
||||
|
||||
[View full documentation →](https://docs.dotjuice.co.uk/docs/dotjuice-elementor-tools/widgets/woo-my-account-transform)
|
||||
@@ -2,12 +2,14 @@ Fully styleable pagination for your shop and product archive pages.
|
||||
|
||||
## The problem it solves
|
||||
|
||||
WooCommerce's default "Previous / 1 2 3 / Next" pagination is functional but plain, and offers very little native styling control — especially for showing which page a shopper is currently on.
|
||||
WooCommerce's default pagination is a bare-bones previous/next setup with numbered page links. It works, but it's nearly impossible to style to match a modern Elementor-built site. You end up with a shop that looks great until you scroll to the bottom, where the pagination sticks out like a sore thumb.
|
||||
|
||||
## How it helps
|
||||
|
||||
Woo Page Numbers wraps WooCommerce's pagination with dedicated styling controls: colours, borders, and spacing for the normal state, the hover state, and — separately — the currently active page, so it's always visually obvious where a shopper is in your catalogue.
|
||||
The widget gives you complete control over the pagination appearance — font size, colours, spacing, border radius, hover states, and active page styling. It works with any number of pages and adapts responsively to screen size. The pagination numbers are clear and easy to tap on mobile, so shoppers can navigate your catalogue without frustration.
|
||||
|
||||
## The result
|
||||
|
||||
Pagination that matches the rest of your store's design, without writing custom CSS to override WooCommerce's defaults.
|
||||
A polished shop from first product to last page. Pagination becomes part of your design, not an afterthought, and shoppers can browse your full catalogue without hitting a design dead end.
|
||||
|
||||
[View full documentation →](https://docs.dotjuice.co.uk/docs/dotjuice-elementor-tools/widgets/woo-page-numbers)
|
||||
@@ -0,0 +1,15 @@
|
||||
Add hover effects, image rollovers, and colour swatches to an Elementor Pro product grid.
|
||||
|
||||
## The problem it solves
|
||||
|
||||
Elementor Pro's Products widget is powerful, but its product tiles are static — a thumbnail, a title, a price, and an add-to-cart button. There's no built-in way to add hover animations, image swaps, or swatch previews that make a catalogue feel interactive and modern.
|
||||
|
||||
## How it helps
|
||||
|
||||
The widget enhances any Elementor Pro product grid with configurable hover effects — scale the image, fade in a content overlay, swap the main image for an alternate on hover, or show colour swatches that let shoppers preview variations without leaving the grid. All effects are controlled from the Elementor panel, no JavaScript required.
|
||||
|
||||
## The result
|
||||
|
||||
An interactive, engaging product catalogue that invites browsing. Shoppers see more product detail without clicking through, and your store feels premium and polished from the first scroll.
|
||||
|
||||
[View full documentation →](https://docs.dotjuice.co.uk/docs/dotjuice-elementor-tools/widgets/woo-products-transform)
|
||||
@@ -2,12 +2,14 @@ A flexible, fully-styled term list for any taxonomy — categories, tags, produc
|
||||
|
||||
## The problem it solves
|
||||
|
||||
Building a "Shop by Category" footer block, a category sidebar, or a sitemap-style navigation list usually means either a rigid built-in widget with few styling options, or custom template code.
|
||||
WordPress and WooCommerce generate category and taxonomy lists in their own way, and they're notoriously hard to style without overriding template files. Whether you're building a footer navigation, a sidebar filter, or a sitemap-style directory, you end up wrestling with wp_list_categories() output or writing custom loops.
|
||||
|
||||
## How it helps
|
||||
|
||||
Woo Taxonomy List displays terms from any taxonomy on your site — flat (every term as one list) or hierarchical (chosen parent categories with their children nested beneath), with an optional clickable heading, term counts, custom icons, and deep styling control over every part of the list: parent items, child links, spacing, markers, and hover states.
|
||||
The widget displays terms from any taxonomy as a clean, styleable list. Choose between a flat list of all top-level terms or a hierarchical view with parent terms and their children. Control spacing, typography, icons, indentation, and whether to show term counts. The parent terms are selectable via a searchable dropdown, so you can pick exactly which sections to show even on large sites with hundreds of categories.
|
||||
|
||||
## The result
|
||||
|
||||
A polished, on-brand category or taxonomy navigation block, built entirely through Elementor controls.
|
||||
A taxonomy navigation that looks exactly the way you want, anywhere on your site. No template overrides, no custom queries, no styling headaches — just the terms you need, presented your way.
|
||||
|
||||
[View full documentation →](https://docs.dotjuice.co.uk/docs/dotjuice-elementor-tools/widgets/woo-taxonomy-list)
|
||||
Reference in New Issue
Block a user