WordPress Plugins
X-twitter Youtube
Sign In
RTFM

Ultimate Heading Suite

for Elementor
Ultimate Heading Suite
Ultimate Heading Suite
Current Version
1.1.2
Requires WordPress
6.5
Tested Up To
7.0
Translations included
🇺🇸 English
🇪🇸 Spanish
🇫🇷 French
🇩🇪 German
🇨🇳 Chinese
🇯🇵 Japanese

Overview

Ultimate Heading Suite adds focused Elementor heading widgets without bundling unrelated widget packs. Version 1.0.0 includes Dual Heading, Highlight Heading, Rotating Words Heading, Eyebrow Heading, and Image Clip Heading.

Requirements

  • WordPress 6.5 or newer.
  • PHP 7.4 or newer.
  • Elementor installed and active.

Setup

  1. Install and activate Ultimate Heading Suite.
  2. Confirm Elementor is active.
  3. Go to Settings > Ultimate Heading Suite to review the plugin settings.
  4. Edit a page with Elementor.
  5. Add a heading widget from the WellPlayedWP widget category.

Settings

Frontend CSS

Loads the lightweight stylesheet used by the heading widgets. Keep this enabled unless your theme or build process supplies equivalent CSS for the widget classes.

Motion Effects

Allows CSS-only motion effects selected in the widgets. These effects automatically respect visitors’ reduced-motion preferences.

Uninstall Cleanup

Deletes Ultimate Heading Suite options when the plugin is uninstalled. Elementor widget data remains in Elementor page content.

Dual Heading Widget

The Dual Heading widget creates one heading from two visual parts. This lets you style each part independently while keeping the page markup semantic.

Content Controls

  • First Part: The first visual text segment. Supports Elementor dynamic tags for templates.
  • Second Part: The second visual text segment. Supports Elementor dynamic tags for templates.
  • Link: Wraps the visible heading text in one link while keeping the selected heading tag as the outer element.
  • HTML Tag: Selects the semantic wrapper tag. Heading tags H1 through H6 are available, plus div, p, and span.
  • Second Part Display: Displays the second part inline or stacked.
  • Alignment: Aligns the heading left, center, or right with responsive controls.
  • Spacing: Controls the gap between the two parts.
  • Smart Wrap: Uses balanced text wrapping in browsers that support text-wrap: balance.
  • Responsive Stack: Stacks the two parts on tablet and mobile or mobile only.
  • Reverse on Mobile: Reverses the two visual parts on mobile.
  • Accessible Label: Adds an optional aria-label when the visual split should be announced as a cleaner phrase.
  • Reveal Effect: Adds a CSS-only reveal effect such as fade, zoom, blur, flip, rotate, or wipe.
  • Apply Effect To: Animates the entire heading as one unit or animates part 1 and part 2 separately.
  • Transition Speed (ms): Controls the reveal animation duration in milliseconds.
  • Part Delay (ms): Controls how long part 2 waits after part 1 starts before starting its own reveal. The default is 300ms.

Style Controls

The Style tab includes separate controls for the first and second heading parts:

  • Text color.
  • Solid or gradient text fill.
  • Gradient start, end, and angle.
  • Background type.
  • Typography.
  • Border type.
  • Border radius.
  • Padding.
  • Text stroke.
  • Text shadow.
  • Box shadow.

The Link style section includes hover color and transition controls for linked headings.

Recommended Usage

Use a real heading tag when the text is part of the page outline. For example, use H1 for the main page title, H2 for major sections, and H3-H6 for nested sections.

Use the Accessible Label field when the visible split is decorative or when the two visual parts should be announced differently by assistive technology.

Use responsive stacking for headings where the split looks strong on desktop but becomes cramped on smaller screens.

Use Elementor dynamic tags for the First Part and Second Part controls when building templates that should pull post titles, custom fields, archive data, or other contextual content.

Shared Reveal Effects

Dual Heading, Highlight Heading, Rotating Words Heading, Eyebrow Heading, and Image Clip Heading include the same CSS-only reveal effects: Fade Up, Fade Down, Fade Left, Fade Right, Zoom In, Zoom Out, Blur In, Flip Up, Rotate In, and Wipe.

