Elementor Dual Heading Widget Tutorial

Intro

Elementor Dual Heading Widget provides you with several options to create amazing heading titles so that you can style headings in two different fancy colorful stylings for each part of the heading titles.

In this tutorial, we will walk through Elementor Dual Heading options and features, besides, we will provide some examples for heading titles’ customization options.

Click here to check Premium Dual Heading Widget demo.

Requirements:

• Premium Addons for Elementor installed and activated. Dual Heading is part of the free plugin, so no PRO license is needed for the widget itself.
• Premium Addons PRO 2.9.66 or later, together with Premium Addons 4.11.105 or later, if you want the Fill on Scroll option. Every other option on this page works without it.
• Make sure the widget is enabled so you can find it in the Elementor editor. Check this article to know how to do that.
• Premium Addons works only with Elementor Page Builder plugin so you will need to have it installed and activated as well.

Key Features

Content

• Dual Heading
• Description

Dual Heading

• First Heading: Type the first part of the heading title.
• Second Heading: Type the second part of the heading title.
• HTML Tag: Select HTML tag to wrap the dual heading text. The available HTML Tags are:
  • H1
  • H2
  • H3
  • H4
  • H5
  • H6
  • span
  • p
• Display: Is how to display each part of the dual heading, the available display options are:
  • Inline: Headings will be displayed next to each other (default).
  • Block: Headings will be displayed in two separate lines [Under each other].
• Link: Enable or disable adding a link to redirect the visitors when they click on the Dual Heading.
• Link Type (if the link is enabled): Select link type to use, URL or an existing page link within your website.
• Link (URL selected): Add the URL to the page you want to redirect the visitors to when they click on the Dual Heading widget.
• Existing Page (Existing Page selected): Select an existing page within your website to redirect visitors when the dual heading is clicked.
• Alignment: Align Dual Heading text to the Left, Center, or Right.

• First Heading Rotation (deg): Rotate the first part of the heading between -180 and 180 degrees.
• Second Heading Rotation (deg): Rotate the second part of the heading between -180 and 180 degrees.
• X Anchor Point: Set the horizontal point the heading rotates around, Left, Center or Right. It shows up once that heading has a rotation value.
• Y Anchor Point: Set the vertical point the heading rotates around, Top, Center or Bottom. It shows up once that heading has a rotation value.

• Background Text: Enable to add background text behind the heading.
• Text: Add the text used as the background text.
• Width: Select the width of the text, Auto or Full Width.
• Horizontal Offset: Adjust the text horizontal position in pixels, em, % or a custom value.
• Vertical Offset: Adjust the text vertical position in pixels, em, % or a custom value.
• Alignment: Align the background text to the Left, Center or Right.
• Rotate (degrees): Change the rotation angle of your background text.

• Minimal Mask Effect: Reveal each word from behind a colored mask when the heading scrolls into the viewport.
• Mask Color: Set the color of the mask that covers the words. It appears once the effect is enabled.
• Direction: Set the direction the mask moves in, To Right, To Left, To Top or To Bottom.
• Words Padding: Set the spacing around each masked word in pixels, em or %.

• First Heading Noise Effect: Apply a glitch style noise effect to the first heading. It is available when the Minimal Mask Effect is off and the heading’s Background Style is set to Normal.
• Second Heading Noise Effect: The same effect for the second heading, under the same conditions.
• Fill on Scroll: Fill the heading words one after another as the visitor scrolls, from each heading’s Text Color to its own After Fill Color in the Style tab. The two headings run as one sequence, so the first heading fills completely before the second starts, and scrolling back up empties them in reverse. It starts once the widget is in view near the bottom of the screen and follows the scroll with a slight lag. It is available when the Minimal Mask Effect and both Noise Effects are off. This is a PRO option: it needs Premium Addons PRO 2.9.66 with Premium Addons 4.11.105, and turning it on without PRO shows a notice in place of the widget. An older PRO build shows the words but never fills them, so update both plugins. While the fill is on, both heading fields are treated as plain text, so any HTML in them prints as typed. Upgrade to PRO »
• Fill on Scroll Speed: Set how far the visitor scrolls before both headings are filled, in screen heights. 0.5 by default, from 0.1 to 3; a higher value makes the fill slower. Fill on Scroll Speed and the lock switch below it come from Premium Addons PRO, so they show once PRO is active.
• Lock Scroll Until Fill Ends: Pin the container the heading sits in once it reaches the middle of the screen and hold it there while the words fill, then let the page scroll on. A container taller than the screen is held from its top instead. The hold lasts the Fill on Scroll Speed, and if the description fills too, the headings and the description fill one after the other during the same hold, so the two distances add up. The switch appears once the heading or the description has Fill on Scroll on, and a notice under it says what the pin covers. One lock per container: a second Fill on Scroll widget in the same container fills without pinning.

While Fill on Scroll is on, both heading sections in the Style tab lose Animated Background, Background Style, Stroke and Wave Effect, because the fill paints the same letters those options do. The clipped-to-text look is dropped, but a clipped background color or gradient you saved earlier still renders as a box behind the words, so set Background Style back to Normal before you switch the fill on. Text Color stays, and After Fill Color appears next to it.

💡 Tip: Fill on Scroll and Liquid Glass Presets 03 to 06 are the PRO parts of this widget. Everything else on this page ships in the free plugin. If you want the scroll fill, Upgrade to PRO » and update both plugins.

Description

• Description: Enable to add a description next to the dual heading.
• Description: Add the description text. It is a rich text field, so you can format the text and add links.

