Section 6: Possibilities You Should Know — the Capability Catalog

The chapter's real lesson is a habit: before building an effect externally (exporting a shaped image, buying an add-on, writing code), inventory what the tool already does in its non-obvious corners — Advanced-tab masks, transform hovers, dynamic tags, hidden toggles (the text-color server-icon toggle in the text editor), per-widget features nobody opens. He also names the practice for extending the map: 'make a test website and install all the add-ons you want' — exploration happens on throwaway installs, never client sites.

Running examples of natively-covered needs: image rounding/shadow/stroke in the widget (JPEG stays JPEG), circle and custom-SVG masks, the call-to-action and flip-box widgets replacing container+image+text stacks, form field widths making row layouts, the sitemap and icon-list widgets as footer machinery, the current-date dynamic tag ending the every-January footer-year ritual.

When a design needs what the tool lacks, the order is fixed. RUNG 1 — hidden native: the custom shape divider is 'missing' until the background-overlay trick (SVG, opacity 1, no-repeat, bottom-center) builds it from existing controls; blurs are 'missing' until a radial gradient with a transparent outer stop builds them (the one sanctioned spacer-widget use). RUNG 2 — a one-line CSS shim: the text-highlight effect is a span class plus one background-color rule in the Customizer — global, editable, weightless. RUNG 3 — a targeted add-on: gradient headings genuinely need Happy Addons; deep dynamic work needs Crocoblock — installed knowingly, with unused widget modules turned off, because 'most of the time they make your website slow.'

The Crocoblock coda sharpens the rung-3 judgment: he recommends exactly the modules Elementor still can't match (JetEngine's maps/calendars, filters, search, booking, reviews) and told the vendor to their face that the rest is obsolete — 'Elementor has already better solutions for it.' Add-ons are for the shrinking gap, not the whole toolbox.

THE RULE: every internal link goes through the dynamic tag → internal URL → content → pick the page. The link then follows the page through renames — 'don't be lazy. Always use the internal URL.' Same rule inside the new menu widget (where archive URLs are the known exception — no dynamic option, ask-Discord flagged).

ANCHORS: give the target container a CSS ID, link '#name' from any button — same page or cross-page (about#our-team works from anywhere). With a sticky header, the scroll target hides under the header unless the section's top padding exceeds the header height. Containers themselves become clickable via HTML tag → a (with no nested links inside). tel: and mailto: make phones and emails actionable (country code for international, forced link colors checked).

DOWNLOADS: a media-library file URL opens in-tab; new-tab is the minimum courtesy; a TRUE download is the custom attribute download|filename (no spaces, name without extension). Zips skip the attribute entirely — browsers auto-download them, so 'anything other than a PDF you can just move it into a zip.' On CPTs: an ACF URL field holds the file link, the single-template button binds to it dynamically.

The judgment: animation earns its place when SUBTLE and STRUCTURAL. Hover effects come from the transform tab (normal/hover states), not the preset list — scale 1.05 ('1.1 is already intense'), offsets of ~5px, scale+rotate combos for cards; from the presets only grow/shrink and the floating bob survive. Entrance animations apply per-SECTION ('just pick up the whole section'), fade-in speed-tuned, with per-layer treatment plus staggered delays (500ms, 1000ms — 'it doesn't add up,' each delay is absolute) reserved for the hero. Scroll effects (horizontal sliders, rotates) and mouse-tracking floats are seasoning — 'don't get too excited. Otherwise, your website can look and feel cheap.'

Lottie gets its own economics: code-based animation (SVG's animated sibling), light where MP4 was heavy, imported by URL (file upload 'had some problems'), with play limits (3 loops then stop) and hover/viewport triggers as the taste controls. Background videos close the set: YouTube/Vimeo or small MP4s, always with a fallback image, overlay gradients at 90° for text legibility — settings that are NOT responsive ('I don't know why'), so mobile gets checked separately.

The mental model: WooCommerce owns FUNCTIONALITY (products, orders, payments, accounts, emails); Elementor Pro now owns APPEARANCE via monolithic widgets — cart, checkout, my-account, purchase summary — each styled in the style tab but structurally fixed ('WooCommerce doesn't work in a way where you can just start dragging in widgets'). What used to need Woolementor or the Astra theme is now native.

The working knowledge: cart/checkout pages are ordinary pages holding the widgets, LINKED to their roles in Elementor's site settings → WooCommerce; the cart gets 1-or-2-column layouts (1-column at ~50% width for streamlined stores), auto-updating quantities (blocked by WooCommerce's one-per-order setting until unchecked), hidden coupon fields, and an empty-cart template; checkout stays 2-column ('it feels a little bit less work'); my-account doubles as the login page — link it straight into the menu ('I first created a login page and then used the login widget. It was a mess'); testing runs on cash-on-delivery so orders exist without payment setup; T&C pages are required by payment providers (ChatGPT drafts one — 'this is not legal advice'); and WooCommerce's popup notices get restyled to the brand in site settings → WooCommerce → notices, added one by one.

The reframe: Elementor's popup builder is a general overlay container with triggers, conditions, and animations. The marketing interrupt is its worst use; the good ones are UI: (1) button-triggered detail panels — the request-this-trip form living in a popup keeps the single template clean, dynamic content included; (2) slide-ins — width under fit-to-screen height, fade-in-right entrance, 'less aggressive'; (3) full-screen menus — 100vw × fit-to-screen, opened from a lone menu button, 'a very clean approach for your homepage.'

Mechanics that trip everyone: a popup's settings hide behind the GEAR icon (it's 'not really a widget, it's a feature'); border radius and overlay dimming live on the popup's own style tab, not the inner container; the close button should be kept ON and enlarged (≥20px — mobile hit targets); no conditions/triggers at all makes it button-only; buttons open it via actions → popup. Publish-time conditions and triggers exist for the marketing cases but are skipped deliberately here.