Per-Widget Custom CSS

Every widget, column, and section has a Custom CSS field in its Advanced tab. CSS entered here applies only to that specific element and is scoped automatically with the element’s unique selector.

• Click any element → Advanced tab → scroll to Custom CSS.
• Use selector to refer to the element itself. Example: selector { background: #f5f5f5; }
• Use selector .child-class to target a child element inside the widget.

CSS Classes & IDs

Assign custom CSS classes and IDs to any element via Advanced tab → CSS ID and CSS Classes. This lets you target elements with your own stylesheet rules in Theme Options → Custom CSS or Site Settings → Custom CSS.

Motion Effects

In the Advanced tab → Motion Effects, you can add scroll-based parallax, mouse-tracking effects, and entrance animations to any element. Use sparingly for performance — parallax in particular can affect mobile performance.

Dynamic Tags

Most content fields in Elementor support dynamic tags — live data pulled from the current post, site, or custom fields. Click the ⚙ icon next to any text/URL/image field to see available dynamic tags:

Dynamic tags are most useful inside Theme Builder templates where the template renders different content per post — the tags automatically pull data from whichever post is being viewed.

📖 Official Docs: Dynamic Tags Documentation

Global Widgets

Save any widget as a Global Widget by right-clicking it → Save as Global. The widget is then shared — editing it in one place updates every instance of it across the site. Useful for repeated elements like call-to-action boxes, donation buttons, or social icon sets.

📖 Official Docs: Global Widget Documentation