• Display: Place the description next to the heading (Inline) or under it (Block, default).
• Fill on Scroll: Run the same word-by-word scroll fill on the description. Links and formatting in the text are kept, it has its own After Fill Color in the Style tab, and it does not depend on the mask or noise effects. It needs PRO the same way the heading fill does.
• Fill on Scroll Speed: Screen heights to complete the description fill, from 0.1 to 3, 0.5 by default. There is no lock switch here; the one in the Dual Heading section covers the description as well.
• Order: Show the description Before Heading or After Heading.
• Vertical Alignment: Align the description to the Top, Center, Bottom or stretch it. It applies when the Display is set to Inline.
• Text Alignment: Align the description text to the Left, Center, Right or Justify.

Style

• First Heading
• Second Heading
• Description
• Background Text

1. First Heading

• Typography: Set the font settings for the first heading:
  • Family: Set a font family for the first heading.
  • Size: Set a font size.
  • Weight: Select font-weight.
  • Transform: Select font transform, Uppercase, Lowercase, Capitalize or Normal.
  • Style: Select font style, Normal, Italic or Oblique.
  • Decoration: Select font decoration, Underline, Overline, Line Through or None.
  • Line-Height: Specify font line-height.
  • Letter-Spacing: Set font letter-spacing which increases or decreases the spacing between characters in the text.
  • Word Spacing: Set the spacing between words.
• Animated Background: Enable an animated background for the first heading, which lets you put moving images or animated gradients behind the text. Check Elementor Dual Heading animated examples. Hidden while Fill on Scroll is on.
• Background Style: Set how the background is applied:
  • Normal: The background sits behind the text.
  • Clipped: The background is clipped to the shape of the text itself.
• Text Color: Set text color for the first heading. It is available when the Background Style is set to Normal, and always when Fill on Scroll is on.
• After Fill Color: The color the first heading’s words end up in once the fill has passed over them. It appears when Fill on Scroll is on. Leave it empty and the fill uses the Accent color from your Elementor global colors.
• Background Type: Choose a Classic or Gradient background. It is available when the Background Style is set to Normal.
  • Classic: Set a background color or image. An image background adds Position, Attachment, Repeat and Display Size options.
  • Gradient: Set the two colors and their locations, then the gradient Type. A Linear gradient takes an Angle, a Radial one takes a Position.
• Liquid Glass Effect: Apply a glass preset to the heading background. Preset 01 and Preset 02 are free, Presets 03 to 06 need Premium Addons PRO. The element needs a semi-transparent background color for the effect to show, and the option is available when the Background Style is set to Normal.
• Animation Speed (sec): Set how long one cycle of the animated background takes, up to 10 seconds. It appears when the Animated Background is enabled.

Stroke is only available when the Background Style is set to Clipped, and the three options under it appear once Stroke is enabled.

• Stroke: Outline the text instead of filling it with the clipped background.
• Stroke Text Color: Select the color of the outline.
• Stroke Fill Color: Add color to fill the stroke of the first heading.
• Stroke Fill Width: Increase or decrease the stroke thickness.

• Background Type (Clipped): Choose the Classic or Gradient background that gets clipped onto the letters. It is available when the Background Style is set to Clipped and Stroke is off.
• Wave Effect: Animate the clipped background so it moves through the letters like a wave. It is available under the same conditions.

• Border Type: Set a border type for the first heading. Choose from the following border types:
  • None (Default)
  • Solid
  • Double
  • Dotted
  • Dashed
  • Groove
• Width: Set border width. It appears once a Border Type is selected.
• Color: Choose a color for your border. It appears once a Border Type is selected.
• Border Radius: Round the corners with a single value in pixels (PX), percentage (%) or Em (em). A higher border radius means a more circular border.
• Shadow: Set a text shadow for the first heading:
  • Color
  • Blur
  • Horizontal
  • Vertical
• Margin: Creates a space around the first heading, outside of any defined borders. You can set the margin in Pixel (PX), Em (em) or Percentage (%).
• Padding: Creates space around the first heading inside of any defined margins or borders.

These options are only available if the First Heading Noise Effect is enabled.

• Color #1: Set the color of the first offset shadow in the glitch effect.
• Color #2: Set the color of the second offset shadow in the glitch effect.

2. Second Heading

The second heading has the same styling options as the first one, and they behave the same way:

• Typography
• Animated Background and Animation Speed (sec)
• Background Style, Normal or Clipped
• Text Color, Background Type and Liquid Glass Effect, with a Normal background
• After Fill Color, when Fill on Scroll is on. The second heading gets its own, so the two halves can end on different colors
• Stroke, with a Clipped background, then Stroke Text Color, Stroke Fill Color and Stroke Fill Width once Stroke is on
• Background Type and Wave Effect, with a Clipped background and Stroke off
• Border Type, Width, Color and Border Radius
• Shadow, Margin and Padding
• Glitch Effect Color #1 and Color #2, when the Second Heading Noise Effect is enabled

3. Description

These options are only available if the description is enabled.

• Color: Set the color of the description text.
• After Fill Color: The color the description words settle into when its Fill on Scroll is on. Separate from the heading colors.
• Typography: Adjust the font settings.
• Text Shadow: Set a shadow for the text and adjust its settings.
• Background Type: Set a Classic or Gradient background behind the description.
• Box Shadow: Add a shadow around the description box.
• Border Type: Set a border for the description, then its width and color.
• Border Radius: Round the description corners, one value per corner.
• Margin: Creates a space around the description, outside of any defined borders.
• Padding: Creates space around the description text inside its borders.

4. Background Text

These options are only available if the background text is enabled.

• Color: Set the color of the background text.
• Typography: Adjust the font settings.
• Text Shadow: Set a shadow for the text and adjust its settings.
• Blend Mode: Set how a background text should blend with the content of the title and background.
• z-Index: Set the value of z-index.

Join the Community

We would love to hear your thoughts about Premium Addons for Elementor. Join our community and share your feedback, questions and the pages you build.