Documentation / Premium features
Premium
Conditional CSS Classes
Adds an Advanced tab section on any Elementor widget, section, column or container so you can attach CSS classes when a rule matches (login, role, device, time, URL, cookie, post type, taxonomy, WooCommerce). Off by default.
Where Elementor editor Advanced tab. Settings: Elementor Extras → All Tools → Conditional CSS Classes.
How to use it
- Turn on "Platform: Conditional CSS Classes" under Settings → Add-on features.
- Edit a page in Elementor. Select a widget, section, column or container and open the Advanced tab.
- Open Conditional CSS Classes, turn on “Apply classes from rules”, and add a row: CSS class plus a condition (login, role, device, time, URL, cookie, post type, taxonomy or WooCommerce).
- Optional: use “And also” on the same row when two conditions must both match (for example time of day and a URL parameter).
- Style the class in your theme or in Elementor Custom CSS. The element still renders — only the class list changes.
Notes
- This is not Display Conditions. Display Conditions hide the element. Conditional CSS Classes leave it in the HTML and add a class when the rule matches.
- Device rules run in the visitor browser (matchMedia) so a cached page can still switch classes. Other rules run when WordPress renders the page.
- Class names must start with a letter and may contain letters, digits, hyphens and underscores.
- Developers: POST /wp-json/landtech-extras/v1/conditional-classes/preview (edit_posts). Filter landtech_extras/conditional_classes/evaluate_condition.