Reveal effects include:

  • Reveal Effect: Selects the animation style.
  • Apply Effect To: Animates the entire heading as one unit or animates text parts separately when the widget supports separate parts.
  • Transition Speed (ms): Controls the reveal animation duration in milliseconds.
  • Part Delay (ms): Controls the delay between separately revealed text parts. The default is 300ms.

Image Clip Heading reveals as one complete heading because the clipped overlay and fallback text need to stay aligned.

Highlight Heading Widget

The Highlight Heading widget creates one semantic heading with a focused text segment that can be styled as a brush underline, pill, glow, or gradient text treatment.

Content Controls

  • Before Text: Text before the highlighted phrase. Supports Elementor dynamic tags.
  • Highlight Text: The focused phrase. Supports Elementor dynamic tags.
  • After Text: Text after the highlighted phrase. Supports Elementor dynamic tags.
  • Link: Wraps the visible heading text in one link while keeping the selected heading tag as the outer element.
  • HTML Tag: Selects the semantic wrapper tag.
  • Alignment: Aligns the heading left, center, or right with responsive controls.
  • Accessible Label: Adds an optional aria-label when the visual treatment should be announced as a cleaner phrase.
  • Reveal Effect: Adds the shared CSS-only reveal effects to the whole heading or to the before text, highlighted text, and after text separately.

Style Controls

  • Text typography and color.
  • Highlight style: Brush Underline, Pill, Glow, or Gradient Text.
  • Highlight text color for non-gradient highlight styles.
  • Accent color for Brush Underline and Gradient Text.
  • Gradient end color.
  • Gradient type: Linear or Radial.
  • Gradient angle for linear gradients.
  • Glow color and size.
  • Pill background color, padding, and border radius.
  • Underline height.

Rotating Words Heading Widget

The Rotating Words Heading widget creates one semantic heading with a rotating word slot. It is useful for value propositions, service lists, product benefits, and hero headings where one word changes while the surrounding phrase stays stable.

Content Controls

  • Before Text: Static text before the rotating word. Supports Elementor dynamic tags.
  • Rotating Words: Repeater list of words or short phrases. Each word supports Elementor dynamic tags.
  • After Text: Static text after the rotating word. Supports Elementor dynamic tags.
  • HTML Tag: Selects the semantic wrapper tag.
  • Alignment: Aligns the heading left, center, or right with responsive controls.
  • Transition Style: Uses Fade, Slide Up, Slide Down, Slide Left, Slide Right, Flip, Zoom In, Zoom Out, Blur, or Rotate transitions.
  • Auto-adjust Word Width: Smoothly matches the rotating word slot width to the incoming word.
  • Word Interval (ms): Controls how long each rotating word occupies the slot.
  • Accessible Label: Adds an optional static phrase for screen readers.
  • Reveal Effect: Adds the shared CSS-only reveal effects to the whole heading or to the before text, rotating word slot, and after text separately.

Style Controls

  • Heading typography.
  • Static text color.
  • Rotating text color.
  • Rotating words typography override.
  • Responsive word gap.

Eyebrow Heading Widget

The Eyebrow Heading widget creates a semantic heading with optional eyebrow content. The heading title appears first in the DOM for cleaner SEO, while CSS visually orders the eyebrow above the title.

Content Controls

  • Eyebrow Text: Optional HTML-capable eyebrow content displayed above the heading. Supports Elementor dynamic tags.
  • Heading Text: The semantic heading text. Supports Elementor dynamic tags.
  • Link: Wraps the heading text in one link.
  • HTML Tag: Selects the semantic wrapper tag.
  • Alignment: Aligns the full heading composition left, center, or right with responsive controls.
  • Reveal Effect: Adds the shared CSS-only reveal effects to the whole heading or to the heading title and eyebrow separately.

Style Controls

  • Heading typography, color, and text shadow.
  • Eyebrow typography, color, and spacing.

Image Clip Heading Widget

The Image Clip Heading widget fills heading text with an Elementor background using CSS background clipping. The visible text remains the real heading text in the DOM, with a fallback text color available when no clipped background is selected.

