DirectoryCustomize - Highlighter - Help
Draw attention to specific tabs, fields, or sections on member profiles with animations, icons, and access-controlled click gating.
What it does
Highlighter lets you spotlight any element on a member profile page -- a specific tab, a field section, or any element matched by a CSS selector. The spotlighted element gets visual styling (background color, text color, icon, border) and an optional attention-grabbing animation. You can also gate who can click the spotlighted element based on their membership plan, showing an upgrade popup to non-eligible visitors.
Common uses:
- Draw attention to a Reviews tab with a pulse glow and count pill showing the number of reviews
- Spotlight a premium content tab and gate access to paid members only
- Add a corner ribbon saying "NEW" or "HOT" to a specific tab
- Make a key profile section stand out with a shimmer sweep animation
Where it lives
In your DirectoryCustomize plugin admin: Plugins > DirectoryCustomize > My Widgets > Highlighter.
Two tabs:
- Settings -- targeting, animation, count pill, tab position, visibility, and access control
- Design -- icon type, colors, border, corner radius, hover effect, typography
Setup
1. Enable it
Toggle Enable highlighter on. This is the master switch -- everything else is inactive until this is on.
2. Pick a target
| Setting | What it means |
|---|---|
| Post type | Which type of listing page to spotlight on. Use * for all post types, or enter a specific slug like restaurant or professional. |
| Target type | Tab targets a profile tab by its label text. Custom CSS Selector targets any DOM element by CSS selector. |
| Tab label or selector | For Tab: the exact text of the tab (e.g., Reviews, Race Dates, Specialties). For Custom: a CSS selector like .my-class or #my-id. |
3. Pick an animation
| Animation | Effect |
|---|---|
| None | Visual styling only (colors, icon, border) -- no motion |
| Pulse glow | Soft halo ring that pulses around the element |
| Gentle throb | Subtle scale up/down breathing effect |
| Shimmer sweep | Translucent gradient sweeps across the element |
| Bounce once | Single bounce on page load |
| Underline fill | Animated bar fills in under the element |
| Corner ribbon | Angled ribbon in the top-right corner with custom text |
4. Optional: Count pill
If your tab label includes a count in parentheses -- like Reviews (12) -- the Extract (N) as a separate pill toggle splits it into the label Reviews plus a styled pill showing 12. Two pill styles:
- Inline pill -- colored badge next to the label (default)
- Superscript -- small raised number
5. Optional: Tab position
Move the spotlighted tab to the first or last position in the tab navigation bar, or keep its current position.
6. Optional: Visibility
Restrict the spotlight to Desktop only or Mobile only, or leave on Always show.
---
Design settings
Icon
Four icon sources:
| Type | How it works |
|---|---|
| None | No icon |
| FontAwesome | Pick an icon class like fa-fire, fa-star, fa-trophy |
| Emoji | Paste any emoji character |
| Dot | Small filled circle in the icon color |
Icon color defaults to inheriting the text color. Set a specific color to override.
Note on emoji: Some emoji (particularly newer ones like rocket, bullseye, gem) may display as placeholder characters due to database encoding limitations. Stick to common emoji like stars, lightning bolts, and sparkles for reliable display, or use FontAwesome icons instead.
Colors
| Setting | What it controls |
|---|---|
| Background | Fill color behind the spotlighted element |
| Text color | Label text color |
| Accent color | Drives the glow color, underline fill, ribbon background, and border color |
Shape
| Setting | Options |
|---|---|
| Border width | None, 1px, 2px, or 3px |
| Corner radius | Square, Slight (4px), Soft (8px), Rounded (12px), or Pill. For tabs, applies to top corners only. |
| Hover lift | None, Subtle (default), or Strong (translate + scale) |
Typography
| Setting | Options |
|---|---|
| Font weight | Normal (400) through Heavy (800). Default is Bold (700). |
| Font size scale | 1.0x (same as siblings) through 1.5x (dramatic). Default is 1.05x. |
---
Access control
Access control lets you gate who sees the spotlight and who can click through to the content.
Show highlight on profiles of plans
Select which membership plans should have the spotlight applied to their profiles. Leave empty to apply to all profiles. This gates by the profile owner plan -- if a member is on a plan not in this list, their profile tabs render normally (no spotlight).
Click-through access
Controls who can click the spotlighted tab:
| Option | What happens |
|---|---|
| Anyone can click | No gate -- all visitors can access the content |
| Logged-in members only | Anonymous visitors see the upgrade popup on click |
| Specific plans only | Only visitors on the selected plans can click through. Others see the upgrade popup. |
Upgrade popup
When a visitor clicks the spotlighted tab but does not have access, a popup appears with:
- Title -- default Upgrade Required
- Message -- default This feature is available on higher membership tiers.
- Button label -- default Upgrade Now
- Button URL -- where the button links (default /membership-plans)
All four fields are customizable.
---
Visibility Engine integration
Highlighter integrates with the Visibility Engine in two ways:
- Keep highlighted tabs visible -- When VE hides tabs for logged-out visitors, your highlighted tab stays visible in the nav. The visitor sees the highlighted tab alongside the Overview tab, which motivates sign-up.
- Apply Highlighter effect to sign-up CTA -- When VE shows its sign-up card (cutoff or paywall mode), the Highlighter animation style is applied to the CTA card for extra attention.
Both toggles appear in the Highlighter settings AND in the VE settings -- they stay in sync. Change either one and the other updates.
---
Tips
- Start with Tab targeting and Pulse glow -- it is the most universally effective combination
- Use count pills on tabs that show a number (Reviews, Events, Photos) -- the styled pill draws more attention than the raw parenthetical
- Corner ribbon works best for time-sensitive labels like NEW, SALE, or event counts like 27 DATES
- Gate premium content by combining Click-through access with plan restrictions and a clear upgrade popup message
- Test with the VE integration -- a highlighted tab that stays visible above the VE fade is a strong conversion driver
---