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:

  • You will need Premium Addons free plugin installed and activated on your website.
  • Also, make sure that this widget/feature/addon is enabled so you can find it in the Elementor editor
  • Premium Addons works only with Elementor Page Builder plugin so you will need to have it installed and activated as well.
An Arrow Points at Premium Dual Heading Widget for Elementor
Premium Dual Heading Widget for Elementor Page Builder

Key Features

Content

  • Dual Heading

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].
Two Screenshots, [Left] Displays The Inline Dual Heading Example [Right] Displays the Dual Heading Result
Elementor Dual Heading Options, Display: Inline [Example]
Two Screenshots, [Left] Shows Block Dual Heading Option [Right] Displays the Dual Heading Result
Display: Block [Example] Using Elementor Dual Heading Widget
  • Link: Enable/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 (Selected URL): Add the URL to the page you want to redirect the visitors to when they click on the Dual Heading widget.
    • Existing Page (Selected Existing Page): Select an existing page within your website to redirect visitors when the dual heading is clicked.
Screenshot Displays Settings for Link in Dual Heading Widget for Elementor
Link Option Enabled in Dual Heading Widget for Elementor
  • Alignment: Align Dual Heading text to the Left, Center, or Right.
  • Degrees: Set the degree angle of the dual heading between [180˚ and -180˚].
    • X Anchor Point (Appear only if you set Degrees): Set the X anchor point “Horizontal”.
    • Y Anchor Point (Appear only if you set Degrees): Set the Y anchor point “Vertical”.
Displaying The Available Rotating and Positioning Options. [Left] The Settings in Elementor, [Right] Dual Heading Results
Dual Heading Degrees; X Anchor Point and Y Anchor Point. Degrees are Set to 30˚ and 90˚ (Top to Bottom)
Screenshots Display Dual Heading  Rotating and Positioning Options. [Left] Settings in Elementor, [Right] Dual Heading Results
Dual Heading Degrees; X Anchor Point and Y Anchor Point. Degrees are Set to 120˚ and 180˚ (Top to Bottom)
Screenshot Displays The Elementor Editor with The Available Settings for Dual Heading Widget
Elementor Dual Heading Widget Content Settings
  • Background Text: Enable to add background text to the exiting text.
    • Text: Add the text as title background text.
    • Width: Select the width of the text Auto or Full Width.
    • Horizontal Offset: Adjust the text horizontal position in pixels, em or %.
    • Vertical Offset:Adjust the text vertical position in pixels, em or %.
    • Rotate (degrees): Change the rotation angle of your background text.
Elementor Dual Heading Widget Background Text Settings
Elementor Dual Heading Widget Background Text Settings

Style

  • First Heading
  • Second Heading
  • Background Text

First Heading

  • Typography:
    • 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
      • Normal
    • Style: Select font style by choosing from:
      • Normal
      • Italic
      • Oblique
    • Decoration: Select font decoration:
      • Underline
      • Overline
      • Line Through
      • None
    • Line-Height: Specify font line-height.
    • Letter-Spacing: Set font letter-spacing which increases or decreases the spacing between characters in the text.
  • Animated Background: Enable/disable Animated Background for the First Heading which allows you to add images behind text creating a movement effect for the text background. Furthermore, you can use Animated Gradients to help you make a very nice effect by transitioning colors on the background of the Heading Title. Check Elementor Dual Heading Animated Examples.
  • Background Style: Set background styling for Elementor:
    • Normal: Selecting “Normal” Background Style will make Background Styling behind the text.
    • Clipped: Selecting “Clipped” Style will make the Background Styling clipped to the shape of the text itself.
Screenshots Display Dual Heading Settings, Text "Premium Addons" Clipped Background Image and Solid Color
First Heading, Clipped Image Background. Second Heading, Text Color
  • Stroke: Enable/disable stroke styling for the first heading.
    • Stroke Text Color: (If Stroke option is enabled).
      • Stroke Text Color: Select stroke text color.
      • Stroke Fill Color: Add color to fill the stroke of the first heading.
      • Stroke Fill Width: Increase/decrease stroke thickness.
Screenshots Display [Left] Dual Heading Stroke Options [Right] Heading Styled in Pink Stroke and Blue Fill Color.
The Stroke Option is Enabled in The First Heading of Elementor Dual Heading Widget
  • Text Color: Set text color for the first heading.
  • Background Type: Choose from Solid Color, Image or Gradient Colors.
    • Classic Background: Color, or Image Background.
      • Position (If Image Background was selected)
      • Attachment (If Image Background was selected)
      • Repeat (If Image Background was selected)
      • Size (If Image Background was selected)
    • Gradient Background: Set background using gradient colors.
      • Location: Within Gradient Background you can set a location for the two different colors [ First and Second Color] separately.
      • Type: You can select Linear or Radial gradient type.
      • Angle: Adjust the angle for Gradient Background Colors.
Screenshots [Left] Displays First Heading Styling Settings. [Right] Text "Well Developed" With Animated Background Image
The First Heading’s Background Type is Image Background
Video: Dual Heading Elementor Widget. First Heading with Animated Background. The Background Style is Clipped and The Background Type is Image with Animated Background
Screenshots Displaying Premium Dual Heading Settings, and Example with "Premium Addons" Text in Bluish Color
Dual Heading Elementor Widget. First Heading Background Style: Clipped and The Background Type is Gradient
  • 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. (Appears only when “Border Type” option is selected).
  • Color: Choose a color for your border. (Appears only when “Border Type” option is selected).
  • Border Radius: Set Border Radius for using pixels (PX), percentage (%), or Em (em). Higher border-radius means a more circular border.
  • Shadow: Set shadow effect for the first heading text,
    • Color
    • Blur
    • Horizontal
    • Vertical
  • Margin: Creates a space around the first heading in Elementor Dual Heading Widget, 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 and/or borders.
Screenshot Shows The Styling Options for The First Heading in Elementor Dual Heading Widget.
Elementor Dual Heading Widget Style, First Heading

Second Heading

  • Typography
    • Font Family
    • Font Size
    • Font Weight
    • Font Transform
    • Font Style
    • Font Decoration
    • Font Line-Height
    • Letter Spacing
  • Animated Background
  • Background Style
  • Text Color
  • Background Type
    • Classic Background
      • Color
      • Image
    • Gradient Background
  • Border Type
    • None (Default)
    • Solid
    • Double
    • Dotted
    • Dashed
    • Groove
  • Width (Appears only when “Border Type” option is selected).
  • Color (Appears only when “Border Type” option is selected).
  • Border Radius
  • Shadow
    • Color
    • Blur
    • Horizontal
    • Vertical
  • Margin
  • Padding
Screenshot Displays The Available Styling Options for The Second Heading in Elementor Dual Heading Widget
Second Heading Styling Options in Elementor Dual Heading Widget

3. 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 it 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.
Background Text Style in Elementor's Dual Heading Widget
Background Text Style in Elementor’s Dual Heading Widget

Related Docs:

Download Now it's free!

Extend your Elementor Page Builder capabilities now with Premium Addons. 20+ Elementor Widgets Totally Free of charge.