Content Controls

  • Heading Text: The semantic heading text. Supports Elementor dynamic tags.
  • Link: Wraps the clipped text in one link.
  • HTML Tag: Selects the semantic wrapper tag.
  • Alignment: Aligns the heading left, center, or right with responsive controls.
  • Accessible Label: Adds an optional static phrase for assistive technology.
  • Reveal Effect: Adds the shared CSS-only reveal effects to the complete clipped heading.

Style Controls

  • Heading typography, fallback text color, text stroke, and text shadow.
  • Clipped background controls for image and gradient fills, including background opacity.

Video backgrounds are not exposed here because CSS text clipping works with CSS backgrounds. Use image or gradient backgrounds for reliable clipped text rendering.

Performance Notes

Gradient fills, reveal effects, rotating words, stacking, wrapping, eyebrow compositions, and image-clipped text are CSS-based by default. Rotating Words can optionally load a small frontend script to smoothly auto-adjust the rotating word slot width. Motion effects are disabled automatically for visitors who prefer reduced motion.

Translations

The plugin includes translation files for:

  • German.
  • Spanish.
  • French.
  • Chinese.
  • Japanese.

Developers

Ultimate Heading Suite includes filters for small, targeted extensions.

wwpuhs_dual_heading_classes

Filters the Dual Heading wrapper classes before output.

add_filter(
    'wwpuhs_dual_heading_classes',
    function( $classes, $settings, $widget ) {
        if ( ! empty( $settings['second_part_display'] ) && 'block' === $settings['second_part_display'] ) {
            $classes[] = 'my-marker-heading';
        }

        return $classes;
    },
    10,
    3
);

wwpuhs_dual_heading_part_html

Filters each sanitized heading part before output.

add_filter(
    'wwpuhs_dual_heading_part_html',
    function( $html, $part, $settings, $widget ) {
        if ( 'second' === $part ) {
            return '<strong>' . $html . '</strong>';
        }

        return $html;
    },
    10,
    4
);

wwpuhs_dual_heading_allowed_html_tags

Filters the allowed HTML tags available to the renderer.

add_filter(
    'wwpuhs_dual_heading_allowed_html_tags',
    function( $allowed_tags ) {
        $allowed_tags[] = 'strong';

        return $allowed_tags;
    }
);

Changelog

1.0.0 – 2026-04-17

  • Fix Rotating Words auto-width initialization for dynamically rendered Elementor widgets.
  • Fix Rotating Words auto-width measurement so the rotator matches the incoming word.
  • Add Dual Heading reveal effects to Highlight, Rotating Words, Eyebrow, and Image Clip headings.
  • Add Image Clip Heading background opacity so fallback text color can show through clipped images.
  • Fix Image Clip Heading live background updates by keeping text clipping active in the editor.
  • Fix Image Clip Heading color-only clipped backgrounds so they render as text fill instead of a rectangle.
  • Refactor Image Clip Heading to use Elementor Background controls for image and gradient text clipping.
  • Add Image Clip Heading for CSS-clipped image typography.
  • Refactor Layered Heading into Eyebrow Heading with SEO-friendly DOM order and HTML eyebrow content.
  • Add Rotating Words auto-width, seven additional transitions, and rotating-word typography override.
  • Refactor Highlight Heading style controls to only show settings relevant to the selected highlight style.
  • Remove Smart Wrap from the Highlight Heading widget.
  • Add WellPlayedWP icon badges to Ultimate Heading Suite tiles in the Elementor widget sidebar.
  • Add Glow, gradient type, and gradient angle controls to the Highlight Heading widget.
  • Add Highlight Heading, Rotating Words Heading, and Eyebrow Heading Elementor widgets.
  • Add the Dual Heading Elementor widget with semantic split-heading output.
  • Add independent first-part and second-part typography, color, background, border, padding, stroke, text shadow, and box shadow controls.
  • Fix separate part reveal delays so part 2 waits after part 1 starts.
  • Add part delay control for separately revealed heading parts.
  • Add reveal effect target and transition speed controls.
  • Add ten CSS-only reveal effects with reduced-motion support.
  • Add gradient text fill, Smart Wrap, responsive stacking, mobile reverse, and motion-safe reveal effects.
  • Add accessible label support for decorative split-heading designs.
  • Add admin settings, plugin action link, uninstall cleanup, translations, and documentation.