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.

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].

• 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.

• 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”.

• 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.

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.

• 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.

• 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.

• 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.

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

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.