--- title: Hide any page element by CSS class or ID (Hidden HTML Elements) description: "The Hidden HTML Elements add-on for Ultimate Membership Pro hides elements of your pages, found by CSS class or ID, from visitors, logged-in users or chosen Memberships." url: "https://ultimatemembershippro.com/docs/hidden-html-elements/" updated: "2026-10-19" category: "Pro Add-ons" --- # Hide any page element by CSS class or ID (Hidden HTML Elements) 5 minIntermediateHidden HTML Elements add-onUltimate Membership Pro 14.2+ In Ultimate Membership Pro, the Hidden HTML Elements add-on hides elements of your pages from the people you choose, by targeting their CSS class or ID. It works with any theme or page builder, so you can hide a banner, a menu link or a widget box from members, or show it to them alone, without editing the page. This guide switches the add-on on, adds a rule, and shows what visitors and members see. Before you start - The **Hidden HTML Elements** add-on is installed and active. It's a Pro add-on, included in the Full Package and Agency plans. See [Install a Pro add-on](https://ultimatemembershippro.com/docs/install-pro-add-ons/). - Your license is active. See [Find and activate your license key](https://ultimatemembershippro.com/docs/where-to-find-your-license-key/). - You know the CSS class or ID of the element. Many builders have a CSS Class or CSS ID field in the element's advanced settings, and your browser's Inspect tool shows both. The element is hidden, not removed The add-on hides the element with CSS. Its content is still in the page's HTML source, so a visitor who views the source can read it. Use it for things such as banners and links. For content that must stay private, use [Hide part of a page (Inside Locker)](https://ultimatemembershippro.com/docs/how-to-set-an-inside-locker/) or [Restrict content with Access Rules](https://ultimatemembershippro.com/docs/how-to-restrict-any-page-or-group-of-pages/). ## Switch on the add-on 1. Go to Ultimate Membership Pro*›*Modules and open **Hidden HTML Elements**, in the **Content Protection** group. 2. Switch on **Activate/Hold Hidden HTML Elements Integration**. 3. Click Save Changes. [![Hidden HTML Elements box with the Activate/Hold Hidden HTML Elements Integration switch on and the Save Changes button](https://ultimatemembershippro.com/wp-content/uploads/2026/10/ump-ao-hidden-html-01-switch.png)](https://ultimatemembershippro.com/wp-content/uploads/2026/10/ump-ao-hidden-html-01-switch.png) The switch turns every rule on or off. Activate/Hold Hidden HTML Elements Integration Applies your rules on the front end of the site. Switch it off to stop all rules at once without deleting them. Default: **Off** ## Add a rule Under the switch, the **Add new Restriction** box creates one rule for one class or ID. 1. Type the name in **HTML selector:**, without the dot or hash. 2. Choose **(.)Class** or **(#)ID** in **HTML selector type:**. 3. Choose **Block Only** or **Show Only** in **Restriction process:**. 4. Pick who the rule is for in **Target Users:**. Each choice appears as a tag, and the x on a tag removes it. 5. Click Add New. [![Add new Restriction box filled in: HTML selector upgrade-banner, selector type Class, Restriction process Block Only, Target Users Pro Monthly and Annual Pass](https://ultimatemembershippro.com/wp-content/uploads/2026/10/ump-ao-hidden-html-02-add-rule.png)](https://ultimatemembershippro.com/wp-content/uploads/2026/10/ump-ao-hidden-html-02-add-rule.png) A rule that hides the upgrade-banner class from Pro Monthly and Annual Pass members. The numbers match the list below. 1HTML selector:Required The name of the CSS class or ID, for example `upgrade-banner`. Don't type the dot or hash; the next field adds it. 2HTML selector type: **(.)Class** targets every element with that class. **(#)ID** targets the element with that ID. Default: **(.)Class** 3Restriction process: How the Target Users are used. - **Block Only**: the element is hidden from the Target Users and everyone else sees it. - **Show Only**: the element is shown to the Target Users and hidden from everyone else. Default: **Block Only** 4Target Users:Required The people the rule is for: **All**, **Registered Users** (logged in, with or without a Membership), **Unregistered Users** (visitors) or any of your Memberships. You can add several. The rule applies on every page of your site that has an element with that class or ID. Administrators always see every element. ## Check and delete rules Your rules are listed below the form, with the selector as it is used on the page, the **Restriction type** and the **Target Users**. [![Rules table with HTML Selector, Restriction type, Target Users and Delete columns: .upgrade-banner Block for Pro Monthly and Annual Pass, #members-corner Show for Pro Monthly and Annual Pass](https://ultimatemembershippro.com/wp-content/uploads/2026/10/ump-ao-hidden-html-03-rules.png)](https://ultimatemembershippro.com/wp-content/uploads/2026/10/ump-ao-hidden-html-03-rules.png) Two rules. The trash icon in the Delete column removes a rule. To remove a rule, click the trash icon in the **Delete** column. The rule is deleted at once. To change a rule, delete it and add it again. ## See the result Open the page in a private window, or log in as a member, because administrators see everything. With the two rules above, a visitor sees the upgrade banner and not the members corner: [![Page showing the line Everyone sees this line and the Upgrade to Pro Monthly banner, without the members corner](https://ultimatemembershippro.com/wp-content/uploads/2026/10/ump-ao-hidden-html-04-visitor.png)](https://ultimatemembershippro.com/wp-content/uploads/2026/10/ump-ao-hidden-html-04-visitor.png) What a visitor sees. A Pro Monthly member sees the members corner and not the banner: [![Page showing the line Everyone sees this line and the Members corner box, without the upgrade banner](https://ultimatemembershippro.com/wp-content/uploads/2026/10/ump-ao-hidden-html-05-member.png)](https://ultimatemembershippro.com/wp-content/uploads/2026/10/ump-ao-hidden-html-05-member.png) What a Pro Monthly member sees. ## Example: hide the upgrade banner from paying members **Coaching Club**Paying members stop seeing the upgrade pitch and get a members corner. **Rule 1** : `.upgrade-banner`, Block Only, Pro Monthly and Annual Pass **Rule 2** : `#members-corner`, Show Only, Pro Monthly and Annual Pass **Result** : Visitors and Free Community members see the banner. Pro Monthly and Annual Pass members see the members corner ## Learn more about Hidden HTML Elements - [Hidden HTML Elements add-on page](https://ultimatemembershippro.com/addon/hidden-html-elements/): what it does, at a glance. - [All Pro add-ons for Ultimate Membership Pro](https://ultimatemembershippro.com/pro-addons/). - [Ultimate Membership Pro plans](https://ultimatemembershippro.com/pricing/): Pro add-ons come with the Full Package and Agency plans. - [CSS class selectors (MDN)](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Selectors/Class_selectors). - [CSS ID selectors (MDN)](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Selectors/ID_selectors). ## Troubleshooting Why doesn't my new rule appear in the list? A rule needs a selector and at least one Target User. A rule with the same selector, selector type and restriction process as an existing rule isn't added again, so delete the old one first if you want to replace it. Why can I still see the element? Administrators see everything, so check in a private window or as a member. Then check that the switch is on and saved, that the selector type matches (class or ID), that you typed the name without the dot or hash, and that the element really has that class or ID. If your site uses page caching, clear the cache. Is the hidden content private? No. The add-on hides the element with CSS, and its content stays in the page's HTML source. Use it for things such as banners and links, and use an Inside Locker or Access Rules for content that must stay private. How do I hide an element from members of one Membership in Ultimate Membership Pro? Switch on the Hidden HTML Elements add-on, then add a rule with the element's class or ID, Restriction process Block Only, and the Membership as Target Users. Members who have that Membership no longer see the element. ## What's next [**Lock Elementor widgets and sections by Membership (Elementor Widget Lock)**Lock elements inside Elementor.](https://ultimatemembershippro.com/docs/elementor-widget-lock/)[**Show widgets only to some members (Restrict WP Widgets)**Choose who sees each widget.](https://ultimatemembershippro.com/docs/restrict-widgets/)[**Show menu items only to some members**Show or hide each menu link.](https://ultimatemembershippro.com/docs/how-to-restrict-menu-links/)[**Hide part of a page (Inside Locker)**Really protect part of a page.](https://ultimatemembershippro.com/docs/how-to-set-an-inside-locker/)