Heading Widget Tutorial

Intro

Premium Heading Widget adds a lot of amazing heading styles to your website using Elementor Page Builder. You can use it instead of your themes conventional heading styles with no coding required!

Click here to check Premium Heading Widget demo.

Requirements:

• You will need Premium Addons PRO plugin installed and activated on your website.
• Also, make sure that this addon 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

• Title
• Style
• Icon
• HTML Tag
• Alignment
• Link
• Background Text

Title

• Title: Add the text for the heading widget.
• Style: Select between the following styles:
  • Style 1: A blue border is visible to the left of the text.
  • Style 2: A blue border is visible below the text itself, and the text has a dark grey background color. This color can be adjusted in the Style tab.
  • Style 3: The heading is displayed as a block, with dark grey background in full width. This color can be adjusted in the Style tab.
  • Style 4: The heading is displayed as a block, with a blue, full-length bottom border.
  • Style 5: The heading is displayed as a block, with a blue, full-length bottom border. The border is thicker under the text.
  • Style 6: The heading is displayed as a block, with a blue, full-length bottom border. The border is thicker under the text, and a small arrow points to the center of the text.
  • Style 7: A blue border is centered above the text, and covers 50% of the text length.
  • Style 8: A shiny animation will go through the heading, you could set the shine color from style tab.
  • Style 9: A blur effect animation will go over the heading. Blur color can be customized from style tab.
• Icon: Enable or disable using the icon beside the title.
• Icon Type: You can select between different options of icons: Font Awesome library, Image, Lottie animation.
• For Lottie animation:
  • Loop option is activated by default. Switching “Off” this option will make the Lottie Animation file work only for just one time.
  • Reverse option will make the Lottie Animation file moves backward.
• Icon Position: Select the icon position Before, After or Top.
  • For Top you can select the Icon Alignment: Align the icon to the left, center or right.
• HTML Tag: Select which HTML tag the heading should use. Choose between H1 to H6, where H1 is the largest and H6 is the smallest.
• Alignment: Align the title to the left, center or right.
• Link: Enable/disable adding an existing page link or an external link to your title.

• 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

• Title
• Icon Style
• Background Text

1. Title

• Color: Select the text color of the title.
• Typography: Adjust the font settings.
• Border Type: Select between the following border types, as well as the color and the width of the border on each side of the section:
  • None
  • Solid
  • Double
  • Dotted
  • Dashed
  • Groove
• Border radius: Increasing the border-radius will add circular corners to the area with the background behind the text. You can adjust the border-radius in pixels, % or em.
• Shadow: Add a shadow behind the heading text. Adjust from the following options:
  • Color
  • Horizontal Position
  • Vertical Position
  • Blur
• Margin: Margin is the space between the title and the rest of the content in your post or page. Adjust the margins using pixels, em or %.
• Padding: Padding is the space between the title and the edge of the title container. Increasing the padding will increase the background size. Adjust the padding using pixels, em or %.
• Stroke: Add text stroke to heading text.
  • Stroke Color: Pick a color for stroke line.
  • Stroke Fill Width: Set stroke line width.

2. Icon Style

These options are only available if the Icon is enabled.

• Icon Color: Select a color for the icon.
• Icon Size: Adjust the Icon Size in pixels, em or %.
• Background Type: You can select a solid background color or a gradient, or select or upload an image via the WordPress media library. If an image is selected, the following options become available:

• Position:
  • Default
  • Top Left
  • Top Center
  • Top Right
  • Center Left
  • Center Center
  • Center Right
  • Bottom Left
  • Bottom Center
  • Bottom Right
  • Custom -Adjust the image’s X and Y positions using pixels, em % or VW.
• Attachment -Default, Scroll or fixed.
• Repeat:
  • Default
  • No-repeat
  • Repeat
  • Repeat-X
  • Repeat-Y
• Size:
  • Default
  • Auto
  • Cover
  • Contain
  • Custom -Adjust the image width using pixels, em % or VW.

• Border Type: Select between the following border types, as well as the color and the width of the border on each side of the section:
  • None
  • Solid
  • Double
  • Dotted
  • Dashed
  • Groove
• Border radius: Increasing the border-radius will add circular corners to the area with the background behind the text. You can adjust the border-radius in pixels, % or em.
• Advanced Border Radius: Apply custom radius values for Elementor Heading widget icon. Get the radius value from here.
• Border Radius: Insert border radius values.
• Margin: Margin is the space between the icon and the text, and between the icon and the rest of the content in your post or page. Adjust the margins using pixels, em or %.
• Padding: Padding is the space between the icon and the edge of the icon container. Increasing the padding will increase the background size. Adjust the padding using pixels, em or %.
• Icon Shadow: Add a shadow around the icon. Adjust the following options:
  • Color
  • Horizontal Position
  • Vertical Position
  • Blur

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 an background text should blend with the content of the title and background.
• z-Index: Set the value of z-index.